HTML5与CSS3基础教程第8版英文版 html5与css3基础教程(第8版)

转载

mob64ca140a59b0 2024-03-06 00:33:49

文章标签 javascript ViewUI 样式表选择器 CSS 文章分类 HTML5 移动开发

第7章 CSS构造模块

7.1　构造样式规则

样式表中包含了定义网页外观的规则。样式表中的每条规则都有两个主要部分：选择器（selector）和声明块（declaration block）。

选择器决定哪些元素受到影响；声明块由一个或多个属性 - 值对（每个属性 -值对构成一条声明，declaration）组成，它们指定应该做什么。

声明块内的每条声明都是一个由冒号隔开、以分号结尾的属性- 值对。

声明的顺序并不重要，除非对相同的属性定义了两次。

在样式规则中可以添加额外的空格、制表符或回车，从而提高样式表的可读性。

7.2　为样式规则添加注释

在 CSS 中添加注释是个好主意，这样就可以标注样式表的主要区域，或者只是针对某条规则或声明进行解释。

通常，将相关的规则放在一起，形成分组，并在每组前面放置一段描述性的注释。

7.3　理解继承

当你为某个元素应用 CSS 属性时，这些属性不仅会影响该元素，还会影响其下的分支元素。也就是说，这些下层的元素继承了其祖先元素的属性。

此外，对大多数属性来说，还可以使用inherit 值强制进行继承。

以下是会被继承的 CSS 属性，我们按照类型对其进行了分组：

◎ 文本

color（颜色，a 元素除外）

direction（方向）

font（字体）

font-family（字体系列）

font-size（字体大小）

font-style（用于设置斜体）

font-variant（用于设置小型大写字母）

font-weight（用于设置粗体）

letter-spacing（字母间距）

line-height（行高）

text-align（用于设置对齐方式）

text-indent（用于设置首行缩进）

text-transform（用于修改大小写）

visibility（可见性）

white-space（用于指定如何处理空格）

word-spacing（字间距）

◎ 列表

list-style（列表样式）

list-style-image（用于为列表指定定制的标记）

list-style-position（用于确定列表标记的位置）

list-style-type（用于设置列表的标记）

◎ 表格

border-collapse（用于控制表格相邻单元格的边框是否合并为单一边框）

border-spacing（用于指定表格边框之间的空隙大小）

caption-side（用于设置表格标题的位置）

empty-cells（用于设置是否显示表格中的空单元格）

◎ 页面设置（对于印刷物）

orphans（用于设置当元素内部发生分页时在页面底部需要保留的最少行数）

page-break-inside（用于设置元素内部的分页方式）

widows（用于设置当元素内部发生分页时在页面顶部需要保留的最少行数）

◎ 其他

cursor（鼠标指针）

quotes（用于指定引号样式）

7.4　层叠：当规则发生冲突时

有时候多条规则会定义元素的同一个属性。

首先，你编写的样式如果与浏览器的默认样式冲突，均以你编写的样式为准。

在此基础上，CSS用层叠的原则来考虑特殊性（specificity）、顺序（order）和重要性（importance），从而判断相互冲突的规则中哪个规则应该起作用。

1. 特殊性

特殊性规则指定选择器的具体程度。选择器越特殊，规则就越强。遇到冲突时，优先应用特殊性强的规则。

我们认为 id 选择器是最特殊的（因为它们在一个文件中必须是唯一的）。另一方面，除了浏览器默认样式，我们认为继承的样式是最一般的，可以被任何其他规则覆盖。建议在样式表中多使用类选择器，避免使用 ID 选择器。

2. 顺序

有时候，特殊性还不足以判断在相互冲突的规则中应该优先应用哪一个。在这种情况下，规则的顺序就可以起到决定作用：晚出现的优先级高。

3. 重要性

如果这还不够，可以声明一条特殊的规则覆盖整个系统中的规则，这条规则的重要程度要比其他所有规则高。也可以在某条声明的末尾加上 !important，（除非是在特殊情况下，否则不推荐使用这种方法）。

4. 小结

你编写的样式会覆盖浏览器的默认样式。当两个或两个以上的样式发生冲突时，会应用特殊性高的样式声明，不管它位于样式表中的哪个位置。如果两个或两个以上的规则拥有相同的特殊性，则使用后出现的规则，除非其中某条规则标记了 !important。

7.5　属性的值

1. inherit

对于任何属性，如果希望显式地指出该属性的值与对应元素的父元素对该属性设定的值相同，就可以使用inherit 值。

