入門級CSS教程：學習創建優美網頁界面的基本功

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-tw/n/283493.html