教學(xué)第5章用CSS控制文本樣式課件

第5章用CSS控制文本樣式

內(nèi)容介紹本章講述用CSS控制網(wǎng)頁(yè)中文字的樣式，包括使用CSS樣式控制文字的樣式和使用CSS樣式控制段落的樣式。培養(yǎng)目標(biāo)（1）在CSS中設(shè)置文字大小。（2）在CSS中定義文字的相對(duì)大小和絕對(duì)大小。（3）在CSS中設(shè)置文字基本的屬性。（4）在CSS中用段落屬性改變文字的段落樣式。（5）能夠獨(dú)立修飾一篇長(zhǎng)篇XHTML文章頁(yè)面。重點(diǎn)難點(diǎn)（1）如何熟練運(yùn)用CSS提供的屬性控制文字大小。（2）如何熟練運(yùn)用CSS控制文字顏色。（3）如何熟練運(yùn)用CSS控制下劃線、頂劃線和刪除線。（4）如何熟練運(yùn)用CSS控制英文字母大小寫(xiě)。（5）如何熟練運(yùn)用CSS控制段落的對(duì)齊方式。（6）如何熟練運(yùn)用CSS控制行間距與字間距。第5章用CSS控制文本樣式 內(nèi)容介紹5.1理論解說(shuō)所謂文本，就是我們?cè)诰W(wǎng)頁(yè)設(shè)計(jì)中XHTML文檔中包含的大量的文字信息，這里只由文字構(gòu)成的網(wǎng)頁(yè)元素如font、p等都稱(chēng)之為文本。網(wǎng)頁(yè)設(shè)計(jì)中.的圖文編排，就涉及到大量的文字排版。CSS樣式提供了豐富的屬性設(shè)置來(lái)控制文本樣式或段落樣式。本章將詳細(xì)介紹用CSS控制網(wǎng)頁(yè)中的文字或段落等文本樣式。5.1理論解說(shuō)所謂文本，就是我們?cè)诰W(wǎng)頁(yè)設(shè)計(jì)中XHTML5.1.1字體

網(wǎng)頁(yè)設(shè)計(jì)中，設(shè)計(jì)師說(shuō)要用到的是設(shè)計(jì)師當(dāng)時(shí)用的計(jì)算機(jī)上的字體，當(dāng)然也可以像印刷品那樣使用很多本地計(jì)算機(jī)上的字體，但是要注意了，網(wǎng)頁(yè)的使用時(shí)網(wǎng)上傳輸瀏覽的，網(wǎng)頁(yè)中使用的字體在計(jì)算機(jī)上瀏覽時(shí)，字體調(diào)用的就是瀏覽者本地計(jì)算機(jī)的字體，如果瀏覽者本地計(jì)算機(jī)上沒(méi)有安裝網(wǎng)頁(yè)設(shè)計(jì)師設(shè)計(jì)網(wǎng)頁(yè)時(shí)指定的文字字體，那么文本流就會(huì)按瀏覽器默認(rèn)的字體展現(xiàn)，那么網(wǎng)頁(yè)設(shè)計(jì)師指定的字體就失去意義。

CSS樣式設(shè)置文本流字體的屬性是font-family，使用font-family設(shè)置網(wǎng)頁(yè)文字字體的代碼如：

font-family：Arial；

以上為設(shè)置文字字體為Arial的代碼示例。

示例5.1.1.1也可以給文本設(shè)置多重文字字體，用于用戶計(jì)算機(jī)篩選，比如設(shè)置代碼：

font-family：宋體,黑體,楷體；/*設(shè)置中文字體*/

font-family：Arial,”TimesNewRoman”,Times,Serif;/*設(shè)置英文字體*/

5.1.1字體網(wǎng)頁(yè)設(shè)計(jì)中，設(shè)計(jì)師說(shuō)要用到的是設(shè)計(jì)5.1.1字體

示例5.1.1.1在CSS文字字體屬性font-family里設(shè)置的文字字體名稱(chēng)，以英文逗號(hào)間隔，最后一個(gè)字體名稱(chēng)后跟英文分號(hào)結(jié)尾，羅列的字體名字按先后順序在網(wǎng)頁(yè)瀏覽用戶計(jì)算機(jī)字體庫(kù)中作篩選，第一個(gè)字體用戶的計(jì)算機(jī)有則按第一個(gè)顯示，若沒(méi)有看第二個(gè)，第二個(gè)沒(méi)有則帶三個(gè)，直至最后一個(gè)羅列的字體名稱(chēng)，若都沒(méi)有則按用戶計(jì)算機(jī)瀏覽器默認(rèn)顯示。中文英文字體都按此先后順序篩選顯示。

5.1.1字體示例5.1.1.1在CSS文字字體屬性fo5.1.2

文字大小概述在網(wǎng)頁(yè)設(shè)計(jì)中，安排分類(lèi)文字信息的重要程度，往往會(huì)用字號(hào)的大小來(lái)做區(qū)分，通常標(biāo)題等重要的文字會(huì)用大一號(hào)的字號(hào)設(shè)置，內(nèi)容等成段落的文字內(nèi)容，則會(huì)用標(biāo)準(zhǔn)小字號(hào)來(lái)設(shè)置。文字的默認(rèn)大小是由用戶的瀏覽器來(lái)默認(rèn)設(shè)置的，不同的瀏覽器默認(rèn)值也不盡相同；在IE6、IE7和火狐瀏覽器中，網(wǎng)頁(yè)的默認(rèn)文字大小為16像素。在CSS樣式設(shè)置中，font-size屬性是來(lái)設(shè)置文字的大小，若不設(shè)置則按瀏覽器默認(rèn)設(shè)置顯示。5.1.2文字大小概述在網(wǎng)頁(yè)設(shè)計(jì)中，安排分類(lèi)文字信息的重要5.1.2.1

設(shè)置文字大小CSS樣式提供font-size屬性來(lái)設(shè)置文本流的字號(hào)大小，用font-size來(lái)設(shè)置文本大小，語(yǔ)法如下：

font-size：12px；

在此font-size的值為12px大小，值除了使用像素外，還可以使用長(zhǎng)度、百分比和關(guān)鍵字等。

示例5.1.2.1使用不同單位設(shè)置文字大小：