在 IE8 之前的 Internet Explorer 版本中，大部分属性都不支持 inherit 值。

2. 预定义的值

很多 CSS 属性只接受预定义的值。要准确地输入这些值，并且不要加上引号。也有一些例外，如超过一个单词的font-family名称，以及要生成的内容，是需要加引号的。

3. 长度和百分数

很多 CSS 属性的值是长度。所有长度都必须包含数字和单位，并且它们之间没有空格。0一般不带单位。

有的长度是相对于其他值的。一个 em 的长度大约与对应元素的字号相等。

当 em 用于设置元素的 font-size 属性本身时，它的值继承自对应元素的父元素的字号。em 的这种相对性对如今的网站建设工作来说是至关重要的，尤其是对那些需要适应不同屏幕尺寸的网站来说（这种做法被称为响应式 Web 设计）。

此外，rem 单位是相对于 html 元素的字体大小的。

像素（px）并不是相对于其他样式规则的。不过，在如今设备种类繁多的情况下，已经很难再准确度量一个像素的实际大小了。

还有一些无需说明的绝对单位,如磅（pt），应该在为打印准备的样式表中保留这个单位。

百分数（如 65%）的工作方式很像 em，它们都是相对于其他值的值。百分数通常是相对于父元素的。

在上述单位中，最常使用的是 em、百分数和像素，rem的使用情况越来越多。还有其他一些单位，不过鲜有使用。

4. 纯数字

只有极少数的 CSS 属性接受不带单位的数字。其中最常见的就是 line-height、 z-index和opacity。

5. URL

有的 CSS 属性允许开发人员指定另一个，文件（尤其是图像）的 URL，background-image 就是这样一个属性。在这种情况下，使用 url(file.ext)，其中file.ext 是目标资源的路径和文件名。

单词 url 和前括号之间不应该有空格。

6. CSS颜色

我们可以使用预定义颜色关键字或以十六进制（通常称为 hex）、RGB、HSL、RGBA、HSLA 等格式表示的值中为 CSS 属性指定颜色。

HSL、RGBA 和HSLA 格式都是在CSS3 中引入的。

定义 CSS 颜色更常规的方法是使用十六进制格式（这是目前为止最为常见的方式）或RGB格式。

要指定 alpha 透明度的情况除外，这时应该用RGBA 和 HSLA 格式。

7. RGB

可以通过指定红、绿、蓝（这也是 RGB这一名称的由来）的量来构建自己的颜色。可以使用百分数、0 ～ 255 之间的数字来指定这三种颜色的值。

8. 十六进制数

如果一个十六进制颜色是由三对重复的数字组成的，如 #ff3344，可以缩写为 #f34。

9. 更多 CSS3 提供的指定颜色的方式：RGBA、HSLA 和 HSL

RGBA 在 RGB 的基础上加了一个代表alpha 透明度（alpha transparency）的A。alpha 透明度的一种常见使用场景是将其用在对元素设置 background-color 或 background的情况（均用于设置背景）。

也可以对其他基于颜色的属性使用 alpha 透明度，如color、border、border-color、box-shadow、text-shadow 等。所有现代浏览器都支持 alpha 透明度，但 IE9 之前的 Internet Explorer不支持。

可以在红、绿、蓝数值后面加上一个用以指定透明度的0到1之间的小数。

alpha 设置越接近 0，颜色就越透明。如果设为 0，就是完全透明的，就像没有设置任何颜色。类似地，1 表示完全不透明。

HSL代表色相（hue）、饱和度（saturation）和亮度（lightness），其中色相的取值范围为0 ～ 360，饱和度和亮度的取值均为百分数，范围为 0 ～ 100%， 0 和360 在顶部汇合，意思是 0 和 360 代表同一种颜色：红色。饱和度和亮度设置会直接应用到颜色上。

IE直到IE9才支持alpha透明度（RGBA或 HSLA）。

HSL 色相值沿顺时针改变。最右边的点为 90，最底部的点为 180，最左边的点为 270，0 和 360 在顶端重合

IE直到IE9才能理解RGBA、HSL和HSLA。可以为这些旧浏览器单独定义备选的纯色，也可以在同一条规则中提供备选的纯色。

如果确实想在旧版本的 IE 中使用alpha 透明度，也可以找到一些方法。一种方法是使用一个 1 像素 ×1 像素的半透明PNG 作为重复的背景。另一种方法是使用 IE 专有的 Gradient 滤镜。注意，过多地使用滤镜可能会减慢页面在 IE中的加载速度。

