CSS教程：從入門到精通

一、CSS是什麼

CSS（Cascading Style Sheets）是一種用於定義網頁樣式的語言。由於網頁內容和樣式是分開保存的，因此CSS可以使設計者和開發者分離出樣式與內容的工作，提高開發效率。

在HTML中，通過給標籤加上樣式屬性來改變網頁的樣式。如下是一個改變文本顏色的例子：

<p style="color:red;">這是一段用紅色字體的文本</p>

而在CSS中，通過選擇器來選擇HTML中的標籤，並定義其樣式。如下是同樣改變文本顏色的例子：

p {
    color: red;
}

在上例中，我們選擇了所有的p標籤，並將其文字顏色設為紅色。這樣我們就可以輕鬆地改變HTML文檔的樣式而不必去更改HTML文件的內容。

二、CSS基礎

1.選擇器

在CSS中，選擇器用於選取要應用樣式的HTML元素。

下面是一些常用的選擇器類型：

元素選擇器: 選擇HTML元素，如
```
p {color: red;}
```
ID選擇器: 選擇HTML元素的唯一ID，如
```
#header {font-size: 30px;}
```
類選擇器: 選擇HTML元素的類，如
```
.page-title {font-weight: bold;}
```
後代選擇器: 選擇某個元素的後代元素，如
```
ul li {list-style: none;}
```
偽類選擇器: 用於向某些元素添加特殊的效果，如
```
a:hover {color: blue;}
```

2.樣式規則

CSS的樣式規則由選擇器和聲明塊組成。

選擇器用於指定要應用樣式的HTML元素，而聲明塊由屬性和屬性值組成。

下面是一個簡單的樣式規則：

h1 {
    font-size: 36px;
    color: red;
}

其中 h1 是選擇器，font-size 和 color 是屬性，36px 和 red 是屬性值。

3.樣式表

CSS樣式表用於將一組樣式規則應用到HTML文檔。

有兩種方式來定義CSS樣式表：

內部樣式表：定義在HTML文檔里的樣式表，如

<head>
        <style>
        h1 {
            color: red;
        }
        </style>
    </head>

外部樣式表：定義在外部樣式文件中的樣式表，如
```
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
```
這裡的 href 屬性指向外部樣式文件。

三、CSS進階

1.盒模型

HTML中，所有的元素都可看做是“盒子”，每個盒子由四個部分組成：內容(content)、填充(padding)、邊框(border)、外邊距(margin)。

盒子總寬度 = 內容寬度 + 填充寬度 + 邊框寬度 + 外邊距寬度。

如下圖所示：

我們可以通過設置盒子的屬性來控制其寬度、高度、填充、邊框、外邊距等，從而實現各種布局效果。

2.布局

布局是網頁設計中最重要的一部分。而CSS中的盒模型和定位機制是實現布局的關鍵。

下面是一些重要的布局技巧：

居中元素：

/* 垂直居中 */
    .container {
        display: flex;
        align-items: center;
    }

    /* 水平居中 */
    .container {
        display: flex;
        justify-content: center;
    }

響應式布局：

@media (max-width: 600px) {
    /* 當設備寬度小於600px時應用的樣式 */
}

流式布局：

.container {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
}

柵格系統：

.row::after {
    content: "";
    clear: both;
    display: table;
}

.col {
    float: left;
    width: 100%;
    padding: 10px;
}

@media (min-width: 768px) {
    .col {
        width: 50%;
    }
}

3.動畫

CSS動畫可以為HTML元素添加各種動態效果，使頁面更加生動有趣。

下面是一些常見的CSS動畫效果：

漸變：

background: linear-gradient(#6a11cb, #2575fc);

過渡：
```
transition: all 0.3s ease-in-out;
```
旋轉：
```
transform: rotate(45deg);
```
縮放：
```
transform: scale(1.5);
```
透明度：
```
opacity: 0.5;
```

四、CSS資源

除了手寫CSS外，我們還可以使用各種CSS庫和框架來快速搭建美觀的網站。

這裡介紹一些常用的CSS資源：

Bootstrap：全球最流行的響應式CSS框架
Semantic UI：一種語義化的CSS框架，提供大量的組件和模板
Tachyons：一個小而快速的CSS庫，使用現代布局和設計模式
Pure.css：一個小型、響應式CSS框架，只有4KB大小

五、總結

以上就是CSS教程的內容。學會CSS後，您將能夠為網頁添加各種樣式和效果，並實現各種複雜的布局。同時，掌握優秀的CSS庫和框架，將極大地提高您的開發效率。

原創文章，作者：DJEIW，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/373224.html