1. 設置字體
在CSS中字體通過font-family屬性來設置。
font-family: Verdana, Arial, Helvetica, sans-serif;
上面的字體設置告訴瀏覽器首先在訪問者的計算機中尋找Verdana字體。如果該訪問者的計算機中沒有Verdana字體,則尋找Arial字體。若沒有Arial字體,再依次尋找Helvetica、sans-serif字體。如果這4種字體都沒有,則使用瀏覽器的默認字體顯示。
font-family屬性可以同時聲明多種字體,字體之間用逗號分隔開。另外一些字體的名稱中間會出現空格,如Times New Roman,這時需要用雙引號將其引起來,使瀏覽器知道這是一種字體的名稱。
2. 文字的大小
CSS通過font-size屬性來設置文字的大小。
font-size: 12px;
長度單位:
◊ px 表示在瀏覽器上1個像素的大小;
◊ em 1em表示在其父元素中字母m的標准寬度;
◊ ex 1ex表示字母x的標准高度。
3. 行高
CSS中通過line-height屬性設置。在CSS中line-height的值表示兩行文字之間基線的距離,即每行文字的高度。如果給文字加上下划線,下划線的位置就是文字的基線。
line-height: 30px;
除了可以使用px等作為行高的單位,也可以不加任何單位,此時行高應該寫成與字體大小的比值。
line-height: 1.5;
CSS中字體、大小和行高的組合:
font: 12px/18px Verdana, Arial, Helvetica, sans-serif;
font: 12px/1.5 Verdana, Arial, Helvetica, sans-serif;
4. 文字顏色
color: blue;
color: #0000FF;
color: rgb(0,0,255);
color: rgb(0%,0%,100%);
5. 空白折行
white-space: nowrap;
6. CSS1定義的字體、顏色和文本屬性
屬性 | 類型 | 說明 |
---|---|---|
font-family | 字體 | 字體類型 |
font-style | 字體 | 字體樣式,包括:normal、italic(斜體)、oblique(傾斜) |
font-variant | 字體 | 字體大小寫,包括:normal、small-caps(小型的大寫字母字體) |
font-weight | 字體 | 字體粗細 |
font-size | 字體 | 字體大小 |
font | 字體(復合屬性) | 字體樣式,可以包含所有字體屬性的聲明值 |
color | 顏色 | 字體顏色 |
word-spacing | 文本 | 詞間距 |
letter-spacing | 文本 | 字符間距 |
text-decoration | 文本 | 文本修飾線,包括:none(默認值)、blink(閃爍)、underline(下划線)、line-through(中划線)、overline(上划線) |
vertical-align | 文本 | 文本垂直對齊方式,包括:auto、baseline、sub、supper、top、text-top、middle、bottom、text-bottom、length。 |
text-transform | 文本 | 文本大小寫,包括:none(默認值)、capitalize(首字母大寫)、uppercase(大寫)、lowercase(小寫) |
text-align | 文本 | 文本的水平對齊方式,包括:left、right、center、justify(兩端對齊) |
text-indent | 文本 | 首行縮進 |
line-height | 文本 | 行高 |
7. CSS2新增字體、顏色和文本屬性
屬性 | 類型 | 說明 |
---|---|---|
font-size-adjust | 字體 | 是否強制對文本使用同一尺寸 |
font-stretch | 字體 | 是否橫向拉伸變形字體 |
text-shadow | 文本 | 文本陰影效果 |
direction | 文本 | 文本流入的方向,包括:ltr(默認值,從左到右)、rtl(從右到左)、inherit(由繼承獲得) |
unicode-bidi | 文本 | 定義同一個頁面中存在不同方向讀進的文本顯示,與direction屬性一起使用 |
8. CSS3新增字體、顏色和文本屬性
屬性 | 類型 | 說明 |
---|---|---|
text-shadow | 文本 | 文本陰影或模糊效果 |
text-overflow | 文本 | 省略文本的處理方式 |
word-wrap | 文本 | 文本超過指定容器的邊界時是否斷開換行 |
示例
text-shadow: -0.1em 0.1em #CCCCCC;
text-shadow: -0.1em 0.1em 0.3em #CCCCCC;
text-shadow: -0.1em 0.1em #CCCCCC,
-0.1em 0.1em 0.3em #CCCCCC;
text-shadow屬性的第一個值表示水平偏移;第二個值表示垂直偏移,正值偏右或偏下,負值偏左或偏上;第三個值表示模糊半徑,可選;第四個值表示陰影是顏色,可選。
text-shadow屬性可以接受一個以逗號分隔的陰影效果列表,並應用到元素的文本上。
text-overflow: ellipsis;
text-overflow屬性值包括:clip | ellipsis | ellipsis-word。
clip:不顯示省略標記,只是簡單的裁切。
ellipsis:當對象內文本溢出時顯示省略標記,省略標記插入的位置是最后一個字符。
ellipsis-word:當對象內文本溢出時顯示省略標記,省略標記插入的位置是最后一個詞。
word-wrap: break-word;
word-wrap屬性值包括:normal | break-word。
normal:連續文本換行。
break-word:內容將在邊界內換行。