- WebGL 3D開發(fā)實(shí)戰(zhàn)詳解（第2版）
- 吳亞峰 于復(fù)興 索依娜
- 7078字
- 2020-07-07 17:17:03
1.4 初識(shí)CSS
CSS（層疊樣式表）用來規(guī)定HTML文檔的呈現(xiàn)形式和格式編排，本節(jié)會(huì)向讀者簡(jiǎn)要介紹CSS。此部分不是我們開發(fā)的重點(diǎn)，講解如何創(chuàng)建和應(yīng)用CSS樣式等以為將來的開發(fā)打下基礎(chǔ)。把樣式添加到HTML中是為了解決內(nèi)容與表現(xiàn)分離的問題。
HTML標(biāo)簽原本被設(shè)計(jì)用于定義文檔內(nèi)容，同時(shí)文檔布局由瀏覽器來完成，而不使用任何的格式化標(biāo)簽。由于HTML標(biāo)簽與屬性不斷被添加到HTML的規(guī)范中，創(chuàng)建文檔內(nèi)容使其清晰地獨(dú)立于文檔表現(xiàn)層的站點(diǎn)會(huì)變得越來越困難，所以W3C在HTML 4.0之外創(chuàng)造出樣式。
1.4.1 CSS簡(jiǎn)介
樣式表定義如何顯示HTML元素，樣式通常保存在外部的．CSS文件中。通過編輯一個(gè)簡(jiǎn)單的CSS文檔，外部樣式表使你有能力同時(shí)改變站點(diǎn)中所有頁面的布局和外觀。由于它允許同時(shí)控制多重頁面的樣式和布局，所以CSS可以稱得上Web設(shè)計(jì)領(lǐng)域的一個(gè)突破。
作為開發(fā)者可以為每個(gè)元素定義好樣式，并將其應(yīng)用到不同的頁面中。也可以進(jìn)行全局布置，只需要簡(jiǎn)單地改變樣式，然后網(wǎng)站中的所有元素均會(huì)自動(dòng)更新。這樣的工作方式大大減少了開發(fā)時(shí)間，提高了開發(fā)效率。
h1 {color:red; font-size:14px; }
上述代碼為CSS的基本定義，并且代碼中定義了多種樣式信息。樣式規(guī)定可以在單個(gè)的HTML元素中，在HTML頁的頭元素中，或在一個(gè)外部的CSS文件中，甚至可以在同一個(gè)HTML文檔內(nèi)部引用多個(gè)外部樣式表。
注意
一般而言，所有樣式會(huì)根據(jù)下面的規(guī)則層疊于一個(gè)新的虛擬樣式表中，其中數(shù)字4擁有最高優(yōu)先權(quán)。
1．瀏覽器默認(rèn)設(shè)置。
2．外部樣式表。
3．內(nèi)部樣式表（位于<head>標(biāo)簽內(nèi)部）。
4．內(nèi)聯(lián)樣式（在HTML元素內(nèi)部）。
內(nèi)聯(lián)樣式（在HTML元素內(nèi)部）擁有最高優(yōu)先權(quán)，這意味著它將優(yōu)先于以下的樣式聲明：<head>標(biāo)簽中的樣式聲明，外部樣式表中的樣式聲明，瀏覽器中的樣式聲明（默認(rèn)值）。
1.4.2 CSS基礎(chǔ)語法
CSS規(guī)則由兩個(gè)主要的部分構(gòu)成，分別是選擇器和一條或多條聲明。選擇器通常是需要改變樣式的HTML元素，每條聲明由一個(gè)屬性與一個(gè)值構(gòu)成，如果有多條屬性即有多條聲明，那么就用分號(hào)分開。聲明中的屬性為我們需要改變的樣式屬性，在下面的小節(jié)中我們會(huì)重點(diǎn)講述它們。
聲明樣式時(shí)需要用大括號(hào)（花括號(hào)）包圍聲明，我們來看一下圖1-16，所示代碼為上一節(jié)介紹的那行代碼，以此為例我們來看一下選擇器部分為h1元素并且后面花括號(hào)中為兩條聲明，它們分別包含著屬性與各自需要的值。
圖1-16 CSS樣式表聲明
如果要定義多個(gè)聲明，則需要用分號(hào)將每個(gè)聲明分開。最后一條規(guī)則是不需要加分號(hào)的，因?yàn)榉痔?hào)在英語中是一個(gè)分隔符號(hào)，不是結(jié)束符號(hào)。然而，平時(shí)有經(jīng)驗(yàn)的人都會(huì)在每條聲明的末尾加上分號(hào)，這樣的好處是，當(dāng)從現(xiàn)有的規(guī)則中增減聲明時(shí)，會(huì)盡可能地減少出錯(cuò)的可能性。
由于大多數(shù)樣式表中不止有一條聲明，所以在編輯時(shí)適時(shí)使用空格會(huì)使樣式表更容易編輯。是否包含空格不會(huì)影響CSS在瀏覽器中的工作效果，但是加上空格后不論是自己還是其他人都會(huì)比較容易理解代碼的結(jié)構(gòu)。
h1, h2, h3, h4, h5, h6 { color: green; }
上述代碼演示的為選擇器的分組，在開發(fā)過程常會(huì)遇到多個(gè)選擇器需要的樣式是一樣的，此時(shí)我們便會(huì)像上述代碼一樣編寫而不是每個(gè)選擇器寫一遍。用逗號(hào)將選擇器分開，這樣這些選擇器便會(huì)享有同樣的聲明。
在CSS中子元素繼承父元素的屬性，但是它并不總按照此方式工作。我們來看一下下面一行代碼，根據(jù)繼承原則來看，站點(diǎn)的body元素將使用Verdana字體。通過繼承規(guī)則所有的子元素都會(huì)繼承父元素（body）的屬性，事實(shí)上也是這么回事。
body {font-family: Verdana, sans-serif; }
在瀏覽器大戰(zhàn)的年代里，這種情況則未必會(huì)發(fā)生，那時(shí)候?qū)?biāo)準(zhǔn)的支持并不是企業(yè)的優(yōu)先選擇。比方說，Netscape 4就不支持繼承，它不僅忽略繼承，而且也忽略應(yīng)用于body元素的規(guī)則。從IE/Windows直到IE6還存在相關(guān)的問題，表格內(nèi)的字體樣式會(huì)被忽略。
那么此時(shí)我們?cè)撛趺崔k呢？幸運(yùn)的是，可以使用名為"Be Kind to Netscape 4"的冗余法則來處理舊式瀏覽器無法理解的繼承問題。IE4瀏覽器無法理解繼承，不過它們可以理解組選擇器。這么做雖然會(huì)浪費(fèi)一些用戶的帶寬，但是如果需要對(duì)Netscape 4用戶進(jìn)行支持，就不必這么做。
1 body {font-family: Verdana, sans-serif; }
2 p, td, ul, ol, li, dl, dt, dd {font-family: Verdana, sans-serif; }
如果希望父元素中的某些元素不繼承父類的屬性，這時(shí)也可以像上述代碼一樣在聲明完body元素的樣式以后，單獨(dú)聲明一下與父類元素不同的元素樣式，這樣也就巧妙地避開了所有的子元素都必須繼承父元素的問題。
1.4.3 如何插入樣式表
當(dāng)讀到一個(gè)樣式表時(shí)，瀏覽器會(huì)根據(jù)它來格式化HTML文檔。插入樣式表的方法有3種，外部樣式表、內(nèi)部樣式表、內(nèi)聯(lián)樣式。
當(dāng)樣式需要應(yīng)用于很多頁面時(shí)，外部樣式表為首選。在使用外部樣式表的情況下，可以通過改變一個(gè)文件來改變整個(gè)站點(diǎn)的外觀。每個(gè)頁面使用<link>標(biāo)簽鏈接到樣式表。<link>標(biāo)簽在（文檔的）頭部。下面代碼就是如何引入外部樣式表的示例。
<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>
瀏覽器會(huì)從文件mystyle.css中讀到樣式聲明，并根據(jù)它來格式化文檔。外部樣式表可以在任何文本編輯器中進(jìn)行編輯，文件不能包含任何的html標(biāo)簽，樣式表應(yīng)該以．css擴(kuò)展名進(jìn)行保存。下面是一個(gè)樣式表文件的例子。
1 hr {color: sienna; }
2 p {margin-left: 20px; }
3 body {background-image: url("images/back40.gif"); }
上述內(nèi)容為一個(gè)簡(jiǎn)單的外部樣式表文件，該文件以．css擴(kuò)展名結(jié)尾。在編寫這部分文件時(shí)需要注意，不要在屬性值與單位之間留有空格。例如使用“margin-left: 20 px”而不是“margin-left:20px”，它僅在IE 6中有效，但是在Firefox或Netscape中卻無法正常工作。
有時(shí)候會(huì)遇到單獨(dú)的某個(gè)界面需要特殊的樣式，這時(shí)候外部樣式表不再方便，我們會(huì)用其他的方法代替外部樣式表，它就是內(nèi)部樣式表。內(nèi)部樣式表中使用<style>標(biāo)簽在文檔頭部定義內(nèi)部樣式表，其用法與其余標(biāo)簽并無多大差別，我們來看一下下面這個(gè)例子。
1 <html><head>
2 <style type="text/css">
3 h1 {color: red}
4 p {color: blue}
5 </style></head>
6 <body><h1>header 1</h1>
7 <p>A paragraph.</p>
8 </body></html>
說明
本段代碼單純表示了<style>標(biāo)簽的用法，在style中，可以規(guī)定在瀏覽器中如何呈現(xiàn)HTML文檔。type屬性是必需的，它定義style元素的內(nèi)容。唯一可能的值是"text/css"。style元素位于head部分中。
除了上述兩種插入樣式表的方法外，還有內(nèi)聯(lián)樣式，由于要將表現(xiàn)和內(nèi)容混雜在一起，所以內(nèi)聯(lián)樣式會(huì)損失掉樣式表的許多優(yōu)勢(shì)。請(qǐng)慎用這種方法，要想使用內(nèi)聯(lián)樣式，你需要在相關(guān)的標(biāo)簽內(nèi)使用樣式的style屬性。style屬性可以包含任何CSS屬性。
1 <p style="color: sienna; margin-left: 20px">
2 This is a paragraph</p>
上述代碼展示了如何改變段落的顏色和左外邊距，在段落標(biāo)簽中使用了<style>屬性。使用<style>屬性比起前兩種方法來說，當(dāng)頁面需要的樣式比較多時(shí)，這會(huì)相當(dāng)麻煩，這便損失了樣式表的優(yōu)勢(shì)。
1.4.4 使用CSS樣式
本節(jié)我們會(huì)就CSS的某些樣式（比如背景、文本、字體、鏈接等）來詳細(xì)講解其用法，會(huì)有翔實(shí)的代碼與運(yùn)行效果圖來幫助我們理解這些樣式。本節(jié)介紹的都是CSS的基礎(chǔ)樣式，許多CSS的高級(jí)應(yīng)用我們并沒有講述由于篇幅限制，有興趣讀者可以自己查找資料學(xué)習(xí)。
1．CSS背景應(yīng)用
CSS允許應(yīng)用純色作為背景，也允許使用背景圖像創(chuàng)建相當(dāng)復(fù)雜的效果。CSS在這方面的能力遠(yuǎn)在HTML之上。本節(jié)在應(yīng)用各種背景案例時(shí)也會(huì)將CSS背景的屬性介紹給大家，讀者在學(xué)習(xí)的同時(shí)也應(yīng)注意這方面內(nèi)容。
圖1-17所示為CSS背景屬性應(yīng)用。本案例中的背景圖片是放置在中間并且當(dāng)滾動(dòng)條被拖動(dòng)時(shí)背景圖片不會(huì)改變位置，始終在center位置。本部分內(nèi)容除了書中講述的以外，讀者還需注意代碼內(nèi)容，段落標(biāo)簽與注釋中的很多內(nèi)容說明了該屬性的注意事項(xiàng)，現(xiàn)在看一下案例的開發(fā)過程。
圖1-17 Sample1_15背景屬性應(yīng)用案例效果
代碼位置：隨書源代碼/第1章目錄下的HTML5/Sample1_15.html。
1 <! DOCTYPE html>
2 <html><head><title>Sample1_15</title>
3 <style type="text/css">
4 body {background-image:url(pic/background1.png);
5 background-repeat: no-repeat;
6 background-attachment:fixed;
7 background-position:center; }
8 <! --背景圖片的重復(fù)方式，此時(shí)為在不設(shè)置重復(fù)方式。x為在水平方向上重復(fù)，
9 不加x或者y時(shí)為水平方向與垂直方向上都重復(fù)。no-repeat為不重復(fù)只顯示一張圖片。
10 attachment屬性設(shè)置為fixed才能保證position屬性在Firefox與Opera中正常工作。
11 對(duì)于設(shè)置位置，除了規(guī)定的幾個(gè)值之外，我們還可以自定%與像素值，并用兩個(gè)百分?jǐn)?shù)
12 代替center。-->
13 h1 {background-color: #00ff00}
14 h2 {background-color: transparent}
15 p.no1{background-color: rgb(250,0,255)}
16 p.no2 {background-color: gray; padding: 20px; }
17 span.highlight{
18 background-color:blue}
19 <! --background-color后跟的顏色值為設(shè)置的背景顏色，因?yàn)楸纠O(shè)置了背
20 景圖片，所以就沒有設(shè)置背景顏色，若想設(shè)置主體的背景顏色，則直接將
21 background-image改為color即可。若想在具體的某些元素中應(yīng)用背景，那么直接在
22 樣式表中相應(yīng)元素的位置下設(shè)置background color或者image即可，這里演示了設(shè)置背景顏色
23 的方式，背景圖片與其類似，不再演示。-->
24 </style></head>
25 <body>
26 <h1>這是標(biāo)題 1</h1><h2>這是標(biāo)題 2</h2>
27 <p class="no1">這是段落</p>
28 <p class="no2">這個(gè)段落設(shè)置了內(nèi)邊距。</p>
29 <p><span class="highlight">這是文本。</span> 這是文本。 這是文本。 這是文本。
30 這是文本。 這是文本。 這是文本。 這是文本。 這是文本。 這是文本。 這是文本。
31 這是文本。 這是文本。 這是文本。 這是文本。 這是文本。 這是文本。
32 <span class="highlight">這是文本。</span></p>
33 <p>如此編寫代碼是為了演示在這樣設(shè)置背景圖片時(shí)，圖像不會(huì)隨頁面的其余部分滾動(dòng)。</p>
34 <p>我們除了可以在style部分逐條設(shè)置屬性之外，還可以這樣設(shè)置，其與上面那樣設(shè)置效果一樣，</br>
35 但是不容易分辨。background: #ff0000 url(pic/background1.png) no-repeat fixed center</p>
36 <p>現(xiàn)在介紹一下CSS背景中的屬性：</p>
37 <p>background為簡(jiǎn)寫屬性，其作用是將背景屬性設(shè)置在一個(gè)聲明中。</p>
38 <p>background-attachment為背景圖片是否固定或隨頁面其余部分移動(dòng)，</br>
39 除了上面的fixed之外還有scroll，它為默認(rèn)值圖像會(huì)隨著頁面移動(dòng)。
40 inherit規(guī)定從父元素繼承本屬性的設(shè)置。</p>
41 <p>background-color設(shè)置背景顏色</p>
42 <p>background-image設(shè)置背景圖片</p>
43 <p>background-position設(shè)置圖片的起始位置</p>
44 <p>設(shè)置起始位置的值，不論用固定的幾個(gè)值還是自定義的%或者像素</p>
45 <p>都為兩個(gè)值，如果只規(guī)定了一個(gè)值那么第二個(gè)值默認(rèn)會(huì)為50%或者center</p>
46 <p>top、bottom、center會(huì)與left、right、center搭配。</p>
47 <p>background-repeat設(shè)置背景圖片的重復(fù)方式</p>
48 <p>其值有no-repeat（不重復(fù)）, repeat-x（水平方向重復(fù)）</p>
49 <p>repeat-y（垂直方向重復(fù)）, repeat（水平方向與垂直方向都重復(fù)）默認(rèn)值</p>
50 <p>inherit為繼承父元素本屬性的值。</p>
51 <p>圖像不會(huì)隨頁面的其余部分滾動(dòng)。</p>
52 ……//此處省略一些同類代碼，讀者可以自行查閱隨書源代碼。
53 </body></html>
? 第4～12行為設(shè)置背景圖片的各個(gè)屬性的樣式表，在一般開發(fā)中如果不設(shè)置重復(fù)方式，則默認(rèn)重復(fù)方式為縱向與橫向重復(fù)，如果不設(shè)置background-attachment屬性，那么在一些瀏覽器中position無法工作。
? 第13～24行為給頁面中的文本標(biāo)簽設(shè)置的樣式表。一般情況下背景圖片與背景顏色可以互相頂替。由于現(xiàn)在的頁面越來越精美，所以圖片的應(yīng)用越來越多，但是背景顏色也是不可或缺的一部分，在日后的開發(fā)中讀者應(yīng)該根據(jù)需求來選擇。
? 第25～40行為前面設(shè)置的樣式表的相應(yīng)文本標(biāo)簽的應(yīng)用。在此部分中設(shè)置了class值，讀者可以根據(jù)相應(yīng)的class值來對(duì)應(yīng)樣式表來學(xué)習(xí)樣式表的開發(fā)。CSS部分的代碼主要在上面的部分，body中的標(biāo)簽應(yīng)用我們?cè)谥耙呀?jīng)講過。
? 第41～53行主要講述了設(shè)置位置的方法。一般在HTML開發(fā)中涉及位置的應(yīng)用時(shí)都會(huì)有用像素設(shè)置或者用百分?jǐn)?shù)設(shè)置，兩種方式都可以，百分?jǐn)?shù)設(shè)置可以使位置更加形象以讓開發(fā)者改變。
CSS背景應(yīng)用基礎(chǔ)屬性的講解到這里已經(jīng)結(jié)束，雖然案例中的講述十分簡(jiǎn)單，但是我們可以看到頁面背景的一大部分。結(jié)合本節(jié)所學(xué)用的一些技巧，我們可以開發(fā)出很多精美的頁面，讀者學(xué)到這些基本內(nèi)容后應(yīng)該勤加練習(xí)才能掌握開發(fā)精美界面的技巧。
2．CSS文本應(yīng)用
在日常瀏覽網(wǎng)頁時(shí)不難發(fā)現(xiàn)，頁面中的大部分內(nèi)容是各種文本，所以文本的排版應(yīng)用在HTML開發(fā)中占有很重要的地位。比起在每段文本標(biāo)簽中都加入文本樣式，用統(tǒng)一的樣式表來設(shè)置這些文本會(huì)更加簡(jiǎn)便。
圖1-18所示為CSS文本案例應(yīng)用效果，CSS文本屬性可定義文本的外觀。通過文本屬性，可以改變文本的顏色、字符間距，以及對(duì)齊文本、裝飾文本和對(duì)文本進(jìn)行縮進(jìn)等。在本案例中這些屬性全部應(yīng)用了，現(xiàn)在來看一下開發(fā)過程。
圖1-18 Sample1_16全局屬性應(yīng)用案例效果
代碼位置：隨書源代碼/第1章目錄下的HTML5/Sample1_16.html。
1 <! DOCTYPE html>
2 <html><head><title>Sample1_16</title>
3 <style type="text/css">
4 body {color:red}
5 h1 {color:#00ff00}
6 p.ex {color:rgb(0,0,255)}
7 h2 {letter-spacing: -0.5em}
8 h4 {letter-spacing: 20px}
9 p.small {line-height: 90%}
10 p.big {line-height: 200%}
11 p.small1{line-height: 0.5}
12 p.big1{line-height: 2}
13 h3 {text-align: center}
14 h5 {text-align: left}
15 h6 {text-align: right}
16 p.a{text-decoration: overline}
17 p.b{text-decoration: line-through}
18 p.c{text-decoration: underline}
19 p.d{text-decoration: blink}
20 p.e{text-indent: 1cm}
21 p.s{word-spacing: 90px; }
22 p.t{word-spacing: -0.5em; }
23 </style></head>
24 <body>
25 <h1>這是標(biāo)題1</h1>
26 <p>這是一段普通的段落。請(qǐng)注意，該段落的文本顏色是紅色的。在body
27 選擇器中定義了本頁面默認(rèn)的文本顏色。</p>
28 <p class="ex">該段落定義class的值為ex。所以該段落中的文本是藍(lán)色的。</p>
29 <p>下面為設(shè)置字符之間的間距與行間距：</p>
30 <h2>這里為標(biāo)題2</h2><h4>這里為標(biāo)題4</h4>
31 <p>這是擁有標(biāo)準(zhǔn)行高的段落。</br>
32 在大多數(shù)瀏覽器中默認(rèn)行高是110%～120%。</br></p>
33 <p class="small">這個(gè)段落擁有更小的行高。</br>這個(gè)段落擁有更小的行高。</p>
34 <p class="big">這個(gè)段落擁有更大的行高。</br>這個(gè)段落擁有更大的行高。</p>
35 <p>現(xiàn)在的行高是像素規(guī)定的，這是擁有標(biāo)準(zhǔn)行高的段落。</br>默認(rèn)行高大約是1。</p>
36 <p class="small1">這個(gè)段落擁有更小的行高。</br>這個(gè)段落擁有更小的行高。</p>
37 <p class="big1">這個(gè)段落擁有更大的行高。</br>這個(gè)段落擁有更大的行高。</p>
38 <p>接下來演示如何對(duì)齊文本：</p>
39 <h3>這是標(biāo)題 3</h3><h5>這是標(biāo)題 5</h5><h6>這是標(biāo)題 6</h6>
40 <p class="a">這里的文本修飾是overline</p>
41 <p class="b">這里的文本修飾是line-through</p>
42 <p class="c">這里的文本修飾是underline</p>
43 <p class="d">這里的文本修飾是blink</p>
44 <p class="e">現(xiàn)在我們來看縮進(jìn)文本，這里就是縮進(jìn)文本示例。</p>
45 <p class="e">現(xiàn)在我們來看縮進(jìn)文本，這里就是縮進(jìn)文本示例。</p>
46 <p class="e">現(xiàn)在我們來看縮進(jìn)文本，這里就是縮進(jìn)文本示例。</p>
47 <p class="e">現(xiàn)在我們來看縮進(jìn)文本，這里就是縮進(jìn)文本示例。</p>
48 <p class="e">現(xiàn)在我們來看縮進(jìn)文本，這里就是縮進(jìn)文本示例。</p>
49 <p class="e">現(xiàn)在我們來看縮進(jìn)文本，這里就是縮進(jìn)文本示例。</p>
50 <p class="s">This is some text.</p><p class="t">This is some text.</p>
51 </body></html>
? 第4～23行為文本標(biāo)簽的樣式表設(shè)置。樣式表中各個(gè)屬性已在相應(yīng)的文本標(biāo)簽內(nèi)容與注釋中進(jìn)行了介紹，并也有用法，本部分的樣式表依然沿用了上個(gè)案例中的標(biāo)簽設(shè)置方法，即使用class屬性來設(shè)置樣式。
? 第25～35行為應(yīng)用上面的樣式表。由于body中設(shè)置的文本顏色為紅色，所以本案例主體中的文本顏色都為紅色，除非有特殊設(shè)置，即有的樣式表用聲明class值的方法改變了自己的樣式。
? 第36～51行為行高屬性、文本修飾、縮進(jìn)文本屬性的應(yīng)用。在案例中使用兩種方式來設(shè)置行高。讀者對(duì)照著段落標(biāo)簽聲明的class值去學(xué)習(xí)文本修飾即可，最后我們還演示了在增加單詞之間的間距時(shí)應(yīng)注意為單詞之間添加空格。
頁面中的文本是HTML開發(fā)中有多種變化的一部分。由于在開發(fā)時(shí)需要每部分文本設(shè)置不同的文本樣式，所以本部分介紹的屬性讀者應(yīng)該熟練掌握，并且勤加練習(xí)。在練習(xí)的時(shí)候可以更改不同的值以達(dá)到學(xué)以致用的目的。
3．CSS字體應(yīng)用
上一節(jié)介紹了頁面中文本樣式表的設(shè)置方法，本節(jié)我們來細(xì)化這個(gè)問題。設(shè)置好文本樣式后，我們來設(shè)置一下組成文本的字體樣式，CSS字體屬性定義文本的字體系列、大小、加粗、風(fēng)格（如斜體）和變形（如小型大寫字母）。
圖1-19所示為CSS字體案例應(yīng)用效果。在平時(shí)生活中我們會(huì)經(jīng)常接觸Word文檔，在文檔里面會(huì)經(jīng)常設(shè)置字體的大小、類型、顏色、加粗、傾斜等一系列形式。這就是我們現(xiàn)在所講述的問題，即如何開發(fā)CSS字體，現(xiàn)在來看一下開發(fā)代碼。
圖1-19 Sample1_17全局屬性應(yīng)用案例效果
代碼位置：隨書源代碼/第1章目錄下的HTML5/Sample1_17.html。
1 <! DOCTYPE html><html><head><title>Sample1_17</title>
2 <style type="text/css">
3 p.serif{font-family:"Times New Roman", Georgia, Serif}
4 p.sansserif{font-family:Arial, Verdana, Sans-serif}
5 p.normal {font-style:normal}
6 p.italic {font-style:italic}
7 p.oblique {font-style:oblique}
8 p.varnormal {font-variant: normal}
9 p.varsmall {font-variant: small-caps}
10 p.wenormal {font-weight: normal}
11 p.wethick {font-weight: bold}
12 p.wethicker {font-weight: 900}
13 h1.px {font-size:60px; }
14 h2.px {font-size:40px; }
15 p.px {font-size:14px; }
16 h1.em {font-size:3.75em; }h2.em {font-size:2.5em; }
17 p.em {font-size:0.875em; }</style></head>
18 <body>
19 <p>現(xiàn)在演示的是指定字體系列：</p>
20 <p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
21 <p class="sansserif">This is a paragraph, shown in the Arial font.</p>
22 <! --建議在所有font-family 規(guī)則中都提供一個(gè)通用字體系列，這樣就提供了一個(gè)候選
23 在用戶代理無法提供與規(guī)則匹配的特定字體時(shí)，就可以選擇一個(gè)候選字體。需要
24 注意的是，只有當(dāng)字體名中有一個(gè)或多個(gè)空格（比如New York），或者字體名包括
25 # 或 $ 之類的符號(hào)，才需要在font-family聲明中加引號(hào)。-->
26 <p>現(xiàn)在來看一下font-style屬性，該屬性最常用于規(guī)定斜體文本。</p>
27 <p class="normal">本段示例規(guī)定為font-style屬性中的normal值。</p>
28 <p class="italic">本段示例規(guī)定為font-style屬性中的italic值。</p>
29 <p class="oblique">本段示例規(guī)定為font-style屬性中的oblique值。</p>
30 <! --font-style的值為上面演示的3個(gè)，斜體（italic）是一種簡(jiǎn)單的字體風(fēng)格，
31 它對(duì)每個(gè)字母結(jié)構(gòu)有一些小改動(dòng)以反映變化的外觀。與此不同，傾斜（oblique）
32 文本則是正常豎直文本的一個(gè)傾斜版本。在瀏覽器中我們看到兩者沒有差別。-->
33 <p>這里演示的是font-variant屬性，該屬性可以設(shè)定大小寫字母。</p>
34 <p class="varnormal">This is a paragraph</p>
35 <p class="varsmall">This is a paragraph</p>
36 <p>現(xiàn)在來看一下字體加粗屬性font-weight:</p>
37 <p class="wenormal">This is a paragraph</p>
38 <p class="wethick">This is a paragraph</p>
39 <p class="wethicker">This is a paragraph</p>
40 <! --100 ~ 900為字體指定了9級(jí)加粗度，100對(duì)應(yīng)最細(xì)的字體變形，900對(duì)應(yīng)
41 最粗的字體變形。數(shù)字400等價(jià)于normal，而700等價(jià)于bold。-->
42 <p>現(xiàn)在來演示一下如何設(shè)置字體大?。?lt;/p>
43 <h1 class="px">這是標(biāo)題1，用像素設(shè)置字體大小</h1>
44 <h2 class="px">這是標(biāo)題2，用像素設(shè)置字體大小</h2>
45 <p class="px">這是一個(gè)段落，用像素設(shè)置字體大小</p>
46 <! --有管理文本大小的能力在Web設(shè)計(jì)領(lǐng)域很重要。但是，不應(yīng)當(dāng)通過調(diào)整文
47 本大小使段落看上去像標(biāo)題，或者使標(biāo)題看上去像段落。請(qǐng)始終使用正確的HTML
48 標(biāo)題，比如使用 <h1> - <h6> 來標(biāo)記標(biāo)題，使用 <p> 來標(biāo)記段落。如果沒有規(guī)
49 定字體大小，則普通文本（比如段落）的默認(rèn)大小是16像素-->
50 <p>現(xiàn)在來看一下用em來設(shè)置字體大小：</p>
51 <h1 class="em">這是標(biāo)題1，用em設(shè)置字體大小</h1>
52 <h2 class="em">這是標(biāo)題2，用em設(shè)置字體大小</h2>
53 <p class="em">這是一個(gè)段落，用em設(shè)置字體大小</p>
54 <! --16px=1em px表示像素。除了IE之外其余瀏覽器均可支持用像素
55 調(diào)整字體大小，但是為了在IE上也能調(diào)整W3C也推薦使用em尺寸單位。-->
56 </body></html>
? 第2～18行為樣式表的聲明。在CSS中，有兩種不同類型的字體系列名稱：通用字體系列（擁有相似外觀的字體系統(tǒng)組合）和特定字體系列（具體的字體系列）。除了各種特定的字體系列外，CSS還定義了5種通用字體系列：Serif、Sans-serif、Monospace、Cursive、Fantasy字體。
? 第19～32行演示了指定字體與規(guī)定斜體文本。如果用戶代理上沒有安裝指定字體，就只能使用用戶代理默認(rèn)的字體來顯示本元素。除此之外可以選擇一個(gè)候選字體，本案例就是這么操作的。斜體文本的區(qū)別在注釋中已經(jīng)介紹，這里便不在介紹了。
? 第33～56行為字體加粗與設(shè)置文本的字體大小。HTML中的粗度有9級(jí)，分別是100～900,100為最細(xì)粗度，900為最粗粗度，400等價(jià)于font-weight值中的normal,700等價(jià)于bold。在設(shè)置文本字體大小時(shí)W3C推薦使用em尺寸單位，因?yàn)橛行g覽器不支持像素大小。
CSS字體樣式表的本質(zhì)就是通過font-family、size、stretch、style、variant、weight這些屬性來設(shè)置字體的系列、尺寸、拉伸、字體風(fēng)格、小型大寫字體或者正常字體以顯示文本、字體粗細(xì)。通過設(shè)置一系列的字體屬性達(dá)到與文本樣式表的匹配進(jìn)而實(shí)現(xiàn)精美界面。
4．CSS鏈接與表格應(yīng)用
本節(jié)為CSS部分的最后一節(jié)，將要講述CSS鏈接與表格的屬性應(yīng)用。由于篇幅限制這里省略了列表屬性的應(yīng)用，盡管不是描述性文本中的任何內(nèi)容都可以認(rèn)為是列表，但是CSS中列表樣式不太豐富而且應(yīng)用比較簡(jiǎn)單，所以便沒有介紹它。
圖1-20所示為CSS鏈接和表格案例應(yīng)用效果。介紹鏈接屬性之前我們來介紹一下鏈接的4種狀態(tài)：link、visited、hover、active，它們分別代表未訪問的鏈接、用戶已經(jīng)訪問、鼠標(biāo)直接位于鏈接上方、鏈接被單擊的時(shí)刻，現(xiàn)在來看一下開發(fā)過程。
圖1-20 Sample1_18全局屬性應(yīng)用案例效果
代碼位置：隨書源代碼/第1章目錄下的HTML5/Sample1_18.html。
1 <! DOCTYPE html>
2 <html><head><title>Sample1_18</title>
3 <style type="text/css">
4 a:link {color:#FF0000; }<! --未被訪問的鏈接-->
5 a:visited {color:#00FF00; }<! --已被訪問的鏈接-->
6 a:hover {color:#FF00FF; }<! --鼠標(biāo)移動(dòng)到鏈接上-->
7 a:active {color:#0000FF; }<! --正在被單擊的鏈接-->
8 a.one:link {color:#ff0000; }
9 a.one:visited {color:#0000ff; }
10 a.one:hover {font-size:150%; }
11 a.two:link {color:#ff0000; }
12 a.two:visited {color:#0000ff; }
13 a.two:hover {font-family:’微軟雅黑’; }
14 #customers{
15 font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
16 width:100%; border-collapse:collapse; }
17 #customers td, #customers th{
18 font-size:1em; border:1px solid #98bf21;
19 padding:3px 7px 2px 7px; }
20 #customers th {
21 font-size:1.1em; text-align:left; padding-top:5px;
22 padding-bottom:4px; background-color:#A7C942; color:#ffffff; }
23 #customers tr.alt td {
24 color:#000000; background-color:#EAF2D3; }
25 </style></head>
26 <body>
27 <p><b><a href="Sample1_1.html" target="_blank">
28 這是一個(gè)鏈接</a></b></p>
29 <! --為了使定義生效，a:hover必須位于a:link和a:visited之后，
30 a:active必須位于a:hover之后-->
31 <p>鏈接除了設(shè)置color之外還可以設(shè)置背景顏色，
32 就是在樣式表中將color換為background-color。</p>
33 <p>除了基本改變鏈接的顏色外，還可以改變鏈接字體、尺寸等，
34 這些實(shí)現(xiàn)起來并不困難，用到的方法全是之前講述過的：</p>
35 <p><b><a class="one" href="Sample1_1.html" target="_blank">
36 這個(gè)鏈接可以改變字體尺寸</a></b></p>
37 <p><b><a class="two" href="Sample1_1.html" target="_blank">
38 這個(gè)鏈接可以改變字體</a></b></p>
39 <p>現(xiàn)在介紹一下表格的樣式表，首先制作一個(gè)精美的表格。</p>
40 <table id="customers"><tr>
41 <th>Company</th><th>Contact</th><th>Country</th></tr>
42 <tr><td>Apple</td><td>Steven Jobs</td><td>USA</td></tr>
43 <tr class="alt"><td>Baidu</td><td>Li YanHong</td><td>China</td></tr>
44 <tr><td>Google</td><td>Larry Page</td><td>USA</td></tr>
45 <tr class="alt"><td>Lenovo</td><td>Liu Chuanzhi</td><td>China</td></tr>
46 <tr><td>Microsoft</td><td>Bill Gates</td><td>USA</td></tr>
47 <tr class="alt"><td>Nokia</td><td>Stephen Elop</td><td>Finland</td></tr></table>
48 </body></html>
? 第4～24行聲明了樣式表。需要注意的是，在設(shè)置連接部分時(shí)為了使定義生效，a:hover必須位于a:link和a:visited之后，a:active必須位于a:hover之后。讀者需要自己體驗(yàn)一下4種鏈接方式的區(qū)別。
? 第27～38行為設(shè)置鏈接標(biāo)簽屬性示例。我們?cè)趯⑹髽?biāo)移動(dòng)到鏈接部分時(shí)會(huì)發(fā)現(xiàn)鏈接的字體大小、粗細(xì)、字體、顏色都會(huì)有不同程度的變化，這就是不同鏈接屬性起到的作用。讀者對(duì)應(yīng)內(nèi)容提示可以自行實(shí)驗(yàn)一下。
? 第39～48行制作了一個(gè)表格。通過聲明表格的樣式表我們?cè)谥黧w部分只構(gòu)建了一個(gè)表格，但計(jì)算機(jī)通過樣式表繪制出來的表格是一個(gè)全新的表格。這個(gè)表格的樣式表屬性用法比較全面而且會(huì)經(jīng)常使用，所以在此介紹了。
在案例中只開發(fā)了一個(gè)表格，沒有應(yīng)用全部的表格屬性，剩余的部分在之前講述表格標(biāo)簽時(shí)已介紹過，但是應(yīng)用到CSS時(shí)會(huì)有點(diǎn)差別。若有讀者想了解這方面的知識(shí)，那么可以上網(wǎng)查詢CSS表格應(yīng)用屬性，里面會(huì)有比較詳細(xì)的介紹。
到此為止已將CSS介紹完畢，短短十幾頁的內(nèi)容肯定不能將CSS的全部?jī)?nèi)容介紹完畢，但是已盡力將最常用與精髓部分進(jìn)行介紹了。讀者在應(yīng)用時(shí)應(yīng)該自己多查閱一些資料，勤加練習(xí)，多改一些內(nèi)容，這樣會(huì)學(xué)得更加充實(shí)。
- 計(jì)算機(jī)網(wǎng)絡(luò)基礎(chǔ)
- WebGIS之Element前端組件開發(fā)
- 這就是搜索引擎
- 軟件開發(fā)視頻大講堂：ASP.NET從入門到精通（第4版）
- 深度實(shí)踐微服務(wù)測(cè)試
- P2P網(wǎng)絡(luò)測(cè)量與分析
- UG NX 12.0數(shù)控編程與加工案例教程
- 思科軟件定義訪問：實(shí)現(xiàn)基于業(yè)務(wù)意圖的園區(qū)網(wǎng)絡(luò)
- Adobe XD界面設(shè)計(jì)與原型制作教程（全彩）
- 計(jì)算機(jī)網(wǎng)絡(luò)
- 掌控你的工作?。呵捎肙utlook極速提升工作效率
- 撥得云開見日出：解構(gòu)一個(gè)典型的云計(jì)算系統(tǒng)
- INSTANT Migration to HTML5 and CSS3 How-to
- 云原生：運(yùn)用容器、函數(shù)計(jì)算和數(shù)據(jù)構(gòu)建下一代應(yīng)用
- 網(wǎng)站說服力