文字的尺寸、字體、行距及顏色樣式標籤為font-size(尺寸)、font-family(字體)、line-height(行距)、color(顏色)。
font-size(尺寸)
font-size樣式用於設置文字大小,單位有px(像素)、 em(相對值,以父元素的大小為基準單位)、rem(相對值,以根元素的大小為基準單位)。
px的英文全稱是Pixels,中文名稱為像素,手機屏幕的解析度就是以像素為單位的,因此它是一個物理單位。使用px為單位的樣式會隨著顯示設備解析度的不同而發生大小變化。例如,font-size在PC網頁中被設置為16px,在手機端顯示該網頁時,文字會顯示的比較大,因為PC屏幕的解析度一般都大於手機屏幕的解析度。
em是一個相對單位,主要是相對於父元素的font-size。假設當前元素的父元素的font-size設置為16px,如果當前元素的font-size設置為1.2em,則當前元素的font-size實際值為16*1.2=19.2px;如果當前元素的font-size設置為0.65em,則當前元素的font-size實際值為16*0.65=10.4px。需要注意的是,如果當前元素以px為單位設置了font-size的值,則其它採用em單位的樣式,都會以當前font-size的值為基準單位。
rem同em一樣都是相對單位,區別是em以父元素的font-size為基準單位,rem以網頁根元素的font-size為基準單位,也就是瀏覽器的默認字體尺寸,瀏覽器的默認字體尺寸是16px。
下面的網頁文檔展示了font-size採用不同單位的應用。
在上面的網頁代碼中。城闕輔三秦語句的font-size被設置為1.2rem,rem以瀏覽器默認的字體尺寸為基準單位,因此其font-size的實際值為1.2 * 16 = 19.2px;與君離別意語句的font-size被設置為1.2em,em以父元素的字體尺寸為基準單位,該元素的父元素為body元素,因此其font-size的實際值為1.2*12=14.4px。瀏覽器顯示效果如下圖所示。
font-family(字體)
font-family用於設置文字採用何種字體進行顯示。使用該樣式設置字體時,建議使用作業系統常見的內置中文字體。Windows作業系統常見的內置中文字體有宋體(SimSun)、黑體(SimHei)、微軟雅黑(Microsoft Yahei)、楷體(KaiTi)、仿宋(FangSong)。其中,宋體是中文字體名稱,SimSun是英文字體名稱。在CSS樣式中,中文字體名稱和英文字體名稱都可以使用。下面的CSS樣式語句設置了文章標題使用黑體字體、文章正文使用宋體。
如果瀏覽器所在的作業系統沒有安裝CSS樣式設置的字體時,瀏覽器會使用作業系統的默認字體進行替換。
line-height(行距)
line-height樣式用於設置文欄位落的行距,line-height的單位有px、em、rem、百分比。百分比按照當前font-size的尺寸進行計算。下面的網頁文檔展示了line-height樣式的使用。
在上面的網頁代碼中。第一個div元素使用默認行距,默認行距與瀏覽器有關且與默認字體尺寸相關;第二個div元素使用設置的行距,單位為百分比,值為180%。需要注意的是,行距不是行間距,而是文字內容區域高度與行間距的和。下圖是瀏覽器的顯示效果。
color(顏色)
color樣式用於設置文字的顏色,顏色模式為RGB。顏色值為表示RGB顏色值的十六進位數值,也可以用rgb函數進行設置。
設置title樣式的顏色為紅色。
下面的HTML文檔展示了color樣式的使用方法。
在上面的網頁代碼中。城闕輔三秦語句被設置為紅色,顏色值為#00ff00;與君離別意語句使用rgb函數設置顏色值,傳入的三個參數分別為R的顏色值、G的顏色值和B的顏色值。下圖是瀏覽器顯示效果。