“春天沒來”歡迎您 “春天沒來”歡迎您“ “ 春天沒來”歡迎您
第 二 章 標(biāo) 簽 應(yīng) 用
第三十五節(jié) css樣式表應(yīng)用（1）
從本節(jié)開始講解css樣式表的應(yīng)用。下面講解的內(nèi)容為：css基本語法和CSS的使用方法。
CSS是W3C組織制定的用于控制網(wǎng)頁內(nèi)容顯示效果的一種標(biāo)記性語言。
在1997年W3C(The World Wide Web Consortium)頒布HTML4標(biāo)準(zhǔn)的同時(shí)也公布了有關(guān)樣式表的第一個(gè)標(biāo)準(zhǔn)CSS1, 自CSS1的版本之后，又在1998年5月發(fā)布了CSS2版本，樣式表得到了更多的充實(shí)。W3C把DHTML(Dynamic HTML)分為三個(gè)部分來實(shí)現(xiàn)：腳本語言(包括JavaScript、Vbscript等)、支持動(dòng)態(tài)效果的瀏覽器(包括Internet Explorer、Netscape Navigator等)和CSS樣式表。目前的最新版本是CSS3。
一、css基本語法:
CSS的定義是由三個(gè)部分構(gòu)成：選擇符（selector），屬性（properties）和屬性的取值（value）。
1、基本格式如下：
selector {property: value} 即：選擇符 {屬性：屬值}。先輸入“選擇符”，然后輸入“屬性與屬值”。屬性與屬值放置在“大括號”內(nèi)，并用“冒號”隔開。
選擇符（也叫選擇器）可以是多種形式，一般是你要定義樣式的HTML標(biāo)記（標(biāo)簽）。例如：BODY、P、TABLE……你可以通過此方法定義它的屬性和屬值。
body {color: black}
在上面的css定義中，選擇符body是指頁面主體部分，屬性color是文字顏色，屬值black黑色。此例的效果是使頁面中的文字為黑色。
2、如果屬性的屬值是多個(gè)單詞組成的，必須在屬值上加引號。例如：字體的名稱經(jīng)常是幾個(gè)單詞的組合：
p {font-family: "sans serif"}
在上面的css定義中，選擇符p是段落，屬性font-family是文字字體，屬值sans serif是具體的字體。
3、如果需要對一個(gè)選擇符指定多個(gè)屬性時(shí)，使用分號將所有的屬性和值分開：
p {text-align: center; color: red}
在上面的css定義中，選擇符p是段落，屬性有兩個(gè)。屬性一是水平對齊方式，屬值是居中；屬性二是文字顏色，屬值是紅色。
4、為了使定義的樣式表方便閱讀，可以采用分行的書寫格式：
p
{
text-align: center;
color: black;
font-family: arial
}
（段落排列居中，段落中文字為黑色，字體是arial）
二、CSS的使用方法：
1、標(biāo)記加注法(in-line)：
如果只有一個(gè)HTML標(biāo)記需要設(shè)定樣式，則可在該標(biāo)記內(nèi)，加上屬性：style=" "以個(gè)別修訂樣式。
2、頁面內(nèi)嵌法：
<style type="text/css"> <!-- body { background : white ; color : black ; } --> </style>
3、外部調(diào)用法：
<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />
4、雙表法調(diào)用樣式表：
<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />
<style type="text/css" media="all">@import url( css/style01.css );</style>
在我們的個(gè)人圖書館中制作網(wǎng)頁，最常用的方法是第一種方法。
作業(yè)：
1、CSS的定義是由哪幾部分構(gòu)成的？
2、CSS定義中的選擇符、屬性和值各在什么位置中？
3、CSS定義中的屬值如果是多個(gè)單詞組成的，應(yīng)該怎樣書寫？
4、如果需要對一個(gè)選擇符指定多個(gè)屬性，應(yīng)該怎樣書寫？
5、認(rèn)識css定義的分行書寫方法。
6、了解CSS的四種使用方法。
２0１3年１月19 日于北京
第 二 章 標(biāo) 簽 應(yīng) 用
第三十六節(jié) css樣式表應(yīng)用（2）
本節(jié)繼續(xù)講解css樣式表的應(yīng)用。本節(jié)講解的內(nèi)容為：用css樣式設(shè)置文字。包括七個(gè)方面的內(nèi)容：1、用css樣式設(shè)置大號文字；2、用css樣式設(shè)置行高；3、用css樣式設(shè)置字距；4、用css樣式設(shè)置首字大寫；5、用css樣式設(shè)置段落首行縮進(jìn)； 6、用css樣式設(shè)置濾鏡；7、用css樣式綜合設(shè)置。
用css樣式設(shè)置文字：
1、用css樣式設(shè)置大號文字：
我們先看看下面的這段代碼，這是沒有使用css樣式的文字標(biāo)簽，最大的文字只能是7號字。
<font color="#ff0000" size="7" face="隸書" ><strong>“春天沒來”歡迎您</strong></font>
我們再看看下面的這段代碼，這是使用了css樣式的文字標(biāo)簽，只要修改文字字號代碼font-size: 100px里的屬值，文字就可以無限增大。
<font style="font-size: 100px;" color="#ff0000" face="黑體"><strong>“春天沒來”歡迎您</strong></font>
2、用css樣式設(shè)置行高：
代碼1：
<p>
<font style="line-height: 1em; font-size: 20pt;" color="#ff00ff">
<strong>
【◇ 一月送你一個(gè)吉祥 ◇】<br>
【◇ 二月送你一個(gè)如意 ◇】<br>
【◇ 三月送你一個(gè)快樂 ◇】<br>
【◇ 四月送你一個(gè)歡喜 ◇】<br>
【◇ 五月送你一個(gè)健康 ◇】<br>
【◇ 六月送你一個(gè)福氣 ◇】<br>
【◇ 七月送你一個(gè)溫暖 ◇】<br>
【◇ 八月送你一個(gè)甜蜜 ◇】<br>
【◇ 九月送你一個(gè)興旺 ◇】<br>
【◇ 十月送你一個(gè)順利 ◇】<br>
【◇ 十一送你一個(gè)聰明 ◇】<br>
【◇ 十二送你一個(gè)富裕 ◇】<br>
【◇ 祝愿朋友四季安康 ◇】<br>
【◇ 祝愿朋友一生幸福 ◇】</strong></font></p>
代碼2：
<p>
<font style="line-height: 1.5em; font-size: 20pt;" color="#ff00ff">
<strong>
【◇ 一月送你一個(gè)吉祥 ◇】<br>
【◇ 二月送你一個(gè)如意 ◇】<br>
【◇ 三月送你一個(gè)快樂 ◇】<br>
【◇ 四月送你一個(gè)歡喜 ◇】<br>
【◇ 五月送你一個(gè)健康 ◇】<br>
【◇ 六月送你一個(gè)福氣 ◇】<br>
【◇ 七月送你一個(gè)溫暖 ◇】<br>
【◇ 八月送你一個(gè)甜蜜 ◇】<br>
【◇ 九月送你一個(gè)興旺 ◇】<br>
【◇ 十月送你一個(gè)順利 ◇】<br>
【◇ 十一送你一個(gè)聰明 ◇】<br>
【◇ 十二送你一個(gè)富裕 ◇】<br>
【◇ 祝愿朋友四季安康 ◇】<br>
【◇ 祝愿朋友一生幸福 ◇】</strong></font></p>
代碼解析：
請看上面的兩段文字代碼：第一段行高設(shè)置為line-height: 1em，第二段行高設(shè)置為line-height: 1.5em，比較一下兩段文字中兩行文字之間的間距，體會(huì)設(shè)置不同行高的不同顯示效果。
3、用css樣式設(shè)置字距：
代碼1：
<p>
<font style="line-height: 1.5em; letter-spacing: 1px; font-size: 20pt;"
color="#ff0000"><strong>既然愚公能移山，何愁代碼學(xué)習(xí)難；<br>立下愚公移山志，步步登上代碼山。</strong></font></p>
<p>
<font style="line-height: 1.5em; letter-spacing: 1px; font-size: 20pt;"
color="#ff0000"><strong>學(xué)習(xí)代碼別怕難，常用標(biāo)簽記心間；<br>屬性屬值弄明白，反復(fù)實(shí)踐是關(guān)鍵。</strong></font></p>
代碼2：
<p>
<font style="line-height: 1.5em; letter-spacing: 4px; font-size: 20pt;"
color="#ff0000"><strong>既然愚公能移山，何愁代碼學(xué)習(xí)難；<br>立下愚公移山志，步步登上代碼山。</strong></font></p>
<p><font style="line-height: 1.5em; letter-spacing: 4px; font-size: 20pt;" color="#ff0000"><strong>學(xué)習(xí)代碼別怕難，常用標(biāo)簽記心間；<br>屬性屬值弄明白，反復(fù)實(shí)踐是關(guān)鍵。</strong></font></p>
代碼解析：
請看上面的兩段文字代碼：第一段字距設(shè)置為letter-spacing: 1px，第二段字距設(shè)置為letter-spacing: 4px，比較一下兩段文字中每行文字之間的字距，體會(huì)設(shè)置不同字距的不同顯示效果。
4、用css樣式設(shè)置首字大寫：
<div style="line-height: 22px; font-size: 20px;">
<span style="line-height: 30px; font-size: 28px; float: left;">
<b>既</b></span>
然愚公能移山，何愁代碼學(xué)習(xí)難；立下愚公移山志，步步登上代碼山。</div>
代碼解析：
在塊區(qū)<div></div>中，設(shè)置了一個(gè)<span>標(biāo)簽，在<span>標(biāo)簽中，設(shè)置了一個(gè)float: left代碼，因此，<span>標(biāo)簽中的內(nèi)容“既”字就大寫并下沉了。
效果：
既然愚公能移山，何愁代碼學(xué)習(xí)難；立下愚公移山志，步步登上代碼山。
5、用css樣式設(shè)置段落首行縮進(jìn)：
<p style="text-indent: 2em;">
我是一個(gè)年已花甲的退休教師，一不懂代碼，二不會(huì)英語。前年，兒子給我買了一個(gè)筆記本電腦，剛開始玩的時(shí)候，連“關(guān)機(jī)”也不會(huì)，看個(gè)電子書、玩?zhèn)€游戲，都十分困難。后來，又給我注冊了一個(gè)圖書館，更找不著“北”了。進(jìn)入網(wǎng)絡(luò)以后，頁面中的內(nèi)容五彩繽紛，這兒閃爍，那兒跳動(dòng)，文字內(nèi)容，五顏六色，真不知該點(diǎn)擊什么地方了！然而，就是在這個(gè)圖書館中，我學(xué)到了不少的知識。現(xiàn)在，我不但能夠?yàn)g覽別人的文章、收藏別人的文章，而且還學(xué)會(huì)了自己撰寫文章，編輯圖片，使用邊框，在實(shí)踐操作的過程中，我知道了那些五彩繽紛的美麗網(wǎng)頁，都是用代碼制作的。于是，我對代碼產(chǎn)生了興趣，開始學(xué)習(xí)代碼、研究代碼。經(jīng)過一段時(shí)間的努力學(xué)習(xí)、刻苦鉆研，終于邁進(jìn)了代碼的門檻。我已經(jīng)撰寫了幾十篇關(guān)于360doc圖書館的知識和操作方法的文章，制作了幾百個(gè)個(gè)人圖書館的頂圖，還有一些底圖、圖書館首頁的模塊等作品，初步地嘗到了學(xué)習(xí)代碼的甜頭。在實(shí)踐的過程中，我認(rèn)識到，代碼并不是什么神秘的天書，也不是高不可攀的山峰，不懂英語，沒有學(xué)過系統(tǒng)的電腦知識，照樣可以學(xué)會(huì)代碼，用代碼制作自己喜歡的各種漂亮的網(wǎng)頁。</p>
<p style="text-indent: 2em;">
在這里，我把自己學(xué)習(xí)代碼的體會(huì)撰寫成這些文章，編輯成小冊子，陸續(xù)發(fā)表，提供給大家，用以幫助愿意學(xué)習(xí)代碼而又不知從哪里入手的朋友們共享，希望能夠?qū)︷^友們有所幫助，引導(dǎo)你步入代碼的門檻。</p>
<p style="text-indent: 2em;">
我的這些文章，語言不一定十分規(guī)范，概念不一定非常準(zhǔn)確。我本著這樣一條原則，力求通俗易懂，講解具體，可操作性強(qiáng)，使大家能夠看明白，會(huì)操作，真正起到引導(dǎo)入門的作用。</p>
<p style="text-indent: 2em;">
由于本人的水平有限，文章中一定存在不少紕漏和錯(cuò)誤之處，希望大家批評指正。在此我預(yù)先向給我提出寶貴意見的朋友們表示感謝。</p>
代碼解析：
text的意思是文本，indent在計(jì)算機(jī)英語中意思是縮進(jìn)，后面的2em意思就是2個(gè)相對單位。單位em的意思就是文字的高度，1em就是1個(gè)文字的高度，2em就是兩個(gè)文字的高度，因?yàn)闈h字是方塊字，高度和寬度是相同的，所以“text-indent:2em;”的意思就是文本縮進(jìn)2個(gè)文字的寬度。
6、用css樣式設(shè)置濾鏡：
<p style="width: 769px; height: 106px; filter: shadow
(color= #FF4500, strength=60); ">
<font style="line-height: normal; font-size: 40pt; font-style: normal;
font-variant: normal; font-weight: normal;" color="#ffff00" face="宋體">
<marquee style="width: 798px; height: 421px;" behavior="alternate">“春天沒來”歡迎您</marquee></font></p>
代碼解析：
（1）filter: shadow(color= #FF4500, strength=60代碼的意思為：濾鏡：陰影效果濾鏡（陰影顏色＝#FF4500，陰影強(qiáng)度＝60）
（2）在段落標(biāo)簽<p>中設(shè)置了濾鏡的代碼 filter: shadow(color= #FF4500, strength=60)，把文字標(biāo)簽與文字的具體內(nèi)容放置在段落標(biāo)簽與其尾標(biāo)簽的包裹之中，因此文字的顯示效果就有了濾鏡的陰影效果。
7、用css樣式綜合設(shè)置：
<font style="line-height: 1.5em; letter-spacing: 4px; font-size: 20pt;
font-style: normal; font-variant: normal; font-weight: normal;" color="#ff00ff">
<strong>“春天沒來”歡迎您!<br>“春天沒來”歡迎您!<br>“春天沒來”歡迎您!<br>“春天沒來”歡迎您!</strong></font> <br>
代碼解析：
（1）標(biāo)簽注釋： <文字標(biāo)簽 樣式＝“行高：1.5em；字距：4px；字號：20pt；字體風(fēng)格：默認(rèn)值；小型大寫字母字體：默認(rèn)值；字體的粗細(xì)：默認(rèn)值；”文字顏色：“粉紅”>
（2）font-variant: normal這個(gè)屬性（小型的大寫字母字體）對“中文”無意義。
（3）在上面的文字標(biāo)簽中，綜合設(shè)置了文字的“行高、字距、字號、字體風(fēng)格、小型大寫字母字體、字體的粗細(xì)和文字顏色”等屬性。
作業(yè)：
1、認(rèn)真閱讀代碼解析，深刻理解上面各種標(biāo)簽設(shè)置的方法。
2、認(rèn)真閱讀本文內(nèi)容，深刻理解上面各種標(biāo)簽中屬性與屬值的意思。
3、應(yīng)用上面講解的七種內(nèi)容各制作一篇文章。
代碼入門教程(1)代碼入門教程(2)代碼入門教程(3)代碼入門教程(4)代碼入門教程(5)代碼入門教程(6)代碼入門教程(7)代碼入門教程(8)代碼入門教程(9)代碼入門教程(10)代碼入門教程(11)代碼入門教程(12)代碼入門教程(13)代碼入門教程(14)代碼入門教程(15)代碼入門教程(16)代碼入門教程(17)代碼入門教程(18)代碼入門教程(19)代碼入門教程(20)代碼入門教程(21)代碼入門教程(22)２０１3 年１月 1 9 日于北京
“春天沒來”歡迎您 “春天沒來”歡迎您 “春天沒來”歡迎您
