《HTML5+CSS3網(wǎng)頁制作教程》課件-第11章

模塊11CSS頁面樣式屬性11.1文本樣式11.2背景樣式11.3邊框樣式11.4列表樣式11.5案例：使用CSS美化網(wǎng)頁思考與練習題

11.1文本樣式

開發(fā)網(wǎng)頁時，頁面的文本樣式是最基本的樣式。文本樣式包含兩種，一種是字體樣式，包括字體類型、字體大小、字體粗細等；另一種是文本外觀樣式，包括文本顏色、文本水平對齊方式、段落首行縮進、文本修飾等。

11.1.1?字體樣式

CSS字體樣式常用屬性如表11-1所示。

1.字體類型font-family

字體類型其實就是我們熟悉的“宋體”“隸書”等字體。在CSS中，使用font-family屬性來定義字體類型。

語法格式如下：

font-family:字體1,字體2,字體3,…;

【例11-1】設(shè)置字體類型。

2.字體大小font-size

在CSS中，使用font-size屬性來定義字體大小。

語法格式如下：

font-size:關(guān)鍵字|數(shù)值;

說明：關(guān)鍵字屬性值不常用，有x-small(較小)、medium(默認值，正常)、large(大)等。數(shù)值是常用的取值方式，常用單位如表11-2所示。

【例11-2】設(shè)置字體大小。

3.字體風格font-style

font-style屬性用于定義字體風格，如設(shè)置斜體、傾斜或正常字體。

語法格式如下：

font-style：關(guān)鍵字;

說明：font-style的屬性取值如表11-3所示。

【例11-3】設(shè)置字體斜體。

上述代碼在瀏覽器中的預(yù)覽效果如圖11-1所示，可以看出段落1和段落2均顯示為斜體。圖11-1設(shè)置字體斜體

4.字體粗細font-weight

在CSS中，使用font-weight屬性來定義字體粗細。

語法格式如下：

font-weight:關(guān)鍵字|數(shù)值;

說明：font-weight的屬性值可以取關(guān)鍵字，也可以是100～900的整百數(shù)，其可用屬性值如表11-4所示。

【例11-4】設(shè)置字體粗細。

上述代碼在瀏覽器中的預(yù)覽效果如圖11-2所示。

圖11-2設(shè)置字體粗細

5.字體樣式簡寫font

font屬性用于在一個聲明中設(shè)置所有字體屬性，可以按順序設(shè)置如下屬性：

·font-style；

·font-variant；

·font-weight；

·font-size/line-height；

·font-family。

6.網(wǎng)絡(luò)字體@font-face

@font-face是CSS3的新增規(guī)則，用于定義網(wǎng)絡(luò)字體。通過@font-face，開發(fā)者可以使用任何喜歡的字體，即使用戶計算機未安裝該字體也能正常顯示。開發(fā)者只需將字體文

件包含在自己的Web服務(wù)器上，它將在需要時自動下載給用戶。

【例11-5】網(wǎng)絡(luò)字體的應(yīng)用。

如果要使用網(wǎng)絡(luò)字體，先要從網(wǎng)上下載需要的字體保存到自己的Web站點中，然后通過@font-face規(guī)則定義網(wǎng)絡(luò)字體的名稱，并指明網(wǎng)絡(luò)字體保存的位置，之后便可以通過

font-family屬性設(shè)置字體為該網(wǎng)絡(luò)字體了。

11.1.2?文本外觀樣式

文本外觀樣式包含文本顏色、文本的排版、文本的修飾等。常用CSS文本外觀樣式屬性如表11-5所示。

1.文本顏色color

在CSS中，使用color屬性來定義文本顏色。

語法格式如下：

color：顏色值;

說明：顏色值可以通過以下方法指定：

·預(yù)定義的顏色名稱；

·十六進制顏色；

·RGB顏色；

·RGBA顏色；

·HSL顏色；

·HSLA顏色。

(1)預(yù)定義的顏色名稱。

HTML和CSS顏色規(guī)范中定義了147種顏色名稱，包含17種標準色和130種其他顏色。顏色名稱其實就是顏色的英文名，如red、blue、green等?，F(xiàn)在大部分開發(fā)工具

都會有代碼提示，可以幫助我們快速輸入顏色英文名，所以不必擔心不認識那些復(fù)雜的英文單詞。

(2)十六進制顏色。

十六進制色的格式為“#RRGGBB”，其中，RR表示紅色，GG表示綠色，BB表示藍色，所取的值必須介于00與FF之間，如“#FB0000”顯示為紅色，“#999999”顯示為灰色，如果每組色值為疊數(shù)，如“#6699CC”，就可以簡寫成“#69C”。

【例11-6】設(shè)置文本顏色。

