1_CSS基礎(chǔ)知識(shí).ppt

CSS基礎(chǔ)知識(shí) CSS DIV布局系列課程 課程安排 第一天第1節(jié)課CSS基礎(chǔ)知識(shí)包括CSS基本規(guī)則 選擇符的類型等介紹第2節(jié)課CSS樣式屬性 一 文本屬性第3節(jié)課實(shí)戰(zhàn)練習(xí)輔導(dǎo) 2 課程安排 第二天第1節(jié)課CSS樣式屬性 二 列表屬性第2節(jié)課CSS樣式屬性 三 背景屬性第3節(jié)課實(shí)戰(zhàn)練習(xí)輔導(dǎo)第4節(jié)課實(shí)戰(zhàn)練習(xí)輔導(dǎo)第5節(jié)課CSS DIV布局簡(jiǎn)單介紹第6節(jié)課實(shí)例講解 一 有關(guān)菜單制作 3 課程安排 第三天第1節(jié)課實(shí)例講解 二 有關(guān)網(wǎng)頁(yè)布局第2節(jié)課實(shí)例講解 三 綜合示例講解第3節(jié)課實(shí)例講解 四 綜合示例講解第4節(jié)課完成綜合練習(xí)輔導(dǎo)第5節(jié)課完成綜合練習(xí)輔導(dǎo)第6節(jié)課完成綜合練習(xí)輔導(dǎo) 4 本章內(nèi)容 CSS簡(jiǎn)介CSS基本規(guī)則CSS選擇符的類型在網(wǎng)頁(yè)中運(yùn)用CSS的方法 5 CSS簡(jiǎn)介 CSS CascadingStyleSheets 譯為層疊樣式表 是對(duì)HTML的補(bǔ)充 在當(dāng)今的網(wǎng)頁(yè)制作中 幾乎所有漂亮的網(wǎng)頁(yè)都用了CSS 有了CSS的控制 網(wǎng)頁(yè)變得更加賞心悅目 生動(dòng)活潑 打個(gè)比方 CSS好比網(wǎng)頁(yè)的美容師 用CSS畫的機(jī)器貓 6 CSS基本規(guī)則 CSS的基本規(guī)則由選擇符 selector 和聲明組成 而聲明又由屬性 property 和值 value 組成 selector property value 參數(shù)說(shuō)明 selector 選擇符property value 樣式表定義 屬性和屬性值之間用冒號(hào) 隔開 多個(gè)定義之間用分號(hào) 隔開 最后一條聲明可以沒有分號(hào) 但為了以后修改方便 一般也加上分號(hào) 7 選擇符的類型 HTML選擇符 p color blue 類選擇符 blue color blue id選擇符 blue color blue 包含選擇符 相關(guān)網(wǎng)絡(luò)資料 menub color blue demo1 1群組選擇符 h4 p span color blue 8 選擇符的類型 偽類選擇符 demo1 2a link color green a hover color yellow a active color red a visited color gray 通配選擇符 color blue 9 a link color FF0000 unvisitedlink a visited color 00FF00 visitedlink a focus color FFFFFF focusedlink a hover color FF00FF mouseoverlink a active color 0000FF selectedlink 提示 按照次序定義規(guī)則很重要的 未點(diǎn)擊 link 已訪問(wèn) visited 焦點(diǎn) focus 鼠標(biāo)停留 hover 激活 active 縮寫為L(zhǎng)VFHA 網(wǎng)頁(yè)中運(yùn)用CSS的方法 內(nèi)聯(lián)樣式在HTML元素內(nèi)部嵌入式樣式表 內(nèi)部樣式表 位于標(biāo)簽內(nèi)部外部樣式表 10 網(wǎng)頁(yè)中運(yùn)用CSS的方法 內(nèi)聯(lián)樣式內(nèi)聯(lián)樣式 11 網(wǎng)頁(yè)中運(yùn)用CSS的方法 嵌入式樣式表h1 color green font family 隸書 12 網(wǎng)頁(yè)中運(yùn)用CSS的方法 外部樣式表 有關(guān) 13 網(wǎng)頁(yè)中運(yùn)用CSS的方法 link與 import的區(qū)別link屬于HTML標(biāo)簽 而 import完全是CSS提供的一種方式 link標(biāo)簽還可以做很多其它的事情 import就只能加載CSS了 當(dāng)一個(gè)頁(yè)面被加載的時(shí)候 就是被瀏覽者瀏覽的時(shí)候 link引用的CSS會(huì)同時(shí)被加載 而 import引用的CSS會(huì)等到頁(yè)面全部被下載完再被加載 由于 import是CSS2 1提出的所以老的瀏覽器不支持 import只有在IE5以上的才能識(shí)別 而link標(biāo)簽無(wú)此問(wèn)題 14 網(wǎng)頁(yè)中運(yùn)用CSS的方法 link與 import的區(qū)別當(dāng)使用javascript控制DOM去改變樣式的時(shí)候 只能使用link標(biāo)簽 因?yàn)?import不是DOM可以控制的 import可以在css中再次引入其他樣式表 比如可以創(chuàng)建一個(gè)主樣式表 在主樣式表中再引入其他的樣式表 如 15 main css import sub1 css import sub2 css sub1 csssub2 cssp color red myclass color blu