CSS字体属性与文本属性

CSS字体属性与文本属性

1. 字体属性

1.1 字体系列font-family

p {
    font-family: "Microsoft Yahei";/*微软雅黑*/
}
/*当然也可以写成中文，建议写成英文*/
p {
    font-family: "Microsoft Yahei","宋体";
}

注：

• 各种字体之间用英文逗号隔开
• 如果有空格隔开的多个单词组成的字体，加引号（单引号双引号都行）
• 尽量使用默认系统自带字体

/*最常见的几个字体*/
body {
    font-family: "Microsoft Yahei",tahoma,arial,"Hiragino Sans GB";
}

1.2 字体大小font-size

p {
    font-size: 18px;
}

注：

• chrome默认的文字大小为16px
• 不同浏览器可能默认显示的字号大小不一致，尽量给一个明确值大小，不用默认大小
• 可以给body指定整个页面文字的大小

1.3 字体粗细font-weight

p {
    font-weight: 400;/*不加粗*/
}

属性值	描述
normal	默认值（不加粗）
bold	粗体
100~900	normal=400，bold=700，注意数字后不用带单位

实际开发中更喜欢用数字表示粗细。

1.4 文字样式font-style

p {
    font-style: italic;/*斜体*/
}

属性值	作用
normal	默认值，标准的字体样式
italic	斜体

平时很少给文字加斜体，反而要给斜体标签（em、i）改为不倾斜字体。

1.5 字体复合属性

把上面的各个属性综合来写成一行代码。

body {
    font: font-style font-weight font-size/line-height font-family;
}

注：

• 上述顺序不能更换，且各个属性之间用空格隔开
• 必须保留font-size和font-family，剩余属性可以省略

2. 文本属性

2.1 文本颜色color

p {
    color: blue;
}

color的属性值有下列表示形式。

表示形式	属性值
预定义的颜色值	red、yellow、blue等
十六进制	#FFFFFF、#FF6600等
RGB代码	rgb(255,0,255)或rgb(100%,0%,100%)

十六进制形式：

十六进制颜色代码以#号开头，三组16进制数字表示red,green,blue三色，每组数字从0到FF。

RGB代码：

在RGB颜色模式中，颜色由三个值表示，表示组件的强度，红色、绿色和蓝色。

从最小值0到最大值255，当所有颜色都以最小值0显示时，颜色为黑色，当所有颜色都以最大值255显示时，颜色为白色。

开发中最常用的是十六进制形式。

2.2 对齐文本text-align

用于设置元素内文本内容的水平对齐方式。

div {
    text-align: center;
}

属性值	作用
left	左对齐（默认）
right	右对齐
center	居中对齐

2.3 装饰文本text-decoration

用于规定添加到文本的修饰。

div {
    text-decoration: none;
}

属性值	作用
none	没有装饰线，默认值。（最常用）
underline	下划线，链接a自带下划线。（常用）
overline	上划线（几乎不用）
line-through	删除线（不常用）

通常用在取消链接a默认的下划线，如下。

a {
    text-decoration: none;
}

2.4 文本缩进text-indent

用于指定文本第一行的缩进，通常是将段落的首行缩进。

p {
    text-indent: 10px;/*也可以是负值，效果为第一行向前突出*/
}

通常的段落首行缩进两个字可以写成如下。

p {
    text-indent: 2em;
}

em就是当前元素font-size的一个文字的大小。如果当前元素没有设置大小，则会按照父元素的一个文字大小。

2.5 行间距line-height

用于设置行间的距离（行高）。

p {
    line-height: 26px;
}

所以行间距=上间距+文本高度+下间距。

要想实现文本在一个HTML元素中上下居中对齐，则让行间距=HTML元素的高度即可。