CSS網頁排版

2022-09-06 16:12:14 字數 3409 閱讀 6610

自印刷出版物誕生以來,排版就一直是平面設計的基礎。

同樣,排版在網頁設計中也扮演著重要角色。

對應網頁而言,文字顏色也許是最基本的樣式之一。

預設情況下,瀏覽器把絕大部分文字渲染為黑色。

p
字型族(font-family)屬性的值是乙個備選字型的列表,按優先順序從左到右排列。

body
georgia是一種襯線字型。

襯線字型:「襯線」是字形筆畫末梢的裝飾性線條。

如果網頁中要顯示**,應該首選monospace字型族,也叫「等寬字型」,因為monospace的每個字元的寬度都一樣,不同行之間的字元可以完美對齊。

幾乎所有瀏覽器中font-size的預設大小都是16畫素,除非使用者修改過偏好設定。

h3
em單位用於font-size屬性時,實際上是乙個相應元素繼承的font-size縮放因子。

對於font-size屬性,可用百分比代替em

rem是基於根元素的em大小縮放,也就是基於html元素的font-size縮放。

長度單位還有mm、cm、in和pt等絕對物理長度,這些主要是給列印樣式準備的。

如果行盒子中包含多個行高不一的行內盒子,那麼這個行盒子的最終高度至少等於其中最高的行內盒子。

設定行高時,需要考慮當前字型大小。

body
line-height設定沒有單位的值1.5,意思是當前font-size的1.5倍。

也可以給line-height設定畫素、百分比值或em值,但要注意body元素的所有子元素都會繼承line-height的計算值。

如果給line-height設定沒有單位的值,那麼子元素繼承的是乙個係數,永遠與自己的font-size成比例。

行內盒子也會受到verticaal-align屬性的影響,它的預設值是baseline,即子元素的基線與父元素的基線對齊。

如果行盒子中有乙個元素使用vertical-align調整了位置,那麼它可能會擴充套件行盒子的高度。

我們使用font-weight屬性來設定標題文字的粗細。

font-weight屬性的值可以使用關鍵字:normalboldbolderlighter,也可以使用100的整數倍:100、200、300、··· 900。

預設值normal對應400,bold對應700,這兩個粗細值是最常用的。

如果某款字型缺少你想要的粗細變體,瀏覽器會盡量模擬加粗效果,但無論如何不能模擬變細效果。這種模擬的結果往往差強人意。

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

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

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

通過letter-spacing屬性來控制字元間的距離。

行長對閱讀體驗有著重大影響。用排版的行話說,就是版心寬度。

article元素的寬度設定為38em,並令其在頁面上居中。

article
設定段首縮排。

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

居中顯示。

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

手工在html中插入乙個表示連字元的實體­。只有當瀏覽器需要斷詞換行時才會顯示這個連字元。

使用hyphens屬性,讓瀏覽器幫我們插入連字元。

p
article
columns屬性是columns-countcolumn-width屬性的簡寫形式。

columns-count屬性表示最大欄數,column-width屬性表示最小欄寬。

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

使用web字型需要考慮許可和侵權問題。

嵌入web字型的關鍵是@font-face規則。

@font-face
@font-face規則可以接受幾個宣告,多數是可選的。

這些宣告是字型描述符(font descriptor),它們不會改變字型,它們的值只是為了告訴瀏覽器在什麼情況下可以觸發使用這個特定的字型檔案。

瀏覽器載入和選擇字型的原則:正確的font-family優先於正確的粗細值。

css的text-shadow屬性可以用來給文字繪製陰影。

對於標題或短文本,陰影適合模擬凸版印刷或者噴塗效果。

h1
text-shadow需要指定相對於源文字x軸和y軸的偏移量、模糊距離和顏色值,由空格分隔。

除此之外,還可通過用逗號分隔來給文字新增多組陰影。多組陰影會按先後次序堆疊,先定義的在上,後定義的在下。

為同一段文字新增多組陰影可以模擬出壓印或浮雕的效果,方法就是在文字上方和下方加上偏暗或偏亮的陰影。

可以利用多組陰影創造出3d效果。

幾乎所有瀏覽器都支援text-shadow屬性。對於支援它的瀏覽器而言,由於繪製陰影開銷比較大,請不要濫用。

網頁排版 5個CSS基礎

1.首行縮排 你知道的,從小學,老師就教我們,段落的開頭應該空兩格。而你使用word的時候,也有首行縮排這個功能,但在html中你的空格鍵好像起不了作用了。當然,你可以用 來代替乙個空格,但這不是理想的方式,用css吧,簡單,有效 你的內容 這樣的話,這個有style text indent 2em...

網頁css樣式之文字排版知識梳要

1 font size屬性重要設定字型大小 屬性值有 值描述 xx small x small small medium 預設值large x large xx large smaller 設定比父元素更小的尺寸 larger 設定比父元素更大的尺寸 length 設定為乙個固定的值 基於父元素的乙...

CSS網頁布局中文排版的9則技巧

css網頁布局中文排版有別於國外所介紹的英文排版,由於漢字的特殊性,所以有一些地方是需要大家注意的。今天webjx.com的這個文章或許對大家對排版的控制有所幫助。一 如何設定文字字型 顏色 大小 使用font font style設定斜體,比如font style italic font weig...