如何构想 HSL?

选择一个 0 到 360 之间的色相，并将饱和度设为100，亮度设为50，就会得到这种颜色最纯的形式。降低饱和度，颜色就会向灰色变化。增加亮度，颜色就会向白色变化；减少亮度，颜色就会向黑色变化。

第8章操作样式表

将 CSS应用到多个网页（包括整个网站）、单个页面或单独的 HTML 元素。我们会通过三种方法实现这些应用：外部样式表（首选方法）、嵌入样式表和内联样式（最不可取的方法）。

8.1　创建外部样式表

外部样式表非常适合给网站上的大多数页面或者所有页面设置一致的外观。可以在一个外部样式表中定义全部样式，然后让网站上的每个页面加载这个外部样式表，从而确保每个页面都有相同的设置。(推荐)

一定要将 CSS 文件保存为以 .css 为扩展名、用 UTF-8 编码的文件。

可以以任何名称为样式表文件命名。因此，如果网站只有一个样式表文件，通常会命名为style.css或styles.css。更大的网站则通常会拥有多个样式表文件。在那种情况下，base.css、global.css 和 main.css 是常见的样式表名称，它们通常包含应用于网站大多数页面的样式规则。网站制作者通常创建一些为某些区块所特有的附加 CSS 文件（它们都会被加载到相关页面），作为对基本样式的补充。

外部样式表要么是通过链接引用的，要么是导入的（通过@import），不过不推荐导入。@import 指令会影响页面的下载速度和呈现速度，在 Internet Explorer 中影响更为明显。

8.2　链接到外部样式表

link元素位于HTML文档的head部分。页面可以包含一个以上的 link 元素，但使用它的次数最好尽可能地少，让页面得以更快地加载。

外部样式表的另一个好处是，一旦浏览器在某个页面加载了它，在随后浏览引用它的页面时，通常无需再向 Web 服务器请求该文件。

实践中最好将样式表组织在子文件夹里，而不是与 HTML 页面混在一起。常见的样式表文件夹名称包括css、styles 等。

可以在页面中使用多个 link 元素，从而加载多个样式表文件。如果在不同的文件中有显示声明产生冲突，则后面文件中的规则的优先级更高。

HTML 早期版本要求在 link 元素定义中包含 type="text/css"，但 HTML5 不要求这样做。

8.3　创建嵌入样式表

在 HTML 页面的 head 部分创建一个style 元素，其中包含了我们的样式表。这些样式只在一个网页里存在，因此不会像外部样式表中的规则那样应用到其他的页面。

当且仅当style 元素出现在link 元素后面的时候，嵌入样式表中的样式才会覆盖外部样式表中的样式。

嵌入样式表是为页面添加CSS的次选方式。

8.4　应用内联样式

最后考虑这种方式，因为它将内容（HTML）和表现（CSS）混在了一起，严重地违背了最佳实践。内联样式只影响一个元素。

不过，如果你想快速地测试某种样式，以便随后将它从 HTML 中搬到更易于长期维护的外部样式表中（假定你对结果满意），内联样式就能派上用场了。

内联样式的优先级高于其他所有样式，除非其他地方与之冲突的样式标记了!important。

如果要在内联样式声明中指定字体，对于有多个单词的字体名称，要用单引号包围，以避免与style 元素的双引号发生冲突。

8.5　样式的层叠和顺序

有时候多个样式规则针对的是同一条属性。在规则的特殊性相同的情况下，样式的顺序就成为关键。

基本规则是：在其他条件相同的情况下，越晚出现的样式优先级越高。

以下几条解释了顺序如何决定样式规则的优先级：

嵌入样式表（位于style元素内）与任何链接的外部样式表之间的关系取决于它们在HTML中的相对位置。
内联样式（实际上直接应用于元素）在外部样式表和嵌入样式表之后。由于顺序最靠后，其优先级是最高的。
关于相互冲突的样式的顺序对优先级的影响，有一种例外情况，就是标记!important 的样式总是具有最高的优先级，不过，要尽量避免这种用法。

有一种使用!important 的合理情形。有时网页会包含一些你无法修改的 HTML，例如来自第三方服务的新闻源。如果这些HTML 中有一些内联样式与你的设计不符，你就可以在自己的样式表中使用 !important覆盖这些样式。

顺序规则影响最大的情形是：如果网页包括一个以上的 link 元素，不同的外部样式表中的规则如有冲突，后出现的样式表中的规则优先。

8.6　使用与媒体相关的样式表