font-size:12px;/*像素單位設(shè)置文字大小*/

font-size:1em;/*em單位設(shè)置文字大小*/

font-size12in;/*英寸單位設(shè)置文字大小*/

font-size:120%/*百分比單位設(shè)置文字大小*/

font-size:large/*關(guān)鍵字設(shè)置文字大小*/

以上的設(shè)置文字大小的單位按第4章介紹的單位分為相對(duì)大小或絕對(duì)大小兩種設(shè)置方法。5.1.2.1設(shè)置文字大小CSS樣式提供font5.1.2.2

定義文字的相對(duì)大小

使用相對(duì)單位定義文字的大小，屬性值可以使用相對(duì)長(zhǎng)度單位和相對(duì)關(guān)鍵字定義文字大小。（1）文字的相對(duì)單位，有像素（px）、em、百分比（%）等。像素是相對(duì)于電腦屏幕分辨率而言，設(shè)置為像素大小，文字不會(huì)繼承父元素的文字大小。em服從文檔繼承關(guān)系的相對(duì)單位，em會(huì)繼承父元素的文字大小。關(guān)于px和em的概念參見(jiàn)第4章內(nèi)容。示例5.1.2.2.1使用em、px和百分比設(shè)置文字大小進(jìn)行比較5.1.2.2定義文字的相對(duì)大小使用相對(duì)單位定義5.1.2.2

定義文字的相對(duì)大?。?）使用相對(duì)關(guān)鍵字定義文字大小使用相對(duì)單位定義文字的大小除了px、em和百分比之外，還有使用相對(duì)關(guān)鍵字來(lái)設(shè)置文字的大小，CSS樣式中提供了larger和smaller關(guān)鍵字用于設(shè)置font-size的屬性。使用larger關(guān)鍵字就是使文字變大，使用smaller設(shè)置文字大小是使文字變小。5.1.2.2定義文字的相對(duì)大?。?）使用相對(duì)關(guān)鍵字定義文5.1.2.2

定義文字的絕對(duì)大?。?）使用物理長(zhǎng)度定義文字大小

使用物理長(zhǎng)度定義文字大小，物理長(zhǎng)度單位有磅（pt）、px、英寸（in）、厘米（cm）、毫米（mm）等。（2）使用絕對(duì)關(guān)鍵字定義文字大小

CSS提供的關(guān)鍵字設(shè)置文字大小，除了上述相對(duì)關(guān)鍵字smaller和larger之外，還有一些絕對(duì)關(guān)鍵字設(shè)置文字大小，主要有xx-small、x-small、small、medium、large、x-large和xx-large等。

示例5.1.2.3.2使用絕對(duì)關(guān)鍵字定義文字大小5.1.2.2定義文字的絕對(duì)大?。?）使用物理長(zhǎng)度定義文字5.1.3

文字顏色

網(wǎng)頁(yè)上使用不同文字顏色，可以達(dá)到美化、優(yōu)化網(wǎng)頁(yè)的效果，CSS提供了color屬性來(lái)設(shè)置文字的顏色。Color屬性的值可以使用第4章中所講到的顏色單位來(lái)設(shè)置，包括顏色名稱(chēng)、RGB色值和十六進(jìn)制顏色值。5.1.3文字顏色網(wǎng)頁(yè)上使用不同文字顏色，可以達(dá)5.1.4文字粗細(xì)

文字的粗細(xì)在網(wǎng)頁(yè)設(shè)計(jì)中起到分層結(jié)構(gòu)的作用，使網(wǎng)頁(yè)更容易閱讀。在HTML文檔中可以用b標(biāo)簽來(lái)加粗文字，在XHTML標(biāo)準(zhǔn)文檔編寫(xiě)中，CSS提供font-weight屬性來(lái)設(shè)置文字的粗細(xì)，可以減少b標(biāo)簽的重復(fù)使用，并且是b標(biāo)簽已經(jīng)加粗的文字變細(xì)。

示例5.1.4文字粗細(xì)設(shè)置5.1.4文字粗細(xì)文字的粗細(xì)在網(wǎng)頁(yè)設(shè)計(jì)中起到分層5.1.6

斜體

斜體文字不是文字的固有字體，是CSS樣式對(duì)默認(rèn)文字的傾斜設(shè)置，一般用于應(yīng)用語(yǔ)句等特殊情況，加強(qiáng)網(wǎng)頁(yè)文本流的層次感.。CSS提供font-style屬性用于設(shè)置文字的斜體樣式，屬性包括italich和oblique兩個(gè)傾斜值。

該屬性設(shè)置使用斜體、傾斜或正常字體。斜體字體通常定義為字體系列中的一個(gè)單獨(dú)的字體。理論上講，用戶代理可以根據(jù)正常字體計(jì)算一個(gè)斜體字體。

為三個(gè)段落設(shè)置不同的字體樣式代碼如下：

p.normal{font-style:normal;}

p.italic{font-style:italic;}

p.oblique{font-style:oblique;}

示例5.1.5使用font-style屬性設(shè)置文字的斜體樣式5.1.6斜體斜體文字不是文字的固有字體，是CS5.1.6

下劃線、頂劃線和刪除線

下劃線、頂畫(huà)線和刪除線，在網(wǎng)頁(yè)設(shè)計(jì)中統(tǒng)稱(chēng)為文字的修飾線。一般用于突出網(wǎng)頁(yè)文字的修飾性和更改設(shè)置，例如價(jià)格的變更，內(nèi)容的修改、超鏈接修飾、關(guān)鍵字的加注等。

CSS提供text-decoration屬性來(lái)為文本做下劃線、頂畫(huà)線和刪除線的設(shè)置：屬性值包括none、underline、overline、line-through、blink、inherit等。

特別指明的是，inherit規(guī)定應(yīng)該從父元素繼承text-decoration屬性的值。所以該值通常不用。

文本修飾代碼如下：

text-decoration:none;/*默認(rèn)，定義標(biāo)準(zhǔn)的文本不做修飾*/

text-decoration:underline;/*會(huì)對(duì)元素加下劃線*/

text-decoration:overline;/*會(huì)在文本的頂端畫(huà)一個(gè)上劃線*/

text-decoration:line-through;/*在文本中間畫(huà)一個(gè)穿線*/

