第一節 DIV+CSS的好處
縮減代碼，提高頁面瀏覽速度
頁面體積變小，瀏覽速度變快
強大的字體控制和排版能力
更靈活控制頁面佈局
表現和內容相分離，乾淨利落
在修改頁面的時候更加容易省時
保持視覺的一致性
更好地被搜索引擎收錄
由於CSS富含豐富的樣式，使頁面更加靈活性，它可以根據不同的瀏覽器，而達到顯示效果的統一和不變形。
第二節 web標準
1.web標準
web標準不是某一個標準，而是一系列標準的集合。網頁主要由三部分組成：結構（Structure）、表現（Presentation）和行爲（Behavior）。對應的標準也分三方面：結構化標準語言主要包括XHTML和XML，表現標準語言主要包括CSS，行爲標準主要包括對象模型（如W3C DOM）、ECMAScript等。這些標準大部分由W3C起草和發佈，也有一些是其他標準組織制訂的標準，比如ECMA（European Computer Manufacturers Association）的ECMAScript標準。
web標準的目的
在創建一個統一的用於WEB表現層的技術標準。以便於通過不同的瀏覽器或設備向用戶展示信息內容。
2.Web標準——結構標準
XHTML是可擴展超文本標識語言的縮寫。目前推薦遵循的是W3C於2000年1月26日推薦XML1.0。XML雖然數據轉換能力強大，完全可以替代HTML，但面對成千上萬已有的站點，直接採用XML還爲時過早。因此，我們在HTML4.0的基礎上，用XML的規則對其進行擴展，得到了XHTML。簡單的說，建立XHTML的目的就是實現HTML向XML的過渡。
XML是可擴展標識語言的簡寫。和HTML一樣，XML同樣來源於SGML，但XML是一種能定義其他語言的語言。XML最初設計的目的是彌補HTML的不足，以強大的擴展性滿足網絡信息發佈的需要，後來逐漸用於網絡數據的轉換和描述。
3.Web標準——表現標準
CSS是(Cascading Style Sheets)層疊樣式表的縮寫。目前推薦遵循的是W3C於1998年5月12日推薦CSS2。W3C創建CSS標準的目的是以CSS取代HTML表格式佈局、幀和其他表現的語言。純CSS佈局與結構式XHTML相結合能幫助設計師分離外觀與結構，使站點的訪問及維護更加容易。
4.Web標準——行爲標準
DOM是Document Object Model文檔對象模型的縮寫。根據W3C DOM規範，DOM是一種與瀏覽器，平臺，語言的接口，使得你可以訪問頁面其他的標準組件。簡單理解，DOM解決了Netscaped的Javascript和Microsoft的Jscript之間的衝突，給予web設計師和開發者一個標準的方法，讓他們來訪問他們站點中的數據、腳本和表現層對像。
ECMAScript是ECMA(EuropeanComputer Manufacturers Association)制定的標準腳本語言（JAVAScript）。目前推薦遵循的是ECMAScript 262
5.HTML的缺點
1) 維護困難。爲了修改某個標記，需要花費很多時間，尤其對於整個網站而言，維護成本更高。
2) 樣式標記不足。HTML本身的樣式標記很少，大部分標記是爲網頁內容服務的。
3) 網頁過胖。由於沒有統一對各種風格樣式進行控制，HTML頁面體積過大，佔用掉了很寶貴的寬度。
4) 定位困難。過多的<table>標記導致頁面的複雜和後期維護困難。
6.採用標準的好處
1) 提高頁面的瀏覽速度，使用CSS方法，比傳統的web設計方法，可以節省50%以上的文件尺寸（有權威統計）
2) 縮短改版時間，將表現（樣式與內容分離），幾個樣式文件修改，版面將會發生變化。
3) 更容易被搜索引擎搜索到
4) 內容能被更廣泛的設置所訪問，屏幕閱讀，手機，平板等。
5) 實例：內容，結構，表現，行爲
第三節 CSS
1.什麼是CSS
• CSS（Cascading StyleSheets的縮寫），翻譯爲“層疊樣式表”或者“級聯樣式表”，簡稱樣式表。它允許網頁設計者定義網頁元素的樣式，包括字體、顏色及其他的高級樣式。
• 樣式表由一組決定顯示格式的規則組成，這些規則用於定義網頁中任何HTML元素內容的顯示格式。
2.CSS基礎
CSS語法
1) 一個CSS樣式表代碼由一個或多個CSS規則組成；
2) CSS樣式規則由選擇器和格式聲明語句組成；
3) 選擇器通常是您需要改變樣式的 HTML 元素；
4) 格式聲明語句放在{ }內；
5) 每一條格式聲明語句由“屬性名:屬性值”對組成，屬性名和屬性值間以(:)冒號隔開，每條聲明語句以分號“;”結束。
6) CSS選擇器區分大小寫，強烈建議小寫。
屬性
在格式聲明語句中，屬性名稱與屬性值之間以冒號“：”隔開，
當定義多個值時，瀏覽器按照從前向後順序選擇屬性值。如果第1個值有效，則嘗試使用，如果第1個無效，則使用第2個，依次類推。
div.news .title{
font-family:”華文行楷”,”宋體”,”TimesNew Roman”,Arial;
text-align:center;
font-weight:bold;
color:#444444;
background-color:#808080;
}
第三節 CSS選擇器
1.CSS選擇器分類—基本選擇器
2.CSS選擇器—組合選擇器
後代選擇器：瀏覽器CSS匹配不是從左到右進行查找，而是從右到左進行查找。瀏覽器從右到左進行查找的好處是爲了儘早過濾掉一些無關的樣式規則和元素。
3.子元素選擇符
p>span,區別於後代選擇符，pspan,指的是所有p下面的span都設置。而p>span只作用於子元素一層關係
4.CSS屬性—僞類屬性
a:link,a:visited{}
a:hover:active{}
a.footer:link,a.footer:visited{}
a.footer:hover,a.footer:active{}
5.CSS中的註釋
CSS中加入註釋的方式與HTML中加入註釋的方式不同，註釋以“/*”符號開始，以“*/”符號結束。
td{
color:black; /*定義顏色*/
font-size;14px; /*定義大小*/
text-align:center; /*對齊方式*/
}
6.CSS屬性—尺寸屬性
第四節 CSS單位與字體
1. CSS單位
2.CSS屬性-字體屬性
font可以同時設置字符的各種屬性，包括font-style、font-weight、font-size、line-height、font-family。各屬性間用空格隔開。如果同時設置font-size和line-height，這兩屬性值間以“/”隔開。
/*新浪首頁css*/
body{font:12px/20px "SimSun","宋體","ArialNarrow",HELVETICA; }
3.CSS屬性——文本屬性
p{ text-decoration: underline overlineline-through;} //同時設置多線
4.CSS屬性——列表屬性
5.CSS屬性——邊框屬性
邊框線型
none：無 solid(實線) dotted(點狀線) dashed(虛線) double(雙線) groove(3D 凹槽邊框)
border
border-top:width style color /**不分先後/
style:solid實線，dotted點線，dashed,虛線
border-right
border-bottom
border-left
border:1pxsolid red /*同時設置四條邊*/
第五節 CSS組合選擇器
1.標籤和類組合選擇器
如：p.test{color:red}
2.多元素選擇器
多個標籤或選擇器同時聲明
如：h1,h2,ul,li{margin:0;padding:0;}
定義的方法注意思：
選擇器之間用逗號隔開
3.後代選擇器
p空格span{color:red;}
含義：針對p標籤中的span標籤定義樣式。
注意：選擇器之間用空格隔開。
4.子元素選擇器
定義的方法
P>span{CSS規則}
只針會p標籤中的span一級有效。
5.僞類選擇器
鏈接<a href=”#”></a>
a:link鏈接的正常狀態
a:visited鼠標單擊過的鏈接狀態
a:hover鼠標放在鏈接上面的（懸停）狀態
a:active當前正在訪問的鏈接狀態
第五節 CSS尺寸屬性
1.尺寸屬性
px,em,%（相對單位）
font-size:25不加單位的數字毫無意思
px像素，相對單位。和屏幕的分辨率有關。
em：一個字體高（1倍字體高）,2em(當前默認字體的2倍)
%,百分比。相對單位。相對於當前默認值的百分比。
瀏覽器的默認字體大小爲16px.
第六節 新聞模塊案例
<styletype="text/css">
.title,.content{/*多元素組合聲明*/
width:500px;/*設置div的寬度*/
border:1pxsolid green;/*設置div的邊框*/
}
.title{
height:45px;/*設置div的高度*/
line-height:45px;/*設置div的行高*/
background:green; /*設置div的背景色*/
font-size:25px;/*設置字體的大小*/
font-weight:200;/*設置字體的加粗*/
}
.contenta:link,.content a:visited{color:gray; text-decoration:none;}/*同時聲明鏈接默認樣式及鼠標單擊過後的樣式*/
.contenta:hover{color:red; text-decoration:none;}/*設置鼠標放上面的樣式*/
.contentli{
border-bottom:1pxdashed gray; /*設置li的底邊的線的樣式*/
width:450px; height:25px; /*設置li的寬和高*/
line-height:25px;/*設置li行高*/
}
</style>
Body中的內容：
<divclass="title"> 新聞中心</div>
<divclass="content">
<ul>
<li><ahref="#">長春供暖首日遇重度“煙霾“ 市民:以爲誰家着火了</a></li>
<li><ahref="#">廣州去年28部門罰沒8.7億 7億其他收入未說明</a></li>
<li><ahref="#">廣州去年28部門罰沒8.7億 7億其他收入未說明</a></li>
<li><ahref="#">年內5次降息爲買房人減負 百萬房貸可省17萬</a></li>
<li><a href="#">臺灣太平島燈塔完工 可照射越南所佔島礁</a></li>
<li><ahref="#">解放軍允許智能手機進軍營安裝部隊自研軟件</a></li>
<li><ahref="#">廣州去年28部門罰沒8.7億 7億其他收入未說明</a></li>
</ul>
</div>