可以指定一个只用于特定输出的样式表，如只用于打印，或只用于在浏览器中查看屏幕。

指定与媒体相关的样式表的步骤：

在 link 或 style 元素的开始标签中添加 media="output"，其中output 可以是print、 screen或all。多个值之间用逗号分隔。

也可以在样式表中使用@media 规则，这种方法不需要在 link 元素中指定媒体类型。

有9种可能的输出类型：all、aural、braille、handheld、print、projection、screen、tty和 tv。浏览器对它们的支持程度各不相同（大多只有少量的支持）。

联合使用 CSS3 引入的媒体查询和这里介绍的媒体输出类型可以形成强大的威力。通过这些技术，可以根据输出设备的属性确定需要应用到页面的样式。

第9章定义选择器

CSS 样式规则有两个主要部分。选择器决定将格式化应用到哪些元素，而声明则定义要应用的格式化。

选择器可以定义五个不同的标准来选择要进行格式化的元素。

元素的类型或名称。

元素所在的上下文。

元素的类或 ID

元素的伪类或伪元素

元素是否有某些属性和值

9.2　按名称选择元素

通配符 *（星号）匹配代码中的任何元素名称。因为匹配范围太广，会让浏览器加载页面变慢，因此应该谨慎使用通配符。实际适合使用通配符的情况比较少。

可以在一个选择器中使用一组元素名称，名称之间用逗号分隔。

9.3　按类或 ID 选择元素

要在 class 选择器和 id 选择器之间作出选择的时候，建议尽可能地使用class选择器。

需要说明的是，id 选择器在 HTML中仍具有重要的作用。通过它们可以在

页面中定义锚，在编写JavaScript 为特定的页面元素应用特殊行为时它们尤其具有重要的价值。

9.4　按上下文选择元素

在 CSS 中，可以根据元素的祖先、父元素或同胞元素来定位它们。

1. 按祖先元素选择要格式化的元素

(1) 输入ancestor，这里的ancestor 是希望格式化的元素的祖先元素的选择器。

(2) 输入一个空格（必不可少）。

(3) 如果需要，对后续的每个祖先元素重复第 (1) 步和第(2) 步。

(4) 输入descendant，这里的descendant是希望格式化的元素的选择器。

我们通常将基于元素祖先的选择器称为后代选择器，不过 CSS3 将其重新命名为后代结合符。

2. 按父元素选择要格式化的元素

CSS 也有子结合符，从而可以为父元素的直接后代（即子元素）定义样式规则。在 CSS3 之前，它们称为子选择器。

(1) 输入parent，这里的parent 是直接包含待格式化元素的元素的选择器。

(2) 输入>（大于号）。

(3) 如果需要，对后续每代父元素重复第(1) 步和第 (2) 步。

(4) 输入child，这里的child 是要格式化的元素的选择器。

3. 按相邻同胞元素选择要格式化的元素

同胞（sibling）元素是拥有同一父元素的任何类型的子元素。相邻同胞元素（adjacent sibling）是直接相互毗邻的元素，即它们之间没有其他的同胞元素。

CSS 相邻同胞结合符（adjacent sibling combinator）可以选择直接跟在指定的同胞元素后面的同胞元素

(1) 输入sibling，这里的sibling 是包含在同一父元素中的、直接出现在目标元素前面的元素的选择器。

(2) 输入+（加号）。

(3) 如有需要，对每个后续的同胞元素重复第(1)步和第 (2)步。

(4) 输入element，这里的element 是要格式化的元素的选择器。

我们也可能会用到普通同胞结合符，通过它可以选择那些并非直接出现在另一同胞元素后面的同胞元素。它与相邻同胞结合符的唯一区别是使用～（波浪号）代替 + 分隔同胞元素。

9.5　 选择第一个或最后一个子元素

有时需要选择仅作为某元素第一个或最后一个子元素的元素。这时，就要用到 :first-child 和 :last-child 伪类

IE9 之前的Internet Explorer 并不支持 :last-child。

尽管第 (1) 步中指定选择符这一做法是很常见的，但这并非必需。例如，仅仅使用:first-child { color: red; }，可以为任何作为另一个元素的第一个子元素的元素应用样式。

9.6　 选择元素的第一个字母或者第一行

我们可以分别使用 :first-letter 和 :first-line 伪元素只选择元素的第一个字母

只有某些特定的CSS属性可以应用于:first-letter 伪元素，包括 font、color、

