版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
第3章層疊樣式表CSS3.1CSS簡(jiǎn)介 3.2選擇符 3.3CSS的層疊性與優(yōu)先次序 3.4常用屬性及其應(yīng)用實(shí)例3.5CSS盒子模型和網(wǎng)頁(yè)布局方式
【學(xué)習(xí)提示】很多網(wǎng)站開發(fā)者說(shuō)，網(wǎng)站設(shè)計(jì)不光是技術(shù)問(wèn)題，同時(shí)也是藝術(shù)問(wèn)題。這個(gè)說(shuō)法很有道理，因?yàn)橐粋€(gè)網(wǎng)站是否能夠被用戶接受，它的色彩搭配、結(jié)構(gòu)布局、動(dòng)態(tài)效果等都是非常重要的。CSS正是負(fù)責(zé)在網(wǎng)頁(yè)中設(shè)置顏色、布局和效果的，因此很多人認(rèn)為精通CSS就可以讓網(wǎng)站在視覺(jué)上達(dá)到很高的水平。另一方面，CSS是技術(shù)層面的知識(shí)，并不能提高開發(fā)者的藝術(shù)水平，網(wǎng)站的設(shè)計(jì)是需要美編人員的直接參與。一旦網(wǎng)站的顏色、布局和效果被設(shè)計(jì)出來(lái)，CSS就可以隆重登場(chǎng)來(lái)進(jìn)行編碼實(shí)現(xiàn)。因此可以說(shuō)，審美能力是“思想力”，CSS技術(shù)是“執(zhí)行力”。
CSS技術(shù)符合軟件工程的原則，它的產(chǎn)生和應(yīng)用直接提升了網(wǎng)站的開發(fā)效率。越是大型的網(wǎng)站，越重視CSS的設(shè)計(jì)和開發(fā)。
層疊樣式表(CascadingStyleSheet，CSS)是W3C組織所擬定出的一套標(biāo)準(zhǔn)的樣式語(yǔ)言規(guī)范。
由于HTML的主要功能就是以豐富的樣式顯示各種內(nèi)容，而有限的HTML標(biāo)簽無(wú)法滿足不斷增加的樣式需求。這一矛盾的解決方式是在HTML之外增加樣式表，以描述復(fù)雜的網(wǎng)頁(yè)顯示方式。3.1CSS簡(jiǎn)介自從1990年初，HTML開始應(yīng)用就出現(xiàn)了各種形式樣式表。不同的瀏覽器結(jié)合各自的樣式語(yǔ)言讓讀者來(lái)調(diào)節(jié)網(wǎng)頁(yè)的顯示方式。1994年，HakonWiumLie提出了CSS的最初建議，而此時(shí)BertBos正在設(shè)計(jì)名為Argo的瀏覽器，他們決定一起合作設(shè)計(jì)CSS。與之前的樣式語(yǔ)言不同，CSS是第一個(gè)含有“層疊”特性的樣式語(yǔ)言。Hakon于1994年第一次公開展示了CSS的解決方案，此方案很快被W3C所采納，并由Hakon等人作為項(xiàng)目的主要技術(shù)負(fù)責(zé)人開展了更加深入的研發(fā)工作。1996年底完成了CSS1的制定，1998年完成CSS2的制定。目前，越來(lái)越多的瀏覽器和網(wǎng)站開始支持CSS3標(biāo)準(zhǔn)。隨著CSS技術(shù)的使用，HTML頁(yè)面真正“活動(dòng)”了起來(lái)。各種瀏覽器都不斷增加和改善對(duì)CSS的支持。1997年，Microsoft發(fā)布了IE4.0，將動(dòng)態(tài)HTML標(biāo)簽、CSS和動(dòng)態(tài)對(duì)象模型(DHTMLObjectModel)發(fā)展成一套完整、實(shí)用、高效的客戶端開發(fā)技術(shù)體系，Microsoft稱其為DHTML。而在HTML5中，一些純粹用作顯示效果的標(biāo)簽將取消，因?yàn)樗鼈冿@示效果的工作更適合由CSS來(lái)?yè)?dān)任。
作為一種用于網(wǎng)頁(yè)展示的樣式語(yǔ)言，CSS增加了更多的樣式定義方式來(lái)輔助HTML語(yǔ)言。通過(guò)CSS樣式表的定義，只要設(shè)定某種標(biāo)簽(如表格、背景、鏈接、文字、按鈕、滾動(dòng)條等)的樣式，則各網(wǎng)頁(yè)相同種類的標(biāo)簽將會(huì)呈現(xiàn)出相同的風(fēng)格。這種方式不僅加快了網(wǎng)站開發(fā)的進(jìn)度，而且便于建立一個(gè)風(fēng)格統(tǒng)一的網(wǎng)站。
CSS的定義可以直接放在HTML元素的標(biāo)簽中，稱為內(nèi)聯(lián)樣式。其形式如下：
<pstyle="color:sienna;margin-left:20px">Thisisaparagraph.</p>
CSS的定義可以放在HTML文件的
<style>
標(biāo)簽中，稱為內(nèi)部樣式表。其形式如下：
<head>
<style>
body{background-color:yellow;}
</style>
</head>
CSS的定義也可以獨(dú)立保存在一個(gè)擴(kuò)展名為
.css的文件中，通過(guò)鏈接的方式包含在網(wǎng)頁(yè)中，稱為外部樣式表。其形式如下：
<head>
<linkrel=stylesheettype="text/css"href="foo.css">
</head>
一條CSS規(guī)則中包括兩個(gè)部分：一個(gè)選擇符(selector)和一個(gè)或多個(gè)描述(declaration)，描述之間用分號(hào)隔開。每一個(gè)描述中又包含屬性名(property)和屬性值(value)，語(yǔ)法如下：3.2選擇符
selector{property:value;property:value;...}
下面的CSS規(guī)則中聲明了段落標(biāo)簽
<p>
的顯式方式，包括文本居中、黑色、arial字體。CSS中的注釋在“
/*
”和“
*/
”之間。
/*ThisisaCSSrule*/
p{
text-align:center;
color:black;
font-family:arial;
}在這個(gè)例子中，p是選擇符，text-align、color和font-family是屬性，并為這些屬性設(shè)置了相應(yīng)的屬性值。
1．類選擇符
選擇符可以是一種HTML元素，例如“p”、“table”等，這些可以看做是HTML預(yù)定義的類。例如下面的CSS規(guī)則：
body{background:#fff;margin:0;padding:0;}
p{color:#ff0000;}
應(yīng)用了上述CSS的HTML文檔中所有
<body>
元素(雖然只可能有一個(gè))和所有<p>元素都將無(wú)需聲明而自動(dòng)遵守上述的CSS規(guī)則。
2．子類選擇符
選擇符可以是一種HTML元素的一部分實(shí)例，可以理解為基于該類元素(基類)的一個(gè)子類。例如下面的CSS規(guī)則：
td.fancy{background:#666;}
p.rchild{text-align:right}
在HTML應(yīng)用上述CSS規(guī)則時(shí)，必須聲明元素的class為某個(gè)子類。例如下面的代碼：
<tdclass="fancy">ABC<td>
<pclass="rchild">p標(biāo)記中的內(nèi)容</p>
如果在定義子類時(shí)沒(méi)有給出基類的名稱，則可認(rèn)為它是任何基類的子類。例如下面的CSS規(guī)則：
.cchild{text-align:center}
在HTML應(yīng)用上述CSS規(guī)則時(shí)，必須聲明元素的class為某個(gè)子類。例如下面的代碼：
<tdclass="cchild">ABC<td>
<pclass="cchild">p標(biāo)記中的內(nèi)容</p>
3．嵌套類選擇符
選擇符可以是根據(jù)元素之間的嵌套關(guān)系而確定的類，嵌套關(guān)系也可以理解為上下文關(guān)系。例如下面的CSS規(guī)則和相應(yīng)的HTML代碼：
tda{text-align:center;}
<tableborder="1">
<tr>
<td><ahref="a.htm">FileA</a></td>
<td><ahref="b.htm">FileB</a></td>
</tr>
</table>
<ahref="c.htm">FileC</a>
上述CSS規(guī)則意味著，只有在單元格中的超鏈接才會(huì)應(yīng)用文字居中的樣式，而其他的超鏈接則會(huì)忽略這一規(guī)則。
4．id選擇符
選擇符可以是HTML文檔中的一個(gè)特定元素，例如用“id”屬性標(biāo)識(shí)的某一個(gè)段落，這些可以看做HTML元素類的實(shí)例對(duì)象。例如下面的CSS規(guī)則和相應(yīng)的HTML代碼：
#red{color:red;}
#green{color:green;}
<pid="red">這個(gè)段落是紅色。</p>
<pid="green">這個(gè)段落是綠色。</p>
id屬性為red的p元素顯示為紅色，而id屬性為green的p元素顯示為綠色。
5．偽類與偽元素選擇符
CSS偽類(Pseudo-class)用于向某些選擇器添加特殊的效果。使用偽類選擇符的語(yǔ)法如下：
selector:pseudo-class{property:value;}
常用的CSS偽類見表3-1。表3-1常用的CSS偽類及其描述下面的代碼給出了偽類用于超鏈接的顯式效果，在不同的狀態(tài)下超鏈接的顏色不同。
<html>
<head>
<styletype="text/css">
a:link{color:#FF0000;}/*未訪問(wèn)的超鏈接*/
a:visited{color:#00FF00;}/*已訪問(wèn)的超鏈接*/
a:hover{color:#FF00FF;}/*鼠標(biāo)位于超鏈接之上*/
a:active{color:#0000FF;}/*鼠標(biāo)在超鏈接上按鍵*/
</style>
</head>
<body>
<ahref="default.jsp">這是一個(gè)由偽類裝飾的超鏈接</a>
</body>
</html>
與偽類相似，偽元素(Pseudoelement)也用于向某些選擇器添加特殊的效果。常用的CSS偽元素見表3-2。表3-2常用的CSS偽元素及其描述下面為偽元素用于設(shè)定首字母(或第一個(gè)漢字)的代碼：
<html>
<head>
<styletype="text/css">
p:first-letter{color:#ff0000;font-size:xx-large;}
</style>
</head>
<body>
<p>偽類用于首字母的顯式效果，第一個(gè)字符將顯示為紅色大字。</p>
</body>
</html>
偽元素的顯示效果如圖3-1所示。
圖3-1偽元素的顯示效果
6．選擇符分組
如果有多個(gè)類或id呈現(xiàn)相同的樣式，我們就可以對(duì)選擇符進(jìn)行分組。被分組的選擇符用逗號(hào)隔開，共享相同的聲明。下面的例子中所有的標(biāo)題元素都以綠色進(jìn)行顯示，段落和表格中的字體也被一起設(shè)定。
h1,h2,h3,h4,h5,h6{color:green;}
p,table{font-size:9pt}
CSS允許以多種方式規(guī)定樣式信息，包括內(nèi)聯(lián)樣式、內(nèi)部樣式表和外部樣式表等。如果在同一個(gè)HTML文檔內(nèi)部以不同的方式應(yīng)用了多個(gè)CSS的定義，且對(duì)同一個(gè)HTML元素存在不止一次樣式定義時(shí)，瀏覽器會(huì)使用哪個(gè)樣式?通常，這些來(lái)源不同的樣式將根據(jù)一定的優(yōu)先規(guī)則層疊于一個(gè)虛擬樣式表中，且其優(yōu)先順序從高到低為：3.3CSS的層疊性與優(yōu)先次序●內(nèi)聯(lián)樣式(在HTML元素標(biāo)簽內(nèi)部定義樣式)。
●內(nèi)部樣式表(在HTML文檔頭部
<style>
標(biāo)簽中定義樣式)。
●外部樣式表(在HTML文檔頭部
<link>
標(biāo)簽中鏈接CSS文件)。
●瀏覽器默認(rèn)設(shè)置(每個(gè)瀏覽器都對(duì)各種元素有默認(rèn)的顯示樣式)。
需要注意的是，雖然內(nèi)聯(lián)樣式擁有最高的優(yōu)先權(quán)，但在開發(fā)中盡量不要采用這種方式，因?yàn)榉稚⒃贖TML文檔中各元素內(nèi)部的樣式定義不便于維護(hù)和更改。
HTML元素之間可以嵌套，如table元素中可以直接嵌套tr元素、間接嵌套td元素。被嵌套的元素都可以稱為子元素，而子元素在多數(shù)瀏覽器中會(huì)繼承父元素的樣式。如前面例子中對(duì)table的字體進(jìn)行了設(shè)置，則每個(gè)td中的字體也都會(huì)隨之顯示，除非td元素自己有不同的設(shè)置。
對(duì)于某一個(gè)HTML元素，如果多個(gè)選擇符都對(duì)它進(jìn)行了樣式說(shuō)明，瀏覽器則將根據(jù)一定的優(yōu)先次序決定最終的樣式。多數(shù)瀏覽器支持的選擇符優(yōu)先次序從高到低為：id選擇符、子類選擇符、類選擇符。例如下面的代碼：
<html>
<head>
<styletype="text/css">
p{color:#FF0000}
.blue{color:#0000FF}
#yellow{color:#FFFF00}
</style>
</head>
<body>
<pclass="blue"id="yellow">根據(jù)優(yōu)先次序，文件將以黃色顯示。</p>
</body>
</html>
根據(jù)選擇符的層疊性，在實(shí)際的開發(fā)中常常先使用類選擇符來(lái)大范圍設(shè)置樣式，然后使用子類選擇符來(lái)設(shè)置小部分元素的樣式，最后再使用id來(lái)針對(duì)個(gè)別元素進(jìn)行特別設(shè)置。這種“從一般到特殊”的順序非常便于開發(fā)和維護(hù)。
3.4.1CSS文本屬性
在CSS中，文本屬性可定義文本的外觀，如：改變文本的顏色、對(duì)齊文本、裝飾文本、對(duì)文本進(jìn)行縮進(jìn)等。主要包括text-indent、text-align、word-spacing、letter-spacing、text-transform、text-decoration、white-space和direction等，其功能如表3-3所示。3.4常用屬性及其應(yīng)用實(shí)例表3-3CSS文本屬性及其功能描述
text-indent屬性可以實(shí)現(xiàn)web頁(yè)面上段落的第一行縮進(jìn)一個(gè)給定的長(zhǎng)度，該長(zhǎng)度甚至可以是負(fù)值。下面的規(guī)則會(huì)使所有段落的首行縮進(jìn)5em:
p{text-indent:5em;}。該屬性可以應(yīng)用在所有塊級(jí)元素中，但無(wú)法應(yīng)用于行內(nèi)元素和圖像之類的替換元素。當(dāng)縮進(jìn)的長(zhǎng)度是負(fù)值時(shí)，可以實(shí)現(xiàn)很多有趣的效果，如“懸掛縮進(jìn)”，即第一行懸掛在元素中余下部分的左邊。此時(shí)為了避免出現(xiàn)因?yàn)樵O(shè)置負(fù)值而導(dǎo)致首行的某些文本超出瀏覽器窗口的左邊界這種顯示問(wèn)題，建議針對(duì)負(fù)縮進(jìn)再設(shè)置一個(gè)外邊距或一些內(nèi)邊距：p{text-indent:-5em;padding-left:5em;}。
letter-spacing屬性與word-spacing的區(qū)別在于，前者修改的是字符或字母之間的間隔，后者修改的是字(單詞)之間的標(biāo)準(zhǔn)間隔。
text-transform屬性處理文本的大小寫。這個(gè)屬性有四個(gè)值：none、uppercase、lowercase和capitalize。默認(rèn)值none對(duì)文本不做任何改動(dòng)，將使用源文檔中的原有大小寫。顧名思義，uppercase和lowercase將文本轉(zhuǎn)換為全大寫和全小寫的字符。最后，capitalize只對(duì)每個(gè)單詞的首字母大寫。
text-decoration有五個(gè)值：none、underline、overline、line-through和blink。其中，underline會(huì)對(duì)元素加下劃線，就像HTML中的U元素一樣。overline的作用恰好相反，會(huì)在文本的頂端畫一個(gè)上劃線。line-through則在文本中間畫一個(gè)貫穿線，等價(jià)于HTML中的S和strike元素。blink會(huì)讓文本閃爍，類似于Netscape支持的頗招非議的blink標(biāo)記。
white-space屬性會(huì)影響到用戶代理對(duì)源文檔中的空格、換行和tab字符的處理。從某種程度上講，默認(rèn)的XHTML已經(jīng)完成了空白符的處理，它把所有空白符合并為一個(gè)空格。
direction屬性影響塊級(jí)元素中文本的書寫方向、表中列布局的方向、內(nèi)容水平填充其元素框的方向等。
結(jié)合以上常用屬性，可以實(shí)現(xiàn)文本的特殊效果，代碼如下：
<html>
<head>
<styletype="text/css">
p{
line-height:0.5;
text-indent:1cm;
}
h1{text-decoration:overline}
h2{text-decoration:line-through}
h3{text-decoration:underline}
h4{text-decoration:blink}
h5{letter-spacing:20px}
</style>
</head>
<body>
<p>清明
<h5>作者：杜牧</h5>
<h1>清明時(shí)節(jié)雨紛紛，</h1>
<h2>路上行人欲斷魂。</h2>
<h3>借問(wèn)酒家何處有，</h3>
<h4>牧童遙指杏花村。</h4>
</p>
</body>
</html>
上述代碼的運(yùn)行效果如圖3-2所示。圖3-2CSS文本屬性效果圖3.4.2CSS表格屬性
CSS樣式表中允許設(shè)置表格的屬性，以確定表格的布局。與表格有關(guān)的特有屬性有border-collapse、border-spacing、caption-side、empty-cells有table-layout。其功能如表3-4所示。表3-4CSS表格屬性及其功能描述
border-collapse屬性設(shè)置表格的邊框是否被合并為一個(gè)單一的邊框，參數(shù)值為separate、collapse和inherit。參數(shù)值為separate時(shí)，表格各部分的邊框?qū)⒎珠_顯示，不會(huì)忽略border-spacing和empty-cells屬性；參數(shù)值為collapse時(shí)，邊框會(huì)合并為一個(gè)單一的邊框并且忽略border-spacing和empty-cells屬性；inherit規(guī)定從父元素繼承border-collapse屬性的值。
border-spacing屬性設(shè)置相鄰單元格的邊框間的距離。該屬性指定分隔邊框模型中單元格邊界之間的距離。在指定的兩個(gè)長(zhǎng)度值中，第一個(gè)是水平間隔，第二個(gè)是垂直間隔。除非border-collapse被設(shè)置為separate，否則將忽略這個(gè)屬性。盡管這個(gè)屬性只應(yīng)用于表格，但可以由表中的所有元素繼承。
caption-side屬性設(shè)置表格標(biāo)題的位置。該屬性指定了表標(biāo)題相對(duì)于表框的放置位置。表標(biāo)題顯示為它是表之前(或之后)的一個(gè)塊級(jí)元素。
empty-cells屬性設(shè)置是否顯示表格中的空單元格。該屬性定義了不包含任何內(nèi)容的表單元格如何表示。如果顯示，就會(huì)繪制出單元格的邊框和背景。除非border-collapse設(shè)置為separate，否則將忽略這個(gè)屬性。
table-layout屬性用來(lái)顯示表格單元格、行、列的算法規(guī)則。該屬性指定完成表格布局時(shí)所用的布局算法。固定布局算法比較快，但是不太靈活；而自動(dòng)算法比較慢，不過(guò)更能反映傳統(tǒng)的HTML表格。在固定表格布局中，水平布局僅取決于表格寬度、列寬度、表格邊框?qū)挾取卧耖g距，而與單元格的內(nèi)容無(wú)關(guān)。通過(guò)使用固定表格布局，用戶代理在接收到第一行后就可以顯示表格。在自動(dòng)表格布局中，列的寬度是由列單元格中沒(méi)有折行的最寬的內(nèi)容設(shè)定的。此算法有時(shí)會(huì)較慢，這是由于它需要在確定最終的布局之前訪問(wèn)表格中所有的內(nèi)容。
CSS中表格的邊框與其他CSS元素邊框的定義和屬性基本一致。邊框樣式的取值及其含義描述如表3-5所示。表3-5邊框樣式的取值及其含義描述下面的例子說(shuō)明了table-layout和border-collapse屬性的作用，代碼如下：
<html>
<head>
<styletype="text/css">
table.one
{
table-layout:automatic;
border-collapse:collapse;
}
table.two
{
table-layout:fixed;
border-collapse:separate;
}
</style>
</head>
<body>
<tableclass="one"border="1"width="100%">
<tr>
<tdwidth="20%">AAA</td>
<tdwidth="40%">BBB</td>
<tdwidth="40%">CCC</td>
</tr>
</table><br/>
<tableclass="two"border="1"width="100%">
<tr>
<tdwidth="20%">DDD</td>
<tdwidth="40%">FFF</td>
<tdwidth="40%">GGG</td>
</tr>
</table>
</body>
</html>
上述代碼的運(yùn)行結(jié)果如圖3-3所示。
圖3-3CSS邊框?qū)傩孕Ч麍D
3.5.1盒子模型簡(jiǎn)介
盒子模型對(duì)于CSS控制頁(yè)面起著舉足輕重的作用。熟練掌握盒子模型以及盒子模型各個(gè)屬性的含義和應(yīng)用方法后，就可以輕松地控制頁(yè)面中每個(gè)元素的位置。下面將介紹盒子模型的概念及其屬性的含義和使用方法。3.5CSS盒子模型和網(wǎng)頁(yè)布局方式
CSS中盒子模型用于描述一個(gè)為HTML元素形成的矩形盒子。盒子模型是由margin(邊界)、border(邊框)、padding(補(bǔ)白)和content(內(nèi)容)四個(gè)屬性組成。盒子模型的示意圖如圖3-4所示。
圖3-4盒子模型示意圖在盒子模型中最重要的是內(nèi)容，內(nèi)容是必不可少的一部分，其他幾個(gè)屬性是可選項(xiàng)。其中，content(內(nèi)容)可以是文字、圖片等元素；padding(補(bǔ)白)，也稱內(nèi)邊距、空白，用于設(shè)置盒子模型的內(nèi)容與邊框之間的距離；border(邊框)，即盒子本身，該屬性用于設(shè)置內(nèi)容邊框線的粗細(xì)、顏色和樣式等；margin(邊界)，也稱外邊距，用于設(shè)置四周的外邊距布局。在用CSS定義盒子模型時(shí)，設(shè)置的高度和寬度是對(duì)內(nèi)容區(qū)域高度和寬度的設(shè)置，并不是內(nèi)容、邊距、邊框和邊界的綜合。從盒子模型的組成屬性看，一個(gè)盒子的模型就是把上、下、左、右四個(gè)方面的全部設(shè)置值加起來(lái)。
border(邊框)是圍繞在內(nèi)容和邊界之間的一條或多條線。使用邊框?qū)傩钥梢远x邊框的樣式、顏色和寬度。邊框分為上邊框、下邊框、左邊框和右邊框，而每個(gè)邊框又包含三個(gè)屬性，即邊框樣式、邊框顏色和邊框?qū)挾取?/p>
●邊框樣式(border-style)用于設(shè)置所有邊框的樣式，也可以單獨(dú)地設(shè)置某個(gè)邊的邊框樣式?！襁吙蝾伾?border-color)用于設(shè)置所有邊框的顏色，也可以為某個(gè)邊的邊框單獨(dú)設(shè)置顏色。邊框顏色的屬性值可以是顏色值，也可以設(shè)置其為透明。border-color參數(shù)的設(shè)置與border-style參數(shù)的設(shè)置方法相同，在設(shè)置border-color之前要先設(shè)置border-style，否則所設(shè)置的border-color將不會(huì)顯示出來(lái)。
●邊框?qū)挾?border-width)用于設(shè)置所有邊框的寬度，即邊框和粗細(xì)程度，也可以單獨(dú)設(shè)置某個(gè)邊的邊框?qū)挾取Ｆ鋵傩灾涤兴膫€(gè)：medium，使用默認(rèn)寬度；thin，小于默認(rèn)寬度；thick，大于默認(rèn)寬度；length，由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值，不可為負(fù)值。border-width參數(shù)的設(shè)置與border-style參數(shù)的設(shè)置方法相同。
CSS中的padding屬性用于定義內(nèi)容與邊框之間的距離，該屬性不允許使用負(fù)值，但可以使用長(zhǎng)度和百分比值。如果當(dāng)設(shè)置值為百分?jǐn)?shù)時(shí)，該設(shè)置值是基于其父元素的寬度計(jì)算得出的，即該盒子模型的上一級(jí)寬度。
padding是一個(gè)簡(jiǎn)寫屬性，用于設(shè)置四個(gè)邊的內(nèi)邊距。如果只有一個(gè)設(shè)置值，則該設(shè)置值將作用于四個(gè)邊；如果有兩個(gè)設(shè)置值，則第一個(gè)設(shè)置值作用于上、下兩邊，第二個(gè)設(shè)置值作用于左、右兩邊；如果有三個(gè)設(shè)置值，則第一個(gè)值作用于上邊，第二個(gè)值作用于左、右邊，第三個(gè)值作用于下邊；如果有四個(gè)設(shè)置值，則將按照上-右-下-左的順序依次作用于四個(gè)邊。
margin(邊界)屬性用于設(shè)置頁(yè)面中元素之間的距離。margin的屬性值可以為負(fù)值。如果設(shè)置某個(gè)元素的邊界是透明的，則不能為其添加背景色。
margin也是一個(gè)簡(jiǎn)寫屬性，可以同時(shí)定義上、下、左、右四個(gè)邊的邊界。其屬性值可以是length，由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)組成的長(zhǎng)度值；也可以是百分?jǐn)?shù)，基于父層元素的寬度值；還有auto，是瀏覽器自動(dòng)設(shè)置的值，多為居中顯示。margin屬性值的設(shè)置與padding屬性值的設(shè)置相同，這里不再贅述。3.5.2CSS的定位功能
在網(wǎng)頁(yè)設(shè)計(jì)中，能否控制到各個(gè)模塊在頁(yè)面中的位置非常關(guān)鍵。這些模塊只有放置在正確的位置，網(wǎng)頁(yè)的布局看起來(lái)才夠美觀。網(wǎng)頁(yè)中的各種元素都必須有自己合理的位置，才能搭建出整個(gè)頁(yè)面的結(jié)構(gòu)。
使用CSS的定位功能，可以對(duì)任何一個(gè)元素進(jìn)行相對(duì)、絕對(duì)或者固定定位。在文本流中，任何一個(gè)元素都被文本流設(shè)置了其自身的位置，通過(guò)CSS的定位就可以改變這些元素的位置，可以通過(guò)某個(gè)元素的上、下、左、右移動(dòng)對(duì)其進(jìn)行相對(duì)定位。進(jìn)行相對(duì)定位后，雖然元素的表現(xiàn)區(qū)脫離了文本流，但在文本流內(nèi)卻為該元素保留一塊空間位置，這個(gè)位置不能隨著文本流的移動(dòng)而移動(dòng)。
相對(duì)定位只可以在文本流中進(jìn)行位置的上、下、左、右移動(dòng)，存在一定的局限性。如果希望元素放棄在文本流內(nèi)為其留下的空間位置，就要用絕對(duì)定位。絕對(duì)定位不僅可以使其脫離文本流，而且在文本流內(nèi)不會(huì)為該元素留下空間位置，移出去的部分就成了自由體。絕對(duì)定位可以通過(guò)上、下、左、右移動(dòng)設(shè)置元素，使之可以處在任何一個(gè)位置。在父層position屬性為默認(rèn)值時(shí)，上、下、左、右的左邊原點(diǎn)以body的坐標(biāo)原點(diǎn)為起始點(diǎn)。
當(dāng)元素被設(shè)為相對(duì)定位或絕對(duì)定位后，將自動(dòng)產(chǎn)生層疊，其層疊級(jí)別高于文本流的級(jí)別。有時(shí)，在實(shí)際應(yīng)用中，既希望定位元素有絕對(duì)定位的特征，又希望絕對(duì)定位的坐標(biāo)原點(diǎn)可以固定在網(wǎng)頁(yè)中的某一個(gè)點(diǎn)，當(dāng)這個(gè)點(diǎn)被移動(dòng)時(shí)，絕對(duì)定位的元素能保證相對(duì)于這個(gè)坐標(biāo)原點(diǎn)的相對(duì)位置，即需要該絕對(duì)定位隨著網(wǎng)頁(yè)的移動(dòng)而移動(dòng)。要實(shí)現(xiàn)這種效果，就要將這個(gè)絕對(duì)定位的父級(jí)設(shè)置為相對(duì)定位或者絕對(duì)定位。此時(shí)，絕對(duì)定位的坐標(biāo)就會(huì)以父級(jí)為坐標(biāo)起始點(diǎn)。固定定位，即position：fixed，就是把一些特殊的效果固定在瀏覽器的視框位置。例如，讓一個(gè)元素隨著頁(yè)面的滾動(dòng)而不斷改變自己的位置。目前高級(jí)瀏覽器都可以正確地解析這個(gè)CSS屬性。3.5.3CSS的定位方式
在CSS中對(duì)元素的定位，可以通過(guò)position屬性設(shè)置。
position：static|relative|absolute|fixed
●static參數(shù)：是所有元素定位的默認(rèn)值，無(wú)特殊定位，對(duì)象遵循HTML定位規(guī)則，不能通過(guò)z-index進(jìn)行層次分級(jí)。
●relative參數(shù)：相對(duì)定位，對(duì)象不可層疊，但可以通過(guò)left、right、bottom、top等屬性設(shè)置在正常文檔流中偏移位置，并可以通過(guò)z-index進(jìn)行層次分級(jí)?！馻bsolute參數(shù)：絕對(duì)定位，脫離文檔流，并通過(guò)left、right、bottom、top等屬性進(jìn)行定位。選取其最近的父級(jí)定位元素，當(dāng)父級(jí)元素的position為static時(shí)，該元素將以body坐標(biāo)原點(diǎn)進(jìn)行定位，并可以通過(guò)z-index進(jìn)行層次分級(jí)。
●fixed參數(shù)：固定定位，該參數(shù)固定的對(duì)象是可視窗口，而并非body或父級(jí)元素，可通過(guò)z-index進(jìn)行層次分級(jí)。
相對(duì)定位是一個(gè)十分容易掌握的概念。如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位，它將出現(xiàn)在它所在的位置上，然后通過(guò)設(shè)置垂直或水平位置，讓這個(gè)元素“相對(duì)于”它的起點(diǎn)進(jìn)行移動(dòng)。下例將top設(shè)置為20
px，框?qū)⒃谠恢庙敳肯旅?0
px的地方；left設(shè)置為30
px，那么會(huì)在元素左邊創(chuàng)建30
px的空間，也就是將元素向右移動(dòng)，效果如圖3-5所示。
#box_relative{
position:relative;
left:30px;
top:20px;
}
圖3-5相對(duì)定位示意圖在使用相對(duì)定位時(shí)，無(wú)論是否進(jìn)行移動(dòng)，元素仍然占據(jù)原來(lái)的空間。因此，移動(dòng)元素會(huì)導(dǎo)致它覆蓋其他框。
絕對(duì)定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間。這一點(diǎn)與相對(duì)定位不同，文本流中其他元素的布局就像絕對(duì)定位的元素不存在一樣，如圖3-6所示。
#box_relative{
position:absolute;
left:30px;
top:20px;
}
圖3-6絕對(duì)定位示意圖絕對(duì)定位元素的位置是相對(duì)于最近的已定位父元素，若沒(méi)有已定位的父元素，那么它的位置是相對(duì)于body的左上角。
使用float定位元素只能在水平方向上定位，而不能在垂直方向上定位。float的定位方式有兩種值：float：left和float：right，即讓float下方的元素浮動(dòng)環(huán)繞在該元素的左邊或者右邊。使用float還可以實(shí)現(xiàn)兩列布局，也就是讓一個(gè)元素在左浮動(dòng)，另一個(gè)元素在右浮動(dòng)，并控制這兩個(gè)元素的寬度。如果不想讓float下面的其他元素浮動(dòng)環(huán)繞在該元素的周圍，就可以清除該浮動(dòng)。使用clear方法可以將浮動(dòng)清除。clear清除浮動(dòng)有三種值：clear：left，清除左浮動(dòng)；clear：right，清除右浮動(dòng)；clear-both，清除所有浮動(dòng)。
在CSS中，可以處理元素的高度、寬度和深度三個(gè)緯度。其高度的處理用height屬性，寬度的處理用width屬性，而深度的處理則要用z-index屬性。z-index屬性用于設(shè)置元素堆疊的次序，其原理是為每個(gè)元素指定一個(gè)數(shù)字，數(shù)字較大的元素將疊加在數(shù)字較小的元素之上。其使用格式如下：
z-index：auto|number；
其中，auto為默認(rèn)值，表示遵從其父對(duì)象的定位。number是一個(gè)無(wú)單位的整數(shù)值，可以為負(fù)數(shù)，如果兩個(gè)絕對(duì)定位元素的z-index屬性具有相同的number值，則依據(jù)該元素在HTML文檔中聲明的順序進(jìn)行層疊；如果絕對(duì)定位的元素沒(méi)有指定z-index屬性，則此屬性的number值為正數(shù)的對(duì)象會(huì)在該元素之上，而number值為負(fù)數(shù)的對(duì)象則在該元素之下；如果將參數(shù)設(shè)置為null，則可以消除此屬性。該屬性只作用于position的屬性值為relative或absolute的對(duì)象，不作用于窗口控件。3.5.4網(wǎng)頁(yè)布局方式實(shí)例
進(jìn)行網(wǎng)頁(yè)布局時(shí)，普遍采用的有兩種方法：第一種是傳統(tǒng)的table布局法，利用table表格的嵌套完成對(duì)網(wǎng)頁(yè)的分塊布局；第二種是div+CSS布局法，充分發(fā)揮了div標(biāo)簽的靈活性，將頁(yè)面用div分塊后，再使用CSS對(duì)分布?jí)K進(jìn)行定位。對(duì)比這兩種方法，我們可以清楚地看到：table布局法簡(jiǎn)單、制作速度快。設(shè)計(jì)者可以直接通過(guò)圖像編輯器畫圖、切圖，最后再由圖像編輯器自動(dòng)生成表格布局的頁(yè)面。但用table布局的頁(yè)面，源代碼中存在大量的冗余，使頁(yè)面結(jié)構(gòu)與表現(xiàn)混雜在一起，非常不利于查找信息和管理，更不利于修改。div+CSS的出現(xiàn)彌補(bǔ)了table布局的不足，具有以下兩個(gè)方面的顯著優(yōu)勢(shì)：①提高頁(yè)面的瀏覽速度。對(duì)于同一個(gè)頁(yè)面的視覺(jué)效果，采用div+CSS重構(gòu)的頁(yè)面大小要比table編碼的頁(yè)面文件小得多，瀏覽器不用去解析大量冗長(zhǎng)的標(biāo)簽；②易于維護(hù)和改版。由于多個(gè)頁(yè)面可以共享一個(gè)CSS文件，這樣只需簡(jiǎn)單地修改CSS文件就可以重新布局整個(gè)網(wǎng)站的頁(yè)面。含有導(dǎo)航欄和腳注的三欄結(jié)構(gòu)，是常見的一種網(wǎng)頁(yè)排版模式，如圖3-7所示。為了下文講解方便，用字母標(biāo)識(shí)每一模塊，其中A為導(dǎo)航欄，H為腳注，其余為劃分的各內(nèi)容板塊。
圖3-7常見的網(wǎng)頁(yè)排版模塊圖為了完成如上需求的布局，我們做如下的工作：
首先，用div標(biāo)簽對(duì)整個(gè)網(wǎng)頁(yè)進(jìn)行分塊。八個(gè)div塊分別對(duì)應(yīng)圖中A、B、C、D、E、F、G、H，將它們裝進(jìn)一個(gè)大的div塊中，方便居中顯示。其關(guān)鍵代碼如下：
<body>
<divid="container">
<divid="header">
<h1>A</h1>
</div>
<divid="left">
<h1>B</h1>
</div>
<divid="middle">
<h1>C</h1>
</div>
<divid="middle">
<h1>D</h1>
</div>
<divid="right">
<h1>E</h1>
</div>
<divid="right">
<h1>F</h1>
</div>
<divid="right">
<h1>G</h1>
</div>
<divid="footer">
<h
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- GB/T 28429-2025電氣化鐵路電纜1 500 V及以下直流牽引電力電纜及附件
- 重慶市大渡口區(qū)2025-2026學(xué)年九年級(jí)（上）期末化學(xué)試卷（含答案）
- 四川省內(nèi)江市2025-2026學(xué)年高二上學(xué)期期末檢測(cè)英語(yǔ)試卷（含答案）
- 化工企業(yè)領(lǐng)導(dǎo)培訓(xùn)課件
- 化工企業(yè)施工培訓(xùn)課件
- 飛機(jī)科普教學(xué)
- 2026年濟(jì)南高新區(qū)海川中學(xué)教師崗招聘?jìng)淇伎荚囶}庫(kù)及答案解析
- 市場(chǎng)調(diào)查公司管理制度
- 贛州市人力資源有限公司現(xiàn)面向社會(huì)公開招聘派遣制員工1名備考考試題庫(kù)及答案解析
- 地面滲水施工方案(3篇)
- 氫能源汽車2026年維修培訓(xùn)
- 南京南京市建鄴區(qū)2025年9月政府購(gòu)崗人員招聘筆試歷年參考題庫(kù)附帶答案詳解
- 2025年企業(yè)內(nèi)部培訓(xùn)課程體系
- 2026年工程材料企業(yè)物資采購(gòu)人員考試大綱
- 2025年湖南公務(wù)員《行政職業(yè)能力測(cè)驗(yàn)》試題及答案
- 2024中國(guó)類風(fēng)濕關(guān)節(jié)炎診療指南課件
- 2025年地鐵車站物業(yè)管理合同協(xié)議
- 2025-2030腦機(jī)接口神經(jīng)信號(hào)解碼芯片功耗降低技術(shù)路線圖報(bào)告
- 2025公路安全韌性提升技術(shù)指南
- 藥廠入職安全培訓(xùn)課件
- 廣東省高州市全域土地綜合整治項(xiàng)目（一期）可行性研究報(bào)告
評(píng)論
0/150
提交評(píng)論