一、 CSS語(yǔ)法
CSS的語(yǔ)法結構為： selector {property:value}
selector（選擇符）：表示這個(gè)樣式將應用與HTML中的哪些對象。應用的對象可以是一個(gè)標簽，也可以是指定了id或者class屬性的特定標簽。
property（屬性）：對于每個(gè)HTML標簽，CSS都提供了許多樣式屬性，用于控制標簽的顏色、大小、定位等。
value（值）：屬性值。
二、 CSS選擇符
對于選擇符，CSS提供了多種支持。
1． 類(lèi)型選擇符
body {margin:0px}
使用了HTML中已經(jīng)定義的標簽名的選擇符稱(chēng)做為類(lèi)型選擇符，就叫類(lèi)型選擇符。如上面的body{…}，使用div、table等也都是類(lèi)型選擇符，類(lèi)型選擇符將用于控制整個(gè)HTML文檔中所有對應的標簽對象。
2． id選擇符
#header{color:red;width:100px}
如上所示，id選擇符使用“#”標識，后跟標簽的id屬性值。在HTML文檔中，每個(gè)標簽的id屬性值必須是惟一的，所以通過(guò)id選擇符就可以對標簽進(jìn)行精確定位，將CSS樣式應用于指定的某個(gè)標簽對象上。如有一個(gè)id為header的div標簽：
<div id=”header”>This is header</div>
那么上面的#header選擇符將使這個(gè)div的寬度為100px，且div中的字體顏色為紅色。
3． class選擇符
.p1{color:red}
id選擇符用于惟一定位一個(gè)標簽對象，那么class選擇符則用于定位一組標簽對象。Class選擇符以“.”標識。在HTML文檔中，每個(gè)標簽都可以指定一個(gè)class屬性，多個(gè)標簽的class屬性之間可以相同，擁有相同class屬性的標簽將被應用相同的CSS樣式。如
<p class=”p1”></p>
<div class=”p1”></div>
上面的p和div標簽中的字體都將會(huì )是紅色。
4． 類(lèi)型指定式選擇符
div#header {color:red}
div.redfont {color:red}
如果即想要對每種標簽采用樣式，又要使用id或class選擇符，那么可以象上面那樣使用樣式使用如下形式，分別標識對id為header的div和class為redfont的div標簽施用樣式。
5． 群組選擇符
div, span, p {font-size:12px}
如果多個(gè)標簽之間的樣式需要使用相同的樣式，可以象上面那樣使用群組選擇符，多個(gè)選擇符之間用“,”隔開(kāi)就可以了，這樣可以減少代碼量，而且可以改善CSS代碼結構。象上面那樣把相同的屬性寫(xiě)在一起，然后對于各異的屬性可以再單獨定義。
6． 包含選擇器
div span{margin:0px; color:red}
如果只想對某個(gè)對象中的子對象使用樣式，那么就可以象上面那樣使用包含選擇器。象上面的例子，只有在div下span中的字體的才會(huì )是紅色的：
<div><p><span>red</span></p></div><span>black</span>
7． 組合選擇符
對于上面所說(shuō)的選擇符，可以任意組合，如：
h1 .p1{}
表示h1下所有class屬性為p1的標簽（注意哦，h1和.p1之間有無(wú)空格差別很大的哦，沒(méi)有空格可是表示class為p1的ht標簽哦）。
#header .p1{}
表示id為header下的所有class屬性為p1的標簽。
8． 通配選擇符
*{font-size:12px}
使用“*”，表示將樣式應用于所有標簽對象上。
9． 偽類(lèi)和偽對象
偽類(lèi)和偽對象是CSS的一種特殊擴展，由CSS自動(dòng)支持，名稱(chēng)不能由用戶(hù)自定義，使用時(shí)只能按標準格式進(jìn)行使用。如：
a:hover {color:red}
上面的例子中hover就是一個(gè)偽類(lèi)。目前比較常用偽類(lèi)是用于控制a標簽的幾個(gè)偽類(lèi)：
:link-------------->表示a鏈接未被訪(fǎng)問(wèn)時(shí)的樣式
:hover-------------->表示鼠標移動(dòng)到標簽的樣式
:active-------------->表示點(diǎn)擊和點(diǎn)擊釋放之間的樣式
:visited-------------->表示a鏈接被訪(fǎng)問(wèn)后的樣式
三、 CSS布局
傳統的表格布局是通過(guò)控制表格中的單元格的位置來(lái)達到界面排版的效果的，而CSS布局則是通過(guò)采用合適的對象+CSS控制來(lái)時(shí)實(shí)現界面的排版布局，后者的優(yōu)勢在于界面中只需要在合適的容器對象（如div）中放入內容，容器對象只是用于標識一個(gè)區域，而具體如何展示則完全由CSS來(lái)進(jìn)行控制，從而達到內容與表現的分離。下面將以DIV+CSS來(lái)介紹幾種經(jīng)典布局。
1. 一列固定寬度
在HTML中添加如下代碼：
<div id="layout">一列固定寬度</div>
由于為div指定了id屬性，所以我們可以用id選擇符為這個(gè)div設置樣式：
#layout{
background-color:#cccccc;
border:1px solid #333333;
width:300px;
height:200px;
}
上面的CSS為div設置了#cccccc的背景色，并添加了1px solid #333333的邊框，最后將div設置成了寬300px、高200px。
2. 一列自適應寬度
在上面的基礎上，我們只要對width屬性進(jìn)行修改，就可以將div修改成寬度根據瀏覽器窗口自動(dòng)調整大小的效果：
#layout{
background-color:#cccccc;
border:1px solid #333333;
width:80%;
height:200px;
}
這樣，div的寬度將是瀏覽器窗口寬度的80%。
3. 一列固定寬度居中
網(wǎng)上有很多網(wǎng)站是采用頁(yè)面整體居中的布局方式，對于FireFox，我們可以在一列固定寬度的基礎上稍作修改就可以達到這種效果：
#layout{
background-color:#cccccc;
border:1px solid #333333;
width:300px;
height:200px;
margin:0px auto;
}
margin用于設置標簽對象與相鄰的其它標簽對象之間的外邊距，如果margin屬性被指定了兩個(gè)值，則第一個(gè)值用于控制標簽對象的上下外邊距，而第二個(gè)值則用于控制標簽對象的左右外邊距。除了能為邊距指定數值外，還可以為其指定auto值，表示由瀏覽器自動(dòng)設置邊距，瀏覽器會(huì )將左右邊距設置為相等，從而達到居中的效果。
但在IE瀏覽器不支持margin屬性的auto值，為其了達到同樣的效果，我們可以將body的text-align屬性設置為center來(lái)達到這個(gè)效果，但這樣的話(huà)，div中的內容也同時(shí)被居中了，這時(shí)我們可以使用css hack來(lái)規避：
<body>
<div id="layout">一列固定寬度</div>
</body>
body{*text-align:center;}
#layout{
background-color:#cccccc;
border:1px solid #333333;
width:300px;
height:200px;
margin:0px auto;
*text-align:left;
}
上面就是通過(guò)*text-align這個(gè)css hack來(lái)達到居中效果的。在CSS中，IE能夠識別以*打頭的屬性，而FireFox不能識別（但不會(huì )出錯），所以在IE瀏覽器中body和#layout中的text-align屬性能生效，而在FireFox則被忽略。
4. 兩列固定寬度
在HTML中添加如下代碼：
<div id="left">左列</div>
<div id="right">右列</div>
如果不加如何樣式控制，那么兩個(gè)div將呈上下排列，這是因為DIV默認是塊狀對象，所以?xún)蓚€(gè)div的內容成兩行顯示。
在HTML中，對象的顯示方式有以下兩種方式：
block（塊狀對象）：塊狀對象指當前對象顯示為一個(gè)方塊，它將占據整行，它后面的對象將在下一行顯示。
in-line（內聯(lián)對象）：與塊狀對象相反，內聯(lián)對象運行后面的對象與它在同一行顯示。
接下來(lái)我們?yōu)檫@兩個(gè)div指定樣式：
#left {
background-color:#cccccc;
border:1px solid #333333;
width:300px;
height:200px;
float:left;
}
#right {
background-color:#cccccc;
border:1px solid #333333;
width:300px;
height:200px;
float:left;
}
這樣就達到了我們的預期效果，兩個(gè)div左右排列了。這里是通過(guò)為div指定了float屬性來(lái)到達我們的目的的，float屬性用于控制對象的浮動(dòng)，很多布局都是通過(guò)float來(lái)實(shí)現的。
float屬性用于定義對象在哪個(gè)方向上浮動(dòng)，float有三個(gè)取值：none、left、right。取值none時(shí)，對象不浮動(dòng)。取值left時(shí)對象向左浮動(dòng)，這時(shí)它后面的對象將流到它的右邊。取值right時(shí)對象向右浮動(dòng)，這時(shí)它后面的對象將流到它的左邊。使用float后，能夠改變頁(yè)面中對象的流動(dòng)順序（從左到右，當某個(gè)對象之前的對象已經(jīng)占據了一行的寬度，則該元素自動(dòng)流到下一行）。
上面的例子中，如果只給left指定float:left，而不給right指定float:left，在IE中right還是會(huì )顯示在left的右邊，但在FF中就不行了，right不僅沒(méi)有顯示在left的右邊，而且連background-color、border、width等屬性都沒(méi)有生效，奇怪的呀^_^。
上面的例子中，僅通過(guò)CSS我們就實(shí)現了將兩個(gè)div的左右排列，如果后面有需求說(shuō)需要將原本顯示在左邊的left顯示到右邊，而原本顯示在右邊的right顯示到左邊，這只需要修改下CSS就可以實(shí)現：
#left {
background-color:#cccccc;
border:1px solid #333333;
width:300px;
height:200px;
float:right;
}
#right {
background-color:#cccccc;
border:1px solid #333333;
width:300px;
height:200px;
float:right;
}
瞧，原本的HTML代碼不用做任何修改，僅僅改下CSS樣式就修改了布局的方式，這就是CSS布局的威力。
為了實(shí)現兩列的左右排列，上面的CSS將left和right的float都設置成相同的left或者right，兩者缺省是緊貼在一起的，這可以通過(guò)設置兩者之間的margin屬性來(lái)控制，比如為第一個(gè)例子中的left設置margin-right:5px或者right設置margin-left:5px。除了將left和right的float設置為相同值來(lái)實(shí)現左右排列，也可以象下面那樣設置成不同的值：
#left {
background-color:#cccccc;
border:1px solid #333333;
width:300px;
height:200px;
float:left;
}
#right {
background-color:#cccccc;
border:1px solid #333333;
width:300px;
height:200px;
float:right;
}
只不過(guò)這樣，缺省的情況下兩者之間有很大的間距，這是由于兩者的寬度總和小于瀏覽器的寬度導致的，這個(gè)可以通過(guò)增大兩個(gè)div的width來(lái)縮小兩者間的間距，也可以通過(guò)指定左右的margin來(lái)設置與瀏覽器左右邊界的間距來(lái)實(shí)現。
5. 兩列寬度自適應
實(shí)現兩列自適應寬度，只需要在上面的兩列固定寬度中修改下width的屬性值，采用百分比的形式，就可以達到左右兩個(gè)div的寬度隨著(zhù)瀏覽器窗口大小的改變而改變的效果了：
#left {
background-color:#cccccc;
border:1px solid #333333;
width:30%;
height:200px;
float:left;
}
#right {
background-color:#cccccc;
border:1px solid #333333;
width:60%;
height:200px;
float:left;
}
注意，上面的right的width屬性沒(méi)有70%，而使用60%，是因為一個(gè)對象的實(shí)際寬度不僅僅由width屬性決定，還包括border的寬度、內間距（padding）、外間距（margin），由于上面為div設定了border的寬度為1px，如果將right的width設置為70%，將會(huì )使得兩個(gè)div的總寬度超過(guò)100%，導致right換行顯示。關(guān)于寬度的計算涉及CSS布局中的盒模型問(wèn)題，這會(huì )在后面介紹。
6. 兩列右列寬度自適應
兩列寬度自適應的例子中，為每個(gè)div都指定了百分比的寬度就實(shí)現了寬度的自適應，要實(shí)現右列寬度自適應，只需要為左列指定固定寬度，然后將right的float和width屬性去掉就可以達到目的了：
#left {
background-color:#cccccc;
border:1px solid #333333;
width:300px;
height:200px;
float:left;
}
#right {
background-color:#cccccc;
border:1px solid #333333;
height:200px;
}
在兩列固定寬度中，假如不給right指定float屬性，就會(huì )出現#right沒(méi)有施加到right上，且right是換行顯示的現象；而這里為了實(shí)現right寬度自適應，就必須去掉float屬性，否則一旦加上float屬性，right的寬度就會(huì )和其中的內容的實(shí)際寬度保持一致，雖然它顯示在右邊，奇怪的呀^_^。
7. 兩列固定寬度居中
結合前面講過(guò)的一列固定寬度居中、兩列固定寬度，這個(gè)可以通過(guò)div的嵌套來(lái)實(shí)現：
<div id="layout">
<div id="left">左列</div>
<div id="right">右列</div>
</div>
body {
*text-align:center;
}
#layout {
width:604px;
height:202px;
margin:0px auto;
*text-align:left;
}
#left {
background-color:#cccccc;
border:1px solid #333333;
width:300px;
height:200px;
float:left;
}
#right {
background-color:#cccccc;
border:1px solid #333333;
width:300px;
height:200px;
float:left;
}
由于left和right都有指定了300px的width和1px的border，兩者總的寬度為300 * 2 + 2 * 2（每個(gè)div的左右邊框之和為2）：604，為了能夠讓left和right在一行顯示，layout的width只能大于或等于為604，否則在FF中right將換行顯示，而在IE中可能會(huì )換行，也可能不換行，取決于width具體有多小。
8. 左右兩列固定寬度，中間列寬度自適應
先在界面中放置三個(gè)div：
<div id="left">左列</div>
<div id="center">中間</div>
<div id="right">右列</div>
為了實(shí)現這種效果，這里需要引用一個(gè)新的CSS屬性：position。position也是CSS中用于界面布局的屬性之一，它將元素放置到一個(gè)靜態(tài)的、相對的、絕對的、或者固定的位置。任何元素都可以使用position屬性進(jìn)行定位。position有四種取值：
1） static（靜態(tài)的）：缺省情況下所有元素都是使用static進(jìn)行定位，按照頁(yè)面流進(jìn)行定位。
2） relative（相對的）：元素將相對于其在頁(yè)面流中的正常位置進(jìn)行偏移。
3） absolute（絕對的）：元素將相對于其父元素的位置進(jìn)行偏移。
4） fix（固定的）：元素將位于瀏覽器窗口的指定坐標。不論窗口滾動(dòng)與否，元素都會(huì )停留在指定的位置。
元素使用position進(jìn)行定位時(shí)，具體的位置可以通過(guò)top、right、bottom、left四個(gè)屬性進(jìn)行指定。
在這個(gè)例子中，不管瀏覽器的大小如何變化，左右兩列將一直固定在兩角，這可以通過(guò)將絕對定位來(lái)實(shí)現：
#left {
background-color:#cccccc;
border:1px solid #333333;
width:100px;
height:200px;
position:absolute;
left:0px;
top:0px;
}
#right {
background-color:#cccccc;
border:1px solid #333333;
width:100px;
height:200px;
position:absolute;
right:0px;
top:0px;
}
為了實(shí)現中間列跨度自適應，只要使它始終和左右兩列保持列寬的距離就可以了：
#center {
background-color:#cccccc;
border:1px solid #333333;
height:200px;
margin-left:102px;
margin-right:102px;
}
這里通過(guò)指定margin-left和margin-right指定了center與瀏覽器左右邊框的間距來(lái)達到center真正處于中間的效果，margin-left和margin-right指定的像素應該大于等于左右div的真實(shí)寬度，否則就會(huì )出現center覆蓋了左邊div內容的現象。雖然center已經(jīng)達到了居中，且能寬度自適應，但還有點(diǎn)小缺陷：沒(méi)有置頂。這是因為body有缺省的margin值導致的，left、和right使用了絕對定位忽略了body的margin屬性，而center還是按照正常的頁(yè)面流進(jìn)行定位，會(huì )受到body的margin屬性的影響，解決方式是去掉body的margin屬性：
body{
margin:0px;
}
9.
四、 Position
正如前面所說(shuō)的，position屬性用于將元素放置到一個(gè)靜態(tài)的、相對的、絕對的、或者固定的位置。它有四種取值：static、relative、absolute和fixed。缺省情況下，所有的元素都是static的，即按照元素在頁(yè)面流中的位置正常顯示，這里不再詳述，下面講講剩下的三個(gè)取值。
1. relative
使用relative（相對）定位，元素將相對于其在頁(yè)面流中的正常位置進(jìn)行偏移。
<h1>Title</h1>
<div id="block">
A Block
</div>
<p>
As it was mentioned before [index.html#DecideWhatToChange], the list of zones to be reRendered can be specified as EL expression. But there is a question that must be specified more exactly.
</p>
上面的HTML代碼，在不應用任何CSS樣式的情況下效果如下：
現在讓block進(jìn)行相對定位：
#block {
background-color:#cccccc;
border:1px solid #333333;
width:100px;
height:50px;
position:relative;
left:200px;
top:100px;
}
效果如下，block相對于原來(lái)的位置向左偏移了200px，向下偏移了100px，但不會(huì )影響其它元素在頁(yè)面流中的定位與展示，h1和p之間有一塊空白，那是block在static時(shí)應該占據的空間。
2. absolute
使用absolute定位，元素將相對于其父元素的位置進(jìn)行偏移?？纯聪旅娴睦樱?br> <div id="layout">
<h1>Title</h1>
<div id="block">
A Block
</div>
<p>As it was mentioned before [index.html#DecideWhatToChange], the list of zones to be reRendered can
be specified as EL expression. But there is a question that must be specified more exactly.
</p>
</div>
#layout{
background-color:#cccccc;
border:1px solid #333333;
margin:20px 100px 0px 100px;
height:250px;
}
#block {
background-color:#cccccc;
border:1px solid #333333;
width:100px;
height:50px;
}
為對block進(jìn)行定位時(shí)，缺省顯示如下：
對block使用absolute定位：
#block {
background-color:#cccccc;
border:1px solid #333333;
width:100px;
height:50px;
position:absolute;
left:400px;
top:200px;
}
block這時(shí)相對于layout發(fā)生了偏移，而p緊接著(zhù)定位到了h1后面，不會(huì )存在用relative定位時(shí)出現的空白，因為這時(shí)block已經(jīng)脫離了正常的頁(yè)面流。
3. fixed
使用fixed定位，元素將位于瀏覽器窗口的指定坐標。不論窗口滾動(dòng)與否，元素都會(huì )停留在指定的位置。，目前FF支持該取值，而IE好象到了IE7才能夠支持。
<div id="layout">
<h1>Title</h1>
<p>As it was mentioned before [index.html#DecideWhatToChange], the list of zones to be reRendered can
be specified as EL expression. But there is a question that must be specified more exactly.</p>
</div>
<div id="block">
A Block
</div>
#layout{
background-color:#cccccc;
border:1px solid #333333;
height:2000px;
}
#block {
background-color:#cccccc;
border:1px solid #333333;
width:100px;
height:50px;
position:fixed;
left:400px;
top:200px;
}
由于block使用了fixed定位，這時(shí)雖然界面上有滾動(dòng)條，block并不會(huì )隨著(zhù)滾動(dòng)條的滾動(dòng)而滾動(dòng)，而是一直停留在(400,200)這個(gè)坐標上。
五、 clear
前面講過(guò)，使用float屬性可以使對象進(jìn)行浮動(dòng)，但是由于浮動(dòng)的對象已經(jīng)脫離了正常的頁(yè)面流，所以并不占據頁(yè)面流中的空間，所以會(huì )出現包含浮動(dòng)對象的對象沒(méi)有包住浮動(dòng)對象的情況，看看下面的例子：
<div id="layout">
<h1>Title</h1>
<div id="block">
A Block
</div>
<p>As it was mentioned before [index.html#DecideWhatToChange], the list of zones to be reRendered can
be specified as EL expression. But there is a question that must be specified more exactly.</p>
</div>
#layout{
background-color:#cccccc;
border:1px solid #333333;
}
#block {
background-color:#cccccc;
border:1px solid #333333;
width:100px;
height:150px;
margin:0px 5px;
float:left;
}
block向左浮動(dòng)，所以p移到了block的右邊，由于block浮動(dòng)，所以包住它的layout認為其高度只要能夠包住p就可以了，所以就出現了block“越界”的現象。
解決這個(gè)問(wèn)題需要借助clear屬性，clear用于設置一個(gè)元素的側面是否允許其他的浮動(dòng)元素，取值：
1. left：對元素的左邊進(jìn)行清理，該元素將會(huì )在左浮動(dòng)對象后面換行顯示；
2. right：對元素的右邊進(jìn)行清理，該該元素將會(huì )在右浮動(dòng)對象后面換行顯示；
3. both：對左右兩邊進(jìn)行清理；
4. none：不清理；
注意，clear只能對頁(yè)面流中處在它前面的浮動(dòng)對象進(jìn)行清理，不能清理頁(yè)面流中位于它后面的浮動(dòng)對象。對于上面的例子，我們可以在p后面加上一個(gè)空內容的div，然后使用它來(lái)對block進(jìn)行清理：
<div id="layout">
<h1>Title</h1>
<div id="block">
A Block
</div>
<p>As it was mentioned before [index.html#DecideWhatToChange], the list of zones to be reRendered can
be specified as EL expression. But there is a question that must be specified more exactly.</p>
<div id="clear"></div>
</div>
#layout{
background-color:#cccccc;
border:1px solid #333333;
}
#block {
background-color:#cccccc;
border:1px solid #333333;
width:100px;
height:150px;
margin:0px 5px;
float:left;
}
#clear {
clear:left;
}
聯(lián)系客服