background、text-decoration、vertical-align（只要 :first-letter 不是浮动的）、text-transform、line-height、margin、padding、border、float 和 clear。

第一个字母前面的标点符号（如引号）会被当做第一个字母的一部分，一同被格式化。现代浏览器都支持这一特性，但 IE8 之前的版本并不是这样做的，它将标点符号本身当做第一个字母。

在 CSS3 中，:first-line 的语法为::first-line，:first-letter 的语法为 ::first-letter。注意，它们用两个冒号代替了单个冒号。这样修改的目的是将伪元素（有四个，包括 ::first-line、::first-letter、::before和::after）与伪类（如:first-child、:link、:hover 等）区分开。

伪元素（pseudo-element）是 HTML 中并不存在的元素。例如，定义第一个字母或第一行文字时，并未在 HTML 中作相应的标记。它们是另一个元素（在本例中为 p 元素）的部分内容。

相反，伪类（pseudo-class）则应用于一组 HTML 元素，而你无需在 HTML 代码中用类标记它们。

未来，::first-line 和 ::first-letter 这样的双冒号语法是推荐的方式，现代浏览器也支持它们。不过，IE9 之前的 Internet Explorer 版本均不支持双冒号。

9.7　按状态选择链接元素

CSS 允许根据链接的当前状态对它们进行格式化。

链接状态：

link ：设置从未被激活或指向，当前也没有被激活或指向的链接的外观；
visited ：设置访问者已激活过的链接的外观；
focus：前提是链接是通过键盘选择并已准备好激活的（注意：如果链接处于活跃状态也会获得焦点）；
hover ：设置光标指向链接时链接的外观；
active ：设置激活过的链接的外观。

也可以对其他类型的元素使用:active和:hover伪类。例如，设置p:hover { color: red; } 以后，鼠标停留在任何段落上段落都会显示为红色。

由于链接可能同时处于多种状态（如同时处于激活和鼠标停留状态），且晚出现的规则会覆盖前面出现的规则，所以，一定要按照下面的顺序定义规则：link、visited、focus、hover、active（缩写为 LVFHA）

触屏设备（如智能手机和平板电脑）的浏览器没有桌面浏览器所具有的“鼠标悬停”（即 hover）状态。

9.8　按属性选择元素

CSS 提供了多种方式匹配属性和属性值，包括只检查属性名，检查全部或者部分属性值。

属性选择器参考表:

[attribute] 匹配指定属性，不论具体值是什么
[attribute="value"] 完全匹配指定属性值
[attribute~="value"] 属性值是以空格分隔的多个单词，其中有一个完全匹配指定值
[attribute|="value"] 属性值以value- 打头
[attribute^="value"] 属性值以value 开头，value 为完整的单词或单词的一部分（CSS3 中新增的特性）
[attribute$="value"] 属性值以value 结尾，value 为完整的单词或单词的一部分（CSS3 中新增的特性）
[attribute*="value"] 属性值为指定值的子字符串（CSS3中新增的特性）。

当前所有主流浏览器均支持按元素包含的属性（和属性值）选择元素。CSS3 中新增的属性选择器，IE7 和 IE8 有一些异常。

9.9　指定元素组

我们经常需要将相同的样式规则应用于多个元素。可以为每个元素重复地设置样式规则；也可以组合选择器，一次性地设置样式规则（效率更高、更易于维护）。

可以列出任意数量的单独的选择器（无论它们包含的是元素名称、类还是伪元素），只需用逗号分隔它们即可。

有时，为应用于多个选择器的共同样式创建一个样式规则，再为没有共同点的样式分别创建单独的样式规则是很有用的。要记住，在样式表中后指定的规则会覆盖先指定的规则。

第10章为文本添加样式

使用 CSS 可以修改文本的字体、大小、粗细、倾斜、行高、前景和背景颜色、间距和对齐方式，可以决定是否为文本添加下划线或删除线，可以将文本转化为全部使用大写字母、全部使用小写字母或使用小型大写字母。

10.2　选择字体系列

在样式表中需要的选择器之后，输入font-family: name，这里的name 是首选字体的名称

对于包含多个单词的字体名称，应该用引号（单引号或双引号）包围起来。

虽然 font-family 属性是继承的，但有几个元素不会继承父元素的字体设置，其中有表单的 select、textarea 和 input 元素。不过，可以强制它们继承父元素的字体设置，代码为 input, select, textarea { font-family: inherit; }。

使用通用的 font 属性可以一次性定义字体、大小和行高。

10.3　指定替代字体

