第十章CSS的文本类属性

1.长度单位

CSS中的长度单位主要分为两种，一种相对类型，另一种是绝对类型。

1.1 相对类型

1.1.1 px(pixel)

像素会根据显示设备的分辨率的多少而代表不同的长度。

1.1.2 em

这是设置以目前字符的高度为单位。em一般是以font-size作为参考，如果没有font-size属性，就以浏览器默认的字符高度作为参考。

1.2绝对类型

绝对类型就是不管屏幕分辨率是多少，大小都是一样的。

2.颜色定义

RGB模式中，”红绿蓝”三种颜色的比重都有0~255档。当三种颜色都达到255时，呈现白色，即#FFFFFF。#FFFFFF是十六进制表示法，前两位是红色分量，中间是绿色，最后是蓝色，FF就是十进制中的255.

当三者都为0时呈现黑色，红绿为255，蓝为0时，呈黄色，以此类推。

3.准备页面

这个网页由一个标题和两个正文段落组成，这两个文本段落分别设置了ID，以便后面设置样式时使用。

4.设置文字的字体

HTML中通过标记的face属性，CSS中是font-family属性

同时声明两个字体的名称，意味着如果电脑中没有Arial字体，就会使用”Times
New Roman”字体。

5.设置字体的倾斜效果

英文中，字体的倾斜有一下两者：

1）一种称为italic，即意大利字体。

2）另一种称为oblique，即真正的倾斜，把字母向右倾斜一定角度产生的效果。

CSS中的font-style属性是用来控制字体倾斜的，可以设置为正常”、”意大利体”、”倾斜”。

6.设置文字加粗效果

HTML通常用标记和标记来设置粗体。而CSS中则是font-weight。

大多数搜索引擎都对标记很重视。所以如果我们希望在文字中添加标记进行强调，让搜索引擎更好地理解网页内容，又不希望字体被加粗。我们可以在CSS是设置font-weight为normal。

7.英文字母大小写转换

CSS中使用text-transform

8.控制文字大小

在CSS中通过font-size属性来控制文字大小。

设置首字母A为3倍字符大小，向左浮动。

9.文字的装饰效果

CSS中由text-decoration属性为文字加下划线、删除线和顶线。

10.设置段落首行缩进

CSS中的text-indent属性可以控制段落的首行缩进和缩进的距离。

除了首行缩进，我们也是设置为负值让其悬挂缩进

11.设置字词间距

在CSS中letter-spacing和word-spacing这两个属性分别控制字母间距和单词间距。

12.设置段落内部的文字行高

在CSS中line-height用于控制行的高度。

1）默认浏览器大约是段落文字的font-size的1.2倍。

2）这里设置的行高是图中相邻虚线之间的距离，而文字在每一行中会自动竖直居中显示。

13.设置段落之间的距离

如果要调整段落之间的距离，设置margin属性即可，margin称为”外边距”。

14.控制文本的水平位置

使用text-align属性可以方便地设置文本的水平位置。

在左对齐下，如果希望右端也能整齐，则可以设置为justify。

15.设置文字和背景的颜色

CSS中用color设置文字的颜色，background-color设置背景的颜色。

16.设置段落的垂直对齐方式

左侧方框的高度大于文字的高度，现在希望文字在框中竖直居中对齐，应该如何设置？

在CSS中有一个用于竖直方向对齐的属性——vertical-align。这个只能用于表格单元，一般块级元素，例如div等，都不起作用。

16.1 使用line-height属性进行设置

但是这种方法对于超过一行的文字是没有效果的。

16.2 更通用的解决方案

具体来说，应该实现以下目标：

1）div容器的高度固定；

2）内部需要居中对齐的内容高度不固定，例如是服务器动态产生的数据；

3）不使用表格。