一、簡介

Cascading Style Sheets（CSS）是一種用於設計網頁樣式的標記語言。它描述了如何在HTML或XML文檔中展示文檔的外觀和布局。CSS使得HTML元素（例如文本、背景、邊框和填充等）可以具有不同的樣式和布局，使得頁面外觀更加美觀、布局更加靈活。相比於HTML的表格布局，CSS布局更加適應不同設備和窗口大小，也更加容易修改和維護。

二、基本語法

CSS由選擇器和聲明塊組成，選擇器用於指定要樣式化的網頁元素，聲明塊由屬性和對應的值組成。

/* 格式：選擇器 {屬性1: 值1; 屬性2: 值2; ...} */
h1 {
  font-size: 36px;
  color: #333;
  text-align: center;
}

以上代碼中，選擇器為

，聲明塊包含了3個屬性：font-size、color和text-align。這段代碼意味著將所有

元素的字體大小設置為36像素，顏色設置為#333（深灰色），並居中對齊。

三、選擇器

選擇器用於定位網頁中的元素並設置樣式。常見的選擇器包括：

• 元素選擇器：通過元素標籤名選中元素。例如：p、h1、div。
• 類選擇器：通過class屬性選中元素。例如：.red、.content。
• ID選擇器：通過id屬性選中元素。例如：#header、#footer。
• 偽類選擇器：用於指定特定狀態的元素。例如：a:hover、input:focus。
• 組合選擇器：將多個選擇器組合起來使用。例如：h1, h2、p.red。

/* 元素選擇器 */
p {
  color: #999;
}

/* 類選擇器 */
.title {
  font-size: 24px;
}

/* ID選擇器 */
#header {
  background-color: #f5f5f5;
}

/* 偽類選擇器 */
a:hover {
  color: #f00;
}

/* 組合選擇器 */
h1, h2 {
  font-family: 'Arial', sans-serif;
}

p.red {
  color: #f00;
}

四、盒模型

盒模型指HTML元素的呈現方式，每個元素都是一個矩形盒子。盒模型由4個區域組成，分別為：內容區域、內邊距區域、邊框區域和外邊距區域。

/* 盒模型 */
.box {
  width: 200px; /* 內容區域寬度 */
  padding: 20px; /* 內邊距 */
  border: 1px solid #333; /* 邊框 */
  margin: 10px; /* 外邊距 */
}

以上代碼中，.box元素的總寬度為242px（內容區域寬度200px + 內邊距20px + 左右邊框1px + 左右外邊距10px）。

五、層疊與繼承

CSS的層疊性指多個CSS樣式同時作用於同一元素時的優先順序判斷方式，繼承性則指某些屬性在未被顯式聲明時，會從父元素繼承相應的屬性值。

層疊順序為：瀏覽器默認設置 < 用戶樣式表 < 外部樣式表 < 內部樣式表 < 內聯樣式 < !important聲明。

繼承屬性包括：color、font、line-height、text-align等。如果某個屬性值並非可以繼承的，則可以使用inherit關鍵字來讓其從父元素繼承相應的屬性值。

/* 繼承 */
body {
  color: #333; /* 子元素繼承 */
  font-family: 'Arial', sans-serif; /* 子元素繼承 */
}

h1 {
  color: inherit; /* 從父元素繼承 */
}

/* 層疊 */
.box {
  background-color: #f5f5f5 !important; /* 最高優先順序 */
}

.box {
  background-color: #ccc; /* 此樣式失效 */
}

六、布局

CSS可以通過float、position和display屬性等來實現網頁布局。常見的布局方式包括：

• 普通流布局：默認的布局方式，元素按照它們在HTML中出現的順序依次排列。
• 浮動布局：通過float屬性將元素從容器中「浮出」，使得它們可以自由左右分布。
• 定位布局：通過position屬性對元素定位。
• 彈性布局：通過display: flex屬性實現子元素的靈活排列。

/* 浮動布局 */
.left {
  float: left;
  width: 50%;
}

.right {
  float: right;
  width: 50%;
}

/* 定位布局 */
.position {
  position: absolute; /* 相對於最近的定位元素定位 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 彈性布局 */
.flex-container {
  display: flex;
  justify-content: space-between; /* 子元素左右對齊 */
}

.flex-item {
  flex-basis: 20%; /* 子元素基礎寬度 */
}

七、響應式設計

隨著移動設備的普及，響應式設計已經成為了現代網頁設計的標配之一。CSS提供了媒體查詢（Media Queries）的功能，可以根據屏幕尺寸、設備類型等條件動態調整網頁的樣式和布局。

/* 媒體查詢 */
@media screen and (max-width: 768px) {
  .box {
    width: 100%; /* 屏幕寬度100% */
  }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
  .box {
    width: 50%; /* 屏幕寬度一半 */
  }
}

@media screen and (min-width: 992px) {
  .box {
    width: 33.33%; /* 屏幕寬度三分之一 */
  }
}

八、總結

CSS是網頁設計的重要組成部分，它可以使得網頁的外觀更加美觀、布局更加靈活。本文從CSS基本語法、選擇器、盒模型、層疊與繼承、布局和響應式設計等多個方面進行了詳細的介紹，希望能夠對初學者有所幫助。