一、CSS由什麼組成

CSS（Cascading Style Sheet）即層疊樣式表，是一種用於定義HTML、SVG、XML等文檔的樣式的語言。它由選擇器、屬性和值組成。

選擇器用來指定一個或多個元素，屬性用來描述元素的外觀或其他方面的行為，值用來描述屬性的設置。

下面是一個簡單的CSS示例：

    
p {
    color: red;
    font-size: 14px;
}
    

這段代碼中，選擇器「p」指定了樣式應用的元素為「p」標籤，屬性「color」用於設置字體顏色為紅色，屬性「font-size」用於設置字體大小為14像素。

二、CSS的作用

CSS的主要作用是為HTML等文檔添加樣式，包括但不限於以下幾個方面：

1、修改文本字體、大小、顏色等樣式。

2、設置背景圖片或顏色。

3、調整布局、邊距、內邊距等。

4、添加動畫或其他特效。

下面是一個應用CSS的HTML示例：

    



    
    
        body {
            background-color: #f2f2f2;
        }
        h1 {
            color: blue;
            font-size: 36px;
            text-align: center;
        }
        p {
            color: black;
            font-size: 18px;
            line-height: 1.5;
        }
    


    
Welcome to my website
    
This is some text that describes my website.


    

這個示例中，CSS被嵌入到HTML文檔中的標籤內。它為全局的body元素設置了背景色為灰色，為h1元素設置了藍色字體，36像素大小和居中對齊。同時，它為所有

元素設置了黑色字體、18像素大小和1.5倍行距。

三、CSS的選擇器類型

1、標籤選擇器

標籤選擇器是CSS中最基本的選擇器，它可以選中HTML文檔中所有使用該標籤的元素。

    
p {
    font-size: 14px;
}
    

這段代碼中，p是標籤選擇器，它將為所有的

標籤設置字體大小為14像素。

2、類選擇器

類選擇器可以選中使用指定類名的元素，類名需要在HTML文檔中進行指定。類名由一個.號開頭，緊隨其後的是給類名起的名稱。

    
.example {
    font-size: 16px;
}
    

這段代碼中，.example是類選擇器，它將為所有使用class=”example”的元素設置字體大小為16像素。

3、ID選擇器

ID選擇器可以選中指定ID的元素，ID需要在HTML文檔中進行指定。ID由一個#號開頭，緊隨其後的是給ID起的名稱。

    
#header {
    background-color: gray;
}
    

這段代碼中，#header是ID選擇器，它將為指定ID為”header”的元素設置背景色為灰色。

4、子選擇器

子選擇器可以選中指定元素下的子元素。

    
div > p {
    font-weight: bold;
}
    

這段代碼中，”>”是子選擇器，它將為所有直接位於div元素內的

元素設置字體加粗。

5、偽類選擇器

偽類選擇器可以選中不在文檔樹中的元素，例如超鏈接的不同狀態。

    
a:hover {
    text-decoration: underline;
}
    

這段代碼中，:hover是偽類選擇器，它將為所有的超鏈接在滑鼠懸浮時添加下劃線。