CSS設定字型和文字樣式
文字是網頁資訊傳遞的主要載體，雖然使用影象、動畫或視訊等多媒體資訊可以表達情意，但是文字所傳遞的資訊是最準確的，也是最豐富的。
網頁字型樣式包括型別、大小、顏色基本效果，另外還包括一些特殊的樣式，如字型粗細、下劃線、斜體、大小寫樣式等。
一、設定字型樣式
1.定義字型型別
CSS使用font-family屬性來定義字型型別，另外使用font屬性也可以定義字型型別。
font-family:name
name表示字型名稱，可指定多種字型，多個字型將按照優先順序排列，以逗號隔開。如果字型名稱包含空格，則應使用引號括起。
font是一個複合屬性，所謂符合屬性，是指該屬效能夠設定多種字型屬性，用法如下：
font:font-style || font-variant || font-weight || font-size || line-height || font-family
屬性值之間以空格分隔。font屬性至少應設定字型大小和字型型別，並且必須放在後面，否則無效。前面可以自由定義字型樣式、字型粗細、大小寫和行高。
body{
font-family:Arial,Helvetica,sans-serif;
}
p{
font:24px "隸書";
}拓展：
對於英文或其他西文字型來說，CSS提供了五類通用字型。所謂通用字型就是一種備用機制，即指定的所有字型都不可用時，能夠在使用者系統中找到一個類似字型進行替代顯示。五類通用字型說明如下：
serif:襯線字型
sans-serif:無襯線字型
cursive:草書，表現為斜字型、聯筆或其他草體的特徵
fantasy:奇異字型，主要是裝飾性的，但保持了字元的呈現效果，換句話就是藝術字
monospace:等寬字型，唯一標準就是所有的字型寬度都是一樣的
2.定義字型大小
CSS使用font-size屬性來定義字型大小，該屬性用法如下：
font-size:xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | length
其中xx-small(最小)、x-small(較小)、small(小)、medium(正常)、large(大)、x-large(較大)、xx-large(最大)表示絕對字型尺寸，這些特殊值將根據物件字型進行調整。
larger(增大)、smaller(減小)這對特殊值能夠根據父物件中的字型尺寸進行相對增大或者縮小處理，使用成比例的em單位進行計算。
lenght可以使百分數，或者浮點數字和單位識別符號組成的長度值，但不可以為負值。其百分比取值是基於父物件中字型的尺寸來計算，與em單位計算相同。
body{font-size:12px;} /*以畫素為單位設定字型大小*/
p{font-size:0.75em} /*以父輩字型大小為參考設定字型大小*/
div{font:9pt Arial} /*以點為單位設定字型大小*/<div id="content">框架
<div id="sub">子框架
<p>段落文字</p>
</div>
</div>body,div,p{
font-size:0.75em;
}3.定義字型顏色
CSS使用color屬性來定義字型顏色。
body{color:gray;} /*使用顏色名*/
p{color:#666666;} /*使用十六進位制*/
div{color:rgb(120,120,120);}
span{color:rgb(50%,50%,50%);}4.定義字型粗細
CSS使用font-weight屬性來定義字型粗細，該屬性用法如下：
font-weight:normal | bold | bolder | lighter |100 | 200 | 300 | 400 | 500 | 600 |700 | 800 | 900
其中normal關鍵字表示預設值，即正常的字型，相當於取值為400。bold關鍵字表示粗體，相當於取值為700，或者使用<b>標籤定義的字型效果。
5.定義斜體字型
CSS使用font-style屬性來定義字型斜體效果，該屬性用法如下：
font-style:normal | italic | oblique
其中normal表示預設值，即正常的字型，italic表示斜體，oblique表示傾斜的字型，Italic和oblique兩個取值只能在英文等西方文字中有效。
6.定義下劃線
CSS使用text-decoration屬性來定義字型下劃線效果，該屬性用法如下：
text-decoration:none || underline || blink || overline || line-throuth
其中normal表示預設值，即無修飾字體，blink表示閃爍效果，underline表示下劃線效果，line-through表示貫穿線效果，overline表示上劃線效果。
7.定義字型大小寫
CSS使用font-variant屬性來定義字型大小效果，該屬性用法如下：
font-variant:normal | small-caps
其中normal表示預設值，即正常的字型，small-caps表示小型的大寫字母字型。
CSS還定義了一個text-transform屬性，該屬性也能夠定義字型大小寫下過，不過該屬性主要定義單詞大小寫樣式，用法格式如下：
text-transform:none | capitalize | uppercase | lowercase
其中none表示預設值，無轉換髮生;capitalize表示每個單詞的第一個字母轉化成大寫，其餘無轉換髮生;uppercase表示將所有字母都轉換成大寫；lowercase表示將所有字母都轉換成小寫。
二、設定文字樣式
字型樣式主要涉及文字本身的效果，而文字樣式主要涉及多個文字的排版效果。所以CSS在命名屬性時，特意使用了font字首和text字首來區分兩類不同性質的屬性。
1.定義文字對齊
CSS使用text-align屬性來定義文字的水平對齊方式，該屬性的用法如下：
text-align:left | right | center | justify
該屬性取值包括四個：其中left是預設值，表示左對齊；right表示右對齊；center表示居中對齊；justify表示兩端對齊
例子：
.box1{ width:500px; line-height:20px; margin:10px auto; background-color:#cdd; text-align:justify}
.box2{ width:500px; line-height:20px; margin:10px auto; background-color:#cdd; text-align:left;}
.box3{ width:500px; line-height:20px; margin:10px auto; background-color:#cdd; text-align:center;}<div class="box1">There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really</div>
<div class="box2">There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really</div>
<div class="box3">There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really</div>
拓展：
text-align屬性只能夠設計文字的水平對齊方式，而對於塊狀元素的水平對齊還需要使用CSS的margin屬性。在標準化設計中，如果當塊狀元素左右邊界都被設定為自動式，則塊狀元素將居中顯示。
margin:10px 5px 15px 20px;
- 上外邊距是10px
- 右外邊距是5px
- 下外邊距是15px
- 左外邊距是20px
- 上外邊距是10px
- 右外邊距是5px
- 下外邊距是15px
- 上下外邊距10px
- 左右外邊距5px
- 四個外邊距都是10px
2.定義垂直對齊
在傳統佈局中，一般元素不支援垂直對齊效果，不過在表格中可以實現。例如，在下面的表格結構中使用td元素的valign屬性定義單元格內包含的物件垂直居中顯示。
<table border="1">
<tr>
<td valign="middle">垂直對齊</td>
</tr>
</table>vertical-align:auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length
vetical-align不支援塊狀元素對齊，只有當包含框顯示為單元格時才有效。
<div id="box">
<div id="sub_box"></div>
</div>#box{display:table-cell;
vertical-align:middle;
width:300px;
height:200px;
border:solid 1px red;
}
#sub_box{width:100px;
height:50px;
background:blue;
}
3.定義字距和詞距
CSS使用letter-spacing屬性來定義字距，使用word-spacing屬性來定義詞距。這兩個屬性的取值都是長度值，由浮點數和單位識別符號組成，預設值是normal，它表示預設間隔。
letter-spacing:1em;
word-spacing:1em;
4.定義行高
CSS使用line-height屬性定義行高，該屬性的用法如下：
line-height:normal | length
其中normal表示預設值,一般為1.2em,length表示百分數字,或者由浮點數字和單位識別符號組成的長度值,允許為負值。
line-height:1em; /*行高為一個字大小*/
line-height:2em; /*行高為兩個字大小*/
行高取值單位一般使用em或百分比，很少使用畫素，也不建議使用。
一般行高的最佳設定範圍為1.2~1.8em,遵循字型越大，行高越小的原則來定義段落的具體行高。
5.定義縮排
CSS使用text-indent屬性定義首行縮排，該屬性的用法如下：
text-align:lenght; length表示百比數字，或者浮點數字和單位識別符號組成的長度值，允許為負值。見識使用em，它表示一個字距，這樣可以比較精確的確定首行縮排效果。