CSS美化網(wǎng)頁字體與段落第5章匯報人：***目錄CONTENTCSS字體樣式屬性CSS文本外觀屬性overflow屬性本章導(dǎo)讀制作網(wǎng)頁時，可以使用文本樣式標(biāo)記及屬性控制文本顯示樣式，但是這種方式煩瑣且不利于代碼的共享和移植，為此，CSS提供了相應(yīng)的文本樣式屬性，使用

CSS可以更輕松方便地控制文本樣式，美化網(wǎng)頁中的文字和段落，本章將對常用的文本屬性、文本外觀樣式屬性和

overflow屬性進(jìn)行詳細(xì)的介紹。第一節(jié)PART.01CSS字體樣式屬性為了更方便地控制網(wǎng)頁中的各種各樣的字體，CSS提供了一系列的字體樣式屬性，具體如下：1.font-size

：字號大小2.font-family

：字體3.font-weight

：字體粗細(xì)4.font-variant

：變體5.font-style

：風(fēng)格6.font

：綜合設(shè)置字體樣式1.font-size

：字號大小font-size屬性用于設(shè)置字號，該屬性的值可以使用相對長度單位，也可以使用絕對長度單位，具體見表5-1。表5-1CSS長度單位相對長度單位說明em相對于當(dāng)前對象內(nèi)文本的字體尺寸px像素，最常用，推薦使用絕對長度單位說明in英寸cm厘米mm毫米pt點1.font-size

：字號大小其中，相對長度單位比較常用，推薦使用像素單位

px，絕對長度單位使用較少。例如，將網(wǎng)頁中所有段落文本的字號大小設(shè)置為14px，可以使用如下

CSS代碼：p{font-size:14px;}2.font-family

：字體font-family屬性用于設(shè)置字體。網(wǎng)頁中常用的字體有宋體、微軟雅黑、黑體等，例如，將所有段落文本的字體設(shè)置為微軟雅黑，可以使用如下

CSS代碼：p{font-family:"微軟雅黑";}可以同時指定多個字體，中間以逗號隔開，如果瀏覽器不支持第一個字體，則會嘗試下一個，直到找到合適的字體，來看下面的例子：p{font-family:"微軟雅黑","宋體","黑體";}2.font-family

：字體當(dāng)使用上面的字體樣式時，會首先使用微軟雅黑，如果用戶計算機上沒有安裝該字體，則選擇宋體，如果宋體也沒有，則選擇黑體。如果指定的字體都沒有安裝，就會選擇瀏覽器默認(rèn)字體。2.font-family

：字體使用

font-family設(shè)置字體時，需要注意以下幾點：（1）各種字體之間必須使用英文狀態(tài)下逗號隔開。（2）中文字體需要加英文狀態(tài)下的引號，英文字體一般不需要加引號，當(dāng)需要同時設(shè)置英文字體和中文字體時，英文字體必須位于中文字體前，例如：p{font-family:Arial,"微軟雅黑","宋體","黑體";}（3）如果字體名包含空格、#、￥

等符號，則該字體必須加英文狀態(tài)下的單引號或雙引號，例如“font-family："TimesNewRoman"；”。（4）盡量使用系統(tǒng)默認(rèn)字體，保證在任何用戶的瀏覽器中都能正確顯示。3.font-weight

：字體粗細(xì)font-weight屬性用于定義字體的粗細(xì)，其可用屬性值見表5-2。在實際工作中，常用

font-weight的屬性為

normal和

bold，用來定義正常或加粗顯示的字體。表5-1CSS長度單位值說明normal默認(rèn)值，定義標(biāo)準(zhǔn)的字符bold定義粗體字符bolder定義更粗的字符lighter定義更細(xì)的字符100～900（100的整數(shù)倍）定義由細(xì)到粗的字符，其中400等同于

normal，700等同于

bold，值越大字體越粗4.font-variant

：變體font-variant屬性用于設(shè)置變體（字體變化），一般用于定義小型大寫字母，僅對英文字符有效。其可用屬性值如下：normal

：默認(rèn)值，瀏覽器會顯示標(biāo)準(zhǔn)的字體。small-caps：瀏覽器會顯示小型大寫的字體，即所有小寫字母均會轉(zhuǎn)換為大寫，但是所有使用小型大寫字體的字母與其余文本相比其字體尺寸更小。5.font-style

