web(五)CSS引入方式，編寫規範及調試
CSS (Cascading Style Sheets)層疊樣式表 ，是由萬維網聯盟（W3C）制定的標準
CSS的主要作用：
- 美化html元素的外觀，例如設定背景顏色、字體等。
- 對網頁元素進行布局、以及定位。
- 對html元素進行響應式布局。
- 實現動畫效果以及2d、3d轉換。 配合html、js完成網頁特效。
css的版本介紹
css1：發布於 1996年12月17 日,制定了css的基本顯示樣式標準，如選擇器、字體、顏色、背景、布局等。
css2：發布於 1999年1月11日。CSS2添加了對媒介（打印機和聽覺設備）和可下載字體的支持，同時擴展了選擇器的語法以及定位功能。
css3：在css2基礎上增加了更多的屬性，更多單位，擴展了動畫、2d與3d轉換功能。（此版本至今已經很完善，但少量屬性仍在調整中）。
為html標簽引入css樣式有如下幾種方式:
內聯樣式表
也叫內嵌式或行內式，在html代碼中嵌入css樣式，只對當前標簽起作用。
基本語法
1 <div style=“color:yellow；background:red”></div>
缺點分析：無法對對一組標簽進行樣式渲染導致css程序多，html與css耦合，影響開發效率與執行效率。（不推薦使用）
嵌入樣式表
也叫頁內樣式,在網頁上使用style標簽包裹樣式代碼。
基本語法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"><!--使用style標簽包裹--> 7 .container{/*選擇器*/ 8 background: red;/*定義屬性、值*/ 9 }10 </style> 11 </head> 12 <body> 13 <div class="container">這是一個div容器</div> 14 </body> 15 </html>
缺點分析：html文件中包含大量css程序，頁面結構與樣式耦合，不利於維護。（不推薦使用）
外聯樣式表
也叫外部樣式，將樣式文件獨立的編寫在樣式文件中，在html中顯示的聲明引入樣式文件。（建議使用）
引入css文件聲明
1 <head> 2 …… 3 <link href=" href="css/04test.css" rel="stylesheet" type="text/css" /> 4 …… 5 </head> 6 <!-- 7 link元素：連接元素，是head標簽的子標簽。 8 href:設定引入外部文件的路徑url。 9 type：設置或獲取對象的 MIME 類型。 10 -->
導入樣式表
在css編寫容器中使用@import導入外部css文件
1 <style type="text/css"> 2 @import url(“css/04test.css"); 3 </style> 4 <!-- 5 @import：導入樣式的規則關鍵字。 6 url(“css路徑”)：導入外部css文件的路徑。 7 -->
編寫方式的基本原則：
- 借助智能提示編寫。
- 使用外部引入方式，元素與樣式分離。
- 編寫html、css使用小寫字母編寫。
- 良好的縮進格式與註釋習慣。
- 良好的命名規範。
調試方式：
通過開發人員選項進行調試（快捷鍵F12）。如下為兩種最長出現的 錯誤:
1、部分樣式無法渲染
原因分析：在css文件中出現語法錯誤，導致瀏覽器中斷執行。
解決方案：通過半數刪除的方式定位錯誤語法。
2、布局樣式錯亂
原因分析：在css文件某一個子元素尺寸定義錯誤，導致布局錯亂。
解決方案：通過開發人員選項或檢查元素的方式，逐一查看各個元素的大小。
web(五)CSS引入方式，編寫規範及調試