层叠样式表/排版

颜色

当您重置链接的:link/默认颜色时，始终重置:visited颜色，以确保 IE 和符合标准的浏览器之间的一致行为

使用三个字符样式作为十六进制颜色代码的简写，其中包含重复的模式（#FC0 = #FFCC00；#AAA = #AAAAAA）

行高

行高和字体大小之间的差值称为行间距

基线是一条看不见的线，所有类型字符都坐落在该线上

下沉字符是小写字母，它们悬挂在基线下方，包括 j、g、y 和 p。

基线偏移涉及相对于基线上下移动字符，以将实体、项目符号、括号、数字和其他基于字体的图形与字母对齐

使用相对定位和微小的顶部和底部移动来使用 CSS 实现基线偏移

（字体大小 + 垂直填充 + 垂直边距）/ 行高对于每个元素必须是基线数字的倍数

（字体大小 + 垂直填充 + 垂直边距）* 行高为您提供了每行文本的总高度

IE6 中的内联替换元素（img、object、select 等）的行间距会将该行的半行间距与前一行和后一行的半行间距折叠在一起。为了解决这个问题，请为替换元素提供等于其高度与行高之差一半的顶部和底部边距

内联文本需要相同的字体大小、行高、垂直对齐、填充、边框、边距和位置值才能在所有浏览器中一致地对齐

使用行高来模拟高度，并使用填充来模拟内联元素的宽度/2

为段落标签全局设置宽松的底部边距，以创建一致且可维护的行间距标准

将垂直边距设置为全局行高，以保持具有标准大小字体的文本的垂直对齐。对于等于行高的文本，将垂直边距和行高设置为文本高度的 100%

在一行中使用多种字体，例如 Hi<string>! 来覆盖行高并将其重置为相对于最大字体大小

为容器 div 设置统一的左右填充，以创建一致且可维护的间距标准

为列表项和引用的文本设置更宽的左侧边距，以方便悬挂标点符号

将行高指定为与框的高度相同，以垂直对齐文本

如果行高指定为浮点数而不是固定单位，则子元素的继承行高将是子元素的字体大小乘以该数字

如果行高指定为相对单位，则继承的行高将与父元素相同

使用与背景颜色匹配的字体颜色，并使用大于行高的字体大小，以保持与页面流不匹配的文本的垂直一致性

字体系列

永远不要在字体系列列表中使用回车符，因为在 IE 中它不起作用

使用 font-family:monospace 来在 Opera 中设置 pre 标签的样式

垂直对齐

定义字体大小和相应的行高以设置垂直节奏

使用垂直对齐和行高的偏移值，例如 { vertical-align: 10px; line-height: -10px }，为内联元素模拟垂直填充

对具有 display:inline-block 的元素使用 overflow:hidden 来更改其基线以进行垂直对齐

使用像素值作为行高，以跨浏览器重新定位输入元素

列表样式

在 ul 或 ol 上使用 direction: rtl; 将项目符号点右对齐到列表项旁边。如果有间距问题，请使用具有 background-position:right center 的项目符号背景图片作为替代方案

使用 display:list-item 和 list-style-type:decimal 对语义上不是列表一部分的元素进行编号

当您无法修改标记时，使用 list-style-type:decimal 对无序列表进行编号

在具有 hasLayout 的有序列表上使用边距重置，并向列表项添加边距，以防止编号被裁剪

文本装饰

分别使用 text-decoration:none 和 list-style-type:none 从链接和列表中删除项目符号和下划线。

使用 text-decoration:line-through 代替已弃用的 <s> 和 <strike> 标签来删除文本

文本转换

使用 text-transform:capitalize 来大写标题和章节标题

文本缩进

对具有 display:inline-block 的元素使用 text-indent: 0 来避免继承和 has Layout 问题，因为 IE6 会裁剪由于负文本缩进值而移出容器的文本

对块级元素使用 text-indent 和 text-align 来影响其子元素，并在子元素本身使用 vertical-align

使用负值作为文本缩进，为悬挂标点符号创建缩进

在 Webkit 中使用文本缩进重新定位内联块，但如果需要跨浏览器兼容性，请使用水平边距

文本溢出

使用 text-overflow 在具有可见溢出的固定宽度/高度容器内截断文本

空白

对每个字母使用 white-space:pre 并加上回车符，以显示垂直显示的文本

对于 Firefox 2，使用 white-space: -moz-pre-wrap;，对于 IE6/7，使用 word-wrap: break-word; 和 white-space:pre;，对于 Safari 2，使用 pre 标签，对于 Opera、Safari 3 和 Firefox 3，使用 white-space: pre-wrap，强制对预定义文本进行换行

对具有单个回车符或其实体等价物（）的跨度使用 white-space: pre;，而不是两个 br 标签，以在两个内联句子之间添加空格。使用条件注释插入另一个跨度，该跨度在具有预定义间距的段落之前的段落周围具有 word-wrap:pre 规则，以在 IE6/7 中实现一致的显示

单词换行

使用边距和 标签（或其等价物）来控制列表项和标题的换行和垂直对齐，这些列表项和标题具有很长的不间断字符串，当 overflow:hidden 不是选项时

在条件注释 <![if (!IE)]> <![endif]> 中使用 标签或其实体等价物，以插入条件回车符，如果需要，该回车符将在放置标签的位置换行长单词。在 CSS 中使用 wbr:after { content: "0200B" } 在 Opera 和 Safari 中插入等效的 HTML 实体（它们不识别 标签），以便在这些浏览器中产生效果。如果 Firefox 2、Safari 2 和 Opera 9 不受支持，请使用 word-wrap:break-word。

伪元素

使用 p:first-letter 设置较大的字体，并为段落创建文学风格的下沉式首字母效果

使用 a:first-line 设置特定行高以包装链接

每个选择器只能有一个伪元素，因此 :first-letter 和 :first-line 不能一起使用

在 IE6 和 IE7 中，伪元素必须后跟空格才能正确解析，因此请相应地格式化样式表，以避免出现类似这样的神秘错误

P:first-letter{ color: blue; } /* Fails due to the lack of whitespace */

Succeed - P:first-letter { color: blue; } /* Note the added space */

在 IE6 和 IE7 中，伪元素必须位于选择器的末尾才能正确解析，因此请确保将 :first-line 或 :first-letter 放置在任何 :hover、:focus 或 :first-child 伪类之后，如下所示

P:first-letter:hover { color: blue; } /* Fails due to the lack of whitespace */

P:hover:first-letter { color: blue; } /* Note the ordering */

生成内容

使用 CSS3 选择器、生成内容和 Unicode 值，在引用中动态地用引号将内容包围起来

 blockquote &gt; *:first-child:before { content:&quot;\201C&quot;; }
 blockquote &gt; *:last-child:after { content:&quot;\201D&quot;; }

不透明度

在 Firefox 3 Mac 中，对文本设置不透明度会导致文本显示混乱，而在 Firefox 2 Mac 中，设置不透明度的文本对比度会降低

Unicode方向

使用 unicode-bidi:bidi-override; 和 direction:rtl; 来创建左手滚动条

垂直文本

使用 writing-mode 属性，其值为 tb-rl，以顺时针旋转文本 90 度，并在 IE 中将其右对齐，并在标准浏览器中使用 transform 属性，其值为 rotate(90deg)

使用 widows 和 orphans 属性分别设置在 CSS 中生成分页符时在页面顶部和底部显示的最小文本行数