2.文本水平對齊text-align

在CSS中，使用text-align屬性來控制文本水平方向的對齊方式。

語法格式如下：

text-align:關(guān)鍵字;

說明：text-align屬性取值如表11-6所示。

【例11-7】設(shè)置文本水平對齊方式。

上述代碼在瀏覽器中的預(yù)覽效果如圖11-3所示。圖11-3設(shè)置文本水平對齊方式

3.首行縮進text-indent

在CSS中，使用text-indent屬性來定義段落的首行縮進。

語法格式如下：

text-indent:數(shù)值;

【例11-8】設(shè)置段落首行縮進。

上述代碼在瀏覽器中的預(yù)覽效果如圖11-4所示。圖11-4設(shè)置段落首行縮進

4.行高line-height

行高即我們在Word中設(shè)置的行距，在CSS中，使用line-height屬性來定義行高。

語法格式如下：

line-height:數(shù)值;

【例11-9】設(shè)置行高。

上述代碼在瀏覽器中的預(yù)覽效果如圖11-5所示。圖11-5設(shè)置行高

5.文本裝飾text-decoration

在CSS中，text-decoration屬性用于設(shè)置或刪除文本裝飾，常用來刪除超鏈接的下劃線。

語法格式如下：

text-decoration:關(guān)鍵字;

說明：text-decoration的屬性取值如表11-7所示。

【例11-10】設(shè)置文本裝飾。

上述代碼在瀏覽器中的預(yù)覽效果如圖11-6所示。圖11-6設(shè)置文本裝飾

6.文本轉(zhuǎn)換text-transform

在CSS中，text-transform屬性用于轉(zhuǎn)換文本中英文字母的大小寫。

語法格式如下：

text-transform:關(guān)鍵字;

說明：text-transform的屬性取值如表11-8所示。

【例11-11】設(shè)置文本轉(zhuǎn)換。

上述代碼在瀏覽器中的預(yù)覽效果如圖11-7所示。圖11-7設(shè)置文本轉(zhuǎn)換

7.文本陰影text-shadow

在CSS中，text-shadow屬性用于為文本添加陰影。

語法格式如下：

text-shadow:h-offsetv-offsetblur-radiuscolor;

【例11-12】設(shè)置文本陰影。

上述代碼在瀏覽器中的預(yù)覽效果如圖11-8所示。圖11-8設(shè)置文本陰影

8.字符間距l(xiāng)etter-spacing

在CSS中，letter-spacing屬性用于定義字符間距。

語法格式如下：

letter-spacing:數(shù)值;

【例11-13】設(shè)置字符間距。

上述代碼在瀏覽器中的預(yù)覽效果如圖11-9所示。圖11-9設(shè)置字符間距

11.2背景樣式

11.2.1?背景顏色CSS中設(shè)置背景顏色的屬性是background-color。語法格式如下：background-color:顏色值;說明：此處顏色值的取值規(guī)則與文本顏色屬性color是一致的。另外，background_x0002_color還可以取值為“transparent”，表示透明背景。

【例11-14】設(shè)置背景顏色。

上述代碼在瀏覽器中的預(yù)覽效果如圖11-10所示。圖11-10設(shè)置背景顏色

11.2.2?背景圖像

在CSS中，與背景圖像相關(guān)的樣式屬性比較多，常用的背景圖像屬性如表11-9所示。

1.background-image屬性

background-image屬性是設(shè)置背景圖像的必須屬性，它定義了背景圖像的來源。

語法格式如下：

background-image:url("圖像地址");

說明：圖像地址即圖像的存儲位置，該地址的格式和<img>標簽的“src”屬性值格式相同。

【例11-15】設(shè)置背景圖像。

上述代碼在瀏覽器中的預(yù)覽效果如圖11-11所示。圖11-11設(shè)置背景圖像

2.background-repeat屬性

在CSS中，background-repeat屬性定義了背景圖像的平鋪方式，即重復(fù)顯示的方式。

語法格式如下：

background-repeat:關(guān)鍵字;

說明：background-repeat屬性取值如表11-10所示。

【例11-16】設(shè)置背景圖像重復(fù)。

上述代碼在瀏覽器中的預(yù)覽效果如圖11-12所示。圖11-12設(shè)置背景圖像重復(fù)

3.background-position屬性

在CSS中，background-position屬性定義了背景圖像的位置。

語法格式如下：

background-position:關(guān)鍵字|數(shù)值;

說明：不管是取關(guān)鍵字還是數(shù)值，一般都要設(shè)置兩個值，分別表示水平方向和垂直方向上的位置，兩個值之間有空格。如果只取一個值，那么另一個值自動為居中位置，取值規(guī)則如表11-11所示。

【例11-17】設(shè)置背景圖像位置。

