一、CSS基礎概念

CSS（Cascading Style Sheets）是一種用於描述HTML和XML等文件樣式的語言。CSS可以控制一個文檔的外觀和布局，使得一個文檔（或一組相關文檔）可以從一種設備呈現到另一種設備，如從屏幕到打印機或語音閱讀器。

CSS定義了如何表現HTML元素的外觀，如字體、顏色、大小、間距、邊框、背景等。使用CSS可以讓網站的頁面更簡潔清晰、易於維護和擴展，提高用戶體驗。

CSS代碼由選擇器和聲明（屬性和值的組合）構成，選擇器定位HTML元素，聲明則定義元素的樣式屬性。下面是一個簡單的CSS代碼片段，演示如何改變h1元素的顏色和背景：

h1{
   color: blue;
   background: yellow;
}

二、CSS樣式表引入方式

在HTML文檔中，CSS樣式表可以使用以下3種方式引入：

1. 內部樣式表

內部樣式表使用元素嵌入到HTML文檔中。這種方式適用於只有一個HTML文件需要樣式的情況。

h1{
   color: blue;
   background: yellow;
}

2. 外部樣式表

外部樣式表是放在單獨的CSS文件中，通過元素引入到HTML文件中。這種方式適用於多個HTML文件需要共享同樣的樣式。

3. 內聯樣式表

內聯樣式表使用樣式屬性直接應用到HTML元素上。這種方式適用於只有個別元素需要單獨樣式的情況。

CSS樣式表

三、CSS選擇器

選擇器用於選擇需要樣式化的HTML元素。CSS選擇器有許多種類型，常用的包括：

1. 元素選擇器

元素選擇器可以選擇出HTML文件中的所有元素，比如下面的CSS代碼將所有的h1元素文字顏色設置為藍色：

h1{
   color: blue;
}

2. 類選擇器

類選擇器可以選擇出HTML文件中某個class名稱所有的元素，比如下面的CSS代碼將所有class為”my-class”元素文字顏色設置為藍色：

.my-class{
   color: blue;
}

3. ID選擇器

ID選擇器可以選擇出HTML文件中某個id名稱對應的元素，比如下面的CSS代碼將id為”header”的元素背景色設置為灰色：

#header{
   background: gray;
}

四、CSS盒模型

CSS盒模型定義了一個HTML元素的大小和位置。每個元素被表示為一個矩形框，其中包含內容、內邊距、邊框和外邊距。

下圖展示了一個元素使用CSS盒模型的各部分：

+----------------+
|  Margin        |
|                |
|  +----------+  |
|  |  Border  |  |
|  |          |  |
|  |  +---+   |  |
|  |  |   |   |  |
|  |  +---+   |  |
|  |          |  |
|  +----------+  |
|                |
|  Padding       |
|  +----------+  |
|  |   Content|  |
|  +----------+  |
|                |
+----------------+

五、CSS定位

CSS定位用於控制HTML元素的位置。常用的CSS定位方式包括：

1. 相對定位

相對定位使用position屬性設置為relative。設置相對定位後，元素的位置可以通過top、right、bottom、left屬性進行微調，而不會改變其他元素的位置。

div{
   position: relative;
   top: 10px;
   left: 20px;
}

2. 絕對定位

絕對定位使用position屬性設置為absolute。設置絕對定位後，元素會完全脫離文檔流，並且位置相對於最近的非static定位的祖先元素或body元素。

div{
   position: absolute;
   top: 100px;
   left: 200px;
}

3. 固定定位

固定定位使用position屬性設置為fixed。設置固定定位後，元素會固定在當前屏幕區域的位置，不受滾動影響。

div{
   position: fixed;
   top: 50px;
   right: 0;
}

六、CSS響應式布局

響應式布局是一種能夠自動適應不同設備的布局方式。在CSS中，通過使用媒體查詢（@media）控制樣式在不同設備上的呈現效果，常用的媒體查詢包括：

/* 在屏幕寬度小於768px時應用樣式 */
@media (max-width: 768px){
   /* 樣式代碼 */
}

/* 在屏幕寬度大於768px時應用樣式 */
@media (min-width: 768px){
   /* 樣式代碼 */
}

通過結合CSS盒模型、CSS定位、CSS響應式布局來製作響應式網站，可以讓網站在不同尺寸設備上呈現不同的布局效果，提高用戶體驗。