CSS入門ppt課件

1、CSS 入門一課程回顧課程回顧ltable表格的常用屬性有哪些lhtml的代碼書寫及嵌套規(guī)范有哪些l塊、行標簽分別有哪些及特征內(nèi)容概要內(nèi)容概要l什么是 CSSlCSS 的特點lCSS 的引入方式及各自的優(yōu)缺點lCSS 常用選擇器外部引入 頭部引入 標簽內(nèi)引入lCSS 選擇器的優(yōu)先級ID選擇器 、類選擇器 、標簽選擇器、群組選擇器、后代選擇器WEB WEB 標準構(gòu)成標準構(gòu)成WEB 標準構(gòu)成結(jié)構(gòu)行為樣式HTMLCSSJavaScriptCSS CSS 定義定義l什么是 CSSCSS（cascading Style Sheet 的縮寫），可譯為層疊樣式表或級聯(lián)樣式表，是一組格式設置規(guī)則，用于控制 w

2、eb 頁面的外觀。CSS CSS 特點特點lCSS 特點1、頁面內(nèi)容與表現(xiàn)形式分離頁面內(nèi)容表現(xiàn)形式也可將CSS單獨存放在另一個CSS文件中CSS CSS 特點特點2、可很好的控制頁面的布局3、提高網(wǎng)頁加載速度4、降低服務器的成本5、呈現(xiàn)一致的效果CSSCSS引入方式引入方式在標簽內(nèi)引入直接在標簽里面加 style 樣式lCSS 的引入方式CSSCSS引入方式引入方式lCSS 的引入方式外部引入在head部分加入link標簽，引入外部css文件。head 頭部引入在head部分加入標簽。llink和import的區(qū)別CSSCSS引入方式引入方式 import url(CSS文件);一般使用lin

3、k較多，推薦使用link兩者都是外部引用CSS的方式，但是存在一定的區(qū)別：區(qū)別1：link是XHTML標簽，除了加載CSS外，還可以定義RSS等其他事務；import屬于CSS范疇，只能加載CSS。區(qū)別2：link引用CSS時，在頁面載入時同時加載；import需要頁面完全載入以后加載。區(qū)別3：link是XHTML標簽，無兼容問題；import是在CSS2.1提出的，低版本的瀏覽器不支持。區(qū)別4：link支持使用Javascript控制DOM去改變樣式；而import不支持。l標簽內(nèi)引入優(yōu)先級最高冗余代碼多，代碼量大不利于維護個別特殊效果的使用CSSCSS引入方式特點引入方式特點lhead 頭

4、部引入特點速度快，沒有服務器請求壓力相對于外部引入單頁代碼量少不易改版與維護代碼較亂不易前后臺溝通常見于大型互聯(lián)網(wǎng)首頁 如：百度、網(wǎng)易等CSSCSS引入方式特點引入方式特點CSSCSS引入方式特點引入方式特點l外部引入特點一個CSS文件可控制多個頁面易改版、便于維護減少代碼量、代碼簡潔規(guī)范易于分工協(xié)作有效利用緩存機制相對于單頁有垃圾代碼外部引入中的href屬性會給服務器造成請求的壓力常應用于訪問量巨大的網(wǎng)頁 如：淘寶、hao123等CSSCSS基礎語法基礎語法lCSS 基礎語法選擇器屬性：值；屬性：值；選擇器通常是您需要改變樣式的 HTML 元素。每條聲明由一個屬性和一個值組成，每個屬性有一個

5、值。 屬性和值用冒號分開，分號結(jié)束CSSCSS選擇器的分類選擇器的分類lCSS 常用選擇器分類ID選擇器類選擇器標簽名選擇器群組選擇器后代選擇器IDID選擇器選擇器lID 選擇器語法ID 選擇器的優(yōu)先級最高，頁面中不能有同名的 IDX# 后跟 ID 名類選擇器類選擇器l類選擇器語法優(yōu)先級僅次于ID選擇器，可以有相同的類名. 后跟類名標簽名選擇器標簽名選擇器l標簽名選擇器優(yōu)先級與ID選擇器與class選擇器相比最低后代選擇器后代選擇器l后代選擇器語法使用多個選擇器的組合來找到具體要控制的標簽。為ID為warp后的P標簽設置樣式，中間以空格分隔群組選擇器群組選擇器l群組擇器語法把幾個 ID、cla

6、ss 或者標簽名中具有相同的CSS取出，來減少代碼的冗余。樣式名之間以，(逗號)分隔l使用 CSS 選擇器的優(yōu)點代碼簡化，爭取最少的代碼量準確的控制內(nèi)容的樣式代碼美觀，易讀CSSCSS選擇器特點選擇器特點利用樣式優(yōu)先級的區(qū)別實現(xiàn)樣式的覆蓋標簽內(nèi)引入的樣式高于一切選擇器 1000各類選擇器優(yōu)先級快速運算ID選擇器權(quán)重值 100類選擇器權(quán)重值 10標簽選擇器權(quán)重值 1權(quán)值 1權(quán)值 2如權(quán)重相同后面的樣式覆蓋前面的樣式選擇器優(yōu)先級選擇器優(yōu)先級l各選擇器優(yōu)先級運算a , b , c , dCSS樣式選擇器分為4個等級，以這4種等級為依據(jù)確定CSS選擇器的優(yōu)先級選擇器優(yōu)先級選擇器優(yōu)先級標簽內(nèi)樣式ID選擇器總數(shù)class選擇器總數(shù)類型選擇器總數(shù)選擇器優(yōu)先級選擇器優(yōu)先級l CSS 有幾種引入方式各自的特點是什么課程總結(jié)課程總結(jié)l CSS 常用選擇器有哪些，如何書寫l CSS 選擇器的優(yōu)先級的權(quán)重如何計算A、div .a .b B、div#q C、#one .div D、.a .b .c .d .e .f .g .h