text-decoration:blink;/*會(huì)讓文本閃爍*/

示例5.1.6下劃線、頂畫(huà)線和刪除線裝飾文本的樣式5.1.6下劃線、頂劃線和刪除線下劃線、頂畫(huà)線和5.1.7

英文字母大小寫(xiě)CSS提供text-transform屬性控制英文文本的大小寫(xiě)，值有none、capitalize、uppercase、lowercase、inheri等來(lái)設(shè)置英文文本字母的大小寫(xiě)。

特別指明的是inherit規(guī)定應(yīng)該從父元素繼承text-transform屬性的值。所以該值通常不用。代碼如下：

text-transform:none/*默認(rèn)。定義帶有小寫(xiě)字母和大寫(xiě)字母的標(biāo)準(zhǔn)的文本。*/

text-transform:capitalize/*文本中的每個(gè)單詞以大寫(xiě)字母開(kāi)頭。*/

text-transform:uppercase/*定義僅有大寫(xiě)字母。*/

text-transform:lowercase/*定義無(wú)大寫(xiě)字母，僅有小寫(xiě)字母。*/

text-transform:inherit/*規(guī)定應(yīng)該從父元素繼承text-transform屬性的值。*/示例5.1.7使用text-transform屬性設(shè)置一段英文句子大小寫(xiě)5.1.7英文字母大小寫(xiě)CSS提供text-transfo5.1.8屬性的縮寫(xiě)法CSSfont屬性是用來(lái)控制文字字體、顏色、大小等。而font的屬性有多種，在通常情況下，我們用縮寫(xiě)的辦法將多種屬性概括在一句CSS代碼中。這樣極大地減小了代碼，優(yōu)化CSS文件。我們常用的font屬性有下面六種：

1.font-style設(shè)定斜體，如：font-style:italic;。

2.font-weight設(shè)定文字粗細(xì)，如：font-weight:bold;。

3.font-size設(shè)定文字大小，如：font-size:12px;。

4.line-height設(shè)定行距，如：line-height:150%;。

5.color設(shè)定文字顏色，注意不是font-color，如：color:red;。

6.font-family設(shè)定字體，如：font-family:"LucidaGrande",Verdana,Lucida,Arial,Helvetica,宋體,sans-seri。5.1.8屬性的縮寫(xiě)法CSSfont屬性是用來(lái)控制文字字5.1.8屬性的縮寫(xiě)法如果對(duì)body標(biāo)簽設(shè)置font屬性樣式，不縮寫(xiě)的樣式如下：

body{

font-family:"宋體","黑體","楷體_GB2312";/*設(shè)置文字字體*/

font-size:18px;/*設(shè)置文字字號(hào)大小*/

font-style:italic;/*設(shè)置文字樣式為斜體*/

line-height:200%;/*設(shè)置行間距為200%*/

font-weight:bold;/*設(shè)置文字樣式為加粗*/

font-variant:small-caps;/*設(shè)置英文為小型大寫(xiě)字母*/

text-transform:capitalize;/*設(shè)置英文為首字母大寫(xiě)*/

text-decoration:underline;/*設(shè)置文本裝飾下劃線*/

color:red;/*設(shè)置文本顏色為紅色*/

}上述的屬性，我們可以概括地寫(xiě)在一行font屬性里。需要注意的是，text-decoration和color屬性我們需要單獨(dú)定義。

body{font:italicsmall-capsbold18px/200%"宋體","黑體","楷體_GB2312";text-transform:capitalize;text-decoration:underline;color:red;}5.1.8屬性的縮寫(xiě)法如果對(duì)body標(biāo)簽設(shè)置font屬性樣5.1.8屬性的縮寫(xiě)法示例5.1.8把上述font屬性定義給body標(biāo)簽以改變頁(yè)面內(nèi)容的文字樣式5.1.8屬性的縮寫(xiě)法示例5.1.8把上述font屬性定義5.1.9

用段落屬性改變文字的段落樣式

在網(wǎng)頁(yè)設(shè)計(jì)中會(huì)出現(xiàn)大量段落文本來(lái)做內(nèi)容的詳細(xì)介紹，而在進(jìn)行段落文本的排版時(shí)都會(huì)遇到段落文本的對(duì)齊問(wèn)題，本節(jié)內(nèi)容將詳細(xì)介紹CSS如何設(shè)置段落文本的對(duì)齊方式。5.1.9用段落屬性改變文字的段落樣式在網(wǎng)頁(yè)設(shè)計(jì)5.1.9.1

段落的水平對(duì)齊方式CSS提供text-align屬性設(shè)置段落文本的對(duì)齊方式，屬性值有l(wèi)eft、right、center、justify、inherit等，對(duì)齊方式及代碼如下：

text-align:center/*文本中間對(duì)齊。*/

text-align:left/*文本左對(duì)齊*/

text-align:right/*文本右對(duì)齊*/

text-align:justify/*文本兩端對(duì)齊*/示例5.1.9.1使用text-align設(shè)置段落文本的水平對(duì)齊方式，我們選擇四段文字，分別以左對(duì)齊、右對(duì)齊、中間對(duì)齊和兩端對(duì)齊。5.1.9.1段落的水平對(duì)齊方式CSS提供text-ali5.1.9.2段落的垂直對(duì)齊方式

在網(wǎng)頁(yè)設(shè)計(jì)中少數(shù)情況下會(huì)遇到段落文本的豎向排列，如仿古文字的排列或特殊版式的排列等。CSS中提供了writing-mode和layout-flow來(lái)設(shè)置文字的豎向排列。（1）使用writing-mode屬性設(shè)置段落文本垂直對(duì)齊

屬性writing-mode的值有兩個(gè)，即lr-tb和tb-rl，代碼構(gòu)成和排版如下：

writing-mode:lr-tb/*左-右，上-下（西文橫向排版）*/

writing-mode:tb-rl/*上-下，右-左（中文垂直排版）*/

在設(shè)置或檢索對(duì)象的內(nèi)容塊固有的書(shū)寫(xiě)方向時(shí)。西方語(yǔ)言缺省的是“左-右，上-下”的書(shū)寫(xiě)方式。但是亞洲語(yǔ)言常有“上-下，右-左”的書(shū)寫(xiě)方式。

