css的精髓是布局，而不是樣式——之三

第三天 文字相關樣式

1）容易混淆或遺忘的單位

比較有意思的現象：國外的設計師們喜歡用em、百分比、關鍵字（small、xx-small之類）等設定網頁字型大小，國內喜歡用px和pt（注意，如果網頁都用em作為單位，ie6會出現bug，可以指定任意一個百分比解決）

瀏覽器預設的字型大小是16px

在中文window系統中，ie瀏覽器預設中文字型是宋體或新宋體，英文為Arial，其它瀏覽器則未知（新的瀏覽器都可以使用者指定頁面中跌字型，即字型可配置），定義font-family時，盡量備用幾個字型，因為使用者作業系統中未必裝有你定義的字型，如：font-family:“宋體”,Arial,Helvetica,sans-serif;

xx-small(=9px),x-small(=11px),medium(-16px),large(=19px),x-large(=23px),xx-large(=27px)

1em (= 100%),  0.5em (= 50%)

2em或者200% 單位是指2倍於父級元素的字型大小，如果父元素沒有字型大小，則自動向上繼承祖先元素的字型大小。

font: italicsmall-caps bold 12px/1.6em 宋體      含義為：文本為斜體、大寫、加粗顯示，字型大小為12像素，行高為字型大小的1.6倍，字型為宋體。

2）serif和sans-serif

2-1）serif：襯線字型，比較常見的襯線字型有 Georgia, Garamond, Times New Roman, 中文的宋體等等。襯線字型的可讀性非常好，所以它應用的最多的地方也正是出版物或者印刷品的本文內容等以大段文字作為表現形式的作品上

2-2）sans-serif：非襯線字型（sans為“法語”中沒有的意思），常見的無i襯線字型有 Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, 中文的幼圓、隸書等等，無襯線字型比較圓滑，線條一般粗細均勻。比較適合用作藝術字、標題等。因為無襯線字型通常粗細比較均勻，所以在小字型顯示的時候，可讀性會降低，容易引起視覺疲勞。

具體襯線字型和非襯線字型的區別見：點擊開啟連結

 

 

3）布局對齊

3-1）在table中比較容易，通過在儲存格中設定align的“left,right,center,justify”對齊，或者valign的"top,bottom,middle,baseline”等

3-2）布局置中

text-align在做布局置中時，常常會發現文本置中了，但是圖片等不置中現象，ie沒有此問題。解決此問題常常配合margin設定auto屬性解決，如下：

body{ text-align:center;}

div{margin-left:auto;margin-right:auto;width:60%}

3-3）垂直布局

vertical-align僅能作用於儲存格或者映像顯示而定義的，所有用於文本對齊時，需要制定display:table-cell,但是ie並不支援table-cell，因此可以利用line-height和height解決ie下面文本垂直對齊問題

a)firefox等文本對齊到中間方法：

div{vertical-align:bottom;display:table-cell}

b)相容ie的解決方案:

div{line-height:6em;height:6em}

4) 什麼樣的行高最適合閱讀

瀏覽器預設是120%，最適合的是160%~180%

在做距離展開時，line-height常常在firefox中無效，因此建議用更為安全的padding和margin

5）字型顏色

16進位簡寫方式即為16進位中一種嚴責一致時的簡寫，例如#f00,等於#ff0000;#112233,等於#123

css3中除了十六進位、簡寫16進位、英文名、RGB、 百分比RGB以外，還增加了3種描述顏色的：

a）RGBA，即在RGB基礎上增加了Alpha通道，用於透明

b）HSL：H:色相，S：飽和度，L：亮度，color：hsl(0,100%,100%)表示紅色

c）HSLA：即在HSL基礎上增加Alpha通道

PS: 置中布局較為常用，也較為重要。大家常見了藉助父類div的relative屬性、父標籤left和top設定為50%，然後用負margin等都可以實現。大家可以查閱相關資料