上述代碼在瀏覽器中的預(yù)覽效果如圖11-13所示。

圖11-13設(shè)置背景圖像位置

4.background-attachment屬性

在CSS中，background-attachment屬性定義了背景圖像是固定還是隨著頁面的其余部分滾動。

語法格式如下：

background-attachment:關(guān)鍵字;

說明：background-attachment屬性取值如表11-12所示。

【例11-18】設(shè)置背景圖像固定。

上述代碼在瀏覽器中的預(yù)覽效果如圖11-14所示。圖11-14設(shè)置背景圖像固定

5.background-size屬性

background-size是CSS3新增屬性，規(guī)定了背景圖像的尺寸。

語法格式如下：

background-size:關(guān)鍵字|數(shù)值;

說明：background-size屬性的取值規(guī)則如表11-13所示。

【例11-19】設(shè)置背景圖像大小。

上述代碼在瀏覽器中的預(yù)覽效果如圖11-15所示。圖11-15設(shè)置背景圖像大小

6.背景樣式簡寫background

從上面的實例中我們可以看到，頁面的背景樣式通過很多的屬性來控制，為了簡化這些屬性的代碼，可以將這些屬性合并在同一個屬性中，這個屬性就是背景顏色的簡寫屬性：background。

background可以設(shè)置如下屬性：

·background-color；

·background-position；

·background-size；

·background-repeat；

·background-origin；

·background-clip；

·background-attachment；

·background-image。

如果不設(shè)置其中的某個值，也不會出問題，比如“background:#ff0url("T&J.jpg");”也是允許的。

11.3邊框樣式

11.3.1?整體邊框樣式邊框樣式的基本屬性包括3個：邊框?qū)挾萣order-width、邊框風格border-style、邊框顏色border-color。border-width和border-color必須結(jié)合border-style一起使用，否則在瀏覽器中無效果。

1.邊框?qū)挾萣order-width

邊框?qū)挾燃粗高吙蚓€條的粗細。border-width的語法格式如下：

border-width:關(guān)鍵字|數(shù)值;

說明：border-width屬性的取值規(guī)則如表11-14所示。

2.邊框風格border-style

邊框風格即指邊框的線型。border-style的語法格式如下：

border-style:關(guān)鍵字;

說明：border-style屬性取值如表11-15所示。

【例11-20】設(shè)置邊框風格。

上述代碼在瀏覽器中的預(yù)覽效果如圖11-16所示。圖11-16設(shè)置邊框風格

3.邊框顏色border-color

border-color屬性用來定義邊框的顏色，其語法格式如下：

border-color:顏色值;

說明：border-color的顏色取值參照color屬性。

【例11-21】設(shè)置邊框顏色。

4.邊框border

border屬性是border-width、border-style、border-color這3個屬性的簡潔寫法，其語法格式如下：

border:border-widthborder-styleborder-color;

說明：border-style是必須屬性。

例如，例11-21中的3行邊框樣式代碼“border-style:dashed;border-width:6px;border_x0002_color:#10F4E2;”可以簡寫為“border:6pxdashed#10F4E2;”。注意，3個屬性值之間用空格間隔。

5.圓角邊框border-radius

border-radius屬性是CSS3新增屬性，它可以給任何元素制作“圓角”，其語法格式如下：

border-radius:數(shù)值;

說明：這里的數(shù)值是邊框4個角內(nèi)切圓的半徑。border-radius的取值可以是1～4個，代表的含義如下：

(1)1個值(如：border-radius:10px)，表示四個圓角值相同。

(2)2個值(如：border-radius:10px20px)，第1個值為左上角與右下角，第2個值為右上角與左下角。

(3)3個值(如：border-radius:10px20px30px)，第一個值為左上角,第二個值為右上角和左下角，第三個值為右下角。

(4)4個值(如：border-radius:10px20px30px5px)，第一個值為左上角，第二個值為右上角，第三個值為右下角，第四個值為左下角。

【例11-22】設(shè)置圓角邊框。

上述代碼在瀏覽器中的預(yù)覽效果如圖11-17所示。圖11-17設(shè)置圓角邊框

11.3.2?局部邊框樣式

HTML中的元素都是方形的，所以邊框有四條邊，每一條邊的樣式都可以單獨定義。局部邊框樣式屬性如表11-16所示。

【例11-23】設(shè)置局部邊框樣式。

上述代碼在瀏覽器中的預(yù)覽效果如圖11-18所示。

圖11-18設(shè)置局部邊框樣式

11.3.3?表格邊框樣式

1.表格邊框間距border-spacing

在前面介紹HTML表格的模塊中，表格的單元格之間是有間距的。在CSS中，可以通過border-spacing屬性來控制相鄰單元格邊框間距離的大小。