當(dāng)writing-mode屬性值發(fā)生變化時(shí)，text-align屬性與vertical-align屬性的作用也將發(fā)生變化。示例5.1.9.2使用writing-mode樣式設(shè)置中文古詩(shī)詞的垂直對(duì)齊排版5.1.9.2段落的垂直對(duì)齊方式在網(wǎng)頁(yè)設(shè)計(jì)中少5.1.9.2段落的垂直對(duì)齊方式

在網(wǎng)頁(yè)設(shè)計(jì)中少數(shù)情況下會(huì)遇到段落文本的豎向排列，如仿古文字的排列或特殊版式的排列等。CSS中提供了writing-mode和layout-flow來(lái)設(shè)置文字的豎向排列。（2）使用layout-flow屬性設(shè)置段落文本的垂直對(duì)齊屬性layout-flow的屬性值有兩個(gè)horizontal和vertical-ideographic。

代碼構(gòu)成和排版如下：

layout-flow:horizontal;/*自左邊流入，下一行在前一行下面*/

layout-flow:vertical-ideographic;/*自上而下流入，下一行在前一行左面*/

horizontal:對(duì)象中的內(nèi)容自左邊流入，下一行在前一行下面。這個(gè)值適于拉丁語(yǔ)系。

vertical-ideographic:對(duì)象中的內(nèi)容自上而下流入，下一行在前一行左面，這個(gè)值適于亞洲語(yǔ)系。

在設(shè)置或檢索對(duì)象內(nèi)文本的流動(dòng)和方向時(shí)。當(dāng)layout-flow屬性值發(fā)生變化時(shí)，text-align屬性與vertical-align屬性的作用也將發(fā)生變化。

示例5.1.9.2.2使用layout-flow樣式設(shè)置中文古詩(shī)詞的垂直對(duì)齊5.1.9.2段落的垂直對(duì)齊方式在網(wǎng)頁(yè)設(shè)計(jì)中少5.1.9.3

首行縮進(jìn)段落文本在正規(guī)的行文格式中，首行是要做縮進(jìn)處理，以分清段落方便閱讀。CSS提供了text-indent屬性來(lái)設(shè)置段落文本的首行縮進(jìn)。text-indent屬性可以應(yīng)用于中文，同樣也可以應(yīng)用于英文，text-indent的值是數(shù)字，單位是像素或百分比。示例5.1.9.3使用text-indent:屬性來(lái)為兩段文字的首行做縮進(jìn)設(shè)置5.1.9.3首行縮進(jìn)段落文本在正規(guī)的行文格式中，首行是要5.1.9.4行間距與字間距

行間距：即段落文本中每行之間間距。字間距：即段落文本中每個(gè)漢字或英文單詞之間的距離。（1）行間距

CSS提供了line-height屬性來(lái)設(shè)置段落文本的行間距，line-height與font-size的計(jì)算值之差（在CSS中成為“行間距”）分為兩半，分別加到一個(gè)文本行內(nèi)容的頂部和底部?？梢园@些內(nèi)容的最小框就是行框。

文本的行間距可以使用長(zhǎng)度單位px設(shè)置行間距的值，也可以使用相對(duì)單位設(shè)置行間距的值，如果不設(shè)置就是瀏覽器的normal默認(rèn)值。

示例5.1.9.4使用屬性line-height設(shè)置三段文字的行間距5.1.9.4行間距與字間距行間距：即段落文本5.1.9.4行間距與字間距（2）字間距

CSS提供letter-spacing屬性設(shè)置中文字間距，letter-spacing屬性可以增加或減少字符間的空白，即字符間距，也就是字間距。該屬性定義了在文本字符框之間插入多少空間。由于字符字形通常比其字符框要窄，指定長(zhǎng)度值時(shí)，會(huì)調(diào)整中文字之間通常的間隔。因此，normal就相當(dāng)于值為0。

同時(shí)CSS還提供了word-spacing屬性設(shè)置英文單詞的間距。

示例5.1.9.4.3.使用letter-spacing和word-spacing分別設(shè)置中文和英文的字符間距5.1.9.4行間距與字間距（2）字間距

CSS提供let5.2上機(jī)指導(dǎo)5.2.1上機(jī)指導(dǎo)案例：對(duì)一首宋詞作文本的簡(jiǎn)單排版5.2上機(jī)指導(dǎo)5.2.1上機(jī)指導(dǎo)案例：對(duì)一首宋詞作文本的簡(jiǎn)5.2上機(jī)指導(dǎo)5.2.2上機(jī)指導(dǎo)案例：設(shè)置中英文段落文本字間距5.2上機(jī)指導(dǎo)5.2.2上機(jī)指導(dǎo)案例：設(shè)置中英文段落文本字5.3 應(yīng)知訓(xùn)練一、填空題（1）CSS提供了color屬性來(lái)設(shè)置文字的顏色。（2）CSS提供font-weight屬性來(lái)設(shè)置文字的粗細(xì)。（3）font-style屬性包括italich和oblique兩個(gè)傾斜值。（4）CSS提供letter-spacing屬性設(shè)置中文字間距。（5）text-transform屬性值有none、capitalize、uppercase、lowercase、inheri。二、單項(xiàng)選擇題（1）定義文字的相對(duì)大小的單位有哪些？()

A. 有像素（px）、em、百分比（%）等。

B. 有100、200、300等。

C. 有大寫(xiě)、小寫(xiě)等。（2）定義文字的絕對(duì)大小的單位有哪些？()

A. 有磅（pt）、pc、英寸（in）、厘米（cm）、毫米（mm）等。

B. 有標(biāo)簽選擇器、類(lèi)選擇器、ID選擇器、全局選擇器、組合選擇器、繼承選擇器和偽類(lèi)選擇器等。