尽管你可以指定自己想要的任何字体，但这些字体不一定在每个系统上都能显示出来。为此，可以在 font-family属性中列举一种以上的字体。用一个逗号和空格分隔每个字体。

字体列表称为字体栈（font stack）。通常，字体栈至少包含三个字体：希望使用的字体、一个或几个替代字体，以及一个表示类属的标准字体，表示“如果其他的字体都不可用，就用这个”

系统通常都具有下列表示类属的字体名称对应的字体：serif、sans-serif、cursive、fantasy 和 monospace。因此，标准的做法是在字体栈的末尾指定上述字体名称中的一种。到目前为止，serif 和 sans-serif是用得最多的。

10.4　创建斜体

浏览器通常让一些 HTML 元素（如cite、em 和 i）默认以斜体显示，因此，不必在 CSS 中对这些元素设置斜体。有时你需要让一些内容以斜体显示，但上述元素从语义上来说都不合适。使用 CSS 的 font-style 属性可以让任何元素中的文本以斜体显示。

italic（创建斜体文本）；
oblique（创建倾斜文本）；
normal（取消斜体）

想取消斜体的一个可能的原因是，要在从父元素中继承了斜体格式的段落中对某些文字进行强调。

font-style 属性是继承的。

10.5　应用粗体格式

添加粗体和取消粗体使用 font-weight 属性。

输入bold，让文本显示为具有平均加粗值的粗体。这一属性值适用于大多数情况。
或者输入100 ～900 之间的100 的倍数，其中400 代表正常粗细，700 代表粗体。如果使用的是具有多种粗细版本的字体，这种方法就很有用（有些Web字体就采用了这种方法）。
或者输入 bolder（更粗）或 lighter（更细）以设置相对当前粗细的值。
normal，取消粗体格式（有些 Web字体服务，如 Google Fonts，要求使用 font-weight: 400。）

font-weight 属性是继承的。

10.6　设置字体大小

为网页里的文本设置字体大小有两种方式：直接使用像素指定要使用的特定字号，或使用百分数、 em 或者 rem 指定相对于父元素文本的大小。

强烈建议你一开始就学习使用 em 这样的相对单位。使用相对单位可以有更大的灵活性，而且对定义页面中特定的设计部件（如空白、边距等）的尺寸很有帮助。在各种尺寸的设备（智能手机、平板电脑等）不断涌现的今天，使用相对单位有助于建立在各种设备都能显示良好的页面。

1. 理解em和百分数字体大小

设置相对于父元素的字体大小

使用这种方法时，最好在 body 元素上建立一个基准，即声明 body { font-size:100%; }。大多数时候，这项设置等价于将字体大小设为16px，即大多数系统的默认字体大小。照例，该属性值传递至其他的元素（记住，font-size 是继承性属性），除非其他元素通过浏览器默认设置了自己的 font-size，或者在样式表指定了自己的 font-size。

实际上，1em 总是等于默认的字号大小，这是em 的工作原理。

需要记住的是，该值应该是相对于这些元素的父元素的。

CSS3 引入了一些新的单位，如rem（root em 的简称）。它总是以根元素为参照系设置其他元素的字体大小，而不是父元素（要指定的字体大小／根元素字体大小＝值）。虽然现代浏览器对它的支持程度很高，但Internet Explorer直到IE9才开始支持它。

2. 指定特定字体大小

输入准确的字号，如13px。
或者使用关键字指定字体大小，即使用xx-small、x-small、small、medium、large、x-large 或 xx-large。

数字与单位之间不应有任何空格。

font-size 属性是继承的。

3. 根据父元素设置字体大小

输入相对值，如 1.5em或 150%。
或者使用相对关键字，即使用 larger 或smaller（这种用法没有百分数常见，而百分数又没有em 常见）。

4. 根据根元素设置字体大小

输入相对值，如0.875rem

设置了相对字体大小的元素的子元素会继承这个大小，而不是继承相对值。

10.7　设置行高

行高指的是段落的行距，即段落内每行之间的距离。使用大一些的行高有时候会使主体文本更容易阅读。对于超过一行的标题，使用较小的行高则会让它们看起来更美观。

设置行高line-height:

输入n，这里的n 是一个数字，它与元素的字体大小相乘，得出需要的行高。（这是最为常用的方法，即一个没有单位的数字。）
输入a，这里的a 是以 em、像素或磅（仅在打印样式表中使用磅）为单位的值。
输入p%，这里的p% 是字体大小的百分数。

如果使用数字设定行高（通常都这么做），那么所有的子元素都会继承这个因子。

