網(wǎng)頁(yè)樣式css總結(jié)

網(wǎng)頁(yè)樣式css總結(jié)

ID:12449221

大?。?9.30 KB

頁(yè)數(shù):18頁(yè)

時(shí)間:2018-07-17

網(wǎng)頁(yè)樣式css總結(jié)_第1頁(yè)
網(wǎng)頁(yè)樣式css總結(jié)_第2頁(yè)
網(wǎng)頁(yè)樣式css總結(jié)_第3頁(yè)
網(wǎng)頁(yè)樣式css總結(jié)_第4頁(yè)
網(wǎng)頁(yè)樣式css總結(jié)_第5頁(yè)
資源描述:

《網(wǎng)頁(yè)樣式css總結(jié)》由會(huì)員上傳分享,免費(fèi)在線閱讀,更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。

1、第二章網(wǎng)頁(yè)樣式CSS總結(jié)一、CSS的概念與作用Css全稱為級(jí)聯(lián)樣式表(CascadingStyleSheet),通常又稱為風(fēng)格樣式表(StyleSheet),是用來(lái)進(jìn)行網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)的。通過設(shè)立樣式表,可以統(tǒng)一控制HTML中各標(biāo)簽的顯示屬性。CSS可以更有效地控制網(wǎng)頁(yè)外觀。使用CSS,可以精確的定位網(wǎng)頁(yè)元素的位置,美化網(wǎng)頁(yè)外觀。一個(gè)合理的CSS,還能有效地節(jié)省網(wǎng)絡(luò)帶寬,提高用戶體驗(yàn)。同時(shí),使用CSS制作網(wǎng)頁(yè),還有以下優(yōu)點(diǎn):1、內(nèi)容與表現(xiàn)分離。有了CSS,網(wǎng)頁(yè)的內(nèi)容(XHTML)與表現(xiàn)就可以分開了。2、表現(xiàn)統(tǒng)一??梢允咕W(wǎng)頁(yè)的表現(xiàn)非常統(tǒng)一,并且容易修改。3、豐富的樣式。使得頁(yè)

2、面布局更加靈活。4、減少網(wǎng)頁(yè)的代碼量,增加網(wǎng)頁(yè)的瀏覽速度,節(jié)省網(wǎng)絡(luò)帶寬。5、運(yùn)用獨(dú)立于頁(yè)面的CSS,還有利于網(wǎng)頁(yè)被搜索引擎收錄。二、

標(biāo)簽
標(biāo)簽可以用于定義HTML文檔中的分區(qū)或節(jié),即可以把HTML文檔分割為獨(dú)立的、不同的部分。
標(biāo)簽就像一個(gè)容器,可以放置其他的HTML標(biāo)簽,如段落,列表,圖片,表單等。CSS的基本語(yǔ)法結(jié)構(gòu):=“text/css”>選擇器{屬性:屬性值;......}選擇器:表示被修飾的對(duì)象,如頁(yè)面中被修飾的段落標(biāo)簽

