CSS工作方法

CSS（層疊樣式表）是一種用于描述文檔樣式的語言，可以控制網頁的布局、字體、顏色等外觀特性。使用CSS可以讓頁面更加美觀、易讀、可維護。下面介紹CSS的工作方法。

選擇器

CSS通過選擇器來選擇HTML文檔中的元素，并對其應用樣式。選擇器可以是元素類型、class、id、屬性等。例如：

/* 通過元素選擇器設置所有段落顏色為red */
p {
color: red;
}
/* 通過class選擇器設置所有class為box的元素背景色為gray */
.box {
background-color: gray;
}
/* 通過id選擇器設置id為header的元素字體為bold */
#header {
font-weight: bold;
}

樣式優先級

如果多個樣式同時作用于同一個元素，就需要了解樣式優先級的規則。通常情況下，選擇器的優先級從高到低依次為：id選擇器 >class選擇器、屬性選擇器 >元素選擇器。可以使用!important來強制指定某個樣式，但這樣做應該盡量避免使用。

繼承

CSS樣式可以繼承自父元素，這意味著在父元素上定義的樣式可以在子元素中自動應用。例如：

/* 在body上設置字體大小和顏色 */
body {
font-size: 16px;
color: #333;
}
/* 在p中繼承字體大小和顏色 */
p {
/* 繼承字體大小 */
font-size: inherit;
/* 繼承字體顏色 */
color: inherit;
}

盒模型

CSS使用盒模型來布局頁面上的元素，每個元素都是一個矩形盒子，由四個部分組成：內容區域、內邊距、邊框、外邊距。可以通過box-sizing屬性來指定盒模型的計算方式。

/* 設置所有元素的盒模型為border-box */
* {
box-sizing: border-box;
}

響應式設計

響應式設計是指頁面可以在不同的設備上自適應地顯示，可以通過媒體查詢來實現。媒體查詢是一種CSS3的技術，用于根據設備屏幕的寬度、高度、分辨率等特性判斷頁面所處的環境，并根據不同的條件應用不同的樣式。以下是一個簡單的響應式設計例子：

/* 在寬度小于600px時，設置header和nav元素右對齊 */
@media screen and (max-width: 600px) {
header, nav {
float: right;
}
}

以上就是CSS的基本工作方法，使用好CSS可以創造出更加美觀、內容豐富、易讀、易維護的頁面。