因此，如果父元素的字体大小是 16 像素（或以 em 等表示的等价大小），行高是 1.5，则

该元素的行高就是 24（即 16×1.5）像素。如果子元素的字体大小是 10 像素，则该元素的行高就是15（即10×1.5）像素。

如果使用百分数或 em 值，那么只会继承产生的行高（即计算出来的值）。因此，如果父元素的字体大小是 16 像素，行高是150%，则该元素的行高就是24 像素。所有的子元素都将继承 24 像素的行高，不管字体大小是多少。

10.8　同时设置所有字体值

可以使用 font 简写属性同时设置字体样式、粗细、变体、大小、行高和字体系列

使用 font 简写属性不要求指定所有字体属性，但至少应该包含字体大小和字体系列

属性。

同时设置所有字体值font:

1) 输入 normal、italic 或oblique 以设置字型（可选）。

2) 输入normal、bold、bolder、lighter或100的倍数（最大到900）以设置粗细（可选）。

3) 输入normal 或 small-caps来取消或设置小型大写字母（可选）。

4) 输入需要的字体大小（可选）。

5) 如果需要，输入 /line-height，这里的line-height 是行距。

6) 输入一个空格，再按优先次序输入需要的字体系列，以逗号分隔。

必须始终显式地声明字体大小和字体系列属性：先是字体大小，再是字体系列。

行高是可选的，但它如果出现，就必须紧跟在字体大小和斜杠后面

第 (1) ～ (3)中的属性可以按任意顺序指定，也可以忽略。如果忽略它们，它们就被自动设为 normal。

font 属性是继承的。

10.9　设置颜色

设置颜色color:

输入colorname，这里的colorname 是预定义颜色中的一种。
输入#rrggbb，这里的#rrggbb 是颜色的十六进制呈现。这是最常用的指定颜色的方法。
输入 rgb(r, g, b)，其中r、g、b是 0 ～ 255 之间的整数，分别表示所需颜色里红、绿、蓝的量。
输入rgb(r%, g%, b%)，其中r、g、b 分别是所需颜色里红、绿、蓝的百分数。
输入hsl(h, s, l)，其中 h 是 0~360之间的数值，表示所需颜色的色相；s 和l均是百分数，分别表示所需颜色的饱和度和亮度。（一般来说，对于不透明颜色，使用十六进制数或RGB 值更好。）
输入rgba(r, g, b, a)，其中r、g、b 是 0 ～ 255 之间的整数，分别表示所需颜色里红、绿、蓝的量；a 是 0~1 之间的小数，表示所需颜色的 alpha透明度。
输入 hsla(h, s, l, a)，其中h 是 0 ～ 360 之间的数值，表示所需颜色的色相；s 和l 均是百分数，分别表示所需颜色的饱和度和亮度；a 是 0 ～ 1 之间的小数，表示所需颜色的 alpha透明度。

如果输入的r、g 或b 的值大于 255，就会使用 255。类似地，高于 100% 的百分数将被替换为100%。

Internet Explorer 在 IE9 之前的版本不支持 HSL、RGBA 和 HSLA。

除了 link 元素，其他元素都会继承body 元素中的 color 属性。开发人员必须显式设置 link 元素的 color 属性。

10.10　设置背景

几乎可以对所有元素应用背景样式，甚至是表单和图像。

设置背景有很多属性可以利用，包括 background-color、background-image、 background-repeat、background-attachment 及background-position等。还可以使用background简记法，该属性将上述属性合并了，可以节省大量的输入。

1. 修改文本的背景颜色background-color：

输入 transparent（表示允许透过父元素的背景颜色）或 color，这里的 color 是颜色名称、十六进制数值，或 RGB、HSL、RGBA、 HSLA颜色值

2. 使用背景图像作为背景background-image:

输入 url(image.png)，这里的image.png 是图像相对于样式表所在位置的路径和文件名。
输入none，表示不使用图像（只有在覆盖应用背景图像的元素的样式时才会使用这个声明）。

3. 重复背景图像

输入 background-repeat: direction，这里的direction 可以取四个值：

repeat同时横向和纵向重复图像；

repeat-x只横向重复图像；

repeat-y只纵向重复图像；

no-repeat不重复图像。

忽略background- repeat 相当于将其设为默认值 repeat。

4. 控制背景图像是否随页面滚动background-attachment:

