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引入方式,編寫規範及調試