C. 有Div，HTML,H1，P等。5.3 應(yīng)知訓(xùn)練一、填空題（3）定義文字相對(duì)大小的關(guān)鍵字有哪些？并按從小到大的順序列出來(lái)。()A. smaller、larger。B. 磅（pt）、pc、英寸（in）。C. 有大寫(xiě)、小寫(xiě)等。（4）CSS屬性的縮寫(xiě)法有什么作用？()A. 縮寫(xiě)有利于減少代碼，優(yōu)化CSS。B. 方便視覺(jué)查看。C. 可以縮小文檔空間。（5）屬性writing-mode的值有幾個(gè)？分別是什么？()A. 屬性writing-mode的值有兩個(gè)，smaller和larger，代碼構(gòu)成。B. 屬性writing-mode的值有兩個(gè)，lr-tb和tb-rl，代碼構(gòu)成。C. 屬性writing-mode的值有兩個(gè)，font-size和text-align，代碼構(gòu)成。（6）文字閃爍的效果text-decoration:blink在什么瀏覽器下可顯示，在什么瀏覽器下不可顯示？()A. text-decoration:blink在火狐Firefox瀏覽器下可以顯示，在IE下不可顯示。B. text-decoration:blink在IE下可以顯示，在Firefox瀏覽器下不可顯示。C. text-decoration:blink在Firefox瀏覽器下可以顯示，在IE下也可顯示。（3）定義文字相對(duì)大小的關(guān)鍵字有哪些？并按從小到大的順序列三、判斷題：（1）字體就是文字的書(shū)法樣式，比如通常說(shuō)的宋體、黑體、楷體、隸書(shū)等等。（對(duì)）（2）對(duì)文本流設(shè)置文字樣式，除了可以在標(biāo)簽選擇器內(nèi)設(shè)置以外，還可以對(duì)標(biāo)簽做內(nèi)嵌文字字體設(shè)置。（對(duì)）（3）在CSS樣式設(shè)置中，font-size屬性設(shè)置圖片的大小，若不設(shè)置則按瀏覽器默認(rèn)設(shè)置顯示。（錯(cuò)）（4）使用相對(duì)單位定義文字的大小，屬性值不可以使用相對(duì)長(zhǎng)度單位和相對(duì)關(guān)鍵字定義文字大小。（錯(cuò)）（5）使用相對(duì)單位定義文字的大小必須px。（錯(cuò)）（6）用medium關(guān)鍵字設(shè)置文字大小樣式的優(yōu)先級(jí)，高于body的font-decoration屬性設(shè)置?。ㄥe(cuò)）（7）inherit規(guī)定應(yīng)該從子元素繼承字體的粗細(xì)?。ㄥe(cuò)）三、判斷題：5.4技能提升5.4.1技能提升案例：運(yùn)用所學(xué)習(xí)得文本CSS樣式設(shè)定的知識(shí)，來(lái)對(duì)一段中英文的段落文本做排版。5.4技能提升5.4.1技能提升案例：運(yùn)用所學(xué)習(xí)得文本CS5.4技能提升5.4.2技能提升案例：對(duì)一段論語(yǔ)做排版。5.4技能提升5.4.2技能提升案例：對(duì)一段論語(yǔ)做排版。第5章用CSS控制文本樣式

內(nèi)容介紹本章講述用CSS控制網(wǎng)頁(yè)中文字的樣式，包括使用CSS樣式控制文字的樣式和使用CSS樣式控制段落的樣式。培養(yǎng)目標(biāo)（1）在CSS中設(shè)置文字大小。（2）在CSS中定義文字的相對(duì)大小和絕對(duì)大小。（3）在CSS中設(shè)置文字基本的屬性。（4）在CSS中用段落屬性改變文字的段落樣式。（5）能夠獨(dú)立修飾一篇長(zhǎng)篇XHTML文章頁(yè)面。重點(diǎn)難點(diǎn)（1）如何熟練運(yùn)用CSS提供的屬性控制文字大小。（2）如何熟練運(yùn)用CSS控制文字顏色。（3）如何熟練運(yùn)用CSS控制下劃線、頂劃線和刪除線。（4）如何熟練運(yùn)用CSS控制英文字母大小寫(xiě)。（5）如何熟練運(yùn)用CSS控制段落的對(duì)齊方式。（6）如何熟練運(yùn)用CSS控制行間距與字間距。第5章用CSS控制文本樣式 內(nèi)容介紹5.1理論解說(shuō)所謂文本，就是我們?cè)诰W(wǎng)頁(yè)設(shè)計(jì)中XHTML文檔中包含的大量的文字信息，這里只由文字構(gòu)成的網(wǎng)頁(yè)元素如font、p等都稱(chēng)之為文本。網(wǎng)頁(yè)設(shè)計(jì)中.的圖文編排，就涉及到大量的文字排版。CSS樣式提供了豐富的屬性設(shè)置來(lái)控制文本樣式或段落樣式。本章將詳細(xì)介紹用CSS控制網(wǎng)頁(yè)中的文字或段落等文本樣式。5.1理論解說(shuō)所謂文本，就是我們?cè)诰W(wǎng)頁(yè)設(shè)計(jì)中XHTML5.1.1字體

網(wǎng)頁(yè)設(shè)計(jì)中，設(shè)計(jì)師說(shuō)要用到的是設(shè)計(jì)師當(dāng)時(shí)用的計(jì)算機(jī)上的字體，當(dāng)然也可以像印刷品那樣使用很多本地計(jì)算機(jī)上的字體，但是要注意了，網(wǎng)頁(yè)的使用時(shí)網(wǎng)上傳輸瀏覽的，網(wǎng)頁(yè)中使用的字體在計(jì)算機(jī)上瀏覽時(shí)，字體調(diào)用的就是瀏覽者本地計(jì)算機(jī)的字體，如果瀏覽者本地計(jì)算機(jī)上沒(méi)有安裝網(wǎng)頁(yè)設(shè)計(jì)師設(shè)計(jì)網(wǎng)頁(yè)時(shí)指定的文字字體，那么文本流就會(huì)按瀏覽器默認(rèn)的字體展現(xiàn)，那么網(wǎng)頁(yè)設(shè)計(jì)師指定的字體就失去意義。

CSS樣式設(shè)置文本流字體的屬性是font-family，使用font-family設(shè)置網(wǎng)頁(yè)文字字體的代碼如：

font-family：Arial；

以上為設(shè)置文字字體為Arial的代碼示例。

示例5.1.1.1也可以給文本設(shè)置多重文字字體，用于用戶計(jì)算機(jī)篩選，比如設(shè)置代碼：

font-family：宋體,黑體,楷體；/*設(shè)置中文字體*/