fixed：背景图像会附着在浏览器窗口上（也就是说即使访问者滚动页面，图像仍会继续显示）；
scroll：访问者滚动页面时背景图像会移动；
local：只有访问者滚动背景图像所在的元素（而不是整个页面）时，背景图像才移动。

忽略此项，浏览器通常会使用默认值scroll。

5. 指定元素背景图像的位置

输入 background-position：x y，其中x和y 可以表示为:

距离左上角的绝对距离或百分数。
也可以用left （左对齐）、center （居中）或 right（右对齐）表示x，用 top（顶端对齐）、 center （居中）或bottom （底端对齐）表示y。

如果两个值都使用关键字表示，那么两者的顺序无关紧要，如top right 跟right top 一样。

6. 在一条声明中设置所有背景属性background:

可以指定任何可接受的 background 属性值（从“修改文本的背景颜色”到“指定元

素背景图像的位置”介绍的内容都适用）。这些值的排列顺序没有要求。

background-color的默认值是transparent（透明）， background-image的默认值是none （无），background-repeat的默认值是repeat （重复），background-attachment的默认值是scroll （滚动），background-position 的默认值是 0 0（等价于 top left，即左上角）。只有在需要覆盖其他样式规则的时候才会显式地指定默认值。

通常，尽量使用background 简记法。使用该简记法的时候，不必指定所有的属性。不过需要注意的是，在简记法中，任何没有指定的属性都将设置为默认值，这有可能会覆盖先前定义的样式。

默认情况下，元素的背景会填充其内容和内边距所在的区域，并延伸到边框的边缘。可以通过background-clip 改变这种规则。

在 CSS3 中，background-attachment还可以设置成 local。支持该属性值的浏览器仅包括 IE9+、Chrome、Safari和 Opera（没有 Firefox）。

可以在 background-position 属性中使用负数。例如，background-position: -45px 80px 会将图像定位在元素左边外侧 45像素（因此不会看到图像在水平方向上的头45 个像素）、顶部内侧80像素。

CSS3 提供了更多的背景效果。background-clip 和 background-origin 两个属性分别控制元素背景显示的范围和开始的位置。

10.11　控制间距

可以增加或减少单词之间或字母之间的距离，前者称为字间距（tracking），后者称为字偶距（kerning）。

1. 指定字间距

输入word-spacing: length，这里的length 是一个带单位的数字。

2. 指定字偶距

输入 letter-spacing: length，这里的length 是一个带单位的数字。

可以对单词间距和字母间距使用负数。

单词间距和字母间距的值还可能受到所选的对齐方式（用 text-alignment 设置）和字体系列的影响。

要将字母间距和单词间距设为默认值（即不添加额外的间距），可以使用normal或0。

word-spacing 和 letter-spacing 属性是继承的。

10.12　添加缩进

通过设置 text-indent 属性，可以指定段落第一行前面应该空出多大的空间

输入text-indent: length，这里的length 是一个带单位的数字.

我们可以为其他元素应用 text-indent 属性，而不仅是段落元素。但默认情况下对 em、strong、cite 等内联元素没有效果。可以将它们设置为 display: block; 或display: inline-block;，就可以强制为其应用 text-indent 属性。

使用负数会产生悬挂缩进。使用悬挂缩进时，可能还需要增加文字框周围的内边距或外边距，从而让容器可容纳伸到外边的文本.

与通常情况一样，em 值要根据元素的字体大小进行计算，百分数要根据父元素的宽度进行计算。

text-indent 属性是继承的。

如果要使用百分数或 em 值，那么只有生成的大小（即 “计算出来的值”）会被继承。

要忽略继承的缩进，使用 0 即可。

10.13　对齐文本text-align:

left ：让文本左对齐；
right ：让文本右对齐；
center ：让文本居于屏幕的中间；
justify ：让文本两端对齐。

如果选择让文本两端对齐，要注意单词间距和字母间距有可能受到严重的影响。

text-align 对适用于盒模型的元素（如 h1 ～ h6、p 等，显示为单独的行）来说是起作用的，但对短语内容元素（如strong、em、a、cite 等，显示在行内）来说则不起作用，除非将它们的显示改为块级。为了让短语内容元素中的文字对齐，区别于周边的文本，必须先将它们默认的 display: inline; 样式改为 display: block; 或 display: inline-block;（前者会让它们像段落一样显示为单独的行），然后再设置相应的 text-align 值。对于设置了display: inline-block; 的元素，需要设置一定的宽度才能看到对齐效果。

text-align 属性是继承的。

10.14　修改文本的大小写

使用 text-transform 属性，可以为样式定义文本的大小写。