：風(fēng)格font-style屬性用于定義字體風(fēng)格，如設(shè)置斜體、傾斜或正常字體，其可用屬性值如下：normal

：默認(rèn)值，瀏覽器會顯示標(biāo)準(zhǔn)的字體樣式。italic

：瀏覽器會顯示傾斜的字體樣式。oblique

：瀏覽器會顯示傾斜的字體樣式。其中

italic和

oblique都用于定義斜體，兩者在顯示效果上并沒有本質(zhì)區(qū)別，但實際工作中常用

italic。6.font

：綜合設(shè)置字體樣式font屬性用于對字體樣式進(jìn)行綜合設(shè)置，其基本語法格式如下：選擇器{font:font-stylefont-variantfont-weightfont-size/line-heightfont-family;}使用

font屬性時，必須按上面語法格式中的順序書寫，各個屬性以空格隔開。其中，line-height指的是行高，在后面將具體介紹。例如：p{

font-family:Arial,"宋體";

font-size:30px;6.font

：綜合設(shè)置字體樣式

font-style:italic;

font-weight:bold;

font-variant:small-caps;

line-height:40px;}6.font

：綜合設(shè)置字體樣式等價于：p{

font:italicsmall-capsbold30px/40pxArial,"宋體";}其中，不需要設(shè)置的屬性可以省略（默認(rèn)值），但必須保留

font-size和

font-family屬性，否則

font屬性將不起作用。第二節(jié)PART.02CSS文本外觀屬性使用

HTML可以對文本外觀進(jìn)行簡單的控制，但是效果并不理想，為此

CSS提供了一系列的文本外觀樣式屬性，具體如下：1.color

：文本顏色

2.letter-spacing

：字間距3.word-spacing

：單詞間距

4.line-height

：行間距5.text-transform

：文本轉(zhuǎn)換

6.text-decoration

：文本修飾7.text-align

：水平對齊方式

8.text-indent

：首行縮進(jìn)9.white-space

：空白符處理

10.text-overflow

：文本溢出11.text-shadow

：文本陰影1.color

：文本顏色color屬性用于定義文本的顏色，其取值方式有以下3種：（1）預(yù)定義的顏色值：如

red、green、blue等。（2）十六進(jìn)制：如

#FF0000、#FF6600、#eeeeee等，由

#開頭的6位十六進(jìn)制數(shù)值組成，每2位為一個顏色值，分別表示紅、綠、藍(lán)3個分量，當(dāng)3個分量的2位十六進(jìn)制數(shù)都各自相同時，可使用縮寫形式，如#FF6600，縮寫為

#F60。在實際工作中，十六進(jìn)制是常用的定義顏色的方式。（3）RGB代碼，如紅色可以表示為

rgb（255，0，0）或

rgb（100%，0%，0%）。2.letter-spacing

：字間距l(xiāng)etter-spacing屬性用于定義字間距，所謂字間距是字符與字符之間的空白，其屬性值為不同單位的數(shù)值，允許使用負(fù)值，默認(rèn)值為normal，見表5-3。表5-3letter-spacing屬性屬性值說明normal正常絕對數(shù)值如12px字體高如2em3.word-spacing

：單詞間距word-spacing屬性用于定義英文單詞之間的間距，對中文字符無效，和

letter-spacing一樣，其屬性值可為不同單位的數(shù)值，允許使用負(fù)值，默認(rèn)值為

normal。4.line-height

：行間距l(xiāng)ine-height屬性用于設(shè)置行間距，所謂行間距就是行與行之間的距離，即字符的垂直間距，一般稱為行高，如圖5-2所示，線框的高度即為這段文本的行高。line-height常用的值類型有3種，分別為像素

px、相對值

em和百分比%，實際中常用像素

px和相對值

em。圖5-2行高5.text-transform

：文本轉(zhuǎn)換text-transform屬性用于轉(zhuǎn)換英文字符的大小寫，其屬性如下：none

：不轉(zhuǎn)換（默認(rèn)值）。capitalize

：首字母大寫。uppercase

：全部字符轉(zhuǎn)換為大寫。lowercase

