1.3 CSS3

CSS（Cascading Style Sheet，層疊樣式表或級(jí)聯(lián)樣式表）是一種專(zhuān)門(mén)用于控制網(wǎng)頁(yè)內(nèi)容的樣式和布局的語(yǔ)言，目前最新的標(biāo)準(zhǔn)是CSS3。當(dāng)前，采用CSS+DIV實(shí)現(xiàn)網(wǎng)頁(yè)布局已經(jīng)成為主流方式，因此Web前端開(kāi)發(fā)人員掌握CSS3技術(shù)是十分必要的。

1.3.1 盒子模型

理解盒子模型是了解CSS工作方式的基礎(chǔ)，尤其是在做內(nèi)容布局時(shí)，盒子模型將起到十分重要的作用。盒子模型認(rèn)為，任何一個(gè)視覺(jué)可見(jiàn)的html元素都包括內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）。其中內(nèi)邊距是指內(nèi)容到邊框的距離，外邊距是指邊框以外與其他相鄰元素的距離。這種結(jié)構(gòu)就好像我們?cè)谟^察一組裝有物品的盒子：內(nèi)容是指盒子內(nèi)放置的物品，內(nèi)邊距是指物品與盒子外殼之間的距離，邊框是指盒子外殼的厚度，外邊距是盒子外殼以外的空間。因此，這種結(jié)構(gòu)被形象地稱(chēng)為盒子模型，如圖1.2所示。

需要注意的是，內(nèi)邊距、邊框和外邊距可以被分別設(shè)置上、下、左、右四個(gè)方向的值；我們?cè)谟?jì)算標(biāo)簽的實(shí)際占位寬度或高度時(shí)，需要將內(nèi)容、內(nèi)邊距、邊框、外邊距在垂直或水平方向的值進(jìn)行累加，而對(duì)于兩個(gè)相鄰標(biāo)簽之間在水平方向上的實(shí)際間隔距離，不同瀏覽器有不同的解釋?zhuān)_(kāi)發(fā)人員在做內(nèi)容布局時(shí)一定要注意這一點(diǎn)。

1.3.2 CSS的基本語(yǔ)法

CSS的基本語(yǔ)法結(jié)構(gòu)為：

    選擇器 {
      樣式名：樣式值；
      樣式名：樣式值；
      …
    }

根據(jù)CSS代碼的位置不同，CSS樣式可以分為三類(lèi)：行內(nèi)樣式、內(nèi)部樣式和外部樣式。

行內(nèi)樣式是指在＜html＞標(biāo)簽中通過(guò)使用＜style＞屬性來(lái)設(shè)置樣式內(nèi)容，樣式內(nèi)容僅能修飾所在的＜html＞標(biāo)簽。如：

    ＜p style=＂font-size:14px; color:red; ＂＞＜/p＞

內(nèi)部樣式是把CSS代碼放在＜head＞標(biāo)簽下的＜style＞標(biāo)簽中，代碼的有效作用范圍是整個(gè)頁(yè)面。如：

    ＜head＞
        ＜style＞
            p {
              font-size:14px；
              color:red；
          }
        ＜/style＞
    ＜/head＞

外部樣式是指將CSS代碼放在一個(gè)獨(dú)立的、擴(kuò)展名為.css的文件中，任意一個(gè)html文檔均可調(diào)用該文件，從而使用其中的樣式。從提高代碼利用率的角度看，我們推薦使用外部樣式。如：

    myStyle.css文件：
    p {
        font-size:14px；
        color:red；
    }

在index.html文件中調(diào)用上述樣式文件：

    ＜head＞
        ＜link rel=＂stylesheet＂ href=＂myStyle.css＂＞
    ＜/head＞

1.3.3 樣式選擇器

在內(nèi)部樣式和外部樣式中，樣式選擇器非常重要，它將直接決定著樣式代碼能夠修飾哪些標(biāo)簽。基本的樣式選擇器包括ID樣式選擇器、類(lèi)樣式選擇器、標(biāo)簽樣式選擇器和偽類(lèi)選擇器。

ID樣式選擇器的寫(xiě)法是“#某個(gè)標(biāo)簽的id屬性值”，其樣式內(nèi)容僅可修飾有對(duì)應(yīng)id值的標(biāo)簽，如：

    #stuName {
        font-size:14px；
        color:red；
    }
    ＜p id=＂stuName＂＞我的字是紅色14像素。＜/p＞

