網(wǎng)頁設(shè)計與制作案例教程（HTML5+CSS3+JavaScript）（微課版）（第2版） 課件 案例5知識點03：CSS常用文本屬性

我們畢業(yè)啦其實是答辯的標(biāo)題地方CSS常用文本屬性為了控制文本顯示的樣式，我們可以使用哪些CSS屬性呢?CSS常用文本屬性CSS常用文本屬性，如表所示。CSS常用文本屬性屬性說明font-family設(shè)置字體font-size設(shè)置字號font-weight設(shè)置字體的粗細(xì)font-style設(shè)置字體的傾斜@font-face設(shè)置服務(wù)器端字體，是CSS3新增屬性text-decoration設(shè)置文本是否添加下畫線、刪除線等color設(shè)置文本顏色text-align設(shè)置文本的水平對齊方式text-indent設(shè)置段落的首行縮進(jìn)line-height設(shè)置行高text-shadow設(shè)置文字的陰影效果，是CSS3新增屬性text-overflow設(shè)置元素內(nèi)溢出文本的處理方法，是CSS3新增屬性font-familyCSS常用文本屬性用于設(shè)置字體。網(wǎng)頁中常用的字體有宋體、微軟雅黑、黑體等。例如：

p{font-family:"微軟雅黑";}可以同時指定多個字體，中間以逗號隔開，表示如果瀏覽器不支持第一個字體，則會嘗試下一個，直到找到合適的字體。例如：

body{font-family:"微軟雅黑","宋體","黑體";}font-familyCSS常用文本屬性注意（1）各種字體名必須使用英文狀態(tài)下的逗號隔開。（2）中文字體名需要加英文狀態(tài)下的引號，英文字體名一般不需要加引號。當(dāng)需要設(shè)置英文字體時，英文字體名必須位于中文字體名之前。（3）如果字體名中包含空格、#、$等符號，則該字體必須加英文狀態(tài)下的單引號或雙引號，例如：p{font-family:"TimesNewRoman";}（4）盡量使用系統(tǒng)默認(rèn)字體，以保證在任何用戶的瀏覽器中都能正確顯示。font-sizeCSS常用文本屬性注意適用于顯示網(wǎng)頁正文的文字大小一般為12px左右。對于標(biāo)題或其他需要強調(diào)的地方可以適當(dāng)設(shè)置較大的字。頁腳和輔助信息可以用小一些的字。用于設(shè)置文字大小，一般以像素（px）為單位。例如：

