关于CSS（第三章-文本样式）

字体样式

---

• color为字体指定颜色
• font-family为文字指定特殊的字体，浏览器只会使用浏览器可以访问到的字体
• font-style用于打开和关闭斜体文本
• font-weight为字体设置粗细程度
• font-size为文字指定大小
• text-align文字排列方式
• text-transform设置或者取消字体改变
• text-decoration设置或者取消文本修饰
• text-shadows设置或者取消文本阴影

---

字体样式 color

color 为字体指定颜色

字体颜色的取值：

• 关键字
• RGB

---

字体样式 font-family

为文字指定特殊的字体，浏览器只会使用浏览器可以访问到的字体。字体样式的取值

通用字体

• serif :有衬线的字体,笔画结尾有特殊的装饰线或衬线

• sans-serif :无衬线的字体，笔画结尾是平滑的字体

• monospace :等宽字体，用于代码，字体中每个字宽度相同

• cursive :草书，这种字体有的有连笔，有的还有特殊的斜体效果。

• fantasy :装饰字体 ，具有特殊艺术效果的字体

---

字体样式 font-style

用于打开和关闭斜体文本

取值

• normal:正常字体，关闭斜体
• italic:斜体
• oblique:模拟斜体

---

字体样式 font-weight

为字体设置粗细程度

取值

• normal，bold：正常，加粗字体
• lighter，bolder：设置当前元素字体比父元素更粗或者更细
• 100-900：数值类型的粗细程度（值越大字体越粗）

---

字体样式 font-transform

允许字体改变

取值

• none：防止任何改变
• uppercase：将文本转换为大写
• lowercase：将文本转换为小写
• capitalize：将所有单词第一个字母转换为大写
• full-width：转换为类似于一个等宽字体

---

字体样式 font-decoration

设置或者取消文本修饰

取值

• None：取消所有文本修饰
• underline：为文本添加上下划线
• overline：为文本添加上划线
• line-through：为文本添加删除线

---

字体样式 font-shadows

设置或者取消文本阴影

语法：text-shadow：h-shadow v-shadow blur color

取值

• none：取消所有阴影
• h-shadow：必需。水平阴影的位置，允许负值
• v-shadow：必需。垂直阴影的位置，允许负值
• blur：可选。模糊的距离
• color：可选。阴影的颜色，参阅css颜色值

---

列表样式

---

• list-style-type:设置列表项标志类型
• list-style-position:设置列表项标志出现的位置
• list-style-image:自定义设置列表项标志
• list-style:列表样式的速记写法
• ul,ol元素的margin-top，margin-bottom均为16px(1em)padding-left为40px(2.5em)
• li元素没有设置默认的空白（行间距）
• dl元素的margin-top，margin-bottom均为16px(1em),但是没有内边距
• dd元素的margin-left为40px(2.5em)
• p元素的margin-top，margin-bottom为16px(1em)

---

列表样式 list-style-type

设置列表项标志类型

取值

• none : Noitemmarkerisshown. disc :
• Afilledcircle(defaultvalue)
• circle : Ahollowcircle
• square: Afilledsquare

---

列表样式 list-style-position

设置列表项标志出现的位置

取值

• outside：列表项标志出现在主块框的外部
• inside：列表项出现在主块框的内部

---

列表样式 list-style-image

自定义设置列表项标志

取值

• url（）：指定图标位置

---

列表样式 list-style

列表样式的速记写法

取值

[<type>][<image>][<position>]

---

列表样式 line-height

设置列表的行高

取值

• 绝对单位
• 相对单位

---

文本样式

• text-align 内容相对于它的块级父元素的对齐方式
• text-left 左对齐
• text-center 居中对齐
• text-right 右对齐
• text-justify 两侧对齐
• text-decoration 文本修饰线
• text-underline 下划线
• text-overline 上划线
• text-line-through 贯穿线(删除线)
• text-indent 首行缩进

---

超链接的默认样式

• cursor:调整光标悬浮到链接上的时候光标的形状
• loutline:调整环绕链接的框
• text-decoration:自定义设置列表项标志
• text-align:文本对齐方式