4.1.1 文本属性
在 CSS 中,文本指的是标签中的文字内容,我们可以控制一些特定的文本属性,常用的包含:
- color:标签中的文本颜色,使用颜色名或 #212131 这样的编码
- line-height:每行文本的高度,用像素单位设置
- text-align:文本的对齐属性,包含 left、right、center(居中)
- text-decoration:文本的修饰内容,包含 none、underline(下划线)、line-through(删除线) 等设置
- word-spacing:字间距,用像素单位设置
这里就不每个属性都演示一次了,大家可以自己动手试试。我们主要关注 text-align 这个属性。
text-align 这个属性有向下继承的特性,即我们在父标签中定义了对齐方向,那么子标签也会遵守这个方向。
4.1.2 字体属性
在 CSS 中,字体属性和本文属性时分开的,这是很容易搞混的东西。字体属性用的是 font 属性,而在 font 下还包含若干常用的属性:
- font-family: 设置文字的字体
- font-size:文字的字号,用像素表示
- font-style:字体风格,包含 normal(默认)、italic(斜体)、oblique(倾斜)
- font-weight:字体的字重,可以用数字也可以字体自带字种
在字体设置的规则上,并不是我们想怎么设置都可以,而是考虑用户有什么字体。
因为浏览器对文字的渲染是通过用户本地的字库来完成的,这也是为什么我们设计 UI 和网页的时候不能随心所欲用字体的原因之一。
在中文界面中,通常我们不用去设置中文字体,但可以为英文或数字文本设置一些常见的英文字体,例如 “Arial”,“Futura” 等。
并且可以设置多个字体,通过逗号隔开,如果第一个字体用户没有,那么会自动替换成下一个字体。
4.1.3 列表属性
列表在实际应用中非常的普遍,CSS 有专门针对列表的属性设置,即 list-style 属性,它还包含下面一些属性类型:
- list-style-image:列表项符号替换成图片的设置;
- list-style-postion:列表项符号图片所处的位置;
- list-style-type:列表项符号的类型,包含none、disc(实心圆)、circle(空心圆)、suqare(方形)、decimal(数字)等;
list-style 这个属性只能作用在 ul、ol、li 标签,对其它标签无效。对于列表项的图像设置我们先撇开不谈,我们设置最多的数值就是采用 none,否则浏览器会自带列表项符号(很丑)。