離去是為了更好的開始，新的開始、新的工作馬上開始了。一直以來覺得在css上面根基不是很強大，打算花一周時間將《CSS禪意花園》《精通CSS網頁布局》重新總結一遍，主要將以前沒注意的東東做個筆記。
布局是需要縝密的結構分析和設計
第一天 CSS布局基礎
1）在html中匯入外部樣式表（兩種方法）
1-1)<link href="001.css" rel="stylesheet" type="text/css"/>
1-2)<style type="text/css">
@import url("url.css");
</style>
2) DOCTYPE(文件類型)與CSS的關係
其實DOCTYPE只是一組機器可讀規範，雖然中間包含了檔案的URL，但瀏覽器不回去讀取這些檔案，僅用於識別，然後決定以什麼樣的規範去執行頁面中的代碼。
XHTML1.0提供了三種DTD聲明科選擇：
2-1) 過渡型 （Transitional）：要求非常鬆散的DTD，使用者可繼續使用HTML 4.0.1 的標籤，但是要符合XHTML的寫法
<!DOCTYPE html PUBLIC "-//W#C//DTD XHTML 1.0 Transitional/EN" "http://www.w3.org/TR/xhmtl1/DTD/xhtml1-transitonal.dtd>
2-2)嚴格型（Strict）：不能使用任何錶現層的標籤和屬性，如 <br>
2-3)架構型（Frameset）：頁面中包含架構
一般採用過渡型，容易通過w3c驗證，努力目標為嚴格型。
3）選擇符
3-1)常見選擇
p {
color: red;
}
.font1 {
color: red;
}
p.font1 {
color: red;
}
#box{
color: red;
}
div#box{
color: red;
}
3-2)進階選擇符號
3-2-1）子選擇符">"。注意IE6及其以下版本不支援子選擇符
div > span //即為div的所有直接子span標籤，但是不不含孫子節點，注意和“ ”的區別
div > .font24px
#box > .font24px
3-2-2）相鄰選擇符"+"。注意IE6及其以下版本不支援子選擇符
div + p //即div元素後邊相鄰的元素
div + .font28px //即div元素後邊相鄰的class為font28px的元素
3-2-3）屬性選擇符。注意IE6及其以下版本不支援子選擇符
3-2-3-1)匹配屬性選擇符：div[class]{}//即選擇凡是設定了class屬性的div元素，再例如img[alt][title]{}// 即設定了alt和title的img元素
3-2-3-2)匹配屬性值選擇符：img[alt="映像"][title="映像"]
3-2-3-3)模糊比對屬性值選擇符：類似於Regex的匹配模式，包含以下5種：
3-2-3-3-1)[|=]：連字號匹配，以連字號為分隔字元，以匹配屬性值中局部字串
[class|="blue"]{}
<div class="red-bule-green"></div>
3-2-3-3-2)[~=]：空白符匹配，以空白符為分隔字元，以匹配屬性值中局部字串
[class~="blue"]{}
<div class="red bule green"></div>
3-2-3-3-3)[^=]：首碼匹配
[class^="Red"]{}\
<div class="Red-bule-green"></div>
3-2-3-3-4)[$=]：尾碼匹配
[class$="Green"]{}\
<div class="red-bule-Green"></div>
3-2-3-3-5)[*=]：字串匹配，匹配屬性值存在的指定的字元
div [class*="gre"]{}
<div class="red-bule-green"></div>
3-3)通配選擇符
* {
margin:0;
padding:0;
}
3-4)偽類和虛擬元素選擇符：主要是針對一些特殊的元素，如a，body(first-leteer)
a:link{ /*正常串連狀態下樣式*/
color:yellow;
}
a:hover{ /*滑鼠經過的樣式*/
color:red;
}
a:visited{ /*被訪問之後的樣式*/
color:blue;
}
a:active{ /*超連結被啟用時樣式*/
color:black;
}
3-5)選擇符的嵌套
#wrap #header h2 span{
font-size:24px;
}
<div id="wrap">
<div id="header">
<h2><span>網頁標題</span><h2>
</div>
</div>
3-6)css的繼承性
常見的如： body{font-size:12px}來保證所有字型為12px，但是瀏覽器對css的一些錯誤，如在IE6中table中的td也許不遵從12px,因此，常用
body,table,th,td{font-size:12px}來修補。
有些屬性，如果background-color無法繼承父類
4）css優先順序
4-1）css樣式表的優先順序
按照起源，css分為四種：HTML、作者、使用者、瀏覽器
原則上：作者定義有限與使用者佈建，使用者佈建優先於瀏覽器的預設樣式，而瀏覽器的預設樣式會優先於HTML的預設樣式。
4-2）css樣式的優先順序
一般來說，行內樣式會優先於內嵌樣式表，內部樣式表會優先於外部樣式表。而被附加了!important關鍵字的聲明會擁有最高的優先順序。
4-3）css選擇符優先順序
body div#box{border:solider 2px red;}
#box{border:solider 2px blue;}
div.yellow{border:solider 1px yellow;}
<div id="box" class="red">css選擇符優先順序</div>
body div#box大於#box，大於div.yellow
如果是多特同類型的選擇符，則是按照其定義先後順序（與class中類的順序的順序無關），在後邊的具有優先權，例如如下div最終顯示的是黃色
<style type="text/css">
.div1{
background-color:red;
}
.div2{
background-color:yellow;
}
</style>
<div class="div2 div1" style="width:100px;height:100px"></div><!-- 此處class中的定義的順序不影響顯示，即class="div1 div2"也是顯示為黃色 -->
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