：全部字符轉(zhuǎn)換為小寫。6.text-decoration

：文本修飾text-decoration屬性用于設(shè)置文本的下畫線、上畫線、刪除線等效果，其可用屬性值如下：none

：沒有修飾（默認(rèn)值）。underline

：下畫線。overline

：上畫線。line-through

：刪除線。text-decoration后可以賦多個值，用于給文本添加多種顯示效果，例如，希望文字同時有下劃線和刪除線的效果，就可以將

underline和line-through同時賦給

text-decoration，中間使用空格間隔。7.text-align

：水平對齊方式text-align屬性用于設(shè)置文本內(nèi)容的水平對齊，相當(dāng)于

HTML中的align對齊屬性，其可用屬性值如下：left

：左對齊（默認(rèn)值）。right

：右對齊。center

：居中對齊。注意：text-align屬性僅適用于塊級元素，對行內(nèi)元素?zé)o效；如果需要對圖像設(shè)置水平對齊，可以為圖像添加一個父標(biāo)記，如

<p>或

<div>，然后設(shè)置父標(biāo)記應(yīng)用

text-align屬性，即可實現(xiàn)圖像的水平對齊。8.text-indent

：首行縮進(jìn)text-indent屬性用于設(shè)置首行文本的縮進(jìn)，其屬性值可為不同類型的數(shù)值，em字符寬度的倍數(shù)，或相對于瀏覽器窗口寬度的百分比%，允許使用負(fù)值。建議使用

em作為設(shè)置單位。注意：text-indent僅適用于塊級元素，對行內(nèi)元素?zé)o效。9.white-space

：空白符處理使用

HTML制作網(wǎng)頁時，不論源代碼中有多少空格，在瀏覽器只會顯示一個字符的空白。在

CSS中，使用

white-space屬性可以設(shè)置空白符的處理方式，其屬性值如下：normal：常規(guī)（默認(rèn)值），文本中的空格、空行無效，滿行（到達(dá)區(qū)域邊界）后自動換行。pre

：預(yù)格式化，按照文檔的書寫格式保留空格、空行的原樣顯示。nowrap：空格、空行無效，強制文本不能換行，除非遇到換行標(biāo)記<br/>。即使內(nèi)容超出元素邊界也不換行，其超出瀏覽器頁面則會自動增加滾動條。10.text-overflow

：文本溢出text-overflow屬性規(guī)定當(dāng)文本溢出包含元素時發(fā)生的事情，其可選屬性如下：clip

：修剪文本。ellipsis

：顯示省略符號來代表被修剪的文本。string

：使用給定的字符串來代表被修剪的文本。11.text-shadow

：文本陰影使用

text-shadow屬性給頁面上的文字添加陰影效果，其語法格式如下：text-shadow:h-shadowv-shadowblurcolor;text-shadow屬性見表5-4。表5-4text-shadow屬性屬性描述h-shadow必需，水平陰影的位置，允許負(fù)值v-shadow必需，垂直陰影的位置，允許負(fù)值blur可選，模糊的距離color可選，陰影的顏色11.text-shadow

：文本陰影text-shadow屬性的第一個值表示水平位移，第二個值表示垂直位移，正值表示偏右或偏下，負(fù)值表示偏左或偏上；第三個值表示模糊半徑，該值可選；第四個值為陰影的顏色，該值可選。第四個值指定顏色，如果沒有指定顏色，則用

color屬性值替代。第三節(jié)PART.03overflow屬性overflow屬性是

CSS的重要屬性，除用于清除浮動外（后面章節(jié)將介紹），當(dāng)盒子內(nèi)的元素超出盒子自身大小時，用于定義溢出內(nèi)容的顯示方式，其語法格式如下：選擇器{overflow:屬性值;}overflow屬性見表5-5。屬性描述visible內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外（默認(rèn)值）hidden溢出內(nèi)容會被修剪，并且被修剪的內(nèi)容是不可見的auto在需要時產(chǎn)生滾動條，即自適應(yīng)所要顯示的內(nèi)容scroll溢出內(nèi)容會被修剪，且瀏覽器會始終顯示滾動條表5-5overflow屬性【例5.5】overflow屬性用法案例，其代碼如下：運行效果如圖5-9所示。圖5-9ov