font-family：Arial,”TimesNewRoman”,Times,Serif;/*設(shè)置英文字體*/

5.1.1字體網(wǎng)頁(yè)設(shè)計(jì)中，設(shè)計(jì)師說(shuō)要用到的是設(shè)計(jì)5.1.1字體

示例5.1.1.1在CSS文字字體屬性font-family里設(shè)置的文字字體名稱(chēng)，以英文逗號(hào)間隔，最后一個(gè)字體名稱(chēng)后跟英文分號(hào)結(jié)尾，羅列的字體名字按先后順序在網(wǎng)頁(yè)瀏覽用戶計(jì)算機(jī)字體庫(kù)中作篩選，第一個(gè)字體用戶的計(jì)算機(jī)有則按第一個(gè)顯示，若沒(méi)有看第二個(gè)，第二個(gè)沒(méi)有則帶三個(gè)，直至最后一個(gè)羅列的字體名稱(chēng)，若都沒(méi)有則按用戶計(jì)算機(jī)瀏覽器默認(rèn)顯示。中文英文字體都按此先后順序篩選顯示。

5.1.1字體示例5.1.1.1在CSS文字字體屬性fo5.1.2

文字大小概述在網(wǎng)頁(yè)設(shè)計(jì)中，安排分類(lèi)文字信息的重要程度，往往會(huì)用字號(hào)的大小來(lái)做區(qū)分，通常標(biāo)題等重要的文字會(huì)用大一號(hào)的字號(hào)設(shè)置，內(nèi)容等成段落的文字內(nèi)容，則會(huì)用標(biāo)準(zhǔn)小字號(hào)來(lái)設(shè)置。文字的默認(rèn)大小是由用戶的瀏覽器來(lái)默認(rèn)設(shè)置的，不同的瀏覽器默認(rèn)值也不盡相同；在IE6、IE7和火狐瀏覽器中，網(wǎng)頁(yè)的默認(rèn)文字大小為16像素。在CSS樣式設(shè)置中，font-size屬性是來(lái)設(shè)置文字的大小，若不設(shè)置則按瀏覽器默認(rèn)設(shè)置顯示。5.1.2文字大小概述在網(wǎng)頁(yè)設(shè)計(jì)中，安排分類(lèi)文字信息的重要5.1.2.1

設(shè)置文字大小CSS樣式提供font-size屬性來(lái)設(shè)置文本流的字號(hào)大小，用font-size來(lái)設(shè)置文本大小，語(yǔ)法如下：

font-size：12px；

在此font-size的值為12px大小，值除了使用像素外，還可以使用長(zhǎng)度、百分比和關(guān)鍵字等。

示例5.1.2.1使用不同單位設(shè)置文字大?。?/p>

font-size:12px;/*像素單位設(shè)置文字大小*/

font-size:1em;/*em單位設(shè)置文字大小*/

font-size12in;/*英寸單位設(shè)置文字大小*/

font-size:120%/*百分比單位設(shè)置文字大小*/

font-size:large/*關(guān)鍵字設(shè)置文字大小*/

以上的設(shè)置文字大小的單位按第4章介紹的單位分為相對(duì)大小或絕對(duì)大小兩種設(shè)置方法。5.1.2.1設(shè)置文字大小CSS樣式提供font5.1.2.2

定義文字的相對(duì)大小

使用相對(duì)單位定義文字的大小，屬性值可以使用相對(duì)長(zhǎng)度單位和相對(duì)關(guān)鍵字定義文字大小。（1）文字的相對(duì)單位，有像素（px）、em、百分比（%）等。像素是相對(duì)于電腦屏幕分辨率而言，設(shè)置為像素大小，文字不會(huì)繼承父元素的文字大小。em服從文檔繼承關(guān)系的相對(duì)單位，em會(huì)繼承父元素的文字大小。關(guān)于px和em的概念參見(jiàn)第4章內(nèi)容。示例5.1.2.2.1使用em、px和百分比設(shè)置文字大小進(jìn)行比較5.1.2.2定義文字的相對(duì)大小使用相對(duì)單位定義5.1.2.2

定義文字的相對(duì)大?。?）使用相對(duì)關(guān)鍵字定義文字大小使用相對(duì)單位定義文字的大小除了px、em和百分比之外，還有使用相對(duì)關(guān)鍵字來(lái)設(shè)置文字的大小，CSS樣式中提供了larger和smaller關(guān)鍵字用于設(shè)置font-size的屬性。使用larger關(guān)鍵字就是使文字變大，使用smaller設(shè)置文字大小是使文字變小。5.1.2.2定義文字的相對(duì)大?。?）使用相對(duì)關(guān)鍵字定義文5.1.2.2

定義文字的絕對(duì)大?。?）使用物理長(zhǎng)度定義文字大小

使用物理長(zhǎng)度定義文字大小，物理長(zhǎng)度單位有磅（pt）、px、英寸（in）、厘米（cm）、毫米（mm）等。（2）使用絕對(duì)關(guān)鍵字定義文字大小

CSS提供的關(guān)鍵字設(shè)置文字大小，除了上述相對(duì)關(guān)鍵字smaller和larger之外，還有一些絕對(duì)關(guān)鍵字設(shè)置文字大小，主要有xx-small、x-small、small、medium、large、x-large和xx-large等。

示例5.1.2.3.2使用絕對(duì)關(guān)鍵字定義文字大小5.1.2.2定義文字的絕對(duì)大?。?）使用物理長(zhǎng)度定義文字5.1.3

文字顏色

網(wǎng)頁(yè)上使用不同文字顏色，可以達(dá)到美化、優(yōu)化網(wǎng)頁(yè)的效果，CSS提供了color屬性來(lái)設(shè)置文字的顏色。Color屬性的值可以使用第4章中所講到的顏色單位來(lái)設(shè)置，包括顏色名稱(chēng)、RGB色值和十六進(jìn)制顏色值。5.1.3文字顏色網(wǎng)頁(yè)上使用不同文字顏色，可以達(dá)5.1.4文字粗細(xì)

