CSS字体样式属性及文本外观属性

目录

一、字体样式属性

1、font-size设置字号

2、font-family设置字体

3、font-weight设置字体粗细

4、font-variant设置字体（字体变化）

5、font-style设置字体风格

6、font对字体样式进行综合设置

7、@font-face是CSS3的新增属性，用于定义服务器字体

二、文本外观属性

1、color定义文本颜色

2、letter-spacing定义字间距

3、word-spacing定义英文单词之间的间距

4、line-height设置行间距

5、text-transform用于控制英文字符的大小写

6、text-decoration设置文本的下划线，上划线，删除线等装饰效果

7、text-align设置文本内容水平对齐，相当于html中的align对齐属性。

8、text-indent设置首行文本的缩进。

9、white-space设置空白符的处理方式

10、text-shadow可以为页面中的文本添加阴影效果。

11、设置多个阴影叠加效果

12、background-color:背景颜色属性

---

一、字体样式属性

属性	作用
font-size	字号
font-family	字体
font-weight	字体粗细
font-variant	字体变化
font-style	字体风格
font	对字体样式进行综合设置
@font-face	服务器字体（CSS新增属性）

1、font-size设置字号

该属性的值可以使用相对长度单位，也可以使用绝对长度单位。

相对长度单位	说明
em	相对于当前对象内文本的字体尺寸
px	像素，最常用，推荐使用
绝对长度单位	说明
in	英寸
cm	厘米
mm	毫米
pt	点

2、font-family设置字体

网页中常用的字体有宋体、微软雅黑、黑体等

3、font-weight设置字体粗细

值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100~900（100的整数倍）	定义由细到粗的字符。其中400等同于normal，700等同于bold，值越大字体越粗。

4、font-variant设置字体（字体变化）

一般用于定义小型大写字母，仅对英文字符有效。

• normal：默认值，浏览器会显示标准的字体;
• small-caps：浏览器会显示小型大写的字体，即所有的小写字母均会转换为大写;

5、font-style设置字体风格

可用于设置斜体、倾斜或正常字体

• normal：默认值，浏览器会显示标准的字体样式;
• italic：浏览器会显示斜体的字体样式;
• oblique：浏览器会显示倾斜的字体样式;

6、font对字体样式进行综合设置

7、@font-face是CSS3的新增属性，用于定义服务器字体

通过@font-face属性，开发者可以在用户计算机未安装字体时，使用任何喜欢的字体。

二、文本外观属性

1、color定义文本颜色

取值方式有以下三种：

• 预定义的颜色值，如red，green，blue等。
• 十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。
• RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

注意 : 如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。

2、letter-spacing定义字间距

所谓字间距就是字符与字符之间的空白。

letter-spacing属性，其属性值可为不同单位的数值，允许使用负值，默认为normal。

3、word-spacing定义英文单词之间的间距

word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。

4、line-height设置行间距

所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高。

line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。

5、text-transform用于控制英文字符的大小写

其可用属性值如下：

• none：不转换（默认值）。
• capitalize：首字母大写。
• uppercase：全部字符转换为大写。
• lowercase：全部字符转换为小写。

6、text-decoration设置文本的下划线，上划线，删除线等装饰效果

其可用属性值如下：

• none：没有装饰（正常文本默认值）。
• underline：下画线。
• overline：上画线。
• line-through：删除线。

7、text-align设置文本内容水平对齐，相当于html中的align对齐属性。

其可用属性值如下：

• left：左对齐（默认值）
• right：右对齐。
• center：居中对齐。

注意：

1.text-align属性仅适用于块级元素，对行内元素无效。

2.如果需要对图像设置水平对齐，可以为图像添加一个父标签如

或

，然后对父标签应用text-align属性，即可实现图像的水平对齐。

8、text-indent设置首行文本的缩进。

其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

注意 : text-indent属性仅适用于块级元素，对行内元素无效。

9、white-space设置空白符的处理方式

其属性值如下：

• normal：常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行。
• pre：预格式化，按文档的书写格式保留空格、空行原样显示。
• nowrap：空格空行无效，强制文本不能换行，除非遇到换行标签
  。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。

10、text-shadow可以为页面中的文本添加阴影效果。

• h-shadow用于设置水平阴影的距离。
• v-shadow用于设置垂直阴影的距离。
• blur用于设置模糊半径。
• color用于设置阴影颜色。

注意 ：阴影的水平或垂直距离参数可以设为负值，但阴影的模糊半径参数只能设置为正值，并且数值越大阴影向外模糊的范围也就越大。

11、设置多个阴影叠加效果

设置多组阴影参数，中间用逗号隔开即可

12、background-color:背景颜色属性

• 颜色值，例：red、yellow
• #十六进制色值，例：#ccc
• rgb(r,g,b)，例：rgb(30,0,0)