CSS（層疊樣式表）是網頁設計的三大核心技術之一，它提供了一種樣式描述語言，用於定義網頁的樣式、排版、顏色、字體等外觀表現。使用CSS，我們可以將網站的外觀和內容分離開來，使得網頁代碼更加簡潔清晰、易於維護。本篇文章將從入門級的角度出發，講解CSS的基本語法及使用方法，幫助初學者掌握創建優美網頁界面的基本功。
一、基礎語法
CSS由選擇器（Selector）和聲明塊（Declaration）兩部分組成：
selector {
Declaration1;
Declaration2;
...
DeclarationN;
}
其中，selector為CSS屬性選擇器，聲明塊中包含了多個CSS屬性及其對應的取值，每個屬性之間以分號分隔（注意最後一個屬性不加分號）。
下面是一個簡單的例子：
p {
color: red;
font-size: 16px;
}
上面的CSS代碼表示將所有的段落文本顏色設置為紅色，字體大小為16像素。在HTML文件中，我們可以使用<p>標籤將一個段落包裹起來，並在<head></head>標籤對中引入CSS文件：
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>這是一段文本</p>
</body>
需要注意的是，CSS的注釋方式為「/*…*/」。
二、選擇器
選擇器是用來匹配網頁中元素的模式，CSS中包括了多種常見的選擇器：
1. 元素選擇器
元素選擇器是最常用的選擇器，通過HTML標記的名稱匹配對應元素，如下面的例子：
p {
color: red;
}
這個例子將把所有的<p>元素的文本顏色設置為紅色。
2. ID選擇器
ID選擇器通過元素的id屬性來匹配對應元素，用「#」符號表示，如下面的例子：
#header {
background-color: yellow;
height: 100px;
}
這個例子將把id為「header」的元素的背景顏色設置為黃色，高度設置為100像素。
3. class選擇器
class選擇器通過元素的class屬性來匹配對應元素，用「.」表示，如下面的例子：
.error {
color: red;
}
這個例子將把class為「error」的元素文本顏色設置為紅色。需要注意的是，一個元素可以同時有多個class，多個class之間用空格分隔，而在CSS中，可以使用「.class1.class2」這種方式來匹配同時應用了class1和class2的元素。
三、樣式屬性
CSS中包括了豐富的樣式屬性，這裡只列出了一部分最常用的樣式屬性：
1. color
color屬性用來設置文本顏色，可取值為具體顏色名稱，RGB顏色值、十六進制顏色值、HSL顏色值等，如下面的例子：
h1 {
color: #008000;
}
這個例子將把所有的<h1>元素的文本顏色設置為綠色。
2. font-size
font-size屬性用來設置字體大小，可取值為具體大小值、相對大小值（如em、rem、%）等，如下面的例子：
h1 {
font-size: 24px;
}
這個例子將把所有的<h1>元素的字體大小設置為24像素。
3. font-family
font-family屬性用來設置字體樣式，可取值為具體字體名稱、系統默認字體等，如下面的例子：
body {
font-family: "微軟雅黑", sans-serif;
}
這個例子將把整個網頁的字體樣式設置為微軟雅黑字體（如果用戶電腦中沒有安裝微軟雅黑字體，則會顯示默認的sans-serif系統字體）。
四、盒子模型
CSS中的盒子模型用來表示一個元素在頁面上的佔據空間，它由四個部分組成，分別是內容區（Content）、內邊距（Padding）、邊框（Border）、外邊距（Margin），如下圖所示：
1. width、height
width和height屬性用來設置元素的寬度和高度，分別對應着盒子模型中的內容區加邊框的總寬度和總高度。如下面的例子：
div {
width: 200px;
height: 100px;
border: 2px solid #ccc;
}
這個例子將創建一個寬度為200像素、高度為100像素、邊框為2像素粗的矩形盒子。
2. padding
padding屬性用來設置元素的內邊距，即內容區與邊框之間的距離。如下面的例子：
div {
padding: 10px 20px;
border: 2px solid #ccc;
}
這個例子將創建一個邊框為2像素粗、內邊距為10像素上下、20像素左右的矩形盒子。
3. border
border屬性用來設置元素的邊框樣式、粗細和顏色，分別由三個子屬性border-style、border-width、border-color指定。如下面的例子：
div {
border: 2px dashed #ccc;
}
這個例子將創建一個2像素粗、實線邊框為虛線、顏色為#ccc的矩形盒子。
4. margin
margin屬性用來設置元素的外邊距，即元素與相鄰元素之間的距離。如下面的例子：
div {
margin: 20px;
border: 2px solid #ccc;
}
這個例子將創建一個邊框為2像素粗、外邊距為20像素的矩形盒子。
五、位置和布局
CSS提供了多種方式來進行頁面布局，並可以控制元素的位置和大小：
1. position
position屬性用來設置元素的定位方式，可以取值為relative、absolute、fixed、static等。其中，relative表示相對定位，absolute表示絕對定位，fixed表示固定定位，static表示默認定位。
2. top、bottom、left、right
top、bottom、left、right屬性用來設置元素的位置，相對於最近的已定位祖先元素或瀏覽器邊緣計算。如下面的例子：
#div1 {
position: absolute;
top: 50px;
left: 100px;
}
這個例子將把id為「div1」的元素相對於最近的已定位祖先元素（如果沒有已定位祖先元素，則相對於body元素）定位在距離瀏覽器頂部50像素、距離瀏覽器左側100像素的位置。
3. float
float屬性用來設置元素的浮動方式，可以取值為left、right、none等。當元素浮動後，其他元素會自動圍繞它排列。如下面的例子：
img {
float: left;
margin-right: 20px;
}
這個例子將把所有的img元素設置為左浮動，並在右邊留出20像素的間距。
六、小結
本篇文章介紹了CSS的基礎語法、選擇器、樣式屬性、盒子模型、位置和布局等內容。掌握了這些知識後，我們就可以使用CSS輕鬆地為網頁添加各種外觀效果和布局樣式，提升網站的可讀性和美觀度。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/283493.html
微信掃一掃 
支付寶掃一掃 