1.css概要
css：級聯樣式表（Cascading Style Sheet）簡稱“CSS”，通常又稱爲“風格樣式表（Style Sheet）”，它是用來進行網頁風格設計的，展示web表現。
web2.0發展如下：
html->css1.0->xml(節點查找)->xhtml->css2.0
css基本語法：
選擇器{ 屬性值1：值1；屬性值2：值2}
注：css主要是由選擇器和屬性組成。
2.css選擇器
css選擇器是一種將css效果應用到某一個或者多個xhtml標記上的一種選擇機制。
css主要選擇器如下：
①類選擇器
名稱以點開始，字母或數字結尾。
如.ulstyle{ }
可以重複使用，對多個標籤應用。
html標籤，需要使用class屬性來引用該樣式
如：<ul class=”.ulstyle”>…</ul>
②ID選擇器
以#開始，數字或字母結尾。
#top{ }
不能重複使用
html標記需要引用id屬性
如：<p id=”top”>...</p>
③標籤選擇器
名稱均爲html標籤
如：p{ }
使用到該名稱標籤
css效果作用到改標籤
④派生選擇器（後代選擇器）
主要由前幾種選擇器變化而來，主要是根據前幾種選擇器來控制內部子元素的表現效果。
如：#top ul{ }
控制#top選擇器中的ul元素
#top .ulstyle li{ }
控制#top選擇器中.ulstyle中的li元素
⑤羣組選擇器
控制多個並列元素的效果
如：ul,ol,li{ }
對三個元素同時起作用
⑥通配選擇器
*號爲名稱，對所有元素起作用
⑦僞類選擇器
特定的選擇器之後加：後跟狀態屬性，主要爲控制元素的狀態效果
a:hover{ }
控制超鏈接
常見有超鏈接標記的四種狀態
效果控制是超鏈接四種狀態的效果
link：默認狀態
hover：鼠標經過狀態
visited：已訪問的效果
active：按下狀態的效果
選擇器案例
效果展示：
代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
body{ background:#6F0;}
.ulstyle{ background:#0C9;color:#F60;}
#top{ background:#FF0;color:#00F;}
ul li em{ background:#000;color:#CCC;}
ul,li{ background:#F00;color:#FF0;}
*{ font-size:24px;}
a:link{ text-decoration:none;}
a:visited{ color:#00F;}
a:hover{ font-size:80px; color:#FFF;}
a:active{ color:#FF0;}
</style>
</head>
<body>
<ul>
<li class="ulstyle">世界你好</li>
<li id="top">世界你好</li>
<li><em>中國人民</em>政府</li>
<li>中國人民銀行</li>
<li>陝西省人民政府</li>
<li>百度中國互聯網巨頭</li>
<a href="#">hssdfhsfhjsjshfkkk
</ul>
</body>
</html>
簡單css案例展示
代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
body{ font-size:12px; font-family:"微軟雅黑",“幼圓”,"黑體",“宋體”;}
ul,li,ol{ list-style:none;}
ul{ ; height:25px; border:1px solid #CCC; margin:100px auto;}
li{ float:left; ; text-align:center; background:#999; height:25px; line-height:25px; cursor:pointer;}
ul li ul{ border:none; ; display:none; margin:0px;}
li:hover{ background:#F90; color:#FFF;}
li:hover ul{ display:block}
</style>
</head>
<body>
<ul>
<li>首頁</li>
<li>關於我們</li>
<li>產品中心
<ul>
<li>手機產品</li>
<li>電腦產品</li>
<li>電腦周邊</li>
<li>迷你係列</li>
</ul>
</li>
<li>聯繫我們</li>
</ul>
</body>
</html>