正如我们在前一章中所解释的那样，HTML元素使网页设计者能够在文档中标记其结构。HTML规范列出了浏览器应如何显示这些元素的指南。例如，您可以合理地确定强 元素的内容将以粗体显示。此外，您几乎可以相信大多数浏览器将使用大字体大小显示h1元素的内容...至少大于p元素并且大于h2元素。但除了信任和希望之外，您无法控制文本的显示方式。
CSS改变了这一点。CSS将设计师置于驾驶员的位置。我们将本书的其余部分用于解释您可以使用CSS做些什么。在本章中，我们首先介绍如何编写样式表的基础知识，以及CSS和HTML如何协同工作来描述文档的结构和外观。
规则和样式表
要开始使用CSS，您甚至不必编写样式表。第16章将告诉您如何指向Web上的现有样式表。
有两种方法可以创建CSS。您可以使用普通文本编辑器并“手动”编写样式表，也可以使用专用工具（例如支持CSS的网页设计应用程序）。专用工具允许您在不学习CSS语言语法的情况下创建样式表。但是，在许多情况下，设计师之后会想要手动调整样式表，因此我们建议您学会手动编写和编辑CSS。让我们开始吧
H1 { color: green }
您在上面看到的是一个包含一个规则的简单CSS规则。一个规则是关于一个或多个元素的一个文体方面的发言。甲 样式表是一组适用于HTML文档的一个或多个规则。上面的规则设置所有第一级标题的颜色（h1）。让我们快速看一下规则的可视结果：
分组选择器和规则
在设计CSS时，简洁是一个目标。我们认为，如果我们可以减少样式表的大小，我们可以让设计师“手动”编写和编辑样式表。此外，短样式表比较长样式表加载速度快。因此，CSS包括几种通过对选择器和声明进行分组来缩短样式表的机制。
例如，考虑以下三个规则：
H1 { font-weight: bold }
H2 { font-weight: bold }
H3 { font-weight: bold }
所有三个规则都具有完全相同的声明 - 它们将字体设置为粗体。（这是使用font-weight属性完成的，我们在See Fonts中讨论。）由于所有三个声明都是相同的，我们可以将选择器分组为逗号分隔列表，只列出一次声明，如下所示：
H1，H2，H3 {font-style：bold}
此规则将产生与前三个相同的结果。
选择器可能有多个声明。例如，我们可以编写一个包含以下两个规则的样式表：
H1 { color: green }
H1 { text-align: center }
在这种情况下，我们将所有h1设置为绿色并以画布为中心。（这是使用text-align 属性完成的，在第5 章中讨论过 。）
但是，通过将与同一选择器相关的声明分组为以分号分隔的列表，我们可以更快地实现相同的效果，如下所示：
H1 {
color: green;
text-align: center;
}
所有声明都必须包含在花括号中。分号分隔声明，可以 - 但不必 - 也出现在最后一个声明的末尾。另外，为了使您的代码更易于阅读，我们建议您将每个声明放在自己的行中，就像我们在这里所做的那样。（浏览器不关心，他们只会忽略所有额外的空格和换行符。）
现在您已掌握了如何创建CSS规则和样式表的基础知识。但是，你还没有完成。为了使样式表具有任何效果，您必须将样式表“粘合”到HTML文档中。
将样式表“粘合”到文档中
对于影响HTML文档的任何样式表，必须将其“粘合”到文档中。也就是说，必须组合样式表和HTML文档，以便它们可以一起工作以呈现文档。这可以通过以下四种方式之一完成：
使用样式 元素为文档应用基本的文档范围样式表。
使用style属性将样式表应用于单个元素。
使用link元素将外部样式表链接到文档。
使用CSS @import表示法导入样式表。
在下一节中，我们将讨论第一种方法：使用样式元素。我们将讨论使用第 4 章“CSS选择器”中的style属性，并使用第16 章“ 外部样式表”中的link元素和@import表示法 。
使用STYLE元素进行粘合
通过将样式表放在文档顶部的样式元素中，可以将样式表和HTML文档粘合在一起。所述样式元件在HTML引入专门以允许HTML文档内的被插入的样式表。这是使用样式元素粘贴到示例文档的样式表（以粗体显示）。结果如图2.3 所示 。
<HTML>
<TITLE>第二个样式页面</TITLE>
<STYLE>
H1, H2 { color: green }
</STYLE>
<BODY>
<H1>尚学堂</H1>
<P>课程
<UL>
<LI>java
<LI>大数据
<LI>前端
<LI>人工智能，等
</UL>
<H2>历史</H2>
<P>北京尚学堂科技有限公司是一家从事JAVA、IOS、android、hadoop大数据云计算技术开发、培训、咨询为一体的软件公司。公司由海外留学人员和国内IT精英人士创建，主要成员均拥有硕士以上学位，毕业于国内著名大学如：清华大学，北京航空航天大学等。
</BODY>
</HTML>
向样式表添加规则以将h1变为绿色，然后使用样式元素将样式表粘贴到文档的结果。
请注意，style 元素放在title 元素之后和body元素之前。文档的标题不会显示在画布上，因此不受CSS样式的影响。
样式元素的内容是样式表。但是，当画布上出现h1，p和ul等元素 的内容时，样式元素的内容不会显示在画布上。相反，它是影响的内容的风格元素-样式表-即在画布上出现。因此，您不会在屏幕上看到“{color：green}”; 你看到两个 h1元素是绿色的。没有添加任何影响任何其他元素的规则，因此这些元素以浏览器的默认颜色显示。
浏览器和CSS
有关可用浏览器的更新概述，请参阅W3C概述页面
要使CSS按照本书中的描述工作，您必须使用CSS增强的浏览器，即支持CSS的浏览器。CSS增强型浏览器会将样式元素识别为样式表的容器，并相应地显示文档。目前分发的大多数浏览器都支持CSS，例如Microsoft Internet Explorer 4（IE4），Netscape Navigator 4（NS4）和Opera 3.5（O3.5）。保守估计表明，超过一半的网络用户使用CSS增强型浏览器，数字正在稳步上升。您与之交流的人可能拥有CSS增强的浏览器。如果没有，给他们升级的理由！
关于不同浏览器如何支持CSS的信息的最佳来源是WebReview的图标
唉，并非所有的CSS实现都是完美的。当您开始尝试样式表时，您很快就会注意到每个浏览器都带有一组错误和限制。通常，较新的浏览器比旧的浏览器表现更好。IE4和O3.5是最好的，Netscape的下一个产品 - 代号为Gecko - 也承诺大大改进了对CSS的支持。
那些不使用CSS增强浏览器的人仍然可以阅读使用样式表的页面。CSS经过精心设计，即使浏览器对CSS一无所知，所有内容仍应保持可见。某些浏览器，如Netscape的Navigator版本2和3不支持样式表，但他们对样式元素有足够的了解， 可以完全忽略它。在支持样式表旁边，这是正确的行为。
然而，其他浏览器不知道的风格元素，如Netscape的Navigator 1和Microsoft Internet Explorer 2将忽略这些 样式 的标签，但显示的 内容中的风格 元素。因此，用户将最终得到打印在画布顶部的样式表。在撰写本文时，只有百分之几的Web用户会遇到此问题。为避免这种情况，您可以将样式表放在HTML注释中，我们将在第1 章中讨论 。由于评论不会显示在屏幕上，因此通过将样式表放在HTML注释中，可以防止最旧的浏览器显示style 元素的内容。CSS增强的浏览器知道这个技巧，并将style元素的内容视为样式表。
回想一下HTML注释的开头<!--和结尾-->。以下是上一个代码示例的摘录，该示例演示了如何在HTML注释中编写样式表。注释仅包含样式元素内容：
<HTML>
<TITLE>第二个样式页面</TITLE>
<STYLE> <！ -
H1 {颜色：绿色}
- >
</ STYLE>
<BODY>
..
</ BODY>
</ HTML>
CSS也有自己的一组注释，您可以在样式表中使用它们。CSS注释以“/ *”开头，以“* /”结尾。（那些熟悉C编程语言的人会认识到这些。）CSS注释中的CSS规则不会对文档的表示产生任何影响。
浏览器还需要告知您正在使用CSS样式表。CSS是目前唯一与HTML文档一起使用的样式表语言，我们不希望这种情况发生变化。对于XML，情况可能会有所不同。但就像有多种图像格式（GIF，JPEG和PNG一样），可能会有多种样式表语言。所以告诉浏览器他们正在处理CSS是一个好习惯。（事实上，HTML要求你。）这是使用style元素的type属性完成的。类型的值表示正在使用哪种类型的样式表。对于CSS，该值为“text / css”。以下是我们之前的示例文档的摘录，该文档向您展示了如何编写此文档（结合使用HTML注释）：
<HTML>
<TITLE>第二个样式页面</ TITLE>
<STYLE TYPE =“text / css”>
<！ -
H1 {颜色：绿色}
- >
</ STYLE>
<BODY>
..
</ BODY>
</ HTML>
当浏览器加载文档时，它会检查它是否理解样式表语言。如果是，它将尝试读取工作表，否则将忽略它。该类型属性的上式元件是一种方法，让浏览器知道正在使用哪个样式表语言。该类型属性必须被包括在内。
为了使示例更易于阅读，我们选择不在HTML注释中包装样式表，但我们在本书中使用了type属性。
树结构和继承
回忆第1 章 关于HTML的讨论，该HTML表示具有树状结构的文档以及HTML中的元素如何具有子项和父项。拥有树形结构文档的原因有很多。对于样式表，有一个很好的理由：继承。就像孩子从父母那里继承一样，HTML元素也是如此。HTML元素不是继承基因和金钱，而是继承风格属性。
让我们首先看一下示例文档：
<HTML>
<TITLE>我的第二个样式页面</ TITLE>
<BODY>
<H1>尚学堂</ H1>
北京尚学堂科技有限公司是一家从事JAVA、android、hadoop大数据云、人工智能计算技术开发、培训、咨询为一体的软件公司。
<STRONG>行业</ STRONG>总多
<UL>
<LI> JAVA
<LI>hadoop大数据云
<LI>圣人工智能
</ UL>
</ BODY>
</ HTML>
该文档的树结构是：
通过继承，在一个元素上设置的CSS属性值将从树向下传输到其后代。例如，我们的示例到目前为止，h1和h2元素的颜色设置为绿色 。现在，比如说，您希望在文档中的所有元素上设置相同的颜色。您可以通过列出选择器中的所有元素类型来执行此操作：
<STYLE TYPE =“text / css”>
H1，H2，P，LI {颜色：绿色}
</ STYLE>
但是，大多数HTML文档比我们的示例文档更复杂，您的样式表很快就会变长。有一种更好 - 更短的方式。我们不是在每个元素类型上设置样式，而是将它设置在它们的共同祖先身体元素上：
<STYLE TYPE =“text / css”>
身体{颜色：绿色}
</ STYLE>
继承的结果.
如上所述，继承是一种运输工具，它将风格属性分配给元素的后代。由于body元素是所有可见元素的共同祖先，因此当您要为整个文档设置样式规则时，body是一个方便的选择器。
重写继承
在前面的示例中，所有元素都通过继承赋予相同的颜色。然而，有时孩子看起来不像父母。毫不奇怪，CSS也解释了这一点。假设您希望h1 元素为蓝色，而其余元素应为绿色。这在CSS中很容易表达：
<STYLE TYPE="text/css">
BODY { color: green }
H1 { color: navy }
</STYLE>
由于h1是body的子元素（从而继承自body），因此上述样式表中的两个规则是冲突的。第一个设置body元素的颜色- 从而也设置h1通过继承的颜色- 而第二个设置颜色特定于h1元素。哪条规则会获胜？我们来看看：
第二条规则获胜的原因是它比第一条规则更具体。第一条规则非常通用 - 它会影响画布上的所有元素。第二条规则仅影响文档中的h1元素，因此更具体。
如果CSS是一种编程语言，那么指定规则的顺序将决定它们中的哪一个会获胜。CSS不是一种编程语言，在上面的例子中，顺序是无关紧要的。如果我们使用此样式表，结果完全相同：
<STYLE TYPE="text/css">
H1 { color: navy }
BODY { color: green }
</STYLE>
CSS旨在解决上述样式表规则之间的冲突。特异性是其中一个方面
不继承的属性
作为一般规则，CSS中的属性从父元素继承到子元素，如前面的示例中所述。但是，有些属性不会继承，并且总有一个很好的理由。我们将使用background属性（作为不继承的属性的示例。
假设您要为页面设置背景图像。这是对Web的常见影响。在CSS中，您可以编写：
<HTML>
<TITLE>Bach's home page</TITLE>
<STYLE TYPE="text/css">
BODY {
background: url(texture.gif) white;
color: black;
}
</STYLE>
<BODY>
<H1>北京尚学堂</H1>
<P>北京尚学堂科技有限公司是一家从事JAVA、android、hadoop大数据云、人工智能计算技术开发、培训、咨询为一体的软件公司。公司由海外留学人员和国内IT精英人士创建，主要成员均拥有硕士以上学位，毕业于国内著名大学如：清华大学，北京航空航天大学等。
</BODY>
</HTML>
的背景 属性有一个指向一个背景图像作为值的URL（“texture.gif”）。加载图像时，画布看起来像：
上面的例子中有一些值得注意的事情：
背景图像像壁纸一样覆盖表面 - 也涵盖了h1和p元素的背景。这不是由于继承，而是因为除非另有设定，否则所有背景都是透明的。因此，由于我们没有将h1或p元素的背景设置为其他内容，因此父元素body将会通过。
除了图像的URL之外，还指定了颜色（白色）作为背景。如果找不到图像，您将看到颜色。
body元素的颜色已设置为黑色。为了确保文本和背景之间的对比，在设置背景属性时始终设置颜色是一个好习惯。
那么，究竟为什么背景属性不会继承？在视觉上，透明度的效果类似于继承：看起来所有元素都具有相同的背景。有两个原因：首先，透明背景比其他背景更快显示（没有什么可显示！）。其次，由于背景图像相对于它们所属的元素对齐，否则您将不会总是得到平滑的背景表面。
CSS的常见任务
设置颜色和背景 - 如上所述 - 是CSS执行的最常见任务之一。其他常见任务包括在元素周围设置字体和空白区域。本节将向您介绍CSS中最常用的属性。
常见任务：字体
让我们从字体开始。如果您以前使用过桌面出版应用程序，那么您应该能够阅读这个小样式表：
H1 { font: 36pt serif }
上面的规则设置h1元素的字体。值的第一部分 - 36pt - 将字体大小设置为36 磅。“点”是一种旧的印刷测量单位，它已经存活到数字时代。
该字体 属性是同时设置其他几个属性的简写属性。通过使用它，您可以缩短样式表并在其替换的所有属性上设置值。如果您选择使用扩展版本，则必须设置所有这些以替换上面的示例：
H1 {
font-size: 36pt;
font-family: serif;
font-style: normal;
font-weight: normal;
font-variant: normal;
line-height: normal;
}
有时您只想设置其中一个。例如，您可能希望在某些元素中倾斜文本。这是一个例子：
UL {font-style：italic}
该字体风格的 属性不会改变字体大小或字体系列，它将只偏股现有的字体。当在ul元素上设置时，里面的li元素将变为倾斜，因为继承了font-style。