類(lèi)樣式選擇器的寫(xiě)法是“．某些html標(biāo)簽的class屬性值”，類(lèi)樣式能夠同時(shí)修飾多個(gè)標(biāo)簽。如：

    .redFont {
        font-size:14px；
        color:red；
    }
    ＜p class=＂redFont＂＞我的字是紅色14像素。＜/p＞
    ＜div class=＂redFont＂＞我的字是紅色14像素。＜/div＞

標(biāo)簽樣式選擇器的寫(xiě)法是“合法的html標(biāo)簽名”，標(biāo)簽樣式可以同時(shí)修飾有效作用范圍內(nèi)的所有標(biāo)簽。如：

    div {
        font-size:14px；
        color:red；
    }
    ＜div＞我的字是紅色14像素。＜/div＞
    ＜div＞我的字是紅色14像素。＜/div＞

偽類(lèi)選擇器樣式用于標(biāo)簽在不同狀態(tài)下的樣式，其寫(xiě)法是在上述三種樣式選擇器后加：“狀態(tài)”。其典型應(yīng)用是修飾一個(gè)文字鏈接在鼠標(biāo)未經(jīng)過(guò)和鼠標(biāo)懸停時(shí)顯示不同的樣式，如：

    .redLink {
        font-size:14px；
        color:black；
        text-decoration:none；
    }
    .redLink:hover {
        font-size:14px；
    color:red；
        text-decoration:underline；
    }

    ＜a class=＂redLink＂ href=＂http://www.xynun.edu.cn＂＞興義民族師范學(xué)院＜/a＞

我們可以發(fā)現(xiàn)，“興義民族師范學(xué)院”文字原本是黑色、無(wú)下劃線的，鼠標(biāo)光標(biāo)經(jīng)過(guò)它時(shí)變?yōu)榧t色加下劃線。

我們將上述四種基本選擇器進(jìn)行組合，可以得到更為復(fù)雜的選擇器。如：

    ＜style＞
    #nav li. linkStyle {
        font-size:14px；
        color:black；
        text-decoration:none；
    }
    #nav li. linkStyle:hover {
        font-size:14px；
        color:red；
        text-decoration:underline；
    }
    ＜/style＞
    ＜ul id=＂nav＂＞
        ＜li＞＜a class=＂linkStyle＂＞首頁(yè)＜/a＞＜/li＞
        ＜li＞＜a class=＂linkStyle＂＞簡(jiǎn)介＜/a＞＜/li＞
    ＜ul/＞

上述代碼中，第一個(gè)樣式選擇器“#nav li. linkStyle”的含義是，在id屬性值為nav的標(biāo)簽中找到所有后代標(biāo)簽li（可以是直接后代，也可以是間接后代），再?gòu)拿總€(gè)li標(biāo)簽中找到所有class屬性值為linkStyle的后代標(biāo)簽，這才是最終的修飾對(duì)象。

除此之外，我們還可以將標(biāo)簽的其他屬性值寫(xiě)入選擇器中。如：

    input [type=＂text＂]{
        font-size:14px；
        color:red；
    }
        ＜input type=＂text＂ /＞
        ＜input type=＂text＂ /＞

當(dāng)用戶(hù)在上述兩個(gè)文本框中輸入內(nèi)容時(shí)，文字為紅色、14像素。

1.3.4 常用的CSS3樣式名

如果說(shuō)選擇器用于確定要修飾的對(duì)象，那么樣式名和樣式值則決定著如何來(lái)修飾。完整的CSS樣式名規(guī)模很大，但是常用的不多，可以分為文字修飾類(lèi)、段落文本修飾類(lèi)、背景類(lèi)、表格類(lèi)、定位類(lèi)和彈性伸縮布局類(lèi)等，下面逐一介紹。

（1）常用的文字修飾類(lèi)樣式名，見(jiàn)表1.6。

（2）常用的段落文本修飾類(lèi)樣式名，見(jiàn)表1.7。

（3）常用的背景類(lèi)樣式名，見(jiàn)表1.8。

（4）常用的表格類(lèi)樣式名，見(jiàn)表1.9。

（5）定位樣式名position。

