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

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