CSS 高級

塊元素

塊元素指的是佔據全部可用寬度的元素，並且在其前後都會換行

---

水平對齊

1. 使用 margin 屬性

把左和右外邊距設置爲 auto,效果就是居中的元素

如果寬度是 100%，則對齊沒有效果

2. 使用 position 屬性
3. 使用 float 屬性

---

CSS 分類屬性

1. clear屬性
2. cursor屬性
3. display屬性
4. float屬性
5. position屬性
6. visibility屬性

---

CSS 導航條

導航欄先要把列表標誌樣式去掉(設爲none)，再設置內外邊距爲0以去除瀏覽器的默認設定

ul
{
	list-style-type:none;
	margin:0;
	padding:0;
}

垂直和水平導航欄都需要把鏈接顯示爲塊元素，這樣可使整個鏈接區域可點擊（不僅僅是文本），同時也允許我們規定寬度，也需要設置使更美觀

1. 垂直導航欄示例
2. 水平導航欄示例
   水平導航欄需要額外設置浮動消除間距 float:left 把塊元素滑向彼此

---

CSS 圖片

圖片庫

w3school示例

CSS 圖像透明度

img
{
	opacity:0.6;
	filter:alpha(opacity=60); <!-- 針對 IE8 以及更早的版本 -->
}

圖片背景透明框中的文本

w3school示例

Hover 效果

可設置當鼠標移到圖片位置，圖片變清晰

img
{
	opacity:0.6;
	filter:alpha(opacity=60); 
}
img:hover
{
	opacity:1.0;
	filter:alpha(opacity=100); 
}

---

@media規則

規定不同媒介運用不同字體

@media screen,print
{
	p.test {
		font-family: ;
		font-size:16px;
		font-weight:bold;
	}
}