border-spacing的語法格式如下：

border-spacing:數(shù)值;

【例11-24】設(shè)置表格邊框間距。

上述代碼在瀏覽器中的預(yù)覽效果如圖11-19所示。圖11-19設(shè)置表格邊框間距

2.表格邊框合并border-collapse

在CSS中，border-collapse屬性用于設(shè)置表格的邊框是否被合并為一個單一的邊框，還是像在標準HTML中那樣分開顯示。

border-collapse的語法格式如下：

border-collapse:關(guān)鍵字;

說明：border-collapse屬性取值如表11-17所示。

【例11-25】設(shè)置表格邊框合并。

上述代碼在瀏覽器中的預(yù)覽效果如圖11-20所示。

圖11-20設(shè)置表格邊框合并

注意：邊框合并和將邊框間距設(shè)置為0的效果是不同的。如果我們將上例的“border_x0002_collapse:collapse;”替換為“border-spacing:0;”，效果如圖11-21所示，可以觀察到所有單元格的邊框線都保留著，效果不如邊框合并好。

圖11-21設(shè)置表格邊框間距為0

11.4列表樣式

11.4.1?列表項符號在CSS中，不管是有序列表還是無序列表，都統(tǒng)一使用list-style-type屬性來定義列表項符號。list-style-type的語法格式如下：list-style-type:關(guān)鍵字;說明：list-style-type屬性的常用取值如表11-18所示。

【例11-26】設(shè)置列表項符號。

上述代碼在瀏覽器中的預(yù)覽效果如圖11-22所示。

圖11-22設(shè)置列表項符號

11.4.2?自定義列表項符號

在CSS中，可以選擇自己的圖片作為列表項符號。允許自定義列表項符號的屬性是list-style-image。

list-style-image的語法格式如下：

list-style-image:url("圖像地址");

說明：圖像地址即圖像的存儲位置，可以是相對地址，也可以是絕對地址。

【例11-27】設(shè)置自定義列表項符號

上述代碼在瀏覽器中的預(yù)覽效果如圖11-23所示。圖11-23設(shè)置自定義列表項符號

11.4.3?列表項符號位置

在CSS中，list-style-position屬性用于規(guī)定列表項目符號的位置。

list-style-position的語法格式如下：

list-style-position:關(guān)鍵字;

說明：list-style-position屬性取值如表11-19所示。

【例11-28】設(shè)置列表項符號位置。

上述代碼在瀏覽器中的預(yù)覽效果如圖11-24所示。圖11-24設(shè)置列表項符號位置

11.5案例：使用CSS美化網(wǎng)頁

【案例描述】本案例制作一個圖文并茂的網(wǎng)頁，介紹北京冬奧會、冬殘奧會吉祥物，并使用CSS樣式對網(wǎng)頁元素進行美化。案例源文件參考“模塊11案例”?！究己酥R點】CSS文本樣式、背景樣式、邊框樣式、列表樣式的設(shè)置。

【練習目標】

(1)掌握字體及文本外觀樣式屬性。

(2)掌握背景顏色及背景圖像的設(shè)置。

(3)掌握邊框樣式的設(shè)置。

(4)熟悉圓角邊框樣式屬性。

(5)熟悉列表樣式的設(shè)置。

【案例源代碼】

【運行結(jié)果】

源代碼的運行結(jié)果如圖11-25所示。

圖11-25頁面運行結(jié)果

【案例分析】

本案例頁面元素包含標題文本、段落文本、列表項、圖片等，所有頁面內(nèi)容都包含在div元素內(nèi)。在CSS樣式表中，首先使用選擇器“div”設(shè)置div元素的背景圖像、背景圖像位置等樣式。接下來選擇器“h1”為h1標題設(shè)置字體大小、對齊方式、背景顏色等樣式。“冰墩墩”與“雪容融”小標題以列表的形式定義，并添加了超鏈接，所以文本的樣式設(shè)置在超鏈接a元素上，使用選擇器“h3>a”設(shè)置了超鏈接文本顏色、文本裝飾等樣式；列表項符號的樣式設(shè)置在ul元素上，使用選擇器“ul”為列表項設(shè)置自定義的圖片項目符號。

使用選擇器“p”為段落p元素設(shè)置首行縮進樣式。選擇器“.pimgimg”為兩張圖設(shè)置了邊框樣式及圓角邊框樣式。在模塊12中，將會講解如何設(shè)置文本環(huán)繞圖片，這樣頁面效果會更美觀。

思考與練習題

一、選擇題1.下列選項中不是字體樣式屬性的是()。A.font-family

B.font-sizeC.border

D.font-style2.要去除超鏈接的下劃線，應(yīng)設(shè)置text-decoration屬性的值為()。