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元素的高度便可。