什麼是CSS？ | 介紹CSS基礎語法和用途的簡明指南

一、CSS的概念

CSS（Cascading Style Sheets）是一種用於描述文檔展示樣式的語言。它是W3C創立的標準語言，旨在分離文檔結構與表現層。

使用CSS，可以在不改變文檔結構的情況下改變文檔的樣式。這使得Web開發變得更加容易、靈活和可維護。

二、CSS的基礎語法

CSS的基礎語法由3個部分組成：

1. 選擇器：選擇具有特定樣式的元素。

2. 屬性：確定元素的樣式屬性。

3. 值：屬性的值可以是顏色、大小、字體等。

2.1 選擇器

選擇器是CSS中最重要的部分之一。它是用於選擇要應用樣式的元素的標識符。

常用的選擇器有：元素選擇器、類選擇器、ID選擇器等。

2.2 屬性和值

CSS屬性描述了元素的特徵，如背景顏色、字體大小、邊框等。

屬性的值是要應用於屬性的樣式，如紅色、14像素、實線等。

 /* 示例代碼 */ 
p {
    color: red;
    font-size: 14px;
    border: 1px solid black;
}

上面的例子選擇了所有的p元素，並給它們設置了紅色字體、14像素大小和1像素實線邊框。

三、CSS的應用

CSS可以讓我們更好地控制網頁的展示效果，提高用戶的體驗。

3.1 控制頁面布局

CSS可以控制頁面的布局，如設置元素的位置、大小、排列等。

 /* 示例代碼 */ 
.container {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

上面的例子設置了一個具有80%寬度、居中對齊、水平、垂直居中的容器。

3.2 定製頁面樣式

CSS可以讓我們定製頁面的樣式，如字體、顏色、背景、邊框等。

 /* 示例代碼 */ 
h1 {
    font-size: 24px;
    color: #333;
    background-color: #fff;
    border-bottom: 1px solid #333;
}

上面的例子設置了一個標題樣式，具有24像素的字體大小、黑色的文字顏色、白色的背景顏色和黑色的1像素底邊框。

3.3 響應式布局

CSS還可以幫助我們創建響應式布局，以適應不同的設備屏幕大小。

 /* 示例代碼 */ 
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

上面的例子定義了在屏幕寬度小於768像素時，把容器布局改為垂直排列。

總結

CSS是Web開發中不可或缺的一部分。了解CSS的基礎語法和用途可以幫助我們更好地控制網頁的展示效果。

通過選擇器、屬性和屬性值，可以實現很多頁面效果，包括布局、字體、顏色等。

除此之外，CSS還支持響應式布局等功能，以適應不同大小的設備屏幕。