p{font-size:12px;}font-weightCSS常用文本屬性用于定義字體的粗細(xì)。其常用的屬性值為normal和bold，分別表示正常顯示和粗體顯示。例如：p{font-weight:bold;}/*設(shè)置段落文本為粗體顯示*/h2{font-weight:normal;}/*設(shè)置標(biāo)題文本為正常顯示*/font-styleCSS常用文本屬性用于定義字體風(fēng)格，如設(shè)置標(biāo)準(zhǔn)、斜體或傾斜的字體樣式。例如：p{font-style:italic;}/*設(shè)置段落文本為斜體顯示*/h2{font-style:oblique;}/*設(shè)置標(biāo)題文本為傾斜顯示*/其可用屬性值如下。（1）normal：默認(rèn)值，瀏覽器會顯示標(biāo)準(zhǔn)的字體樣式。（2）italic：瀏覽器會顯示斜體的字體樣式。（3）oblique：瀏覽器會顯示傾斜的字體樣式。@font-faceCSS常用文本屬性CSS3新增屬性，用于定義服務(wù)器端字體。通過該屬性，設(shè)計人員可以在網(wǎng)頁中使用任何字體，而不管用戶計算機是否安裝這些字體。定義服務(wù)器端字體的基本語法格式如下。@font-face{font-family:字體名稱;src:字體文件路徑;}用于指定服務(wù)器端字體的名稱,該名稱由設(shè)計人員自定義用于指定相應(yīng)字體文件的路徑@font-faceCSS常用文本屬性使用服務(wù)器端字體的步驟如下:（1）下載字體，并存儲到網(wǎng)站相應(yīng)的文件夾中。（2）使用@font-face屬性定義服務(wù)器端字體。（3）對網(wǎng)頁中的元素應(yīng)用font-family樣式。text-decorationCSS常用文本屬性用于設(shè)置文本的下畫線、上畫線、刪除線等裝飾效果。其可用屬性值如下：（1）none：沒有裝飾（正常文本默認(rèn)值）。（2）underline：下畫線。（3）overline：上畫線。（4）line-through：刪除線。例如：a{text-decoration:none;}/*設(shè)置超鏈接文字不顯示下畫線*/a:hover{text-decoration:underline;}/*設(shè)置鼠標(biāo)懸停在超鏈接文字上時顯示下畫線*/colorCSS常用文本屬性用于定義文本的顏色，常用的表示方式有以下4種。（1）以預(yù)定義的顏色值表示，有black、olive、teal、red、green、blue、maroon、navy、gray、lime、fuchsia、white、purple、silver、yellow、aqua等。（2）以十六進(jìn)制數(shù)表示。采用#RRGGBB的形式，RR表示紅色的分量值，GG表示綠色的分量值，BB表示藍(lán)色的分量值，每組分量值的取值范圍為00～FF，如#FF0000、#FF6600、#29D794等。以十六進(jìn)制數(shù)表示是最常用的定義顏色的方式。如果每組十六進(jìn)制數(shù)的兩位數(shù)相同，則可以每組用一位數(shù)表示。例如，#FF0000可以表示為#F00。colorCSS常用文本屬性（3）以rgb函數(shù)表示。例如，紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。例如，下面的3行代碼都設(shè)置標(biāo)題顏色為紅色。h1{color:#f00;}h2{color:red;}h3{color:rgb(255,0,0);}colorCSS常用文本屬性（4）以rgba函數(shù)表示。rgba函數(shù)是在rgb函數(shù)的基礎(chǔ)上增加了控制alpha不透明度的參數(shù)，不透明度的取值范圍為0～1。例如：h3{color:rgba(255,0,0,0.5);}表示h3標(biāo)題文字采用半透明的紅色。text-alignCSS常用文本屬性用于設(shè)置文本內(nèi)容的水平對齊方式。其可用屬性值如下：（1）left：左對齊（默認(rèn)值）。（2）right：右對齊。（3）center：居中對齊。（4）justify：兩端對齊。例如：h1{text-align:center;}text-indentCSS常用文本屬性用于設(shè)置首行文本的縮進(jìn)，其屬性值可為不同單位的數(shù)值，一般建議使用em（1em等于一個中文字符的寬度）作為設(shè)置單位。例如：p{text-indent:2em;}

/*

設(shè)置段落首行縮進(jìn)2個中文字符

*/line-heightCSS常用文本屬性用于控制行與行的垂直間距，也稱為行高。其屬性值一般以px為單位。例如：

p{line-height:25px;}

/*

設(shè)置行高為25px

*/text-shadow用于設(shè)置文本的陰影效果，其常用語法格式如下。選擇器{text-shadow:水平陰影距離

垂直陰影距離

模糊半徑

陰影顏色;}陰影距離可以是正值，也可以是負(fù)值，正、負(fù)值表示陰影的方向不同?；菊Z法格式如下選擇器{text-overflow:clip|ellipsis;}text-overflowCSS常用文本屬性用于設(shè)置元素內(nèi)文本溢出時如何處理。修剪元素內(nèi)溢出的文本，使溢出的文本不顯示，也不顯示省略標(biāo)記“…”。在元素文本末尾用省略標(biāo)記“…”標(biāo)示被修剪的文本。text-overflowCSS常用文本屬性例

5-3example03.htmltext-overflowCSS常用文本屬性使用text-overflow屬性，設(shè)置用省略標(biāo)記標(biāo)示