1. 程式人生 > >CSS設計指南(1)

CSS設計指南(1)

1.為文件新增樣式的三種方法

(1)嵌入樣式<style>p{color:red;}</style>

(2)行內樣式<p style="color:blue">this is a <em>emphasis</em></p>

(3)連線樣式:寫在單獨的CSS樣式表中

截圖:

2.上下文選擇符:

格式:標籤1 標籤2{宣告},嚴格說上下文選擇符叫後代組合式選擇符,只有標籤1後代的標籤2元素才後應用後面的樣式

<style>
 section p{color:red;font-weight:bold;}
 em{color:green;}
</style>

3.ID和類選擇符

(1)類選擇符:.類名

<h1 class="headtext">html標記</h1>

新增css樣式.headtext {font-style:italic;}

標籤帶類選擇符:標籤名.類名

<p class="headtext">this is a <em>emphasis</em></p>

新增css樣式:p.headtext {font-style:italic;}

多類選擇符:.類1.類2

(2)ID屬性

一個段落設定了這樣的ID屬性:<p id="textid">this is a ID test</p>

ID選擇符:#textid {color:red;}

和類選擇符幾乎一樣

區別:

ID在網頁中唯一標示一個元素,具有唯一性;類標示一組具有相同特徵的元素

4.屬性名選擇符:標籤名[屬性名]

一個img設定了這樣的屬性:<img src="images/cisco.jpg" title="dog" alt="dog"/>

新增css樣式:img[title]{border:2px solid blue;}