標籤：style blog http color 使用 os
轉自：http://www.cnblogs.com/polk6/archive/2013/07/19/3142142.htmlCSS 選取器及各樣式引用方式介紹一個好的介面，是一個Web吸引人們最大的賣點。
Css ：層疊樣式表 (Cascading Style Sheets),定義了如何顯示HTML元素。
1.選取器的分類文法結構：
1.1 Id選取器1.1.1 格式
#id ：#+元素的id；id是區分大小寫。
1.1.2 樣本#title1 {background-color:Blue;border-width:thick;}
1.2 Class 類別選取器1.2.1 格式
.ClassName ：.+Class類的名稱；類名是區分大小寫。
1.2.2 樣本.postTitle {background-color: Green;}
1.3 元素(標籤)名稱選取器1.3.1 格式
元素名稱：元素的名稱不區分大小寫。
1.3.2 樣本h2 {background-color:Green;}
1.4 複合選取器1.4.1 格式
元素名稱1,元素名稱2,#id,.ClassName ：可以根據元素的名稱、id、類名，使合格元素共同擁有樣式;各選取器條件要以分號(,)隔開。
1.4.2 樣本h2 , #subid , .subclass {background-color:Green;}
1.5 層次選取器1.5.1 格式
父選取器 子選取器 ：滿足父選取器下的子選取器條件；兩者中間用空格隔開。
1.5.2 樣本① 父選取器為元素
div input{background-color:Green} /* 表示div下的input子項目 */
② 父選取器可以為類、Id選取器，子選取器也可以。
.showInfo_tabel tr{height:20px;} /* 表示table的class為showInfo_tabel時，下面的tr元素height屬性為20px */1.5.3 展示圖片
1.6 偽類別選取器1.6.1 格式
其他選取器 偽類別選取器
1.6.2 說明行為選取器是以 : 開頭，後面跟著偽類名稱。主要有5個(CSS1和2)：
①a:link 選擇所有未被訪問的連結
②a:visited 選擇所有已被訪問的連結
③a:active 選擇活動連結
④input:hover 滑鼠移至上方上方的元素
⑤input:focus 擷取到焦點的元素
1.6.3 樣本1.若不想a連結在訪問後改變元素，可以把a標籤的未被訪問和已被訪問設為同一種顏色
a :link,:visited{color:Blue;}
2.元素的滑鼠移至上方(進入)：如"登入"按鈕的變色。
.btn_login:hover {background-color: #218fd5;}
2. CSS樣式的存放方式
樣式可以存放在一個專門存放樣式的檔案裡(外部樣式表)、HTML頁面的<head></head>裡(內部樣式表)、元素的Style屬性裡(內聯樣式)。
2.1 外部樣式表2.1.1 存放方式存放在專門的一個樣式表裡。以css為尾碼的檔案。
2.1.2 引用方式在HTML頁面的<head></head>節點裡，添加<link />標籤：
<head> <link href="../Styles/Site.css" rel="stylesheet" type="text/css" /></head>2.1.3 應用情境
多個page頁面共用樣式，如：論壇文章的排版。
2.2 內部樣表2.2.1 存放方式在HTML頁面的<head></head>節點裡，添加<style type="text/css" ></style> 指令碼。
<head> <title>page標題</title> <style type="text/css"> input{background-color:Green } </style></head>2.2.2 使用情境
單個page特有的樣式。
2.3 內聯樣式2.3.1 存放方式元素的Style屬性裡。
<input type="text" style="" value="input1"/>2.3.2 使用情境
特殊場合的特殊元素。
3. 樣式的優先順序
當一個元素附加許多級樣式時，比如：外聯樣式包含此元素、內聯樣式也包含此元素等，樣式採用的是並集方式。
若有交集的元素，將按以下的情況決定採用哪個樣式屬性：
3.1 非同級引用外部樣式表、內部樣式表、內聯樣式都設定了此元素的某個相同樣式屬性。
3.1.1 優先順序對比內聯樣式 > 內部樣式表 > 外部樣式表
對相同的樣式屬性，其值是擷取優先順序最高的。
3.1.2 樣本<head> <style> #testinput{width:300px} </style></head><body ><input type="text" id="testinput" style="width:120px;" value="input1"/></body>
input標籤的width屬性，實際為120px;
3.2 同級引用
在外部樣式表 或 內部樣式表裡 多個樣式選取器包含了此元素。
3.2.1 優先順序對比外部樣式表、內部樣式表 情況下：Id選取器 > class 類別選取器 >元素選取器。
內聯樣式情況下：採用後面同屬性樣式的值。
3.2.2 樣本<head> <style> input{background-color:Yellow;} #testinput{background-color:Red;} .showblue{background-color:Blue;} </style></head><body ><input type="text" id="testinput" class="showblue" value="input1" style="width:1000px;width:100px"/></body>
顯示圖片：
==================================系列文章==========================================
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
