零、简介
这是一本用 CSS3 设计 HTML5 样式的解决方案书。它包含了 350 多种设计模式，您可以立即投入使用。每个设计模式都是模块化和可定制的，您可以组合模式来创建无限数量的设计。
每种设计模式都经过了全面的测试，并被证明可以在所有主流的浏览器中运行，包括 Chrome、Firefox、Internet Explorer、Opera 和 Safari。这本书的所有内容都是有用的和实用的。你不会浪费时间去读那些没用的东西！有了这本书，你将不再需要使用黑客、技巧、无止境的测试，以及在多个浏览器中不断的调整来获得工作。
使用设计模式就像将它复制粘贴到代码中并调整一些值一样简单。您将立即看到可以修改哪些值以及它们如何影响结果，这样您就可以创建您想要的精确样式和布局，而不用担心它是否有效。
这不仅仅是一本烹饪书。它系统地介绍了 CSS 的几个可用特性，并将这些特性与 HTML 结合起来创建可重用的模式。每种模式都有一个直观的名称，便于查找、记忆和讨论。可访问性和最佳实践被精心设计到每个设计模式、示例和源代码中。
你可以直接通读这本书，把它作为参考，用它来寻找解决方法。每个例子都包括一个截图和所有相关的 HTML 和 CSS 代码，所以你可以很容易地看到每个设计模式是如何工作的。每种设计模式的解释都包含在旁边，所以当您阅读它是如何工作的时候，您可以很容易地研究这个例子。
设计模式是按主题组织的，所有可用的 CSS 规则都像其他书一样在上下文中深入讨论。所有的设计模式都是可访问的，并遵循最佳实践，这使得这本书从头到尾都是值得一读的，也是您在设计和编码时随身携带的优秀参考资料。
这本书释放了你在网页设计和开发中的生产力和创造力。设计模式就像乐高积木——你可以用无数种方式组合它们来创造任何设计。它们就像工具箱中的工具，这本书为你提供了数百种工具，你可以快速可靠地解决问题。这本书向你展示了如何通过结合可预测的模式，创造出可预测的设计，而不是一蹴而就的解决方案。
观众
这本书是为那些对 CSS 和 HTML 有一些熟悉的人写的。它是为那些以前读过一本关于 CSS 和 HTML 的入门书籍的新手准备的。它是为曾经尝试过 CSS，但因为它似乎从来没有正确工作而放弃的设计者和开发者准备的。它是为那些想把他们的 CSS 技能提升到一个更高水平的专业人士准备的。它是为所有那些想快速创建设计而不是到处乱砍的人准备的，直到他们找到在所有浏览器上都可以工作的东西。
我们假设你知道编码 CSS 和 HTML 的基础知识。如果你只在 Dreamweaver 或 FrontPage 这样的 WYSIWYG 设计器中工作，并且从不看 HTML 或 CSS 代码，你可能会发现这本书里的代码让人应接不暇。
如果你喜欢通过例子学习，喜欢看代码如何工作，并且对 CSS 和 HTML 有一些熟悉，你会喜欢这本书。
一些设计模式使用 JavaScript。要完全理解它们，您需要理解 JavaScript 的基础知识，但是使用这些模式并不需要了解 JavaScript。最重要的是，您不需要了解任何关于 JavaScript 的知识来理解和使用剩余的 340 多种设计模式，因为它们与 JavaScript 无关！
创新
这本书包含几个创新的概念，术语和方法。这些都不是新的或激进的:该技术已经内置于主流浏览器中，概念隐含在 CSS 规范中，术语也是常用的。它们的创新之处在于我们如何定义和使用它们来展示 CSS 和 HTML 能做些什么。换句话说，它们是创新的，因为它们简化了 CSS 和 HTML 的学习、理解和使用。这些想法改变了你对 CSS 和 HTML 的看法，这让一切都变得不同。此外，书中的许多设计模式都是创新的，因为它们记录了属性和元素的组合，以解决前所未有的难题。
六个盒子模型
书中的一个创新是 CSS 有六个而不是一个盒子模型。CSS 官方有一个盒子模型，它定义了一组公共的属性和行为。单个盒子模型是一个非常有用的概念，但是它过于简单了。多年来，我们艰难地认识到盒子模型属性根据盒子的类型而不同地工作。
这是为什么这么多人纠结于 CSS 的一个原因。盒子模型看起来很简单，但是当一个人使用盒子模型属性时，比如width，它只在某些时候起作用，或者可能与预期的不同。例如，width属性设置块框的内部宽度，但是在表格框上它设置边框的外部宽度，而在内嵌框上它什么也不做。
我们没有将不同的行为视为一个非常复杂的盒子模型的例外，而是定义了六个简单的盒子模型，为每种类型的盒子指定行为。第四章介绍了六种盒子模型，即内联、内联块、块、表、绝对和浮点。因为您总是知道您正在使用这六个盒子模型中的哪一个，所以您总是知道每个盒子模型属性将如何表现。
此外，每个盒子模型都定义了自己的流动或定位方式。例如，行内框水平排列并换行。接线盒垂直流动。表格按列和行排列其单元格。浮动水平流动，在其他浮动下面换行，并把内嵌的框和表推开。绝对和固定框不流动；相反，它们被从流中移除，并相对于其最近的定位祖先进行定位。
方框模型范围
这本书的另一个创新是有三种方法可以确定盒子的尺寸:可以定尺寸、收缩或拉伸(见第五章)。每种类型的框都需要不同的特性和特性值组合来调整大小、收缩或拉伸。在第五章到第九章中的各种设计模式展示了这是如何做到的。这三个术语不是正式的 CSS 术语，但是它们隐含在 CSS 规范的公式中，以及提到“尺寸”、“收缩到适合”和“拉伸”的地方 1
1 在 CSS 2.1 规范中，术语“size”和“sized”在第八章、第九章、第十章、第十一章、第十七章和第十八章中出现了 15 次。这些事件指的是一般意义上的盒子有大小。
当然，定型、收缩和拉伸并不是什么新想法。创新之处在于，这本书清楚地定义了这三个术语，并展示了它们是如何成为 CSS 的基础特性和 CSS 设计模式的关键生成器。
盒子模型放置
另一个创新是有三种方法可以放置一个盒子到它的容器或者它的兄弟:特别是，它可以缩进(或者突出)，从它的兄弟偏移，或者从它的容器对齐和偏移(见第八章)。CSS 规范谈了很多关于偏移定位元素的内容，也谈了一些关于对齐元素的内容(参见 CSS 2.1 规范的第九章)，但是它没有讨论元素如何能够缩进，尽管这种行为隐含在它的公式中。
缩进、偏移和对齐是不同的行为。例如，缩进的框被拉伸，其边距缩小其宽度，而对齐的框被调整大小或收缩，其边距不缩小其宽度。对齐和缩进的框与其容器对齐，而偏移框可以从其容器偏移或从其同级偏移。
需要不同的属性和属性值组合来缩进、偏移和对齐不同类型的框。第八章和第九章中的设计模式展示了这是如何实现的。
当然，缩进、偏移和对齐并不是什么新概念。创新之处在于，这本书清楚地定义了这三个术语，并展示了它们是 CSS 的一个基本特性，也是 CSS 设计模式的一个关键生成器。
列布局
另一项创新是发现、命名和记录浏览器内置的 12 项自动技术，用于在表格中布置列(见第十六章)。
所有主流浏览器都包含这些强大的分栏功能。它们兼容各种主流浏览器，非常可靠。即使不建议使用表格进行页面布局， 2 表格数据仍然需要进行布局，您可以利用这些列布局使表格数据看起来很棒。
流畅的布局
另一个创新是流畅的布局(见第十七章)。流体布局的概念并不新鲜，但是创建它们的过程通常是一个反复试验的过程。在第十七章中，我们展示了四种简单的设计模式，你可以用它们在所有主流浏览器中自信而可预测地创建复杂的流畅布局。
CSS 2.1 规范的第九章和第十章中，术语“收缩”和“收缩到合适”出现了九次。第 10.3.5 节至第 10.3.9 节以及第 17.5.2 节中暗示了不同的盒子可以收缩以适应其内容的想法。
术语“拉伸”和“被拉伸”在第九章和第十六章中出现了四次。将一个盒子拉伸到其容器的想法在下面的引用中被顺便提及(斜体是添加的)，“许多盒子的位置和大小是相对于称为包含块的矩形盒子的边缘计算的。”(参见第 9.1.2、9.3.1 和 10.1 节。)
2 使用表格进行布局会给视力不佳的用户带来可访问性问题。此外，流体布局技术(如第十七章所示)是完全可以使用的，比表格适应性更强。
这些设计模式，由外向内框、浮动部分、浮动分隔线和流体布局，使用浮动和百分比宽度使它们变得流畅，但它们没有使用这些技术时通常会遇到的问题，例如折叠容器、交错浮动和将浮动推到彼此下方的百分比。3
Fluid Layout 设计模式使用表格的多功能性创建列布局，但不使用表格。比表格更好的是，这些布局可以根据需要自动调整宽度，并从列重排到行，以适应狭窄的显示。
事件风格
另一个创新是第十七章中介绍的事件样式 JavaScript 框架。这是一个简单、强大、开源的框架，用于动态地、交互式地对文档进行样式化。它使用最新的最佳实践来确保 HTML 标记完全没有 JavaScript 代码，并且完全可访问，所有样式都是用 CSS 完成的。此外，该框架允许您使用与选择 CSS 元素相同的选择器来选择 JavaScript 中的元素。这极大地简化和统一了动态 HTML 文档的样式和脚本！
这本书包括了这个框架，展示了如何集成 JavaScript、CSS 和 HTML，这样你就可以交互式地使用样式。当然，如果你不想使用 JavaScript，你可以跳过第十七章的五个 JavaScript 设计模式和第二十章的两个 JavaScript 模式——剩下的 343+设计模式不使用 JavaScript。
结合 HTML5 和 CSS3 创建设计模式
书中最后也是最普遍的创新是将 HTML 元素的一般类型与 CSS 属性结合起来创建设计模式的想法。这本书在第二章定义了 HTML 元素的四种主要类型(结构块、终端块、多用途块和内联)，第四章将它们映射到六种盒子模型(内联、内联块、块、表、绝对和浮动)。
每个设计模式指定了它如何应用于 HTML 元素的类型。换句话说，设计模式不仅仅是一个只在你使用特定元素时才起作用的配方；这是一种适用于所有等价的 HTML 元素的类型的模式。
例如，第十八章中的浮动首字下沉设计模式指定了一个使用块和行内元素的模式，但是它没有指定必须使用哪些块和行内元素(参见清单 1)。例如，您可以为BLOCK元素使用一个段落，为INLINE元素使用一个跨度(参见清单 2)，或者您可以为BLOCK使用一个除法，为INLINE使用一个<strong>，等等。
在一些例外的情况下，设计模式可能会指定一个实际的元素，比如<span>。当特定元素是最佳解决方案、唯一解决方案或极其常见的解决方案时，就会出现这种情况。即使在这些情况下，您通常也可以用相同类型的另一个元素替换指定的元素。
当你浮动元素时，Internet Explorer 6 有许多可能发生的 ?? 错误。不幸的是，尽管 Fluid Layout 设计模式在大多数时候很好地避免了这些错误，但是没有办法创建一个总是绕过这些错误的解决方案。幸运的是，Internet Explorer 7 修复了这些错误。
***1。清单 1。*浮动首字下沉设计图案
HTML
<BLOCK class="hanging-indent"> <**INLINE** class="hanging-dropcap"> text **</INLINE>** **</BLOCK>**
CSS
.hanging-indent { padding-left:+VALUE; text-indent:-VALUE; margin-top:±VALUE; } .hanging-dropcap { position:relative; top:±**VALUE**; left:-**VALUE**; font-size:**+SIZE;** line-height:**+SIZE;**}
***2。清单 2。*浮动首字下沉示例
HTML
<p class="hanging-indent"> <**span** class="hanging-dropcap" >H**</span>**anging Dropcap. </**p**>
CSS
.hanging-indent { padding-left:50px; text-indent:-50px; margin-top:-25px; } .hanging-dropcap { position:relative; top:**0.55em;** left:**-3px**; font-size:**60px;** line-height:**60px;**}
约定
每种设计模式都使用以下约定:
大写标记应替换为实际值。(注意清单 1 中的大写标记是如何被清单 2 中的值替换的。)
当您应该用自己选择的元素替换元素时，它们是大写的。如果一个元素名称是小写的，除非你确保改变产生相同的盒子模型，否则不应该改变它。以下是典型的元素占位符:
ELEMENT代表任何类型的元素。
INLINE代表行内元素。
INLINE_TEXT表示包含文本的行内元素，如<span>、<em>或<code>。
BLOCK代表块状元素。
TERMINAL_BLOCK代表端子板元件。
INLINE_BLOCK表示内嵌块元素。
HEADING代表<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>。
PARENT表示可以成为其子元素的有效父元素的任何元素。
CHILD表示可以是其父元素的有效子元素的任何元素。
LIST代表任何列表元素，包括<ol>、<ul>和<dl>。
LIST_ITEM代表任何列表项，包括<li>、<dd>和<dt>。
你应该替换的选择器都是大写的。如果选择器包含小写文本，那么选择器的这一部分就不应该更改，除非您也修改了 HTML 模式，比如更改类名。以下是典型的占位符:
SELECTOR {}代表任何选择器。
INLINE_SELECTOR {}代表任何选择行内元素的选择器。
INLINE_BLOCK_SELECTOR {}表示选择内嵌块元素的任何选择器。
BLOCK_SELECTOR {}代表选择块元素的任何选择器。
TERMINAL_BLOCK_SELECTOR {}代表选择端子板元件的任何选择器。
SIZED_BLOCK_SELECTOR {}代表选择尺寸块元素的任何选择器。
TABLE_SELECTOR {}代表选择表格元素的任何选择器。
CELL_SELECTOR {}表示选择表格单元格元素的任何选择器。
PARENT_SELECTOR {}代表在设计模式中选择父元素的任何选择器。
SIBLING_SELECTOR {}代表任何选择模式中的子元素的选择器。
TYPE {}代表一个选择器，根据您选择的类型选择元素，如h1或span。
*.CLASS {}代表一个选择器，它根据您选择的类名来选择元素。
#ID {}代表一个选择器，它根据您选择的 ID 来选择元素。
应该替换的符号用大写符号表示。如果值包含小写文本，则不应更改该部分值。以下是典型的值令牌:
有些值是文字值，不能被替换，如0、-9999px、1px、1em、none、absolute、relative和auto。这些值总是小写。
+VALUE表示大于或等于零的正测量值，如0、10px或2em。
-VALUE表示小于或等于零的正测量值，如0、-10px或-2em。
±VALUE代表任何测量值。
VALUEem代表电磁测量。
VALUEpx代表像素测量。
VALUE%代表百分比测量。
VALUE_OR_PERCENT代表一个值，可以是度量值或百分比。
WIDTH STYLE COLOR代表多个属性值，如border所要求的属性值。我们为每个值使用一个大写的令牌。
url("FILE.EXT")代表一个背景图像，您可以用图像的 URL 替换FILE.EXT。
CONSTANT代表有效的常数值。例如，white-space允许三个常量值:normal、pre、nowrap。为了方便起见，我们经常用大写字母列出有效的常量值，在每个可能的值之间加下划线，比如NORMAL_PRE_NOWRAP。
ABSOLUTE_FIXED代表常数值列表，您可以从中选择一个值。下划线分隔常量值。position的完整值列表包括static、relative、absolute和fixed。如果一个设计模式只对absolute和fixed有效，则该模式指定position:ABSOLUTE_FIXED。如果对所有四个值都有效，则指定position:STATIC_RELATIVE_ABSOLUTE_FIXED或position:CONSTANT。
-(TAB_BOTTOM + EXTRA_BORDER + EXTRA_PADDING)是一个可以用计算值替换的公式示例。公式中的大写标记是出现在设计模式中其他地方的标记。例如，如果您将TAB_BOTTOM分配给10px，将EXTRA_BORDER分配给10px，将EXTRA_PADDING分配给10px，那么您将使用-30px替换该公式。
使用这本书
你可以用这本书来掌握 CSS。你可以直接通读这本书，将你的 CSS 技能提升到一个更高的水平，并发现隐藏在设计模式中的许多金块。每一章都是有组织的，因此它建立在本章前面和前面章节中介绍的设计模式的基础上。另一方面，由于各个章节和设计模式是独立的，所以您可以按任意顺序逐一阅读它们，以掌握特定的主题或技术。
你可以把这本书当作参考书。这本书解释了所有可用的 CSS 属性，并展示了如何在例子中使用它们。更重要的是，许多属性在与其他属性组合时表现不同。每个设计模式都识别并记录了创建特定结果所需的独特属性组合。这使得它不仅是一本关于 CSS 属性如何单独工作的参考书，也是一本关于它们如何组合工作的参考书*。*
*你可以用这本书来举例学习。由于书中所有的例子都遵循最佳实践，你可以通过学习来学习好的习惯和技巧。为了通过例子更容易地学习本书，您可以使用“另请参阅”部分来查找所有相关的设计模式。这使您可以很容易地看到如何在各种上下文中使用特定 CSS 属性或功能的许多示例。
你可以把这本书当作食谱来使用，帮助你创造设计或解决问题。设计模式是按主题组织的，因此您可以快速找到相关的解决方案。
我们在书中添加了额外的功能，以便在您需要时可以轻松找到解决方案。您可以使用目录、索引、缩略图、章节大纲、设计模式名称以及每个设计模式的“另请参阅”部分来快速查找属性、模式、答案和解决方案。由于每个例子中的截屏都在每页的相同位置，您甚至可以在查看截屏的同时翻阅书籍以找到解决方案。我们发现视觉扫描是一种非常简单、快速、有效的解决方案！
这本书是如何构成的
第一章到第三章探索 CSS 和 HTML 的基础:
第一章展示了设计模式如何让 CSS 变得简单。在这里，我们展示了如何将简单的设计模式组合成更加复杂和强大的模式。我们还回顾了 CSS 的语法和层叠顺序。此外，我们还提供了几个图表来简化 CSS 的使用:有用的 CSS 网站的链接列表，CSS 属性的总结；一份四页的清单，列出了所有可用的 CSS 属性、值和选择器，并按照它们的使用位置进行了组织；关于测量单位和字体大小的图表；在所有浏览器中标准化元素样式的两个示例样式表；媒体询问；过渡、动画和 2D 变换；以及 CSS 故障排除的 12 步指南。
第二章介绍了 HTML 的设计模式。在这一章中，我们展示了使用 HTML 的最佳实践，包括用 XHTML 编码。我们还探索了可以用 HTML 创建的结构类型，包括结构块、终端块、多用途块和内联。我们还展示了如何使用 id 和属性来方便 CSS 选择器的选择。
第三章介绍 CSS 选择器和继承的设计模式。在这里，我们展示了选择器如何成为 HTML 和 CSS 之间的桥梁。我们展示了类型、类、ID、位置、组、属性、伪元素、伪类和子类选择器的设计模式。我们也探索 CSS 继承。
第四章到第六章探索六种 CSS 盒子模型。它们显示了每个 HTML 元素是如何呈现为这六种类型的框中的一种(或者根本不呈现)。它们展示了相同的属性如何在每个盒子模型中产生不同的结果，以及每个盒子模型如何与其他盒子模型不同地流动。
第四章探讨了六种盒子模型:内联、内联块、块、表、绝对和浮点。
第五章探讨了标注盒子尺寸的三种方式:定尺寸、收缩或拉伸。
第六章探讨了每一个盒子模型属性:边距、边框(半径、阴影等)。)、填充、背景、溢出、可见性和分页。
第七章到第九章探讨盒子如何流动或放置。
第七章探讨了五种定位模型(静态、绝对、相对、固定和浮动)并将它们与六种盒子模型联系起来。
第八章探讨了盒子定位的三种方式——例如，盒子可以缩进或突出，从它的兄弟偏移，或者从它的容器对齐和偏移。
第九章结合了第七章和第八章中的模式。这些组合产生了 50 多种定位元素的设计模式——尤其侧重于绝对和固定定位。
第十章到第十二章详细探讨了内联框如何流动，以及如何设计文本和对象的样式、间距和对齐方式。
第十章探讨了样式文本的属性，还包含了三种隐藏文本的设计模式，同时保持对非视觉用户的可访问性。它还介绍了一些高级技术，比如用 canvas 和 vml 替换文本，以及 CSS3 字体嵌入。
第十一章展示了如何水平和垂直分隔内联内容。
第十二章展示了如何水平和垂直对齐内联内容。
第十三章和第十四章详细探讨了块和图像是如何流动的，以及如何设计它们的样式。
第十三章探索积木，从讨论积木的结构意义以及如何直观地展示这种意义开始。它涵盖了列表、内联块、折叠边距、插入块、块间距和边缘块。
第十四章探索图像，比如图像贴图、半透明图像、用图像替换文本、精灵、阴影图像、圆角。
第十五章和第十六章详细探讨了如何设计表格和单元格的样式和布局。
第十五章探究表格包括表格选择器、折叠边框、隐藏单元格、垂直对齐单元格中的内容，以及将内联和块元素显示为表格。
第十六章探讨了使用 12 种模式来布置表格列，这 12 种模式会自动收缩列、调整列的大小、按比例分配列，等等。
第十七章探讨了如何利用浮动的流动来创建流体布局。
第十七章展示了如何创建自动适应不同设备、字体、宽度和缩放系数的流畅布局。它还展示了如何使用 JavaScript 创建交互式布局。
第十八章到 20 章展示了如何结合设计模式来创建同一问题的多种解决方案。每种解决方案解决不同的需求，并且具有不同的优点和缺点。除了它们本身是有用的解决方案之外，它们还展示了如何组合模式来解决任何设计问题。
**第十八章探索首字下沉。**在这里，我们将介绍使用七种不同设计模式组合的七种首字下沉。
**第十九章探讨标注和引用。**本章展示了五种标注和三种报价。
**第二十章探究警报。**在这里，我们展示了三种类型的交互式提醒和八种类型的文本提醒(即注意力吸引器)。它还探讨了 HTML5 表单验证，并展示了如何对 HTML5 表单进行本机验证，并在错误输入时提醒用户。
下载代码
您可以通过搜索并进入 Pro HTML5 和 CSS3 设计模式的详细页面，在[www.apress.com](http://www.apress.com)下载所有代码。在这本书的详细页面上有一个压缩成 ZIP 文件的示例代码的链接。
使用代码
代码被安排在文件夹中，每章一个文件夹。为了便于导航章节文件夹，每个文件夹名称都包括章节编号和标题。每个章节文件夹中都有示例文件夹:一个文件夹对应一个章节中介绍的设计模式。
所以你可以很容易地找到例子，每个例子文件夹都有和它的设计模式一样的名字。这使得通过搜索文件夹名称来查找设计模式变得简单而快速。因为每个例子中的 HTML 命名并描述了它的设计模式，所以您可以通过在 HTML 文件中搜索单词来找到设计模式。您也可以在 CSS 文件中搜索使用特定 CSS 属性的例子，比如display。
为了便于在多个浏览器中查看示例，我们将名为index.html的文件放在链接到所有设计模式文件夹的根文件夹中。反过来，每个文件夹包含一个名为index.html的文件，该文件链接到该文件夹中的所有设计模式。这些导航页面可以让您快速找到并查看每一章中的每个设计模式。
每个示例文件夹包含所有让示例运行所需的文件。这使得在您自己的工作中使用示例变得轻而易举:只需复制一个文件夹并开始进行更改。您不必担心跟踪和包含其他文件夹中的文件。
每个示例文件夹中最重要的文件是example.html和page.css。example.html包含示例的 HTML 代码。page.css是示例的主样式表。
每个例子都使用一个名为site.css的 CSS 文件。它包含一些不重要的字体和标题规则，使书中的所有例子具有相同的基本外观。
在少数例外情况下，我们使用额外的 CSS 文件来克服 Internet Explorer 中的错误或非标准行为，这些规则会覆盖page.css中的规则。
这七个 JavaScript 示例使用了五个 JavaScript 文件。这些在第十七章的事件造型设计模式中解释。page.js是最重要的文件，因为它包含特定于示例的 JavaScript 代码。剩下的 JavaScript 文件都是开源库。
最后，每个示例文件夹包含该示例使用的所有图像文件。
联系作者
您可以通过以下地址联系我们:
- 迈克尔·鲍尔斯
[synodinos@gmail.com](http://synodinos@gmail.com)中的狄奥尼修斯
我们期待您的评论、建议和问题。*
一、设计模式：让 CSS 变得简单！
从表面上看，CSS 似乎很容易。它有 45 个常用属性，可以用来设计文档的样式。在表面之下，属性和属性值的不同组合会触发完全不同的结果。我称之为 CSS 多态性是因为同一个属性有许多含义。CSS 多态性的结果是可能性的组合爆炸。
学习 CSS 不仅仅是学习单个属性。它是关于学习可以使用属性的上下文，以及不同类型的属性值在每个上下文中如何不同地工作。以width属性为例，它有许多不同的含义，这取决于它与其他规则的组合方式以及赋予它的值。例如，width对内联没有任何影响。width:auto包覆面浮动到其内容的宽度。width:auto当left和right设置为auto时，绝对收缩。width:auto将块拉伸到其父元素的宽度。width:auto当left和right设置为0时，绝对拉伸到其包含块的宽度。width:100%将块和浮动拉伸到其父元素的宽度，只要它们没有边框、填充和边距。width:100%将表格拉伸到其父表格的宽度，即使它们有边框和填充。width:100%将绝对值拉伸到其最近的定位祖先的宽度，而不是其父代的宽度。width:100em根据元素的font-size的高度来调整元素的大小，这使得元素的宽度足以容纳一定数量的字符。width:100px将元素的大小调整为固定的像素数，而不管其文本的font-size。
更复杂的是，并非所有的规则都由浏览器实现。例如，122 个属性中超过 40 个和 600 个 CSS 规则中超过 250 个没有被一个或多个主要浏览器实现。CSS 结合了几个定义各种级别和配置文件的规范。CSS 的每一级都建立在最后一级的基础上，通常添加新的功能，通常表示为 CSS 1、CSS 2 和 CSS 3。配置文件通常是为特定设备或用户界面构建的一个或多个 CSS 级别的子集。浏览器对 CSS3 的支持对开发人员来说是一个重要的问题，尤其是因为它作为一个规范仍在快速发展。
试图通过记忆每个规则的异常数量来学习 CSS 是非常令人沮丧的。
为了让学习 CSS 变得容易，这本书记录了所有可用的属性和属性值的组合。它将属性放在上下文中，并描绘了 CSS 如何工作的完整画面。
想象一下，您不必阅读不起作用的规则，也不必测试每个规则来查看它是否在每个浏览器中以及与其他规则结合使用，这样可以节省多少时间。我已经帮你做了。我已经进行了成千上万次测试。我已经在每一个主流浏览器中测试了每一个 CSS 属性和属性的每一种组合，包括 Internet Explorer 6/7/8/9、Firefox 7、Chrome 12、Opera 9 和 Safari 5。
我将这些结果归结为简单的设计模式——创建令人惊叹的、高性能的、可访问的网站所需的所有 CSS 和 HTML 设计模式。本书的这一版(第二版)已经更新，包括了关于 HTML5 和 CSS3 的最新信息和提示。
当你学会了这些设计模式后，你会想如果没有它们你是如何开发网站的！
在这一章中，我将讨论设计模式的目的以及它们是如何工作的。我给出了一些如何结合设计模式来创建新模式的例子。我还讨论了如何利用样式表、CSS 语法和层叠顺序。
接下来，我将展示一系列图表，列出所有可用的 CSS 属性和度量单位。然后，我介绍了快速排除 CSS 故障的 12 种技术。最后，我将讨论如何标准化各种浏览器元素的样式——这样您就可以放心地覆盖这些默认样式。
设计模式——结构化食谱
设计模式已经在软件编程中获得了巨大的成功。它们提高了 web 设计和开发的生产率、创造力和效率，并且减少了代码膨胀和复杂性。在 CSS 和 HTML 的上下文中，设计模式是跨各种浏览器和屏幕阅读器工作的通用功能集，不会牺牲设计价值或可访问性，也不依赖黑客和过滤器。但到目前为止，它们还没有被系统地应用到 HTML 和 CSS 网页设计和开发中。
设计模式是所有创造性活动的基础。当我们说话、写作和创作时，我们根据模式来思考。设计模式类似于我们可以用自己的内容填充的文档模板。在文学上，它们就像原型人物和情节。在音乐中，它们就像主题和变奏。在编程中，它们类似于可重复使用的算法，可以系统地变化和相互组合以产生期望的结果。
一旦一个设计模式被揭示出来，它会极大地增加创造力和生产力。它可以单独使用来创建快速的结果，并且可以很容易地与其他模式结合来创建更复杂的结果。设计模式简化并放大了创造过程。他们让创作像用积木或乐高积木一样简单。您只需选择预先设计好的图案，改变它们，然后将它们组合起来，就能创造出您想要的效果。模式不会限制创造力——它们会释放创造力。
Erich Gamma、Richard Helm、Ralph Johnson 和 John Vlissides (Addison-Wesley，1995)的开创性著作Design Patterns:Elements of Reusable Object-Oriented Software解释了设计模式由四个元素组成:模式名、问题、解决方案和权衡。本书遵循这种方法。
因为这是一本实用的书，所以它直接关注 CSS 和 HTML 中设计的具体模式，这些模式实际上是在主流浏览器中实现的。这本书还通过将内置模式组合成更高级的模式来创建新的设计模式。
在一个非常真实的意义上，这是一本你可以用来创造你的设计的模式书。
使用设计模式
第一章至 7 介绍了造型布局的基本属性和元素。第八章和 9 结合这些属性来创建所有可能的块、定位和浮动布局。第十章到 12 章介绍了文本样式的基本属性，以及可用于创建内联布局的属性组合。第十三章到第十六章将前几章的设计模式与专业属性和元素结合起来，以设计块、列表、图像、表格和表格列。
从第一章到第十六章到第十六章总共介绍了 300 多种设计模式，这些模式是通过将 45 种常见的 CSS 属性与四种类型的元素(内联、内联块、块和表)和五种类型的定位(静态、相对、绝对、固定和浮动)相结合而创建的。
这就是设计模式的强大之处:很容易将基本模式组合起来形成更复杂的模式。这使得学习 CSS 变得容易，并且使得使用 CSS 非常高效。第十七章到 20 章展示了如何结合这些设计模式来创建流畅的布局、首字下沉、标注、引用和提醒。
为了说明设计模式的简单性和强大功能，接下来的五个例子展示了如何将一系列基本设计模式组合成更复杂的模式。您不需要理解每个模式的细节，只需要理解组合模式的过程。
本系列的第一个例子展示了background属性的作用。background是一种内置于 CSS 中的设计模式，在元素后面显示图像。例 1-1 展示了background 属性结合一个 division 元素。该分区的大小为 250×76 像素，因此它将显示整个背景图像。 1
例 1-1。背景图像
HTML
`
Background Image
`CSS
div { **background:url("heading2.jpg") no-repeat;** width:250px; height:76px; }
例 1-2 展示了绝对设计模式。绝对设计模式背后的思想是从流程中移除一个元素，并相对于另一个元素定位它。CSS 为此提供了position:absolute规则。当position:absolute与top和left属性组合在一起时，您可以将一个元素定位在其最近的祖先的左上方的偏移量处。我使用position:relative来定位分部，这样它将是距离跨度最近的祖先。然后，我将跨度绝对定位在距离该分区顶部和左侧 10 个像素的位置。 2
这个例子很简单，但是它结合了七种设计模式:第二章中的结构块元素设计模式；第三章中的类型选择器模式；第四章中的块盒模式；第五章中的宽度、高度和尺寸模式；和第六章中的背景设计模式。
这个例子很简单，但是它结合了七种设计模式:第二章中的内联元素和结构块元素设计模式；第三章中的类选择器模式；第四章中的绝对盒模式；以及第七章中的绝对、相对和最近定位的祖先模式。
例 1-2。绝对的
HTML
`
Absolute
CSS
`*.positioned { position:relative; }
*.absolute { position:absolute; top:10px; left:10px; }
/* Nonessential styles are not shown */`
例 1-3 结合前两个例子中的设计模式，创建文本替换设计模式。文本替换背后的想法是在某些文本的位置显示一个图像(这样您就可以对文本进行更多的风格控制，因为它是嵌入在图像中的)。此外，您希望文本出现在图像的后面，以便在图像下载失败时可以看到文本。
我结合了背景和绝对设计模式来创建文本替换模式。我在标题中放置了一个空跨度。我相对定位了标题，所以子元素可以相对于它绝对定位。我为 span 分配了一个背景图像，并将其绝对定位在 heading 元素中的文本前面。我将跨度和标题的大小调整为背景图片的大小。
最终结果是，span 的背景图像覆盖了标题中的文本，如果图像下载失败，标题中的样式文本就会显示出来。 3
3 文本替换示例使用了前两个示例中显示的 14 种设计模式。第三章还介绍了 ID 选择器设计模式。你可以在第十章中了解更多关于文本替换设计模式的知识。
例 1-3。文本替换
HTML
`
Text Replacement
Heading 2****
`CSS
`#h2 { position:relative; width:250px; height:76px; overflow:hidden; }
#h2 span { position:absolute; width:250px; height:76px; left:0; top:0;
background:url(“heading2.jpg”) no-repeat; }`
例 1-4 演示了左边界设计模式。这种模式背后的思想是将一个或多个元素从一个块中移到它的左边，这样你就可以有标题(或者注释、图片等等)。)在左边，内容在右边。 4
4 左边界设计模式结合了第三章中的位置选择器设计模式；第六章的保证金模式；第四章中的绝对盒模式；以及第七章中的绝对、相对和最近定位的祖先模式。
例 1-4。左边界
HTML
`
Left Marginal
CSS
***.left-marginal** { position:relative; margin-left:200px; } ***.marginal-heading** { position:absolute; left:-200px; top:0; margin:0; }
例 1-5 演示了边缘图形首字下沉设计模式。这种模式结合了前面四个例子中展示的所有设计模式。这种模式背后的想法是在块的左边界创建一个图形首字下沉，具有文本替换和左边界设计模式的所有优点。 5
为了满足这些要求，我使用了indent类来相对定位段落，使其成为首字下沉的最近祖先，并为段落添加 120 像素的左边距，为首字下沉留出空间。我使用了graphic-dropcap类来绝对定位首字下沉，将其移动到段落的左边距，并将其设置为首字下沉图像的精确大小。然后，我将 span 完全放置在图形首字下沉内，并将其移动到首字下沉文本上，这样它就用背景图像覆盖了文本。
就其本身来看，边缘图形首字下沉模式是 16+种设计模式的复杂组合。另一方面，当被看作是文本替换和左边缘设计模式的组合时，它是非常简单的。这就是设计模式的力量。
第十八章详细讨论了边缘图形首字下沉设计模式。
例 1-5。边缘图形首字下沉
HTML
`
Marginal Graphic Dropcap
**
M**arginal
Graphic Dropcap. The letter M has been covered by the dropcap image.
Screen readers read the text and visual users see the image.
If the browser cannot display the dropcap image,
the text becomes visible.
CSS
`*.indent { position:relative; margin-left:120px; }
*.graphic-dropcap { position:absolute;
width:120px; height:90px; left:-120px; top:0; }
*.graphic-dropcap span { position:absolute;
width:120px; height:90px; margin:0; left:0; top:0;
background:url(“m.jpg”) no-repeat; }`
使用样式表
您可以在三个位置放置样式:样式表、<style>和style。
一个样式表是一个独立的文件，你可以使用<link>元素或者 CSS 的@import语句将它附加到一个 HTML 文档中。<style>是一个 HTML 元素，你可以把它嵌入到 HTML 文档中。style是一个可以嵌入任何 HTML 元素的属性。
我建议将样式放在样式表中。这减少了 HTML 文档中不一致的内容，并将所有样式放在易于管理的文件中。
我建议使用单个单词的小写名称来命名样式表。这使得样式表名称简单易记，并且在所有操作系统中都能安全工作。我建议您使用一个描述样式表的范围和用途的名称，比如site.css、page.css、handheld.css、print.css等等。样式表的标准扩展名是.css。标准的互联网媒体类型是text/css。
我建议使用样式表的位置来控制它的范围。如果样式表是针对整个网站的，您可以将它放在网站的根目录中。如果一个样式表只适用于一个文档，你可以把它放在与该文档相同的目录中。另一种选择是将所有的样式表保存在一个目录中，这取决于您组织站点的方式。
要将样式表链接到 HTML 文档，可以在 HTML 文档的<head>部分包含一个<link>元素，并且可以将样式表的 URI 放在<link>元素的href属性中。清单 1-1 显示了我在本书的每个例子中使用的样式表链接。有关链接样式表的更多信息，请参见第二章中的标题元素和条件样式表设计模式。
***清单 1-1。*附加样式表
`<link rel=“stylesheet” href=“site.css” media=“all” type=“text/css” />
为了提高下载性能，您可能希望在<style>元素中包含特定于页面的样式，而不是在单独的特定于页面的样式表中。因为这些样式是特定于页面的，所以将这些样式放在页面的头部没有什么坏处。另一方面，我强烈建议不要使用 HTML 元素的style属性，因为这会创建非常难以维护的代码。
CSS 语法
CSS 语法很简单。一个样式表包含个样式；一个样式包含选择器和规则；并且一个规则包含一个属性和一个值。以下是一种风格的设计模式:
SELECTORS { RULES }
以下是规则的设计模式:
PROPERTY:VALUE;
比如p{margin:0;}就是一种风格。p是选择器，它选择 HTML 文档中所有的<p>元素。花括号({})操作符将规则margin:0;分配给选择器p。冒号(:)运算符将值0赋给属性margin。分号(;)操作符终止规则。
一个样式可以有一个或多个选择器和一个或多个规则。比如p.tip{margin:0; line-height:150%;}就是一种风格。花括号操作符将两个规则margin:0;和line-height:150%;组合成一个规则集，并将其分配给选择器p.tip，后者选择 HTML 文档中的所有<p class="tip">元素。
CSS 语法细节
CSS 语法的要点如下:
- Unicode UTF-8 应该被用来编码 CSS 文件——就像你应该编码 HTML 文件一样。
- CSS 代码要小写。在 XHTML 中引用元素名、类、属性和 id 时，选择器区分大小写。6CSS 属性和值都不区分大小写。为了简单和一致，我对所有 CSS 代码使用小写字符，包括元素、类和 id。
在 HTML 中，CSS 选择器是不区分大小写的。
- 元素名、类和 id限于字母、数字、下划线(
_)、连字符(-)和 161 及以上的 Unicode 字符。元素、类或 ID 的第一个字符不能是数字或连字符。类名和 ID 不能包含除下划线和连字符以外的标点符号。例如，my_name2-1是一个类或 id 的有效名称，但是下面是无效的 :1、1my_name、-my_name、my:name、my.name和my,name。 - 可以将多个类分配给一个元素，方法是用空格分隔每个类名，比如
class="class1 class2 class3"。 - 常量值不应放在引号中。比如
color:black;是正确的，而color:"black";不是。 - 反斜杠(
\) 可以用来在通常不会出现的上下文中嵌入字符；例如，\26B将&嵌入到一个字符串或标识符中。反斜杠后面可以跟 2 到 8 个十六进制代码，或者反斜杠后面可以跟一个字符。 - 一个字符串可以包含圆括号、逗号、空格、单引号(
')和双引号(")，只要用反斜杠转义即可，如下:"embedded left parentheses \( " "embedded right parentheses \) " "embedded comma \, " "embedded single quote \' " "embedded double quote \" " "embedded single quote ' in a double-quoted string" 'embedded double quote " in a single-quoted string' - 分号应该终止每个 CSS 规则和
@import语句。color:red; @import "mystylesheet.css"; - 规则集是通过用花括号将多个规则括起来创建的，比如
{ color:red; font-size:small; }。 - 右花括号(
}) 立即终止一组属性，除非它嵌入在一个字符串内，比如"}"。 - 一个 CSS 注释以/开头，以/结尾，比如
/* This is a CSS comment */。注释不能嵌套。因此，浏览器第一次在样式表中遇到*/时，它会终止注释。如果随后出现/*，它们不会被解释为注释的一部分，例如:/* This is an incorrect comment /* because it tries to nest /* several comments. */ STARTING HERE, THIS TEXT IS OUTSIDE OF ALL COMMENTS! */ */
在 CSS 中使用空格
CSS 中的空格只包括以下字符:空格(\20)、制表符(\09)、换行符(\0A)、回车符(\0D)和换页符(\0C))。浏览器不会将其他 Unicode 空白字符解释为空白，例如不间断空格(\A0)。
您可以选择在以下内容的前后放置空格:选择器、花括号、属性、冒号、值和分号。例如，以下所有语句都是正确的，并且产生完全相同的结果:
`body{font-size:20px;line-height:150%;}
body { font-size:20px; line-height:150%; }
body { font-size : 20px ; line-height : 150% ; }
body
{
font-size: 20px;
line-height: 150%;
}`
在本书中，我使用了一种紧凑的编码风格，在规则中没有空格，在规则和选择器之间有一个空格，如下所示:
body { font-size:20px; line-height:150%; }
空白从不出现在属性名或常量属性值中。每当 CSS 使用多个单词作为属性名或常量属性值时，它都使用连字符来分隔单词，例如font-family和sans-serif。在极少数情况下，CSS 使用 CamelCase 将多个单词组合成一个常量值，比如ThreeDLightShadow。
使用属性值
属性值有以下几种形式:常量文本、常量数字、长度、百分比、函数、逗号分隔的值列表和空格分隔的值序列。每个属性都接受一个或多个这种类型的值。
我已经在示例 1-6 中包含了所有常见类型的值。但首先，我在这里列出了它们并附有解释:
**color:black;**将常量值black分配给color属性。大多数属性都有唯一的常数值。例如，color属性可以分配给 170 多个常量，这些常量代表从papayawhip到ThreeDDarkShadow的颜色。**background-color:white;**将常量值white分配给background-color属性。请注意，以下三条规则与这条规则做的是同样的事情，但是使用了不同类型的属性值。十六进制也常用于样式中的颜色属性，如background-color:#000000;。**background-color:rgb(100%,100%,100%);**将 CSS 功能rgb()分配给background-color。rgb()在圆括号之间有三个逗号分隔的参数，它们指定了用于颜色的红色、绿色和蓝色的数量。在本例中，使用了百分比。每种颜色百分之百都是白色。**background-color:rgb(255,255,255);**将白色分配给background-color。在这种情况下，使用 0 到 255 之间的值来代替百分比。值 0 表示没有颜色。值 255 等于颜色的 100%。对红色、绿色和蓝色使用 255 会产生白色。**background-color:WindowInfoBackground;**将操作系统颜色WindowInfoBackground分配给background-color。注意 CamelCase 中的操作系统颜色常量。 7**font-style:italic;**将italic的常数值分配给font-style。属性还允许另外两个常量:normal和oblique。**font-size:20px;**为font-size分配 20 个像素的长度。您可以为大多数属性指定各种度量，包括px(像素)、em(字体高度或font-size)、ex(字母“x”的高度)、pt(点，即 1/72 英寸)、in(英寸)、cm(厘米)、mm(毫米)和pc(十二点活字，即 12 点，即 1/6 英寸)。**font-family:"Century Gothic", verdana, arial, sans-serif;**将逗号分隔的字体名称列表分配给font-family。如果第一个字体名称不可用，浏览器将使用第二个，依此类推。最后一个字体名称应该是通用字体名称之一:“衬线”、“无衬线”、“草书”、“幻想”、“等宽”，在每个浏览器中都有效。每当字体名称包含空格时，必须用双引号括起来，例如"Century Gothic"。**line-height:150%;**将font-size的 150%分配给line-height。**margin:1em;**将字体大小分配给margin(即font-size乘以 1)。**border:4px double black;**创建一个 4 像素的黑色双线边框。注意border是如何接受三个空格分隔的值来表示边框的宽度、样式和颜色的。值的顺序无关紧要。border是三个属性的快捷属性:border-width、border-style、border-color。还有其他几个快捷属性，包括background、font、list-style、margin和padding。**padding:0.25em;**将字体大小的四分之一分配给padding(即font-size乘以0.25)。**background-image:url("gradient.jpg");**使用url函数将gradient.jpg图像分配给background-image，该函数将文件的 URL 作为其唯一的参数。我总是把 URL 放在引号中，但是只有当 URL 包含空格时才需要。**background-repeat:repeat-x;**将常数repeat-x分配给background-repeat。其他background-repeat值包括repeat-y、repeat和no-repeat。**margin:0;**将零分配给margin。零是唯一没有测量单位的长度。所有其他长度必须立即进行测量，例如1px、-1.5em、2ex、14pt、0.5in、-3cm、30mm或5pc。**font-weight:900;**将常数900分配给font-weight。这个数字实际上是一个常数。font-weight可以使用以下常量:normal、bold、bolder、lighter、100、200、300、400、500、600、700、800或900。(注意浏览器对数字字体粗细的支持较差，一般把100到400当做normal，把500到900当做bold。此外，bolder和lighter很少被浏览器和/或操作系统字体支持。因此，除了normal或bold之外，我很少使用font-weight的任何值。)
每次你将相同的属性分配给相同的元素时，新的规则会覆盖先前的规则。由于该示例在一行中包含四个背景色规则，因此应用最后一个。
在本章的后面，我将展示一个四页的图表，列出所有可用的 CSS 属性和值。color是图表中唯一具有不完整可用值列表的属性。它显示了 170 个颜色常数中的 79 个。我将 79 个颜色常量组织成三组，您可能会发现这三组很有用:16 种按色调组织的标准颜色，35 种按色调从亮到暗组织的常见颜色，以及 28 种操作系统颜色。在整本书中，我经常使用颜色gold。我也使用相关的色调，如wheat、orange、tomato、firebrick和yellow。
提示您可以通过在属性名前面直接加上数字 1(或任何其他字符)来禁用规则，例如1background-color:white。这将使该规则无效，但只有一个规则无效。无效规则之前和之后的所有其他有效规则仍会被处理。在测试其他规则时，我经常使用这种技术使一个规则暂时无效，以禁用它的效果。
例 1-6。CSS 语法很简单
HTML
`
**
**CSS syntax is ****EASY!
`CSS
**body** { font-family:**"Century Gothic"**,verdana,arial,sans-serif; font-size:20px; line-height:150%; margin:1em; border:4px double black; padding:0.25em; background-image:url("gradient.gif"); background-repeat:repeat-x; } **p** { margin:0; } **span** { font-weight:900; }
使用级联顺序
CSS 允许你多次分配相同的规则给相同的元素。我称这些竞争规则为 ??。浏览器使用层叠顺序来确定应用一组竞争规则中的哪个规则。例如，浏览器为每个元素分配默认规则。当您将规则分配给元素时，您的规则会与默认规则竞争，但是由于它具有更高的级联优先级，所以它会覆盖默认规则。
级联顺序根据规则中使用的选择器类型将规则分为六组。高优先级组中的规则会覆盖低优先级组中的竞争规则。组是由它们的选择器的特性组织的。低优先级组中的选择器比高优先级组中的选择器具有更少的特异性。
级联顺序背后的指导原则是通用选择器设置文档的整体样式，而更具体的选择器覆盖通用选择器以应用特定的样式。
例如，您可能希望使用*{margin-bottom:0;}来设计文档中所有元素的样式，使其没有下边距。你可能还想使用p{margin-bottom:10px;}来设计文档中所有段落的样式，底部边距为 10 像素。您可能还想使用*.double-space{margin-bottom:2em;}将属于double-space类的几个段落的底部边距设置为 2 ems。您可能还想使用#paragraph3{margin-bottom:40px;}为一个段落设置 40 像素的超大底部边距。在每种情况下，级联顺序确保更具体的选择器覆盖更一般的选择器。
以下是按优先级从高到低排列的六个选择器组:
- 最高优先级组包含添加了
!important的规则。它们覆盖所有非!important规则。例如，#i100{border:6px solid -black!important;}优先于#i100{border:6px solid black;}。 - 第二高优先级组包含嵌入在
style属性中的规则。因为使用style属性会产生难以维护的代码，所以我不推荐使用它。 - 第三高优先级组包含具有一个或多个 ID 选择器的规则。例如，
#i100{border:6px solid black;}优先于*.c10{border:4px solid black;}。 - 第四高优先级组包含具有一个或多个类、属性或伪选择器的规则。例如，
*.c10{border:4px solid black;}优先于div{border:2px solid black;}。 - 第五高优先级组包含具有一个或多个元素选择器的规则。例如，
div{border:2px solid black;}优先于*{border:0px solid black;}。 - 最低优先级组包含只有一个通用选择器的规则——例如，
*{border:0px solid black;}。
当竞争规则属于同一个选择器组时(例如两个规则都包含 ID 选择器)，选择器的类型和数量会进一步区分它们的优先级。当一个选择器拥有比竞争的选择器多个高优先级选择器时，该选择器具有更高的优先级。例如，#i100 *.c20 *.c10{}的优先级高于#i100 *.c10 div p span em{}。因为两个选择器都包含一个 ID 选择器，所以它们都属于第三高优先级的组。因为第一个有两个类选择器，第二个只有一个类选择器，所以第一个有更高的优先级——即使第二个有更多的选择器。
当竞争规则在同一个选择器组中，并且具有相同数量和级别的选择器时，它们将按位置进一步区分优先级。优先级较高的位置中的任何规则都会覆盖优先级较低的位置中的竞争规则。(同样，这仅适用于竞争规则在相同的选择器组中，并且具有相同数量和级别的选择器的情况。选择器组始终优先于位置组。)
这六个位置按优先级从高到低排列如下:
- 最高优先级的位置是 HTML 文档头中的
<style>元素。例如，<style>中的一个规则覆盖了由嵌入在<style>中的@import语句导入的样式表中的一个竞争规则。 - 第二高优先级的位置是由嵌入在
<style>元素中的@import语句导入的样式表。例如，由嵌入在<style>中的@import语句导入的样式表中的规则会覆盖由<link>元素附加的样式表中的竞争规则。 - 第三高优先级的位置是由一个
<link>元素附加的样式表。例如，由一个<link>元素附加的样式表中的一个规则覆盖了由样式表中嵌入的一个@import语句导入的一个竞争规则。 - 第四高优先级的位置是一个样式表，由嵌入在由一个
<link>元素附加的样式表中的一个@import语句导入。例如，嵌入在链接样式表中的@import语句导入的规则会覆盖最终用户附加的样式表中的竞争规则。 - 第五高优先级的位置是最终用户附加的样式表。
- 最终用户样式表中的
!important规则是一个例外。这些规则被赋予最高优先级。这允许最终用户创建规则来覆盖作者样式表中的竞争规则。
- 最终用户样式表中的
- 最低优先级的位置是浏览器提供的默认样式表。
当在同一位置级别附加或导入多个样式表时，它们被附加的顺序决定了优先级。稍后附加的样式表会覆盖先前附加的样式表。
当竞争规则在同一个选择器组中，具有相同数量和级别的选择器，并且具有相同的位置级别时，代码中后面列出的规则将覆盖前面列出的规则。
在示例 1-7 、中，样式表中的每个规则都应用于 division 元素。每个规则对<div>应用不同的border-width。级联顺序决定了实际应用哪个规则。我按照从最不重要到最重要的层叠顺序对样式表中的样式进行了排序。从截图中可以看到，浏览器对<div>应用了最后一个规则，在<div>周围设置了 14 像素的边框。浏览器应用这个规则是因为它在层叠顺序中具有最高的优先级——它是一个附加了!important的 ID 选择器。
注意 ID 选择器如何覆盖类选择器，类选择器又覆盖元素选择器，元素选择器又覆盖通用选择器。注意!important是如何赋予选择器全新的重要性的。例如，!important通用选择器比非!important ID 选择器更重要！
注意border-style:none!important;是如何放置在body和html选择器中的，以防止通用选择器*在<body>和<html>周围放置边框。这也说明了元素选择器如何覆盖通用选择器。
例 1-7。级联顺序
HTML
`
CSS
`html, body { border-style:none!important; }
***** { border:0px solid black; } /* Universal Selector /
div { border:2px solid black; } / Element Selector */
.c10 { border:4px solid black; } / Secondary Selector /
#i100 { border:6px solid black; } / ID Selector */
***** { border:8px solid black**!important**; } /* !Universal Selector /
div { border:10px solid black*!important;** } /* !Element Selector /
.c10 { border:12px solid black!important;** } /* !Secondary Selector /
#i100 { border:14px solid black*!important;** } /* !ID Selector */`
简化级联
为了保持层叠顺序尽可能简单，我尽量减少了附加的样式表数量，并且不使用@import语句。我也避免使用!important操作符。最重要的是，我对我的选择器进行了排序，使它们在每个样式表中以级联顺序列出。
我将样式表组织成六组。我将所有通用选择器放在第一位，然后是元素、类、属性、伪和 ID 选择器。如果我有任何!important选择器，我将它们放在另一组组中的 ID 选择器之后。
保持样式表以层叠顺序排序有助于我记住 ID 选择器覆盖所有的类、属性、伪、元素和通用选择器——不管它们出现在当前样式表和所有其他样式表中的什么地方。同样，它提醒我每个样式表中的类、属性和伪选择器覆盖所有元素和通用选择器——不管它们出现在哪里。
按照层叠顺序对规则进行排序，可以很容易地看到竞争规则的应用顺序。这使得跟踪哪些规则覆盖了其他规则变得容易。我按照层叠顺序对规则进行排序，如下所示:
`/* Universal Selectors /
/ Element Selectors /
/ Class, Attribute, and Pseudo Selectors /
/ ID Selectors */
/* !important Universal Selectors /
/ !important Element Selectors /
/ !important Class, Attribute, and Pseudo Selectors /
/ !important ID Selectors */`
CSS 和 HTML 链接
常用 CSS 属性
`display margin text-indent
visibility margin-left text-align
margin-right
float margin-top color
clear margin-bottom
font
position border font-family
z-index border-left font-size
overflow border-left-color font-style
cursor border-left-width font-variant
border-left-style font-weight
left border-right text-decoration
right border-right-color text-transform
width border-right-width
min-width border-right-style vertical-align
max-width
border-top line-height
top border-top-color white-space
bottom border-top-width word-spacing
height border-top-style etter-spacing
min-height
max-height border-bottom direction
border-bottom-color unicode-bidi
border-bottom-width
/* LESS USABLE-------/ border-bottom-style
/ caption-side /
/ clip / padding list-style
/ content / padding-left list-style-type
/ empty-cells / padding-right list-style-position
/ outline / padding-top list-style-image
/ outline-color / padding-bottom
/ outline-style / border-collapse
/ outline-width / background table-layout
/ quotes / background-color
/ orphans / background-image page-break-after
/ page-break-inside / background-repeat page-break-before
/ widows / background-attachment
/--------------------------*/ background-position`
CSS 属性和值:常用
这个列表只包括那些在所有主流浏览器中都有效的 CSS 属性和值。财产前的字母“I”表示它是继承的。斜体中的值是默认值。一些值是代表一个值的多种可能性的符号。例如，LENGTH代表0、auto、none以及所有测量值(%、px、em、ex、pt、in、cm、mm、pc)。
`Common applies to all elements and box models.
display: inline, none, block, inline-block, list-item,
table-cell, table, table-row
I visibility: visible, hidden
background-color: transparent, COLOR
background-image: none, url(“file.jpg”)
background-repeat: repeat, repeat-x, repeat-y, no-repeat
background-attachment: scroll, fixed
background-position: 0% 0%, H% V%, H V,
left top, left center, left bottom,
right top, right center, right bottom,
center top, center center, center bottom
border: WIDTH STYLE COLOR
border-width: medium, LENGTH, thin, thick
border-style: none, hidden, dotted, dashed, solid, double,
groove, ridge, inset, outset
border-color: black, COLOR
border-left: WIDTH STYLE COLOR
border-left-width: same as border-width
border-left-style: same as border-style
border-left-color: same as border-color
border-right: WIDTH STYLE COLOR
border-right-width: same as border-width
border-right-style: same as border-style
border-right-color: same as border-color
border-top: WIDTH STYLE COLOR
border-top-width: same as border-width
border-top-style: same as border-style
border-top-color: same as border-color
border-bottom: WIDTH STYLE COLOR
border-bottom-width: same as border-width
border-bottom-style: same as border-style
border-bottom-color: same as border-color
I cursor: auto, default, pointer,
help, wait, progress, move, crosshair, text,
n-resize, s-resize, e-resize, w-resize`
CSS 属性和值:内容
`Content applies to all except for rows.
padding: 0, LENGTH
padding-left: 0, LENGTH
padding-right: 0, LENGTH
padding-top: 0, LENGTH
padding-bottom: 0, LENGTH
i font: caption, icon, menu, message-box, small-caption, status-bar
i font-family: serif, FONTLIST, sans-serif, monospace, fantasy, cursive
i font-size: medium, LENGTH, %ParentElementFontSize, xx-small, x-small,
smaller, small, large, larger, x-large, xx-large
i font-style: normal, italic, oblique
i font-variant: normal, small-caps
i font-weight: normal, lighter, bold, bolder,
100, 200, 300, 400, 500, 600, 700, 800, 900
i text-decoration: none, underline, line-through, overline
i text-transform: none, lowercase, uppercase, capitalize
i direction: ltr, rtl
unicode-bidi: normal, bidi-override, embed
i line-height: normal, LENGTH, %FontSize, MULTIPLIER
i letter-spacing: normal, LENGTH
i word-spacing: normal, LENGTH
i white-space: normal, pre, nowrap
i color: #rrggbb, #rgb, rgb(RED,GREEN,BLUE), rgb(RED%,GREEN%,BLUE%)
black, gray, silver, white,
red, maroon, purple, fuchsia,
lime, green, olive, yellow,
blue, navy, teal, aqua,
violet, fuschia, red, maroon, black
wheat, gold, orange, tomato, firebrick
lightyellow, yellow, yellowgreen, olive, darkolivegreen
palegreen, lime, seagreen, green, darkgreen
lightcyan, cyan, turquoise, teal, midnightblue
lightskyblue,deepskyblue,royalblue, blue, darkblue
whitesmoke, lightgrey, silver, gray, dimgray, darkslategray
ActiveBorder, ActiveCaption, AppWorkspace, Background,
ButtonFace, ButtonHighlight, ButtonShadow, ButtonText,
CaptionText, GrayText, Highlight, HighlightText,
InactiveBorder, InactiveCaption, InactiveCaptionText,
InfoBackground, InfoText, Menu, MenuText, Scrollbar,
ThreeDDarkShadow, ThreeDFace, ThreeDHighlight,
ThreeDLightShadow, ThreeDShadow, Window, WindowFrame, WindowText`
CSS 属性和值:布局
`Float applies to all except cells and rows.
float: none, left, right
Clear applies to all except inlines, inline-blocks, cells, & rows.
clear: none, left, right, both
Positioned applies to all except cells and rows.
position: static, relative; absolute, fixed
left: auto, LENGTH, %WidthOfContainingBlock
right: auto, LENGTH, %WidthOfContainingBlock
top: auto, LENGTH, %HeightOfContainingBlock
bottom: auto, LENGTH, %HeightOfContainingBlock
z-index: auto, INTEGER
Horizontal Margin applies to all except cells and rows.
margin: 0, LENGTH, %WidthOfContainingBlock, auto
margin-left: 0, LENGTH, %WidthOfContainingBlock, auto
margin-right: 0, LENGTH, %WidthOfContainingBlock, auto
Vertical Margin applies to all except inlines, cells, and rows.
margin: 0, LENGTH, %WidthOfContainingBlock, auto
margin-top: 0, LENGTH, %WidthOfContainingBlock, auto
margin-bottom: 0, LENGTH, %WidthOfContainingBlock, auto
Width applies to all except inlines and rows.
width: auto, LENGTH, %WidthOfContainingBlock
min-width: 0, LENGTH, %WidthOfContainingBlock
max-width: none, LENGTH, %WidthOfContainingBlock
Height applies to all except inlines and tables.
height: auto, LENGTH, %HeightOfContainingBlock
min-height: 0, LENGTH, %HeightOfContainingBlock
max-height: none, LENGTH, %HeightOfContainingBlock
Content Layout applies to all except inlines, tables, and rows.
i text-indent: 0, LENGTH, %WidthOfContainingBlock
i text-align: left, center, right, justify
overflow: visible, hidden, auto, scroll`
CSS 属性和值:专用
`List applies only to lists.
i list-style: TYPE POSITION IMAGE
i list-style-type: disc, circle, square, none, decimal,
lower-alpha, upper-alpha, lower-roman, upper-roman
i list-style-position: outside,inside
i list-style-image: none, url(“file.jpg”)
Table applies only to tables.
i border-collapse: separate, collapse
table-layout: auto, fixed
Cell applies only to cells.
vertical-align: baseline, bottom, middle, top
Inline applies only to inlines and inline-blocks.
vertical-align: baseline, LENGTH, %LineHeight,
text-bottom, text-top, middle, top, bottom
Page applies only to blocks and tables.
page-break-after: auto, always, avoid
page-break-before: auto, always, avoid`
选择器
* {} selects all elements p {} selects all <p> elements *.c {} selects all elements where class="c" p.c {} selects all <p> elements where class="c" #main {} selects one element where id ="main" a:link {} selects all unvisited links a:visited{} selects all visited links a:hover {} selects all links being hovered over a:active {} selects the current link being activated a:focus {} selects all links that have the focus p:first-letter {} selects first letter of all <p> elements p:first-line {} selects first line of all <p> elements p:first-child {} selects first child of all <p> elements tr:nth-child(even) selects every even row of a table tr:nth-child(2n+0) same as above tr:nth-child(2n+0) same as above tr:nth-child(10n+9) same as above #n *.c :first-line {} selects every 9th, 19th, 29th, etc., row #n > *.c > :first-line {} child selector example #n + *.c + :first-line {} sibling selector example #n , *.c , :first-line {} applies independent selectors to same block of properties *[title] {} selects all elements with a title attribute *[title~="WORD"] {} selects all where title attribute contains "WORD" *[title="EXACT_MATCH_OF_ENTIRE_VALUE"] {} selects all with exact attribute match
媒体查询
CSS 长期以来一直支持为不同媒体类型定制的媒体相关样式表。例如，文档在屏幕上显示时可能使用无衬线字体，在打印时可能使用衬线字体。“屏幕”和“打印”是已经定义的两种媒体类型。
在 HTML4 的旧时代，可以这样写:
`
`使用 CSS3，媒体查询通过允许更精确地标记样式表来扩展媒体类型的功能。媒体查询由媒体类型和零个或多个表达式组成，用于检查特定媒体特征的条件。通过使用媒体查询，可以根据特定范围的输出设备定制演示文稿，而无需更改内容本身。媒体查询是为真或为假的逻辑表达式。如果媒体查询的媒体类型与运行用户代理的设备的媒体类型匹配，并且媒体查询中的所有表达式都为真，则媒体查询为真。
这里有几个例子:
`<–! Applies to devices of a certain media type (‘screen’) with certain feature (it must be a
color screen)–>
@import url(color.css) screen and (color);`
为适用于所有媒体类型的媒体查询提供了速记语法；关键字“all”可以省略(连同尾随的“and”)，即以下内容是相同的:
@media (orientation: portrait) { … } @media all and (orientation: portrait) { … }
这样，设计人员和开发人员就可以创建更复杂的查询来满足他们的特定需求:
@media all and (max-width: 698px) and (min-width: 520px), (min-width: 1150px) { body { background: #ccc; } }
有一个很大的媒体功能列表，包括以下内容:
- 宽度和设备宽度
- 高度和设备高度
- 方向
- 纵横比和设备纵横比
- 颜色和颜色指数
- 单色(如果不是单色设备，等于 0)
- 解决
- 扫描(描述“电视”输出设备的扫描过程)
- 网格(指定输出设备是网格还是位图)
灵活的计量单位
固定计量单位
96 dpi 时测量单位之间的比率
96 dpi 时的典型字体大小值
过渡、动画和 2D 变换
CSS 转换规范允许 CSS 值的属性变化在指定的持续时间内平稳地发生。通常，当 CSS 属性的值发生变化时，渲染结果会立即更新，但是通过 CSS 转换，作者能够随着时间的推移平滑地从旧状态转换到新状态。
这里有一个例子:
#box { transition-property: opacity, left; transition-duration: 3s, 5s; }
上述代码将导致opacity属性在三秒的时间内转换，而left属性在五秒的时间内转换。
CSS 动画类似于过渡，因为它们会随着时间的推移改变 CSS 属性的表示值。主要区别在于，当属性值更改时，转换会隐式触发，而当应用动画属性时，动画会显式执行。因此，动画需要被动画化的属性的显式值。这些值是使用关键帧指定的。
作者可以指定动画迭代多少次，是否在begin和end值之间交替，动画是否应该运行或暂停，等等。
这里有一个例子:
` #warning {
animation-name: ‘horizontal-slide’;
animation-duration: 5s;
animation-iteration-count: 10;
}
@keyframes ‘horizontal-slide’ {
from {
left: 0;
}
to {
left: 100px;
}
}`
这将产生一个动画，在 5 秒钟内将#warning水平移动 100 像素，并重复 9 次，总共 10 次迭代。
CSS 2D 变换规范允许 CSS 渲染的元素在二维空间中进行变换。这里有一个例子:
#box { height: 100px; width: 100px; transform: translate(50px, 50px) scale(1.5, 1.5) rotate(90deg); }
前面的例子在 X 和 Y 方向上移动#box50 个像素，缩放元素 150%，然后围绕 z 轴顺时针旋转 90 度。
CSS 故障排除
您可以使用下列步骤来解决样式表不工作的问题。我按顺序列出了最有可能帮助您快速找到问题的步骤。
- 验证 HTML 文档。这确保您不会遇到语法问题，这些问题可能会导致浏览器对文档结构的解释与您预期的不同。开发人员可以使用 W3C 验证服务(
[validator.w3.org/](http://validator.w3.org/))、W3C Unicorn 验证器([validator.w3.org/unicorn/](http://validator.w3.org/unicorn/))或者提供标记和样式验证的各种浏览器插件。 - 验证每个 CSS 样式表。这确保您没有语法问题，语法问题会导致一个或多个规则被忽略。
- 确保非零测量值后有一个正确的计量单位(UOM) ，并且数字和它的计量单位之间没有空格，如
1em或100%。(line-height是个例外；它允许没有计量单位的非零测量。) - 确保属性名和它的值之间只有冒号(
:) 和可选的空格，比如width:100%或width : 100%。 - 确保分号(
;) 关闭每个规则，比如width:100%;。
- 确保非零测量值后有一个正确的计量单位(UOM) ，并且数字和它的计量单位之间没有空格，如
- 使用 Mozilla 浏览器中的错误控制台查看 CSS 解析错误列表。浏览器会忽略每个有解析错误的规则，但与许多其他编程语言不同，它们会继续解析并应用剩余的规则。
- 验证一个选择器正在选择你认为它应该选择的所有元素，并且只选择那些元素。通过将
outline:2px solid invert;放入选择器中，可以很容易地看到选择器的结果。(请注意，outline在 ie 7 中不工作，但border可以。) - 仔细查看未应用的每个规则的级联优先级。级联优先级优先于文档顺序。例如，
#myid{color:red;}优先于*.myclass{color:blue;}，而#myid *.myclass{color:green;}优先于两者——不管它们出现在样式表中的什么位置，也不管它们出现在当前样式表之前还是之后加载的样式表中。我发现这是一个常见的问题，因为具有更高级联优先级的规则可以是任何样式表中的任何地方。假设您已经验证了您的样式表，当选择器中的一些属性有效，而其他属性无效时，您通常可以判断级联优先级何时出现问题——无论您使用什么值。当属性被具有更高级联优先级的另一个规则覆盖时，通常会发生这种情况。您通常可以通过在属性后添加!important来验证这种情况。!important赋予一个属性比所有非!important属性更高的优先级。如果!important使一个属性工作，你可能有一个级联优先级问题。 - 验证样式表中元素、类和 id的大小写与它们在 HTML 文档中的大小写完全匹配。这很重要，因为 XHTML 是区分大小写的。您可能希望始终使用小写值，以避免意外的不匹配。
- 仔细检查速记属性查看您在创建规则时是否遗漏了任何属性值。速记属性的问题在于，它们会给所有速记的属性赋值——即使你只设置了一个值！例如，
background:blue;将background-color设置为blue，还将background-image设置为none、background-repeat设置为repeat、background-attachment设置为scroll、background-position设置为0% 0%。如果包含background:blue;的规则比将background-image分配给url("image.jpg")的重叠规则具有更高的层叠优先级，您将看不到背景图像，因为速记属性background:blue;覆盖了它并将background-image设置为none。- 速记属性包括
margin、border、padding、background、font、list-style。 font是一个特别麻烦的简写属性，因为它把这么多属性组合成一个，而且这些值都是继承的！这些属性包括font-family、font-size、font-weight、font-variant、font-style和line-height。请记住，即使给font分配一个值，比如font:1em;，也会导致浏览器为的所有属性设置默认值！
- 速记属性包括
- 验证浏览器加载了你所有的样式表。你可以确保每一个都通过 HTML 文档的
<head>部分中的<link>语句或者样式表中的@import语句被引用。如果您不确定是否正在加载样式表，您可以在样式表中放置一个独特的规则，以查看它是否得到应用。这样的规则是显而易见的，比如*{border:1px solid black;}。 - 避免使用
@import语句。如果使用@import语句，验证它们是否作为样式表中的第一项出现，以确保它们的优先级低于样式表中的规则。 - 通过按优先级升序列出
<link>语句和@import语句，验证样式表是否按您想要的顺序加载。级联顺序中同一级别的规则被后来链接或导入的样式表中的规则覆盖。但是请记住，具有较高级联优先级的规则总是优先于具有较低优先级的规则，不管这些规则在样式表中出现的顺序如何，也不管它们是出现在后来链接或导入的样式表中。** - 验证服务器发送
text/css作为 CSS 样式表的Content-Type头。Mozilla 浏览器拒绝使用样式表，除非它的内容类型是text/css。您可以使用 Web Developer 工具栏并选择菜单选项“查看响应头”,在 Mozilla 浏览器中查看 HTTP 头。 - 移除可能已经放在 CSS 样式表中的 HTML 元素，比如
<style>。还要确保没有子元素被意外地放置在 HTML 文档头部的<style>元素中。
规范化样式表
因为每个浏览器的默认设置略有不同，所以您可能希望在样式表中构建规则来定义每个元素的基线设置。例如，不同的浏览器给<h1>元素分配不同的大小和边距。通过给<h1>分配你自己的尺寸和边距，你可以在所有浏览器中标准化它的外观。
最简单的方法(也是最容易维护的方法)是为所有元素创建一组基线规则，并将这些规则加载到附加到文档的第一个样式表中。您可以加载一小组规则，将所有元素重置为最简单的样式，如清单 1-2 所示。或者你可以加载一组更广泛的规则，为你的网站创建一个标准的风格，比如清单 1-3 中的那些。你可以在互联网上找到标准的基线规则，比如雅虎的 YUI 重置 CSS 规则(见[developer.yahoo.com/yui/reset/](http://developer.yahoo.com/yui/reset/))。
加载单独的基线样式表会影响页面呈现的速度(参见侧栏“页面加载速度有多快？”).因此，出于性能原因，您可能希望合并样式表或将样式移动到 HTML 文档的<style>部分。
***清单 1-2。*简单的基线样式表(类似于雅虎的 YUI 重置 CSS)
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p, blockquote,th,td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } ol,ul { margin:1em 0; margin-left:40px; padding-left:0; } ul { list-style-type:disc; } ol { list-style-type:decimal; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; }
你的网页加载速度有多快？
文档呈现的速度很重要。在 0.5 秒内呈现的网页被认为是即时的；1 秒是快；2 秒是正常的；超过 2 秒变得明显；大约 6 秒是大多数宽带用户所能容忍的。根据经验，查找每个文件的延迟通常需要 0.1 到 0.5 秒，这是在宽带连接上，不包括实际下载文件所需的时间。由于延迟，快速页面通常可以加载三个额外的文件，比如一个样式表、一个 JavaScript 文件和一个图像，而普通页面可以加载大约七个额外的文件。
为了提高性能，浏览器会缓存文件。这可能对后续下载有帮助，但对页面第一次下载没有帮助。此外，只有当服务器将缓存文件的到期日期设置为将来到期时，缓存文件才会提高性能。当缓存文件的刷新日期到期时，浏览器会询问服务器该文件是否已更改。每个文件大约需要 0.1 到 0.5 秒，即使文件没有更改并且不需要再次下载。因此，尽可能将到期日期设定在未来是很重要的。未来多久取决于您预期文件在服务器上更改的频率。问题是，如果您在到期日期之前更改了服务器上的文件，用户将无法获得更新后的文件，因为除非您清除缓存，否则浏览器不会主动询问。
***清单 1-3。*完成基线样式表
`/* BLOCK ELEMENTS */
html, div, map, dt, form { display:block; }
body { display:block; margin:8px; font-family:serif; font-size:medium; }
p, dl { display:block; margin-top:1em; margin-bottom:1em; }
dd { display:block; margin-left:40px; }
address { display:block; font-style:italic; }
blockquote { display:block; margin:1em 40px; }
h1 { display:block; font-size:2em; font-weight:bold; margin:0.67em 0; }
h2 { display:block; font-size:1.5em; font-weight:bold; margin:0.83em 0; }
h3 { display:block; font-size:1.125em; font-weight:bold; margin:1em 0; }
h4 { display:block; font-size:1em; font-weight:bold; margin:1.33em 0; }
h5 { display:block; font-size:0.75em; font-weight:bold; margin:1.67em 0; }
h6 { display:block; font-size:0.5625em; font-weight:bold; margin:2.33em 0; }
pre{ display:block; font-family:monospace; white-space:pre; margin:1em 0; }
hr { display:block; height:2px; border:1px; margin:0.5em auto 0.5em auto; }
/* TABLE ELEMENTS */
table { border-spacing:2px; border-collapse:separate;
margin-top:0; margin-bottom:0; text-indent:0; }
caption { text-align:center; }
td { padding:1px; }
th { font-weight:bold; padding:1px; }
tbody, thead, tfoot { vertical-align:middle; }
/* INLINE ELEMENTS */
strong { font-weight:bold; }
cite, em, var, dfn { font-style:italic; }
code, kbd, samp { font-family:monospace; }
ins { text-decoration:underline; }
del { text-decoration:line-through; }
sub { vertical-align:-0.25em; font-size:smaller; line-height:normal; }
sup { vertical-align: 0.5em; font-size:smaller; line-height:normal; }
abbr[title], { border-bottom:dotted 1px; }
/* LIST ELEMENTS /
ul { list-style-type:disc; margin:1em 0; margin-left:40px; padding-left:0;}
ol { list-style-type:decimal; margin:1em 0; margin-left:40px; padding-left:0;}
/ remove top & bottom margins for nested lists /
ul ul, ul ol, ul dl, ol ul, ol ol, ol dl, dl ul, dl ol, dl dl
{ margin-top:0; margin-bottom:0; }
/ use circle when ul nested 2 deep /
ol ul, ul ul { list-style-type:circle; }
/ use square when ul nested 3 deep */
ol ol ul, ol ul ul, ul ol ul, ul ul ul { list-style-type:square; }`
提示你可以使用resource://gre-resources/html.css查看 Mozilla Firefox 的内部默认样式表。
二、HTML 设计模式
本章只探讨与 CSS 相关的 HTML。它包含了用 CSS 设计文档样式的基本设计模式。它在高层次上探索 HTML，着眼于解释如何在结构和语义上使用元素。本书中的每个设计模式都是使用结合 CSS 的结构和语义元素创建的。设计模式中使用了四种主要类型的元素:结构块、终端块、多用途块和内联元素。理解这些类型的元素是理解本书中设计模式的关键，也是创建你自己的设计模式的基础。
章节大纲
- HTML 结构显示了 HTML 元素如何一起工作来创建一个文档。
- 展示了如何用有效的 XHTML 标记文档。它还指出了为什么使用有效的 XHTML 会使 CSS 样式更加可靠。
- DOCTYPE 展示了如何使用文档类型来验证文档的编码方式，并探索了什么样的文档类型最适合 CSS 和 HTML。
- Header Elements 展示了如何创建关于文档的元数据，以及如何将文档链接到支持文档和相关文档。
- 条件样式表展示了如何加载一个样式表来修复 Internet Explorer 特有的问题。
- 结构块元素展示了如何在文档中创建结构意义。
- 终端块元素显示某些块如何具有语义，因为它们包含内容而不是其他块。
- 多用途块元素展示了某些元素如何用于块结构和语义。
- Inline Elements 展示了样式如何展现语义标记的含义。
- Class 和 ID 属性展示了 CSS 如何依靠
class和id属性来选择元素。它还展示了class属性如何给元素增加意义。 - HTML 空白显示了如何让空白为你所用，而不是对你不利。
HTML 结构
html 5 规范中包含了其他元素，但是我没有在前面的表格中列出它们，因为它们没有什么语义或结构意义，很少使用，或者有古怪的实现。以下元素样式文本:<i>、<b>、<big>、<small>。<pre>元素保留空白，但是它不能包含图像、对象、下标或上标。<q>元素根据不同的浏览器自动插入不同的引号。<ins>和<del>元素将元素标记为插入或删除。框架会给搜索引擎和用户带来问题:<iframe>、<frameset>、<frame>和<noframe>。Internet Explorer 7 不会删除<hr>、<fieldset>和<legend>的内置样式，但以后的版本会。此外，从 SEO 的角度来看，传统的框架在显示时索引不好，因为内容通常是在位于单独框架中的控件之外进行索引的。同时，传统的框架集已经相当过时了。最后，<base>改变文档中所有链接的根——只有在你完全理解的情况下才使用它，否则它可能会断开你所有的链接。类似地，HTML5 草案规范中定义的许多其他元素要么还没有在浏览器中实现，要么仍在进行重大修订。
HTML 结构
HTML
`
HTML Structure
Paragraph
- Ordered List Item
- Ordered List Item
- Unordered List Item
- Unordered List Item
- Definition Data
- Definition Data
Definition Term
Definition Term
| row1-col1 | row1-col2 |
| row3-col1 | row3-col2 |
Item1
Item2
Textarea
Button
span
em
strong
cite
code
kbd
samp
var
abbr
dfn
sub
sup
backwards`
`
My blog post
The article element represents a self-contained composition in page that is independently distributable or
reusable, e.g., in syndication.
First section heading
The section element represents a generic section of a document (thematic grouping of
content).
And one more section
A page could be split into sections for an introduction, news items, contact
information, etc.
address `
CSS
/* There are no CSS styles attached to this document. */
HTML 结构
XHTML
有效的 XHTML
`
<meta http-equiv=“Content-type” content=“text/html; charset=utf-8” />
<link rel=“stylesheet” href=“page.css” media=“all” type=“text/css” />
XHTML
Paragraph**
Break
- Ordered List Item
- **
- Ordered List Item**
- **
-
Definition Term**
**
- Definition Data** **
`
有效的 HTML
`
HTML
****Paragraph **
**Break
- **
- **Ordered List Item **
- **Ordered List Item
-
**
**Definition Term **
- **Definition Data
XHTML
文档类型
HTML
`
`内容类型与文档类型
Web 服务器用一个 MIME 内容类型来标识它们提供的每个文档。MIME 代表多部分互联网邮件扩展。内容类型在文档的 HTTP 头中标识。浏览器根据文档的 MIME 内容类型决定如何处理文档。当它获得一个内容类型为"text/html"的文档时，它将该文档呈现为 HTML。
根据 W3C 题为“XHTML 媒体类型”([www.w3.org/TR/xhtml-media-types/](http://www.w3.org/TR/xhtml-media-types/))的说明，web 服务器可以提供以下三种内容类型之一的 XHTML。
- 只要您不希望浏览器将一个 XHTML 文档视为 XML，并且不包含来自其他 XML 名称空间(如 MathML)的内容，就可以将该文档用作
"text/html"。接收具有这种内容类型的 XHTML 文档的浏览器将该文档视为 HTML。 - XHTML 应该作为
"application/xhtml+xml"。不幸的是，Internet Explorer 7 和早期版本拒绝显示以这种方式提供的页面。 - XTHML 可以作为
"application/xml"或者"text/xml"。不幸的是，Internet Explorer 7 和更早的版本将这样的文档识别为通用 XML，这意味着它们忽略了所有的 XHTML 语义。这意味着链接和表单不起作用，并且呈现文档需要更长的时间。
Gecko 浏览器在完全下载并且完全没有编码错误之后，只呈现一个使用 XML 内容类型的文档。它还以严格模式呈现文档，而不考虑其文档类型(见[www.mozilla.org/docs/web-developer/faq.html#accept](http://www.mozilla.org/docs/web-developer/faq.html#accept))。
目前，为 XHTML 网页提供服务的最可靠的内容类型是"text/html"。这告诉浏览器将文档呈现为 HTML。W3C 支持这种方法，它在所有主流浏览器中都运行良好。它之所以有效，是因为浏览器不验证 HTML。它们解析网页的方式允许它们显示任何版本的 HTML 和 XHTML——包括包含错误的文档。与浏览器处理 XHTML 文档的方式形成对比，当出现错误时，XML 规则禁止浏览器呈现整个 XHTML 文档——即使是由意外输入造成的最小错误！这样的精度对于计算机对计算机的交易来说是必不可少的，但是对于人工生成的网页来说就不好了。
文档类型
表头元素
HTML
`
Header Elements
`表头元素
条件样式表
在 Firefox 中呈现，没有条件样式表
使用条件样式表在 Internet Explorer 中呈现
HTML
`
Conditional Stylesheet
In Internet Explorer 6, this box has a border and background.
`
CSS page.css
***.test { font-size:18px; }**
CSS ie6.css
***.test { border:2px solid black; background-color:gold; }**
条件样式表
结构块元素
HTML 模式
`
- One or more list items…
- One or more list items…
- One or more definitions…
One or more definition terms…
| One or more header cells in a row… | One or more data cells in a row… |
|---|---|
| One or more rows in a row group… | |
| Zero or more row groups in a table… |
结构块元素
端子板元件
HTML
`**
**Terminal Block Elements
Headings, paragraphs, blockquotes, definition terms, addresses,
and table captions are terminal block elements. They may contain only content.
An HTML validator will declare a document invalid if you attempt
to put block elements inside terminal blocks.
A blockquote is a terminal block.
-
**
NOTE:
**
- The content of terminal blocks is always inline.
An address is a terminal block. ** **
端子板元件
多用积木元件
HTML
`Show this text when script cannot run.
Multi-purpose Block Elements
This content is inside a list but is not inside a list item like it should be.
- This content is properly nested in a list item.
This content outside a list item invalidates and destroys the structure of a list.
Compare the mixed content in this division with that of the preceding list.
**
This mixed content is not invalid, but it destroys the block structure
and requires a browser to create anonymous blocks in which to render it.
多用积木元件
行内元素
HTML
`
Inline Elements
Italicized
<em>
emphasized
<cite>
citation
<var>
computer variable
<dfn>
definition
Bold
<strong>
strongly emphasized
Monospace
<code>
computer code
<kbd>
key press
<samp>
sample computer output
Underlined
<a>
a
<abbr>
abbreviation
Vertical-aligned
<sup> superscript**
1**
<sub> subscript**
1**
`
行内元素
类和 ID 属性
HTML
`
Class and ID Attributes
<div id=“hcalendar1” class=“vevent”>
<h3 class=“summary”>Calendar Event Summary
<p class=“description”>Calendar Event Description
From
<span class=“dtstart” title=“2007-05-01T08:30:00-05:00”
>01 May 2007 from 8:30am EST to
<span class=“dtend” title=“2007-05-01T09:30:00-05:00”
>9:30am EST
Location: <span class=“location”>Meeting Location
Booked by: <span class=“uid”>globally-unique-id.host.com
on <span class=“dtstamp” title=“20070101T231000Z”
>Jan 1, 2007 at 6:00pm
See microformats.org
for more information about microformats.
CSS
`*.vevent p { margin:0 0 5px 0; font-size:0.9em; }
*.vevent h3 { margin:0 0 5px 0; }
*.vevent *.location { font-style:italic; }
*.vevent *.uid { font-family:monospace; }
*.vevent *.dtstart,
*.vevent *.dtend,
*.vevent *.dtstamp { color:green; }
#hcalendar1 { margin:5px; border:1px solid black; padding:10px; }`
类和 ID 属性
HTML 空白
HTML
`
HTML Whitespace
start middle ** ** end
Controlling Where Whitespace Collapses
**start middle end**—inside element
**start middle end**—outside element
Embedding Whitespace Inside Tags
start**
Embedding Space Entities
‌
****
 
** **
** **
 
** **
 
** ** `
CSS
`em { padding-left:50px; }
p { font-family:monospace; font-size:18px; }
*.border { font-weight:bold;
border-left:2px solid black; border-right:2px solid black; }`
HTML 空白
三、CSS 选择器和继承
本章介绍了选择样式元素的设计模式。
因为选择器设计模式很简单，所以我分组讨论选择器设计模式，而不是一次讨论一个。这使得比较和对比选择器的相关形式变得容易。因此，尽管这一章只有六个例子，但它包含了十三个不同的设计模式。
本章包含了继承，因为它只是一种选择后代元素的内置方式。继承与后代选择器密切相关。可视继承模式包含在本章中，因为它是一种本质上可视的继承形式。
章节大纲
- 类型、类和 ID 选择器展示了如何通过标签、类和 ID 选择元素。
- 位置和组选择器显示了如何通过元素在文档中的嵌套方式来选择元素。它还展示了如何将多个选择器应用于同一组规则。
- 属性选择器展示了如何根据属性选择元素。
- 伪元件选择器显示如何选择端子板元件的第一个字母或第一行。
- 伪类选择器展示了当一个超链接未被访问、被访问、被鼠标悬停、或者因为用户用鼠标点击它而获得焦点时，如何设计它的样式。
- 子类选择器展示了如何使用类和子类将多个样式应用到同一个元素。
- 继承展示了如何通过分配给祖先的规则来设计元素的样式。
- 视觉继承显示元素如何视觉继承其父元素的背景。
类型、类别和 ID 选择器
HTML
`
Type, Class, and ID Selectors
The type selector, p, adds a border to all paragraphs.
The class selector, *.my-class1, adds padding.
The class selector, *.my-class2, adds letter-spacing.
The ID selector, #my-id, adds a background color.
CSS
`p { border:2px solid black; }
*.my-class1 { padding:10px; }
*.my-class2 { letter-spacing:0.11em; }
#my-id { background-color:gold; }`
类型、类别和 ID 选择器
位置和组选择器
HTML
`
Position and Group Selectors
**
**p.my-class
**- **div ol li
**- **div ol li
***div ol li p.my-class
CSS
/ Group Selectors */
p,ol,li { border:1px solid black; padding-left:10px; font-family:monospace;
margin:10px; margin-left:0px; }
ol { margin-left:0px; padding-left:40px; margin-top:20px; }
/* Position Selectors */
div .my-class { font-size:1.2em; font-weight:bold; } / Descendant Selector /
#my-id p { background-color:gold; } / Descendant Selector /
#my-id > * { border:3px solid black; } / Child Selector */
:root {background: white;} /* Root Selector /
li:nth-child(2n+1) / Nth-child Selector /
li:nth-last-child(-n+2) / Nth-last-child Selector /
li:nth-of-type(2n+1) { float: right; } / Nth-of-type Selector */
li:nth-last-of-type(2n+1) { float: right; } /* Nth-last-of-type Selector /
li:first-child { font-weight:bold; color:red; } / Fiwrst-child Selector /
li:last-child { font-weight:bold; color:red; } / Last-child Selector /
ul li:first-of-type {color: red} / First-of-type Selector /
tr > td:last-of-type / Last-of-type Selector /
li:only-child / Only-child Selector /
div:only-of-type / Only-of-type Selector /
p:empty {display: hidden} / Empty Selector /
li + li { font-style:italic; color:blue; } / Sibling Selector */`
位置和组选择器
属性选择器
HTML
`
Attribute Selectors
This is a paragraph without the title attribute.
p[title] selects all paragraphs containing a title attribute.
p[title~=“paragraph”] selects all paragraphs with a
title attribute containing the word, paragraph.
p[title=“#4 paragraph”] selects all paragraphs with a
title attribute containing the exact text, #4 paragraph. Matches
are case-sensitive and must match letter-for-letter including whitespace.
<a href=“http://www.example.com” target=”_blank" hreflang=“en-GB”>hello`
CSS
`code { white-space:pre; }
p[title] { padding:5px 10px; border:1px solid gray; }
p[title~=“paragraph”] { background-color:gold; }
p[title=“#4 test paragraph”] { font-weight:bold; }
a[href=“http://www.example.com”][target=“_blank”] { font-weight:bold; }
p[type^=“#4”] {color: grey }
a[href$=“.com”] { font-weight:bold; }
p[title=“test”]* { font-weight:bold; }`
属性选择器
伪元素选择器
HTML
`
Pseudo-element Selectors
first-letter selects the first letter, and
first-line selects the first line of a terminal block element,
like this paragraph.
Pseudo-element selectors do not work on structural block elements.
CSS
`p:first-line { font-weight:bold; word-spacing:2px; letter-spacing:1px; }
p:first-letter { font-size:48px; }
span:first-line { font-weight:bold; word-spacing:2px; letter-spacing:1px; }
span:first-letter { font-size:48px; }
dl:first-line { font-weight:bold; word-spacing:2px; letter-spacing:1px; }
dl:first-letter { font-size:48px; }`
伪元素选择器
伪类选择器
HTML
`
Pseudo-class Selectors
a:link – unvisited link
a:visited – visited link
a:hover – mouse hovering
a:active – visiting a link
CSS
`a { padding:3px 10px; margin:20px 10px; text-decoration:none;
display:block; width:260px;
border-left:1px solid dimgray; border-right:2px solid black;
border-top:1px solid dimgray; border-bottom:2px solid black; }
a:link { color:black; background-color:white; }
a:visited { color:gray; background-color:white; }
a:hover { color:white; background-color:green; }
a:active, a:focus { color:green; background-color:gold; }`
伪类选择器
子类选择器
HTML
`
Subclass Selector
<p class=“button square”>Square
<p class=“button rounded”>Rounded
<p class=“button go”>Go
`
CSS
`*.button { width:175px; padding:3px 10px; margin:20px 0; text-align:center;
font-weight:bold; margin-left:50px; line-height:normal; }
*.button.square { color:darkblue; background-color:gold;
border-left:1px solid dimgray; border-right:2px solid black;
border-top:1px solid dimgray; border-bottom:2px solid black; }
*.button.rounded { color:darkblue; background-color:white;
line-height:45px; margin-top:30px;
background:url(“oval.gif”) no-repeat center center; }
*.button.go { background-color:white; line-height:26px;
text-indent:-9999px; font-size:10px;
background: url(“go.jpg”) no-repeat center center; }`
子类选择器
继承
HTML
`
Inheritance
- This span inherits font from its ancestor, <body>.
- It inherits line-height from its ancestor, <div>.
- It inherits letter-spacing from its ancestor, <p>.
- It inherits italics from its ancestor, <em>,
but it is also directly assigned to font-style:normal , which
overrides its inherited italics.
CSS
**body** { font-family:verdana,arial,sans-serif; font-size:18px; } **div** { line-height:2em; } **p** { letter-spacing:0.8px; } **em** { font-style:italic; } **span** { font-style:normal; }
继承
视觉继承
HTML
<h1>Visual Inheritance</h1> **<div>** <p> <label> <span> - This span is nested inside a label, a paragraph, and a division. <br /> - The division is assigned a background color, padding, and a border. <br /> - Since the span, label, and paragraph default to a transparent background color and have no border, they "visually inherit" the background, padding, and border of the division. <br /> - Once you assign a background to an element, it no longer visually inherits the background of its parent—like this <code><code></code> element. </span> </label> </p> </div>
CSS
`div { background-color:gold; color:black; padding:10px 20px;
border-left:1px solid gray; border-right:2px solid black;
border-top:1px solid gray; border-bottom:2px solid black; }
p { background-color:transparent; background-image:none; }
label { background-color:transparent; background-image:none; }
span { background-color:transparent; background-image:none; }
code { background-color:firebrick; color:white; }`
视觉继承
扫一扫
4942
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
