《css層疊樣式表》ppt課件

《《css層疊樣式表》ppt課件》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、第一講CSS層疊樣式表1.1CSS概述1.2定義CSS樣式表1.3CSS常用屬性1.4CSS關(guān)聯(lián)HTML文檔的方式1.5在HTML文檔中應(yīng)用CSS1.6CSS的沖突學(xué)習(xí)目標(biāo)熟練掌握CSS樣式表的定義掌握樣式表嵌入HTML文檔的方式掌握在HTML文檔中應(yīng)用CSS樣式的方式1.1CSS概述CSS（CascadingStyleSheet，層疊樣式表）是一種格式化網(wǎng)頁的標(biāo)準(zhǔn)方式，它擴(kuò)展了HTML的功能，使網(wǎng)頁設(shè)計者能夠以更有效的方式設(shè)置網(wǎng)頁格式。特點(diǎn)將格式和結(jié)構(gòu)分離以前所末有的能力控制頁面布局制作體積更小、下載更快的網(wǎng)頁可以實(shí)現(xiàn)許多網(wǎng)頁同時更新應(yīng)用CSS的步驟定義樣式表把樣

2、式表關(guān)聯(lián)到HTML文檔在HTML文檔中應(yīng)用樣式表1.2定義CSS樣式基本語法:選擇符{屬性名1:屬性值1;屬性名2:屬性值2;……}常用選擇符類型:HTML標(biāo)記符自定義的類自定義的ID偽類1.HTML標(biāo)記符HTML標(biāo)記符重新定義了HTML標(biāo)記符的顯示效果，定義示例代碼如下：h1{text-align:center;font-size:30pt;color:blue}HTML選擇符示例2.自定義的類與ID使用自定義類或ID，可以定義一個通用的樣式，以便應(yīng)用到任何需要的地方。它們的應(yīng)用需要分別使用到class和id屬性，定義示例代碼如下：.classname{prope

3、rty:value…}#idname{property:value…}用戶定義的類與ID示例3.偽類選擇符偽類是一種特殊的類選擇符，它最大的用處是可以對鏈接在不同狀態(tài)下定義不同的樣式效果，寫書形式如下：a:link設(shè)置未訪問過的超鏈接格式a:visited設(shè)置已訪問過的超鏈接格式a:active設(shè)置活動超鏈接格式a:hover設(shè)置懸停狀態(tài)的超鏈接格式偽類選擇符示例代碼如下：a:link{color:green;text-decoration:none}a:active{color:blue;text-decoration:none}a:visited{color:r

4、ed;text-decoration:underline}a:hover{color:pink;font-style:italic}偽類選擇符示例1.3CSS常用屬性1.字體屬性及其屬性值字體屬性示例2.文本屬性及其屬性值文本屬性示例3.列表屬性及其屬性值列表屬性示例4.顏色和背景屬性及其屬性值顏色和背景屬性示例5.CSS區(qū)塊屬性區(qū)塊邊框區(qū)塊邊距區(qū)塊定位1)區(qū)塊邊框?qū)傩约捌鋵傩灾祵傩詫傩灾得枋鯾orderColor_value、width_value、style設(shè)置邊框的顏色、寬度和樣式Border-topColor_value、width_value、style設(shè)置邊框的顏色、寬度和樣式Border-leftColor_value、width_value、style設(shè)置邊

6、框的顏色、寬度和樣式Border-rightColor_value、width_value、style設(shè)置邊框的顏色、寬度和樣式Border-bottomColor_value、width_value、style設(shè)置邊框的顏色、寬度和樣式屬性值描述none設(shè)置無邊框Dotted設(shè)置邊框由點(diǎn)組成Dash設(shè)置邊框由短線組成Solid設(shè)置邊框為實(shí)線Double設(shè)置邊框是雙實(shí)線Groove設(shè)置邊框帶有立體感的溝槽Ridge設(shè)置邊框成脊形Inset設(shè)置邊框內(nèi)嵌一個立體邊框outset設(shè)置邊框外嵌一個立體邊框邊框style屬性值邊框?qū)傩允纠粋€屬性可以設(shè)置多個屬性值，不同的屬性

7、值之間使用空格間隔2)區(qū)塊邊距屬性及其屬性值邊距屬性示例3-1)區(qū)塊定位之位置與大小屬性CSS區(qū)塊定位直接決定了網(wǎng)頁中各個元素的位置、大小與是否浮動等可視屬性。CSS區(qū)塊定位有兩種方法：相對定位和絕對定位區(qū)塊定位之位置與大小屬性示例3-2)區(qū)塊定位之浮動與清除屬性float屬性將所屬標(biāo)記的顯示空間指定為一個浮動元素，并使其周圍對象按一定的方式環(huán)繞它排列。float屬性的作用就象圖像和表格的align屬性一