文字的粗細(xì)在網(wǎng)頁(yè)設(shè)計(jì)中起到分層結(jié)構(gòu)的作用，使網(wǎng)頁(yè)更容易閱讀。在HTML文檔中可以用b標(biāo)簽來(lái)加粗文字，在XHTML標(biāo)準(zhǔn)文檔編寫(xiě)中，CSS提供font-weight屬性來(lái)設(shè)置文字的粗細(xì)，可以減少b標(biāo)簽的重復(fù)使用，并且是b標(biāo)簽已經(jīng)加粗的文字變細(xì)。

示例5.1.4文字粗細(xì)設(shè)置5.1.4文字粗細(xì)文字的粗細(xì)在網(wǎng)頁(yè)設(shè)計(jì)中起到分層5.1.6

斜體

斜體文字不是文字的固有字體，是CSS樣式對(duì)默認(rèn)文字的傾斜設(shè)置，一般用于應(yīng)用語(yǔ)句等特殊情況，加強(qiáng)網(wǎng)頁(yè)文本流的層次感.。CSS提供font-style屬性用于設(shè)置文字的斜體樣式，屬性包括italich和oblique兩個(gè)傾斜值。

該屬性設(shè)置使用斜體、傾斜或正常字體。斜體字體通常定義為字體系列中的一個(gè)單獨(dú)的字體。理論上講，用戶代理可以根據(jù)正常字體計(jì)算一個(gè)斜體字體。

為三個(gè)段落設(shè)置不同的字體樣式代碼如下：

p.normal{font-style:normal;}

p.italic{font-style:italic;}

p.oblique{font-style:oblique;}

示例5.1.5使用font-style屬性設(shè)置文字的斜體樣式5.1.6斜體斜體文字不是文字的固有字體，是CS5.1.6

下劃線、頂劃線和刪除線

下劃線、頂畫(huà)線和刪除線，在網(wǎng)頁(yè)設(shè)計(jì)中統(tǒng)稱(chēng)為文字的修飾線。一般用于突出網(wǎng)頁(yè)文字的修飾性和更改設(shè)置，例如價(jià)格的變更，內(nèi)容的修改、超鏈接修飾、關(guān)鍵字的加注等。

CSS提供text-decoration屬性來(lái)為文本做下劃線、頂畫(huà)線和刪除線的設(shè)置：屬性值包括none、underline、overline、line-through、blink、inherit等。

特別指明的是，inherit規(guī)定應(yīng)該從父元素繼承text-decoration屬性的值。所以該值通常不用。

文本修飾代碼如下：

text-decoration:none;/*默認(rèn)，定義標(biāo)準(zhǔn)的文本不做修飾*/

text-decoration:underline;/*會(huì)對(duì)元素加下劃線*/

text-decoration:overline;/*會(huì)在文本的頂端畫(huà)一個(gè)上劃線*/

text-decoration:line-through;/*在文本中間畫(huà)一個(gè)穿線*/

text-decoration:blink;/*會(huì)讓文本閃爍*/

示例5.1.6下劃線、頂畫(huà)線和刪除線裝飾文本的樣式5.1.6下劃線、頂劃線和刪除線下劃線、頂畫(huà)線和5.1.7

英文字母大小寫(xiě)CSS提供text-transform屬性控制英文文本的大小寫(xiě)，值有none、capitalize、uppercase、lowercase、inheri等來(lái)設(shè)置英文文本字母的大小寫(xiě)。

特別指明的是inherit規(guī)定應(yīng)該從父元素繼承text-transform屬性的值。所以該值通常不用。代碼如下：

text-transform:none/*默認(rèn)。定義帶有小寫(xiě)字母和大寫(xiě)字母的標(biāo)準(zhǔn)的文本。*/

text-transform:capitalize/*文本中的每個(gè)單詞以大寫(xiě)字母開(kāi)頭。*/

text-transform:uppercase/*定義僅有大寫(xiě)字母。*/

text-transform:lowercase/*定義無(wú)大寫(xiě)字母，僅有小寫(xiě)字母。*/

text-transform:inherit/*規(guī)定應(yīng)該從父元素繼承text-transform屬性的值。*/示例5.1.7使用text-transform屬性設(shè)置一段英文句子大小寫(xiě)5.1.7英文字母大小寫(xiě)CSS提供text-transfo5.1.8屬性的縮寫(xiě)法CSSfont屬性是用來(lái)控制文字字體、顏色、大小等。而font的屬性有多種，在通常情況下，我們用縮寫(xiě)的辦法將多種屬性概括在一句CSS代碼中。這樣極大地減小了代碼，優(yōu)化CSS文件。我們常用的font屬性有下面六種：

1.font-style設(shè)定斜體，如：font-style:italic;。

2.font-weight設(shè)定文字粗細(xì)，如：font-weight:bold;。

3.font-size設(shè)定文字大小，如：font-size:12px;。

4.line-height設(shè)定行距，如：line-height:150%;。

5.color設(shè)定文字顏色，注意不是font-color，如：color:red;。

6.font-family設(shè)定字體，如：font-family:"LucidaGrande",Verdana,Lucida,Arial,Helvetica,宋體,sans-seri。5.1.8屬性的縮寫(xiě)法CSSfont屬性是用來(lái)控制文字字5.1.8屬性的縮寫(xiě)法如果對(duì)body標(biāo)簽設(shè)置font屬性樣式，不縮寫(xiě)的樣式如下：

body{

font-family:"宋體","黑體","楷體_GB2312";/*設(shè)置文字字體*/

font-size:18px;/*設(shè)置文字字號(hào)大小*/

font-style:italic;/*設(shè)置文字樣式為斜體*/

line-height:200%;/*設(shè)置行間距為200%*/

font-weight:bold;/*設(shè)置文字樣式為加粗*/

font-variant:small-caps;/*設(shè)置英文為小型大寫(xiě)字母*/

text-transform:capitalize;/*設(shè)置英文為首字母大寫(xiě)*/

text-decoration:underline;/*設(shè)置文本裝飾下劃線*/

color:red;/*設(shè)置文本顏色為紅色*/

}上述的屬性，我們可以概括地寫(xiě)在一行font屬性里。需要注意的是，text-decoration和color屬性我們需要單獨(dú)定義。

