CSS初步介紹

css，是Cascading Style Sheet的縮寫，即“層疊樣式單”的縮寫。

html5的規范，推薦由CSS實現頁面外觀的顯示，HTML負責頁面的基本語義。通過使用CSS，我們可以使得數據邏輯和顯示邏輯分離，提高HTML文檔的可讀性和可維護性。

1、CSS的語法

一條CSS規則由一個選擇器和一個或多個聲明組成，一個聲明包括一個屬性和一個值。

選擇器用于選擇生效的HTML元素。

一組聲明由花括號包含起來，屬性和值之間為冒號，值后面有分號。

CSS的語法可以這樣表示：

這是一條CSS規則的例子：

/*This is a css rule*/
h2{color:green;font-size:15px;}

這條規則中，h2是選擇器，“color:green;”和“font-size:15px;”是兩條聲明，color和font-size分別是兩個屬性，green和15px分別是這兩個屬性對應的值。

在CSS中，/*和*/之間的內容為注釋，和C語言、JAVA語言的規則相同。

CSS規則比較清晰易懂，我們可以看出這條CSS規則的含義是：h2標題的顏色設置為綠色，字體大小設置為15像素。

2、CSS與HTML的關聯方式

CSS的作用是為HTML提供外觀展示的控制，為了讓CSS生效，必須將CSS與HTML關聯起來。

CSS與HTML關聯起來的方式有四種：

（1）CSS作為樣式文件，被HTML文件引用；

（2）CSS作為樣式文件，被HTML文件導入；

（3）在HTML文件內部，CSS作為內部樣式單，被HTML文件使用；

（4）在HTML文件內部，CSS作為某個元素的style屬性值，被該元素使用。

上面的四種關聯方式，CSS作為文件被引用或者導入的方式，一個CSS文件可以被多個HTML文件使用，重用性最高；CSS作為內部樣式單，可以被單個HTML的多個元素使用，重用性中等；CSS作為某個元素的style屬性值，則只能被單個元素使用，沒有重用性。

3、CSS作為某個元素style屬性值的情形

下面是這樣的一個HTML文檔例子：

<!DOCTYPE html>
<html>
    <head>
        <title>css001</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <p style="color:green;font-size:18px;">Big green text.</p>
        <p style="color:red;font-size:9px;">Small red text.</p>
    </body>
</html>

使用瀏覽器打開這個文件，效果如下：

作為style屬性值的情形，CSS已經確定了被使用的元素，因此不需要提供選擇器。

4、CSS作為內部樣式單的情形

CSS作為內部樣式單，通過<style>元素來實現，下面是一個HTML文檔例子：

<!DOCTYPE html>
<html>
    <head>
        <title>css002</title>
        <meta charset="utf-8" />
        <style type="text/css">
            p{
                color:blue;
                font-size:16px;
            }
        </style>
    </head>
    <body>
        <p>Welcome to China.</p>
        <p>China is a great country.</p>
    </body>
</html>

使用瀏覽器打開這個文件，效果如下：

5、CSS作為文件被導入的情形

我們先生成一個css文件table.css:

table{
    background-color:gray;
    border:1px solid;
    width:200px;
}
table th{
    border-top:1px solid; 
    border-left:1px solid; 
}
table td{
    border-top:1px dashed; 
    border-left:1px dashed; 
}

我們再定義個使用該CSS文件的HTML文件css003.html：

<!DOCTYPE html>
<html>
    <head>
        <title>css003</title>
        <meta charset="utf-8" />
        <style type="text/css">
            @import "table.css";
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>姓名</th>
                <th>年齡</th>
            </tr>
            <tr>
                <td>崔九</td>
                <td>38</td>
            </tr>
            <tr>
                <td>郭二</td>
                <td>35</td>
            </tr>
        </table>
    </body>
</html>

當我們使用瀏覽器打開該HTML文檔時，效果如下：

6、CSS作為文件被引入的情形

這種情形和CSS作為文件被導入，效果是差不多的，只是語法上有點差別。

我們繼續使用上面的table.css文件，對css003.html稍作修改，變為css004.html：

<!DOCTYPE html>
<html>
    <head>
        <title>css004</title>
        <meta charset="utf-8" />
        <link href="table.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <table>
            <tr>
                <th>姓名</th>
                <th>年齡</th>
            </tr>
            <tr>
                <td>崔九</td>
                <td>38</td>
            </tr>
            <tr>
                <td>郭二</td>
                <td>35</td>
            </tr>
        </table>
    </body>
</html>

當我們使用瀏覽器打開該HTML文檔時，效果和上面的一樣：