CSS樣式詳解

一、基礎概念

CSS即層疊樣式表（Cascading Style Sheets），是一種網頁樣式表語言。它的作用是為HTML和XML等標記語言提供樣式設定。

其主要功能是為網頁添加樣式，比如：文字顏色、字體、背景等，從而讓網頁呈現出更為美觀和專業的效果。

CSS樣式是由選擇器和聲明組成，選擇器指向需要添加樣式的HTML元素，而聲明則控制這些元素的樣式。

二、選擇器

CSS有豐富的選擇器，可以根據需要選擇不同的HTML元素，常見的選擇器有：

1、標籤選擇器

    
    
 {        color: red;        }    

上述樣式表會將所有的

標籤的文字顏色設為紅色。

2、類選擇器

    
    .box {
        width: 200px;
        height: 200px;
        background-color: gray;
        }
    

上述樣式表會將所有class屬性為box的元素寬高設為200px，背景色為灰色。

3、ID選擇器

    
    #title {
        font-size: 24px;
        font-weight: bold;
        }
    

上述樣式表會將id屬性為title的標籤字體大小設為24px，字體加粗。

4、屬性選擇器

    
    input[type="text"] {
        border: 1px solid #ccc;
        }
    

上述樣式表會將type屬性值為text的input元素的邊框設為1px粗的灰色實線。

5、偽類和偽元素選擇器

    
    a:hover {
        color: blue;
        }
    

上述樣式表會將滑鼠懸停在超鏈接上時，超鏈接的字體顏色設為藍色。

三、樣式聲明

樣式聲明包括屬性和屬性值，屬性控制元素的樣式，而屬性值則是對屬性進行詳細規定。

1、文字樣式

    
    p {
        color: red;
        font-size: 16px;
        font-weight: bold;
    }
    

上述樣式表會將所有的

標籤的文字顏色設為紅色，字體大小為16px，字體加粗。

2、背景樣式

    
    body {
        background-color: #f0f0f0;
        background-image: url("bg.jpg");
        background-repeat: repeat-x;
    }
    

上述樣式表會將網頁背景色設置為#f0f0f0，背景圖片為bg.jpg，水平重複。

3、邊框樣式

    
    div {
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    

上述樣式表會將所有的元素添加1px粗的灰色實線邊框，邊框圓角程度為5px。

4、布局樣式

    
    .box {
        width: 200px;
        height: 200px;
        margin: 10px;
        padding: 20px;
        float: left;
    }
    

上述樣式表會將所有class屬性為box的元素寬高設為200px，外邊距為10px，內邊距為20px，左浮動。

5、其它樣式

    
    a {
        text-decoration: none;
        cursor: pointer;
    }
    

上述樣式表會將所有的超鏈接去掉下劃線，滑鼠指針變為手型。

四、總結

CSS是網頁設計中必不可少的一部分，依靠選擇器和樣式聲明，可以方便地實現各種樣式效果，提高網頁的可讀性和美觀性。