body{font:italicsmall-capsbold18px/200%"宋體","黑體","楷體_GB2312";text-transform:capitalize;text-decoration:underline;color:red;}5.1.8屬性的縮寫(xiě)法如果對(duì)body標(biāo)簽設(shè)置font屬性樣5.1.8屬性的縮寫(xiě)法示例5.1.8把上述font屬性定義給body標(biāo)簽以改變頁(yè)面內(nèi)容的文字樣式5.1.8屬性的縮寫(xiě)法示例5.1.8把上述font屬性定義5.1.9

用段落屬性改變文字的段落樣式

在網(wǎng)頁(yè)設(shè)計(jì)中會(huì)出現(xiàn)大量段落文本來(lái)做內(nèi)容的詳細(xì)介紹，而在進(jìn)行段落文本的排版時(shí)都會(huì)遇到段落文本的對(duì)齊問(wèn)題，本節(jié)內(nèi)容將詳細(xì)介紹CSS如何設(shè)置段落文本的對(duì)齊方式。5.1.9用段落屬性改變文字的段落樣式在網(wǎng)頁(yè)設(shè)計(jì)5.1.9.1

段落的水平對(duì)齊方式CSS提供text-align屬性設(shè)置段落文本的對(duì)齊方式，屬性值有l(wèi)eft、right、center、justify、inherit等，對(duì)齊方式及代碼如下：

text-align:center/*文本中間對(duì)齊。*/

text-align:left/*文本左對(duì)齊*/

text-align:right/*文本右對(duì)齊*/

text-align:justify/*文本兩端對(duì)齊*/示例5.1.9.1使用text-align設(shè)置段落文本的水平對(duì)齊方式，我們選擇四段文字，分別以左對(duì)齊、右對(duì)齊、中間對(duì)齊和兩端對(duì)齊。5.1.9.1段落的水平對(duì)齊方式CSS提供text-ali5.1.9.2段落的垂直對(duì)齊方式

在網(wǎng)頁(yè)設(shè)計(jì)中少數(shù)情況下會(huì)遇到段落文本的豎向排列，如仿古文字的排列或特殊版式的排列等。CSS中提供了writing-mode和layout-flow來(lái)設(shè)置文字的豎向排列。（1）使用writing-mode屬性設(shè)置段落文本垂直對(duì)齊

屬性writing-mode的值有兩個(gè)，即lr-tb和tb-rl，代碼構(gòu)成和排版如下：

writing-mode:lr-tb/*左-右，上-下（西文橫向排版）*/

writing-mode:tb-rl/*上-下，右-左（中文垂直排版）*/

在設(shè)置或檢索對(duì)象的內(nèi)容塊固有的書(shū)寫(xiě)方向時(shí)。西方語(yǔ)言缺省的是“左-右，上-下”的書(shū)寫(xiě)方式。但是亞洲語(yǔ)言常有“上-下，右-左”的書(shū)寫(xiě)方式。

當(dāng)writing-mode屬性值發(fā)生變化時(shí)，text-align屬性與vertical-align屬性的作用也將發(fā)生變化。示例5.1.9.2使用writing-mode樣式設(shè)置中文古詩(shī)詞的垂直對(duì)齊排版5.1.9.2段落的垂直對(duì)齊方式在網(wǎng)頁(yè)設(shè)計(jì)中少5.1.9.2段落的垂直對(duì)齊方式

在網(wǎng)頁(yè)設(shè)計(jì)中少數(shù)情況下會(huì)遇到段落文本的豎向排列，如仿古文字的排列或特殊版式的排列等。CSS中提供了writing-mode和layout-flow來(lái)設(shè)置文字的豎向排列。（2）使用layout-flow屬性設(shè)置段落文本的垂直對(duì)齊屬性layout-flow的屬性值有兩個(gè)horizontal和vertical-ideographic。

代碼構(gòu)成和排版如下：

layout-flow:horizontal;/*自左邊流入，下一行在前一行下面*/

layout-flow:vertical-ideographic;/*自上而下流入，下一行在前一行左面*/

horizontal:對(duì)象中的內(nèi)容自左邊流入，下一行在前一行下面。這個(gè)值適于拉丁語(yǔ)系。

vertical-ideographic:對(duì)象中的內(nèi)容自上而下流入，下一行在前一行左面，這個(gè)值適于亞洲語(yǔ)系。

在設(shè)置或檢索對(duì)象內(nèi)文本的流動(dòng)和方向時(shí)。當(dāng)layout-flow屬性值發(fā)生變化時(shí)，text-align屬性與vertical-align屬性的作用也將發(fā)生變化。

示例5.1.9.2.2使用layout-flow樣式設(shè)置中文古詩(shī)詞的垂直對(duì)齊5.1.9.2段落的垂直對(duì)齊方式在網(wǎng)頁(yè)設(shè)計(jì)中少5.1.9.3

首行縮進(jìn)段落文本在正規(guī)的行文格式中，首行是要做縮進(jìn)處理，以分清段落方便閱讀。CSS提供了text-indent屬性來(lái)設(shè)置段落文本的首行縮進(jìn)。text-indent屬性可以應(yīng)用于中文，同樣也可以應(yīng)用于英文，text-indent的值是數(shù)字，單位是像素或百分比。示例5.1.9.3使用text-indent:屬性來(lái)為兩段文字的首行做縮進(jìn)設(shè)置5.1.9.3首行縮進(jìn)段落文本在正規(guī)的行文格式中，首行是要5.1.9.4行間距與字間距

行間距：即段落文本中每行之間間距。字間距：即段落文本中每個(gè)漢字或英文單詞之間的距離。（1）行間距

CSS提供了line-height屬性來(lái)設(shè)置段落文本的行間距，line-height與font-size的計(jì)算值之差（在CSS中成為“行間距”）分為兩半，分別加到一個(gè)文本行內(nèi)容的頂部和底部?？梢园@些內(nèi)容的最小框就是行框。

文本的行間距可以使用長(zhǎng)度單位px設(shè)置行間距的值，也可以使用相對(duì)單位設(shè)置行間距的值，如果不設(shè)置就是瀏覽器的normal默認(rèn)值。

示例5.1.9.4使用屬性line-height設(shè)置三段文字的行間距5.1.9.4行間距與字間距行間距：即段落文本5.1.9.4行間距與字間距（2）字間距

CSS提供letter-spacing屬性設(shè)