CSS基礎3——使用CSS格式化元素內容的字型

標籤：html   前端   css   字型   

1、CSS屬性單位：

(1)長度單位：包括絕對長度單位和相對長度單位

絕對長度單位包括：cm、mm、in、pt、pc等。絕對長度單位最好用於列印輸出裝置，在僅作為頻幕顯示時，絕對長度值並沒有什麼意義。

相對長度單位包括：px、em、ex等。相對長度指元素尺寸相對於瀏覽器的系統預設值來相應的縮放。em是相對於當前對象中文本M的字型尺寸大小。ex是相對於當前對象中文本x的字型尺寸大小。如果當前對行內文本額字型尺寸未被人為設定，則相對於瀏覽器預設字型尺寸。

px，em，百分比的轉換：16px = 1em = 100%    1px = 0.0625em = 6.25%

(2)顏色單位：

百分比表示，如color：rgb(50%,0,50%);

用0-255之間的整數值來設定，如color：rgb(128,0,127);

使用十六進位數組定義顏色，如color：#e1e1e1；

使用簡化的十六進位數定義顏色，如color：#fa1；等同於#ffaa11;

用顏色的英文，如black(黑色)，white(白色)等。

(3)URL單位：格式是在"url"後面緊跟一個括弧，括弧中是url的地址。

2、設定元素內容的字型

(1)設定字型名稱：font-family

可以設定如宋體，Arial等字型。要使用安全字型(如arial 、verdana、宋體等)，不能使用偏僻字型。可以同時制定多個字型，使用時用逗號分開，這樣設定好處在於，如果電腦裡沒有第一個字型，瀏覽器可以使用後面指定的字型。

(2)字型傾斜程度：font-style

屬性值包括 normal/italic/oblique

(3)字型的變體：font-variant

屬性值包括 normal / small-caps。使用small-caps屬性的元素的字型中的大寫字母看起來要比正常的大寫字母小一些。

(4)字重：font-weight

屬性值包括 normal / bold / bolder / lighter / 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900 。400相當於normal，700相當於bold,900是最重字型。 bolder 或 lighter 表示字型的字重比父元素高或低一級

(5)字型大小：font-size

屬性值包括：<絕對大小>(如12pt) / <相對大小>(如1.5em) / <百分比>(如150%)

(6)字型屬性的縮寫：font ， 屬性順序按照{font-style 、 font-variant 、 font-weight 、 font-size 、 font-family}，中間用空格分開。如 p{font:normal small-caps bold 120% 宋體；}

CSS基礎3——使用CSS格式化元素內容的字型