層疊樣式表/排版
顏色
當您重置連結的:link/預設顏色時，始終重置:visited顏色，以確保 IE 和符合標準的瀏覽器之間的一致行為
使用三個字元樣式作為十六進位制顏色程式碼的簡寫，其中包含重複的模式（#FC0 = #FFCC00；#AAA = #AAAAAA）
行高
行高和字型大小之間的差值稱為行間距
基線是一條看不見的線，所有型別字元都坐落在該線上
下沉字元是小寫字母，它們懸掛在基線下方，包括 j、g、y 和 p。
基線偏移涉及相對於基線上下移動字元，以將實體、專案符號、括號、數字和其他基於字型的圖形與字母對齊
使用相對定位和微小的頂部和底部移動來使用 CSS 實現基線偏移
（字型大小 + 垂直填充 + 垂直邊距）/ 行高對於每個元素必須是基線數字的倍數
（字型大小 + 垂直填充 + 垂直邊距）* 行高為您提供了每行文字的總高度
IE6 中的內聯替換元素（img、object、select 等）的行間距會將該行的半行間距與前一行和後一行的半行間距摺疊在一起。為了解決這個問題，請為替換元素提供等於其高度與行高之差一半的頂部和底部邊距
內聯文字需要相同的字型大小、行高、垂直對齊、填充、邊框、邊距和位置值才能在所有瀏覽器中一致地對齊
使用行高來模擬高度，並使用填充來模擬內聯元素的寬度/2
為段落標籤全域性設定寬鬆的底部邊距，以建立一致且可維護的行間距標準
將垂直邊距設定為全域性行高，以保持具有標準大小字型的文字的垂直對齊。對於等於行高的文字，將垂直邊距和行高設定為文字高度的 100%
在一行中使用多種字型，例如 <em>Hi</em><string>!</strong> 來覆蓋行高並將其重置為相對於最大字型大小
為容器 div 設定統一的左右填充，以建立一致且可維護的間距標準
為列表項和引用的文字設定更寬的左側邊距，以方便懸掛標點符號
將行高指定為與框的高度相同，以垂直對齊文字
如果行高指定為浮點數而不是固定單位，則子元素的繼承行高將是子元素的字型大小乘以該數字
如果行高指定為相對單位，則繼承的行高將與父元素相同
使用與背景顏色匹配的字型顏色，並使用大於行高的字型大小，以保持與頁面流不匹配的文字的垂直一致性
字型大小
字型大小和行框之間的頂部和底部邊距是半行間距，因此在 18px 行上 12px 的字型大小將在文字和下一行之間在頂部和底部留出 3 畫素的空間
將元素的字型大小除以其容器的字型大小，將其轉換為 em。乘以 100 將其轉換為百分比
將合成佈局的寬度除以預設瀏覽器字型大小 16px，即可獲得以 em 為單位的最小或最大寬度。乘以 100 將其轉換為百分比。
為所有字型使用百分比，以允許瀏覽器可選擇的調整大小
在 IE7 中設定邊距、字母間距或文字間距時，使用具有所需字型大小的包裝器，因為父元素的字型大小用於計算相對屬性值，而不是元素本身的字型大小
字體系列
永遠不要在字體系列列表中使用回車符，因為在 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 中實現一致的顯示
單詞換行
使用邊距和 <wbr> 標籤（或其等價物）來控制列表項和標題的換行和垂直對齊，這些列表項和標題具有很長的不間斷字串，當 overflow:hidden 不是選項時
在條件註釋 <![if (!IE)]> <![endif]> 中使用 <wbr> 標籤或其實體等價物，以插入條件回車符，如果需要，該回車符將在放置標籤的位置換行長單詞。在 CSS 中使用 wbr:after { content: "0200B" } 在 Opera 和 Safari 中插入等效的 HTML 實體（它們不識別 <wbr> 標籤），以便在這些瀏覽器中產生效果。如果 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 > *:first-child:before { content:"\201C"; }
blockquote > *:last-child:after { content:"\201D"; }
不透明度
在 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 中生成分頁符時在頁面頂部和底部顯示的最小文字行數