CSS

• 層疊樣式表
• css可以用來為網頁建立樣式表，通過樣式表可以對網頁進行裝飾
• 所謂層疊，可以將整個網頁相象成是一層一層的結構，層次高的將會覆蓋層次低的
• 而css就可以分別為網頁的各個層次設定樣式

基本語法

• CSS的樣式表由一個一個的樣式構成，一個樣式又由選擇器和宣告塊構成
• 語法：
  • 選擇器{樣式名：樣式值；樣式名：樣式值}
  • P{color:red;font-size:12px;}

行內樣式

• 可以直接將樣式寫道標籤內部的style屬性中，這樣樣式不用填寫選擇器，直接編寫宣告即可

<p style="color:red;font-size:30px"></p>

• 這種方式編寫簡單，定位準確。但是由於直接將CSS程式碼寫道了html標籤的內容，導致結構與表現耦合，同時導致樣式不能夠複用，所以這種方式我們不使用

內部樣式表

• 可以直接將樣式寫到< style >標籤中

<style>
	p{
		color:red;font-size:30px;
	}
</style>

• 這樣使CSS獨立於html程式碼，而且可以同時為多個元素設定樣式，這是我們使用的比較多的一種方式
• 但是這種方式，樣式只能在一個頁面中使用，不能在多個頁面中重複使用

外部樣式表

• 可以將所有的樣式儲存到一個外部的CSS檔案中，然後通過< link >標籤將樣式表引入到檔案中

<link rel="stylesheet" type="text/css" href="style.css">

• 這種方式將樣式表放入到了頁面的外部，可以在多個頁面中引入，同時瀏覽器載入檔案時可以使用快取，這是我們開發中使用的最多的方式

選擇器

• 元素選擇器
  • 元素選擇器（標籤選擇器），可以根據標籤的名字來從頁面中選取指定的元素
  • 語法：標籤名{ }
  • 比如p則會選中頁面中的所有p標籤，h1會選中頁面中的所有h1標籤
• 類選擇器
  • 類選擇器，可以根據元素的class屬性值選取元素
  • 語法：.className{ }
  • 比如.hello會選中頁面所有class屬性為hello的元素
• ID選擇器
  • ID選擇器，可以根據元素的id屬性值選取元素
  • 語法：#id{ }
  • 比如#box會選中頁面中id屬性值為box的元素，和class屬性不同，id屬性使不能重複的
• 複合選擇器（交集選擇器）
  • 符合選擇器，可以同時使用多個選擇器，這樣可以選擇同時滿足多個選擇器的元素
  • 語法：選擇器1選擇器2{ }
  • 例如div.box1會選中頁面中具有box1這個class的div元素
• 群組選擇器（並集選擇器）
  • 群組選擇器，可以同時使用多個選擇器，多個選擇器將被同時應用指定的樣式
  • 語法：選擇器1，選擇器2，選擇器3{ }
  • 比如p,hello,#box會同時選中頁面中p元素，class為hello的元素，id為box的元素
• 通用選擇器
  • 通用選擇器，可以同時選中頁面中的所有元素
  • 語法： *{ }
• HTML族譜
  

標籤之間的關係

• 祖先元素
  • 直接或間接包含後代元素的元素
• 後代元素
  • 直接或間接被祖先元素包含的元素
• 父元素
  • 直接包含子元素的元素
• 子元素
  • 直接被父元素包含的元素
• 兄弟元素
  • 擁有相同父元素的元素

後代選擇器

• 後代選擇器可以根據標籤的關係，為處在元素內部的代元素設定樣式
• 語法：祖先元素 後代元素 後代元素{ }
• 比如p strong會選中頁面中所有的p元素內的strong元素

課後擴充套件

• 內聯框架

<iframe src=""  name=""></iframe>

   其中src使用的是相對路徑

• 居中標籤< center >< /center>
• 錨鏈接（具體操作可以根據下一章內容檢視）