資源描述：
《網(wǎng)頁設(shè)計(jì)：CSS樣式表格應(yīng)用.ppt》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在應(yīng)用文檔-天天文庫。
1、第四章CSS樣式表應(yīng)用主講：鐘杰卓0本章內(nèi)容概述CSS簡(jiǎn)介1CSS語法基礎(chǔ)2CSS布局基礎(chǔ)3CSS布局實(shí)例4CSS濾鏡應(yīng)用514.1CSS簡(jiǎn)介CSS的全稱是CascadingStyleSheet，通常稱為“層疊樣式表”。是網(wǎng)頁設(shè)計(jì)不可缺少的工具之一。CSS是一組樣式，樣式的屬性在HTML元素中一次出現(xiàn)，并顯示在瀏覽器中。樣式可以定義在HTML文檔的標(biāo)記里，也可以放在外部附加文檔中，一個(gè)樣式表文檔可以用于多個(gè)頁面，甚至是整個(gè)站點(diǎn)，因此具有更好的易用性和擴(kuò)展性。CSS可以減少開發(fā)和維護(hù)HTML文檔所
2、用的時(shí)間。增加了Web站點(diǎn)中文檔間的靈活性。24.2CSS語法基礎(chǔ)完成了網(wǎng)頁框架的構(gòu)建，下一步就應(yīng)該使用CSS來布局和修飾了。使用CSS的方法可以簡(jiǎn)單概括為：選擇符：表示要定義樣式的對(duì)象，可以是元素本身，也可以是一類元素或指定名稱的元素。選擇屬性：制定選擇符所具有的屬性，它是CSS的核心。CSS2一共定義了150多個(gè)屬性，其中大部分屬性是用于任何選擇符。定義屬性值：數(shù)值表示（25px）、百分比表式（20%）、范圍表示（top、right）Selector{property:value;prope
3、rty:value;}body{color:#333;background-color:#eee;}34.2CSS語法基礎(chǔ)CSS選擇符類型選擇器：類型選擇符就是網(wǎng)頁元素本身，定義時(shí)直接使用元素名稱，如定義段落樣式，可以選擇p元素，即把p作為選擇符。在HTML和XHTML中，所有的元素都可以作為類型選擇符來進(jìn)行定義：定義了類型選擇符，所定義的屬性會(huì)影響引用這個(gè)樣式的所有該元素的顯示效果。使用恰當(dāng)會(huì)非常省力，但如果考慮不周，貿(mào)然定義會(huì)給網(wǎng)頁設(shè)計(jì)增加無窮煩惱。html{/*<定義網(wǎng)頁結(jié)構(gòu)總體樣式>*/
4、color:#f60;font-size:14px;}Body{/*<定義頁面屬性>*/Margin-left:0px;Margin-top:0px;}Td{/*<定義表元屬性>*/Font-family:”宋體”,”黑體”;}44.2CSS語法基礎(chǔ)id選擇符：CSS中的id是作為網(wǎng)頁中元素的“身份證”來使用的。因此它是唯一的，不同元素的id值不能重復(fù)。使用id選擇器能夠擴(kuò)展HTML和XHTML元素的顯示效果。為每個(gè)元素的具體對(duì)象定義不同的樣式，方便了用戶更加精細(xì)地控制頁面。當(dāng)使用id選擇符時(shí)，
5、應(yīng)先為元素定義一個(gè)id屬性：在樣式表中，需要使用#號(hào)進(jìn)行標(biāo)識(shí)：#lefttable{color:#f60;font-size:14px;border:1pt#999solid;}……54.2CSS語法基礎(chǔ)class選擇符：class是一個(gè)集合名次，意味著在一個(gè)文檔中可以為不同類型的元素定義相同的類名。是先把具有相同樣式的元素統(tǒng)一為一類。使用class選擇符可以實(shí)現(xiàn)代碼簡(jiǎn)化的目的，節(jié)約了了CSS代碼的編寫，增強(qiáng)了代碼的可讀性。當(dāng)使用clas
6、s選擇符時(shí)，首先應(yīng)為每個(gè)元素定義class屬性：在樣式表中，需要使用.號(hào)進(jìn)行標(biāo)識(shí)：.red{color:#ff0000;}64.2CSS語法基礎(chǔ)群選擇符：群選擇符不是一種選擇符的類型，而是一種選擇符的使用方法。當(dāng)多個(gè)對(duì)象定義了相同的樣式時(shí)，可以把它們分成一組，以便簡(jiǎn)化代碼讀寫，選擇符分組，可以用逗號(hào)把同組內(nèi)不同對(duì)象分割：派生選擇符：可以使用派生選擇器給一個(gè)元素里的子元素定義樣式，例如，給li下面的子元素a定
7、義文字大小和顏色的樣式：.dh1a{font-size:12px;color:#333333;}p,td,li{font-size:12px;}74.2CSS語法基礎(chǔ)偽類：CSS中用四個(gè)偽類來定義鏈接的樣式，分別是：a:link、a:visited、a:hover和a:activea:link{/*定義超級(jí)鏈接的默認(rèn)樣式*/font-size:12px;color:#c00;text-decoration:none;}a:visited{/*定義訪問過的鏈接樣式*/font-size:12px;
8、color:#c00;text-decoration:none;}a:hover{/*定義鼠標(biāo)經(jīng)過的鏈接樣式*/font-size:12px;color:#f30;text-decoration:underline;}a:active{/*定義鼠標(biāo)按下的鏈接樣式*/font-size:12px;color:#c00;text-decoration:none;}84.2CSS語法基礎(chǔ)在網(wǎng)頁中添加CSS的方法CSS樣式可以以多種方式靈活地應(yīng)用到設(shè)計(jì)的頁面中，選擇方法根據(jù)設(shè)計(jì)的不同要求來指定。行內(nèi)樣式