、列表標(biāo)簽

  • 等。屬性:希望改變的樣式,如顏色color、字體大小f

    3、ont—size等,屬性和屬性值用冒號(hào)(:)隔開。例如,設(shè)置頁(yè)面中所有的

  • 標(biāo)簽的文字顏色為紅色,字體大小為15px,對(duì)應(yīng)的樣式代碼如下:Li{color:#ff0000;font—size:15px;}二、CSS選擇器:根據(jù)選擇器表示所修飾的內(nèi)容類別,選擇器又分為標(biāo)簽選擇器、類選擇器、ID選擇器、并集選擇器和后代選擇器。其中,前3類是CSS的基本選擇器,后2類是由多個(gè)選擇器或標(biāo)簽復(fù)合而成的選擇器,簡(jiǎn)稱復(fù)合選擇器。1、標(biāo)簽選擇器當(dāng)需要對(duì)頁(yè)面內(nèi)HTML標(biāo)簽的內(nèi)容進(jìn)行修飾時(shí),則采用標(biāo)簽選擇器。標(biāo)簽選擇器的語(yǔ)法:

    4、標(biāo)簽名{屬性:屬性值;.......}例如,設(shè)置頁(yè)面中

    標(biāo)簽中的文本顏色為灰色,字體大小為28px,代碼如下所示:h1{Color:#cccccc;font—size:28px;}1、類選擇器使用標(biāo)簽選擇器修飾的范圍比較廣,是針對(duì)某一類的表簽進(jìn)行修飾,如果希望設(shè)置個(gè)別標(biāo)簽的樣式,那么就使用類選擇器。類選擇器的語(yǔ)法:.類名{屬性:屬性值;.......}類名可以任意選擇,應(yīng)用樣式時(shí)使用標(biāo)簽的class屬性引用類樣式,即:<標(biāo)簽名class=“類名”>標(biāo)簽內(nèi)容2、ID選擇器ID屬性是HTML元素的唯一標(biāo)志,因此要求頁(yè)面內(nèi)不能有重復(fù)的ID標(biāo)記屬性,W3C以將

    5、ID屬性定義為HTML元素的標(biāo)準(zhǔn)屬性。對(duì)應(yīng)的ID選擇器一般用于修飾對(duì)應(yīng)ID標(biāo)記的HTML元素內(nèi)容。ID選擇器的語(yǔ)法:#ID名稱{屬性:屬性值;.......}1、并集選擇器:并集選擇器是多個(gè)選擇器通過逗號(hào)連接而成的,是復(fù)合選擇器之一。在聲明各種CSS選擇器時(shí),如果某些選擇器的風(fēng)格是完全相同的,或者部分相同,這時(shí)便可以利用并集選擇器同時(shí)聲明風(fēng)格相同的CSS選擇器。并集選擇器的語(yǔ)法:標(biāo)簽名,類名,#ID名稱{屬性:屬性值;.......}5、后代選擇器后代選擇器也是復(fù)合選擇器中的一種,主要通過嵌套的方式對(duì)特殊位置的HTML標(biāo)簽進(jìn)行聲明。后代選擇器的寫法是把外層的表簽寫在后面

    6、,之間用空格分隔。當(dāng)標(biāo)簽發(fā)生嵌套時(shí),內(nèi)層的表簽就成為外層標(biāo)簽的后代。后代選擇器的語(yǔ)法:pspan{屬性:屬性值;........}四、CSS的繼承性:所有的CSS語(yǔ)句都是居于各個(gè)標(biāo)簽之間的繼承關(guān)系的,為了更好的理解繼承關(guān)系,首先要從HTML文件的組織結(jié)構(gòu)入手。樣式優(yōu)先級(jí):樣式的優(yōu)先級(jí)可以分為以下幾種:1、基本選擇器之間:ID選擇器>類選擇器>標(biāo)簽選擇器。2、樣式表之間:行內(nèi)樣式>內(nèi)嵌樣式>外部樣式。3、CSS樣式之間:在同一個(gè)選擇器中,兩條相同的聲明,后一條聲明會(huì)覆蓋前一條聲明,即顯示后一條聲明的結(jié)果。五、CSS屬性:CSS文字屬性:color:#999999;/*文字

    7、顏色*/font-family:宋體,sans-serif;/*文字字體*/font-size:9pt;/*文字大小*/font-style:itelic;/*文字斜體*/font-variant:small-caps;/*小字體*/letter-spacing:1pt;/*字間距離*/line-height:200%;/*設(shè)置行高*/font-weight:bold;/*文字粗體*/vertical-align:sub;/*下標(biāo)字*/vertical-align:super;/*上標(biāo)字*/text-decoration:line-thr

  • 當(dāng)前文檔最多預(yù)覽五頁(yè),下載文檔查看全文

    此文檔下載收益歸作者所有

    當(dāng)前文檔最多預(yù)覽五頁(yè),下載文檔查看全文
    溫馨提示:
    1. 部分包含數(shù)學(xué)公式或PPT動(dòng)畫的文件,查看預(yù)覽時(shí)可能會(huì)顯示錯(cuò)亂或異常,文件下載后無(wú)此問題,請(qǐng)放心下載。
    2. 本文檔由用戶上傳,版權(quán)歸屬用戶,天天文庫(kù)負(fù)責(zé)整理代發(fā)布。如果您對(duì)本文檔版權(quán)有爭(zhēng)議請(qǐng)及時(shí)聯(lián)系客服。
    3. 下載前請(qǐng)仔細(xì)閱讀文檔內(nèi)容,確認(rèn)文檔內(nèi)容符合您的需求后進(jìn)行下載,若出現(xiàn)內(nèi)容與標(biāo)題不符可向本站投訴處理。
    4. 下載文檔時(shí)可能由于網(wǎng)絡(luò)波動(dòng)等原因無(wú)法下載或下載錯(cuò)誤,付費(fèi)完成后未能成功下載的用戶請(qǐng)聯(lián)系客服處理。