列表和字体样式

列表

1、无序列表: 使用ul和li来创建 前边用小圆点表示

  • 列表项1
  • 列表项2
  • 列表项3

2、有序列表:使用ol和li来创建 前边用1、2、3表示

  1. 列表项1
  2. 列表项2
  3. 列表项3

3、定义列表: 使用dl、dd、dt来创建一个定义列表

定义项1
定义项1
定义描述1
定义描述1
定义项2
定义项2
定义描述2
定义描述2
定义项3
定义项3
定义描述3
定义描述3

文本格式化

1、单位

  • px (像素)图片是由一个个小像素组成的,一个小像素就是1px,不同显示器的一个像素的大小是不同的。
  • %(百分比) 百分比是相 对于父元素来说的,如果父元素使用的大小是16px, 则100%就是16px,200%就是32px。
  • em(和百分比类似)是相对于font-size说的(1em = 1font-size)

2、颜色

  • 直接用颜色的关键字来代表一种颜色:red、yellow、green…
  • 十六进制颜色(用的最多)比如:#6600FF
  • RGB值:
    • RGB(100%,0%,0%)
    • RGB(0,255,0)
    • 第一个数表示红色的浓度,第二个数表示 绿色浓度,第三个数表示蓝色的浓度

3、文字大小

  • font-size用来指定文字的大小

4、字体

  • 通过font-family可以指定标签中文字使用 的字体
    • 格式: p{font-family:微软雅黑}
  • 通过font-family可以同时指定多个字体,如果第一个有就不匹配后边的
    • 格式:p{font-family:微软雅黑, 宋体 , 楷体}

5、字体分类
serif(衬衫字体)
sans-serif(非衬线字体)
monospace (等宽字体)
cursive (草书字体)
fantasy (虚幻字体)

6、斜体和粗体
font-style:italic 用来指定文本的斜体
font-weight:bold 用来指定文本的粗体

7、小型大写字母
font-variant:small-caps

8、字体属性简写
font:加粗 斜体 小型大写 大写/行高 字体

9、行间距
line-height用于设置行高,行高越大则行 间距越大。
行间距 = line-height – font-size

10、大写化
text-transform样式用于将元素中的字母全都变成大写。
大写:text-transform:uppercase
小写:text-tansform:lowercase
首字母大写:text-transform:capitalize
正常:text-transform:none

11、文本的修饰

text-decoration:line-through   在中间添加线条(删除线)
text-decoration:underline   在下边添加线条(下划线)
text-decoration:overline    在上边添加线条
text-decoration:none    正常没有线条,可以把有下划线的取消

12、字母间距和单词间距
letter-spacing用来设置字符之间的间距。
word-spacing用来设置单词之间的间距。
这两个属性都可以直接指定一个长度或百 分数作为值。正数代的是增加距离,而 负数代表减少距离。

13、对齐文本
text-align用于设置文本的对齐方式。
可选值:

  • left:左对齐
  • right:右对齐
  • justify:两边对齐
  • center:居中对齐

14、首行缩进
text-indent 用来设置首行缩进
该样式需要指定一个长度,并且只对第一行生效,可以用(2em)做单位

你可能感兴趣的:(前端)