自印刷出版物誕生以來，排版就一直是平面設計的基礎。
同樣，排版在網頁設計中也扮演著重要角色。

1.CSS的基本排版技術

1.1 文本顏色

對應網頁而言，文本顏色也許是最基本的樣式之一。
默認情況下，瀏覽器把絕大部分文本渲染為黑色。

p {color: #3b4348; }

1.2 字體族

字體族（font-family）屬性的值是一個備選字體的列表，按優先級從左到右排列。

body {/* 列出包含空格的字體族名稱時，引號不是非加不可，但最好加上。*//* 規范中只要求與通用字體族重名的字體族要加引號，但同時也建議給包含非標準符號的名稱加引號 *//* 字體列表最后的serif叫作通用字體族，在這里充當沒有選擇的選擇 */font-family: 'Georgia Pro', Georgia, Times, 'Times New Roman', serif; }

Georgia是一種襯線字體。
襯線字體：“襯線”是字形筆畫末梢的裝飾性線條。
如果網頁中要顯示代碼，應該首選monospace字體族，也叫“等寬字體”，因為monospace的每個字符的寬度都一樣，不同行之間的字符可以完美對齊。

1.3 字型大小與行高

幾乎所有瀏覽器中font-size的默認大小都是16像素，除非用戶修改過偏好設置。

h3 {font-size: 1.314em; /* 21px */ }

em單位用于font-size屬性時，實際上是一個相應元素繼承的font-size縮放因子。
對于font-size屬性，可用百分比代替em。
rem是基于根元素的em大小縮放，也就是基于html元素的font-size縮放。
長度單位還有mm、cm、in和pt等絕對物理長度，這些主要是給打印樣式準備的。

1.4 行間距、對齊及行盒子的構造

如果行盒子中包含多個行高不一的行內盒子，那么這個行盒子的最終高度至少等于其中最高的行內盒子。
設置行高時，需要考慮當前字體大小。

body {line-height: 1.5; }

給line-height設置沒有單位的值1.5，意思是當前font-size的1.5倍。
也可以給line-height設置像素、百分比值或em值，但要注意body元素的所有子元素都會繼承line-height的計算值。
如果給line-height設置沒有單位的值，那么子元素繼承的是一個系數，永遠與自己的font-size成比例。

行內盒子也會受到verticaal-align屬性的影響，它的默認值是baseline，即子元素的基線與父元素的基線對齊。
如果行盒子中有一個元素使用vertical-align調整了位置，那么它可能會擴展行盒子的高度。

1.5 文本粗細

我們使用font-weight屬性來設置標題文本的粗細。
font-weight屬性的值可以使用關鍵字：normal、bold、bolder和lighter，也可以使用100的整數倍：100、200、300、··· 900。
默認值normal對應400，bold對應700，這兩個粗細值是最常用的。
如果某款字體缺少你想要的粗細變體，瀏覽器會盡量模擬加粗效果，但無論如何不能模擬變細效果。這種模擬的結果往往差強人意。

1.6 字體樣式

設置font-style:italic會從字型中選擇斜體顯示，前提是存在這個變體。如果不能存在，瀏覽器會通過傾斜字體來模擬，但結果同樣也不會太理想。

1.7 大小寫變換和小型大寫變體

使用text-transform屬性控制英文字母大小寫。

1.8 控制字母和單詞間距

通過word-spacing屬性來控制單詞間的距離,。它的值意味著在默認詞間距基礎上增加或減少一定的量。
通過letter-spacing屬性來控制字符間的距離。

2.版心寬度、律動和毛邊

行長對閱讀體驗有著重大影響。用排版的行話說，就是版心寬度。
將article元素的寬度設置為38em，并令其在頁面上居中。

article {max-width: 38em;margin: 0 auto; }

2.1 文本縮進與對齊

設置段首縮進。

p + p {text-indent: 1.25em; }

段落的右邊參差不齊，我們暫時先不管它。這種參差不齊的樣式在排版上也有術語，叫作“毛邊”。

居中顯示。

h1 {text-align: center;border-bottom: 1px solid #c8bc9d; }

給text-align屬性應用justify值，可以在單詞間平均分布間距，結果是左右兩端對齊，消除毛邊。

2.2 連字符

手工在HTML中插入一個表示連字符的實體­。只有當瀏覽器需要斷詞換行時才會顯示這個連字符。
使用hyphens屬性，讓瀏覽器幫我們插入連字符。

p { hyphens: auto; }

2.3 多欄文本

article {max-width: 70em;margin: 0 auto;columns: 20em; /* 在保證最小寬度20em的前提下，自動設置欄數 */column-gap: 1.5em; }

columns屬性是columns-count和column-width屬性的簡寫形式。
columns-count屬性表示最大欄數，column-width屬性表示最小欄寬。

h1 {column-span: all; /* 橫跨所有欄 */ }

在印刷設計中，律動關系的應用非常普遍，結果就是正文文本都會排進基線網格。

3.Web字體

使用Web字體需要考慮許可和侵權問題。
嵌入Web字體的關鍵是@font-face規則。

@font-face {font-family: Vollkorn;font-weight: bold;src:url('fonts/vollkorn/Vollkorn-Bold.woff') format('woff'); }

前面的@font-face塊聲明了在font-family值為Vollkorn且為粗體時應用該規則。之后提供了一個URL，供瀏覽器下載包含粗體字體的Web開放字體格式（WOFF，Web open font format）文件。
所有瀏覽器開發商都支持標準的WOFF格式。
為了解決舊版瀏覽器對字體格式支持的不一致問題，可以在@font-face規則中聲明多個src值。

@font-face規則可以接受幾個聲明，多數是可選的。

• font-family：必需，字體族的名稱
• src：必需，URL或URL列表，用于下載字體
• font-weight：可選的字體粗細
• font-style：可選的字體樣式

這些聲明是字體描述符（font descriptor），它們不會改變字體，它們的值只是為了告訴瀏覽器在什么情況下可以觸發使用這個特定的字體文件。
瀏覽器加載和選擇字體的原則：正確的font-family優先于正確的粗細值。

4.文本特效

4.1 合理使用文本陰影

CSS的text-shadow屬性可以用來給文本繪制陰影。
對于標題或短文本，陰影適合模擬凸版印刷或者噴涂效果。

h1 {text-shadow: -.2em .2em .2em #ccc; }

text-shadow需要指定相對于源文本x軸和y軸的偏移量、模糊距離和顏色值，由空格分隔。
除此之外，還可通過用逗號分隔來給文本添加多組陰影。多組陰影會按先后次序堆疊，先定義的在上，后定義的在下。
為同一段文本添加多組陰影可以模擬出壓印或浮雕的效果，方法就是在文本上方和下方加上偏暗或偏亮的陰影。
可以利用多組陰影創造出3D效果。
幾乎所有瀏覽器都支持text-shadow屬性。對于支持它的瀏覽器而言，由于繪制陰影開銷比較大，請不要濫用。

參考資料：

• 《精通CSS》— [英] 安迪·巴德、[瑞典] 埃米爾·比約克隆德

轉載于:https://www.cnblogs.com/gzhjj/p/10898814.html

總結

以上是生活随笔為你收集整理的CSS网页排版的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。