默認(rèn)情況下，有些標(biāo)簽會(huì)獨(dú)立占行顯示（稱(chēng)為塊級(jí)標(biāo)簽），有些標(biāo)簽則不會(huì)獨(dú)立占行（稱(chēng)為行內(nèi)標(biāo)簽），而是與左右相鄰標(biāo)簽共在一行，如果需要打破這種默認(rèn)布局則需要用到CSS中的position屬性對(duì)標(biāo)簽進(jìn)行重新定位。position屬性的作用是設(shè)置標(biāo)簽的定位類(lèi)型，其可選值及作用如下：

static：默認(rèn)值，普通流定位，瀏覽器會(huì)根據(jù)元素的默認(rèn)屬性，自上而下（或自左向右）依次顯示元素。

relative：相對(duì)定位，元素相對(duì)于其原來(lái)默認(rèn)位置偏移一定值，原來(lái)所占空間仍然存在。

absolute：絕對(duì)定位，元素完全從文檔流中脫離，并相對(duì)于其父元素偏移一定值，原來(lái)所占空間將被刪除。

fixed：固定定位，元素完全從文檔流中脫離，并相對(duì)于瀏覽器窗口來(lái)定位。

需要注意的是，relative、absolute、fixed這三種定位類(lèi)型均需要配合top/right/bottom/left四個(gè)屬性來(lái)設(shè)置具體偏移值。

（6）彈性伸縮布局類(lèi)樣式名，見(jiàn)表1.10。

彈性伸縮布局是CSS3的新特性，能夠極大降低頁(yè)面復(fù)雜布局的實(shí)現(xiàn)難度。在彈性伸縮布局中，我們僅需要對(duì)父標(biāo)簽進(jìn)行設(shè)置，不需要關(guān)注子標(biāo)簽。

1.3.5 CSS3中的顏色值寫(xiě)法

CSS3仍然采用RGB三色原理調(diào)節(jié)每種顏色的濃度，從而取得目標(biāo)顏色值，或者直接使用顏色對(duì)應(yīng)的英文單詞。CSS3中共有四種顏色表示方法，分別為：

（1）#6位十六進(jìn)制代碼：從左至右每?jī)晌恢捣謩e表示紅、綠、藍(lán)三種顏色的濃度，00最淡，ff最深；每種顏色的值均相同，則表示不同深淺的灰色。如：#ff0000為紅色；#ffff00為黃色；#00ffff為青色；#000000為黑色；#ffffff為白色等。

（2）rgb函數(shù)：該函數(shù)有三個(gè)參數(shù)，從左至右依次紅、綠、藍(lán)三種顏色的濃度，0最淡，255最深；每種顏色的值均相同，則表示不同深淺的灰色。如rgb（255,0,0）為紅色；rgb（255, 255,0）為黃色；rgb（0, 255, 255）為青色；rgb（0,0,0）為黑色；rgb（255, 255, 255）為白色等。

（3）rgba函數(shù)：該函數(shù)有四個(gè)參數(shù)，前三個(gè)參數(shù)的意義與rgb相同，第四個(gè)參數(shù)表示透明度，值為0～1之間的小數(shù)，如rgba（255,0,0,0.5）表示透明度為0.5的紅色，實(shí)際上它呈現(xiàn)出來(lái)的已經(jīng)不再是純紅色。

（4）英文單詞：如red、yellow、blue、green、white、black、pink、purple、brown等。

1.3.6 CSS3中的尺寸值寫(xiě)法

根據(jù)盒子模型的原理及上述知識(shí)我們不難發(fā)現(xiàn)，很多屬性的值都為尺寸，如字號(hào)、高度、寬度、邊框、內(nèi)外邊距、填充等。在CSS3中尺寸的寫(xiě)法有四種，分別為：

（1）px：像素，相對(duì)于用戶(hù)屏幕的分辨率。

（2）em：相對(duì)長(zhǎng)度，相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸（16px）。

（3）rem：相對(duì)長(zhǎng)度，相對(duì)于根標(biāo)簽（＜html＞標(biāo)簽）中設(shè)置的字體大小來(lái)調(diào)整當(dāng)前標(biāo)簽的某一尺寸屬性值。如根標(biāo)簽設(shè)置font-size:14px，則

      1rem=1×14=14px；
      1.25rem=1.25×14=17.5px；

（4）%：百分比，指相對(duì)于父標(biāo)簽?zāi)骋怀叽缰档谋壤?/p>

在實(shí)際應(yīng)用中，rem單位值的寫(xiě)法在顯示效果上更佳，推薦使用。