CSS基礎教學(3)--文字大小

了解了一些 CSS 的基本語法後, 我們馬上來介紹 CSS 的各種屬性, 讓大家可以體驗一下 CSS 的威力
本篇先來介紹一下設定文字大小的 CSS 屬性

font-size:字的大小;

這個屬性用來設定字的大小, 屬性值可以用任何一種 CSS 所支援的長度單位, 例如 pt, cm 等, 如下例

<DIV>一般文字大小(12 pt)</DIV>
<DIV style="font-size:18pt">
  18 pt 文字大小
  <DIV>這裡也會是 18 pt 文字大小</DIV>
  <DIV style="font-size:200%;">200 % 文字大小</DIV>
  <DIV style="font-size:2em;">2 em 文字大小</DIV>
  <DIV style="font-size:1ex">1 ex 文字大小</DIV>
  <DIV style="font-size:2pc">2 pc 文字大小</DIV>
  <DIV style="font-size:24px">24 px 文字大小</DIV>
  <DIV style="font-size:3mm">3 mm 文字大小</DIV>
  <DIV style="font-size:1cm">1 cm 文字大小</DIV>
  <DIV style="font-size:1in">1 in 文字大小</DIV>
</DIV>

一般若不特別指定文字大小, 則預設是 12pt, 但若上層(不論幾層)有指定大小時, 則會繼承上層標籤的文字大小設定, 所以第 4 行中的文字也會是 18 pt
不過若有指定文字大小, 則會以它本身設定的為準, 其中, 若是設定的長度單位為 %, em, ex, 則會以上層標籤的文字大小為基準來做相對值的計算, 其他長度單位, 則會直接以它本身設定的值來呈現

例如 5~7 行, 會跟上層標籤的文字大小有關
%：為上層文字大小的百分之幾, 設 100% 時, 會跟上層文字大小相同, 所以第 5 行 200% 的結果會是相當於 36pt 的大小
em：為上層文字大小的幾倍, 設 1em 時, 會跟上層文字大小相同, 所以第 6 行 2 em 的結果也是相當於 36pt 的大小
ex：為上層文字中小寫 x 的高度的幾倍, x 的高度通常是文字大小一半, 所以設 2 em 時, 會跟上層文字大小相同, 所以第 7 行 1 ex 的結果相當於只有 9pt 的大小

而 8~12 行則是跟上層標籤文字大小無關
pc：1pc = 12pt, 所以第 8 行 2pc 相當於 24pt
px：1px 相當於螢幕上一個亮點, 所以第 9 行 24 px 即高度有 24 個亮點
其他則是依印刷出的大小為準

雖然 HTML 中也有 FONT 標籤可以設定文字大小, 但只能設 7 個等級的大小, 而 CSS 則是能設定多種長度單位, 且無大小限制, 讓我們在排版或美化網頁更加的便利

--gs--
{CSS 基礎教學}{CSS 長度單位}{HTML基礎教學 FONT}

沒找到你要的東西嗎？歡迎留下你的問題！若是我知道的，我會盡力的回答。