CSS 概述
級聯樣式單是一系列格式規則，這些規則用于控制網頁內容的外觀，可以將數據邏輯和顯示邏輯分離，從而提高文件的可讀性。
CSS 樣式單的基本使用
鏈接外部樣式文件：這種方式可以將央視文件徹底與HTML文檔分離，樣式文件需要額外引入
導入外部樣式文件：這種方式與上一種類似，只是適用@import來引入外部樣式文件。
使用內部樣式定義：這種方式時通過在HTML文檔頭定義樣式表來實現的。
使用行內樣式：這種方式將樣式行內定義到具體的HTML元素。
引入外部樣式文件
HTML 文檔中使用<link…/>元素來引入外部樣式文件，引入外部樣式文件應在<head…/>元素中增加如下<link…/>子元素:
<link type="text/css" rel="stylesheet" href="CSS樣式文件的URL">
1
為了讓頁面更富表現力，可以為頁面指定外部的CSS樣式單文件，引入外部CSS
樣式單文檔的語法格式見上面介紹。在該頁面代碼的<head…/>元素內插入如下<link…/>子元素:
<link href="outer.css" rel="stylesheet" type="text/css" />
1
outer.css 樣式單文件的代碼如下:
/*設置整個表格的背景色*/
table {
background-color: #003366;
width: 400px;
}
/*設置單元格的背景色、字體等*/
td {
background-color: Jtfff;
font- family: ＂楷體＿GB2312";
font-size: 20pt ;
text-shadow: -8px 6px 2px f333 ;
}
導入外部樣式單
導入外部樣式單的功能與鏈接外部樣式單的功能差不多，只是語法上存在差別。導入外部樣式單需要在<style…/> 元素中使用＠import來執行導入。
例如：
<style tupe="text/css">
@import"out.css";
@import url("mycss.css");
</style>
使用＠import 完整語法如下：
@import url （樣式單地址） sMedia;
使用內部CSS樣式
通常不建議使用內部CSS樣式因為這種做法需要在HTML文檔內嵌入CSS樣式定義，這種內部CSS樣式主要有三大劣勢。
如果次CSS樣式需要被其他HTML文檔適用，那么這些CSS樣式必須在其他HTML文檔中重復定義。
當量CSS嵌套在HTML文檔中，必將導致HTML文檔過大，大量的重復下載導致網絡負載加重。
如果需要修改整站封個時，必須一次打開每個頁面重復修改，不利于軟件工程化。
但是內部樣式定義并不是一無是處，如果想讓某些CSS只對某個頁面生效的話，則應該選用內部樣式定義。
適用內部樣式定義的語法格式如下：
<style type="text/css">
樣式單文件定義
</style>
CSS選擇器
定義CSS樣式的語法總遵守如下格式：
Selector {
propertyl: valuel ;
property2 : value2;
...
}
元素選擇器
元素選擇器是最簡單的選擇器，其語法格式如下：
E {...}/*其中E代表有效的HTML元素名*/
其實E可以是任意有效的 HTML 元素名，甚至可用" * “來代表元素名，”＊"可匹配 HTML文檔中任意元素。
屬性選擇器
E{ } : 指定該 CSS 樣式對所有E元素起作用
E[attr]{…} : 指定該 CSS 樣式對具有 attr 屬性的E元素起作用
E[attr=value] {…} : 指定該CSS樣式對所有包含attr屬性，且attr屬性為value的E元素起作用。
E[att"=“value”] {…} : 指定該 CSS 樣式對所有包含attr屬性，且attr屬性的值為以 value開頭的字符串的E元素起作用。
上面這幾個選擇器匹配規則越嚴格優先級越高。例如，對于包含 abc 屬性的<div…/>元素，如果其屬性值為 xyz ，則 div[abc=xyz] 選擇器定義的 CSS 樣式會覆蓋 div[abc] 定義的 CSS 樣式。
ID選擇器
ID 選擇器指定 CSS 樣式將會對具有指定id屬性值的 HTML 元素起作用。ID選擇器的語法格式如下：
#idValue {...}
上面語法指定該 CSS 樣式對id為 idValue的HTML 元素起作用。
定義僅對指定元素起作用的 ID 選擇器的語法格式如下：
E#idValue {...}/*其中E是有效的HTML元素*/
該語法指定該 CSS 樣式對id為idValue的E元素起作用。
class選擇器
class 選擇器指定 CSS 樣式對具有指定class屬性的元素起作用。class 選擇器的語法格式如下：
[E] . classValue ( ...... }/*其中 是有效的 HTML 元素*/
指定該 CSS 定義對 class 屬性值為 classValue 的E元素起作用。此處的E
可以省略，如果省略 E, 則指定該 CSS 對所有的 class 屬性為 classValue 的元素都起作用。
包含選擇器
包含選擇器用千指定目標選擇器必須處千某個選擇器對應的元素內部。其語法格式如下：
Selectorl Selector2 {...}/*其中 Selectorl、Selector2 都是有效的選擇器*/
子選擇器
子選擇器用于指定目標選擇器必須是某個選擇器對應的元素的子元素。子選擇器的語法格式如下：
Selectorl>Selector2 {...}/*其中 Selectorl、Selector2 都是有效的選擇器*/
CSS 3 新增的兄弟選擇器
兄弟選擇器 CSS 3.0 新增的一個選擇器。兄弟選擇器的語法如下:
Selectorl ~ Selector2 {...}/*其中 Selectorl、Selector2 都是有效的選擇器 */
兄弟選擇器匹配與 Selector1對應的元素后面、能匹配 Selector2 的兄弟節點。
選擇器組合
如果需要讓一份 CSS 樣式對多個選擇器起作用，那就可以利用選擇器組合來實現了。選擇器組合的語法格式如下：
Selectorl , Selector2 , Selector3 ,...{...}/*其中 Selectorl Selector2 Selector3都是有效的選擇器*/
對于組合選擇器而言，{}中定義的 CSS 樣式將會對前面列出的所有選擇器匹配的元素起作用
。
偽元素選擇器
偽元素選擇器并不是針對真正的元素使用的選擇器，偽元素選擇器只能針對 CSS 中已有的偽元素起作用。
CSS 提供的偽元素選擇器有如下幾個。
? first-letter: 該選擇器對應的 CSS 樣式對指定對象內的第一個字符起作用
? first-line: 該選擇器對應的 CSS 樣式對指定對象內的第一行內容起作用。
? :before: 該選擇器與內容相關的屬性結合使用 ，用于在指定對象內部的前端插入內容
? :after: 該選擇器與內容相關的屬性結合使用，用于在指定對象內部的尾端添加內容
:first-letter 選擇器僅對塊元素(如<div…/>、<p…/>、<section…/＞等元素）起作用。
:first-line選擇器同樣只對塊元素(如<div…/>、<p…/＞、<section…/＞等元素）起作用。如果要對行內元素（如<span…/>等元素）使用該屬性 ，必須先設定對象的 height、width 屬性，或者設定 position 屬性為 absolute, 或者設定 display 屬性為 block。
結構性偽類選擇器
Selector:first-child:匹配符合Selector選擇器，而且必須是其父元素的第一個子節點的元素
Selector:last-child:匹配符合Selector選擇器，而且必須是其父元素的最后一個子節點的元素
Selector:nth-child(n):匹配符合Selector選擇器，而且必須是其父元素的第n個子節點的元素
Selector:nth-last-child(n):匹配符合Selector選擇器，而且必須是其父元素的倒數第n個子節點的元素
Selector:only-child:匹配符合Selector選擇器，而且必須是其父元素的唯一子節點的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ch</title>
<style type="text/css">
li:first-child{
border:1px solid black;
}
li:last-child{
background-color:blue;
}
li:nth-child(odd){
color:red;
}
li:nth-last-child(2){
font-weight:bold;
}
span:only-child{
font-size:40pt;
font-family:"隸書"
}
</style>
</head>
<body>
<div>
<ol>
<li>zxcvb</li>
<li>zxcvb</li>
<li>zxcvb</li>
<li>zxcvb</li>
<li>zxcvb</li>
</ol>
<ul>
<li id="java">zxcvb</li>
<li id="javaee">zxcvb</li>
<li id="ajax">zxcvb</li>
<li id="xml">zxcvb</li>
<li id="ejb">zxcvb</li>
<li><span>zxcvb</span></li>
</ul>
<span>zxcvb</span>
</div>
</body>
</html>
UI元素狀態偽類選擇器
Selector:link：匹配Selector選擇器且未被訪問前的元素（通常只能是超鏈接）
Selector:visited:匹配Selector選擇器且已被訪問過的元素（通常只能是超鏈接）
Selector:active:匹配Selector選擇器且處于被用戶激活（在鼠標點擊與釋放之間的事件）狀態的元素
Selector:hover:匹配Selector選擇器且處于鼠標懸停狀態的元素
Selector:focus:匹配Selector選擇器且已經得到焦點的元素
Selector:enabled:匹配Selector選擇器且當前處于可用狀態的元素
Selector:disabled:匹配Selector選擇器且當前處于不可用狀態的元素
Selector:checked:匹配Selector選擇器且當前處于選中狀態的元素
在腳本中修改顯示樣式
如果需要在腳本中動態控制頁面的顯示效果，使用腳本動態設置 CSS 樣式也非常簡單。按如下步驟就可動態修改目標元素的 CSS 樣式
獲取到需要設置 CSS 樣式的目標元素，例如可以使用 getElementById()方法。
修改目標元素的 CSS 樣式 。常用的方式有兩種。
修改行內 CSS 屬性值:使用如 “obj.style 屬性名=屬性值”的 JavaScript 代碼即可。
修改 HTML 元素的 class 屬性值：使用如 “obj.className=class 選擇器”的 javaScript腳本即可
<script type ="text/javascript ">
function changeBg ()
//將背景色的值定義成空字符串
var bgColor= " ";
//循環6次生成一個隨機的6位數
for (var i = 0 ; i < 6 ;i++）
bgColor += "" + Math.round(Math.random () * 9) ;
//將隨機生成背景顏色值賦給頁面的背景色
document.body.style.backgroundColor= + bgColor;
//為頁面的單擊事件綁定事件處理函數
document.onclick = changeBg ;
</script>
本站文章版權歸原作者及原出處所有 。內容為作者個人觀點， 并不代表本站贊同其觀點和對其真實性負責，本站只提供參考并不構成任何投資及應用建議。本站是一個個人學習交流的平臺，網站上部分文章為轉載，并不用于任何商業目的，我們已經盡可能的對作者和來源進行了通告，但是能力有限或疏忽，造成漏登，請及時聯系我們，我們將根據著作權人的要求，立即更正或者刪除有關內容。本站擁有對此聲明的最終解釋權。
