CSS 基本語法

3.1 規則 (Rules)

CSS 的主要元素包括規則 (rules)、屬性 (properties) 和值 (values)。了解 CSS 的基本語法是創建吸引人且實用的網頁的關鍵。

CSS 的主要元素：

• 規則 (Rules)
• 選擇器 (Selectors)
• 屬性 (Properties)
• 值 (Values)

規則 (Rules)

CSS 規則由選擇器和聲明塊組成。選擇器指定樣式將應用於哪些 HTML 元素，而聲明塊包含一個或多個屬性及其值。通常，它由一個或多個屬性和值組成，並用大括號 {} 包括。

例子：

    
      selector {
        property: value;
        property: value;
      }
    
  

標題的例子：

    
      h1 {
        color: blue;
        font-size: 24px;
      }
    
  

在這個例子中，h1 是選擇器，color 和 font-size 是屬性，而 blue 和 24px 是這些屬性的值。

3.2 屬性和值

CSS 提供了廣泛的屬性集來控制元素的外觀。每個屬性都有一個或多個值，它們決定了該屬性將如何應用。

主要屬性及其值：

顏色和背景：

• color: 設置文字顏色
• background-color: 設置元素的背景色

例子：

    
      div {
        color: red;
        background-color: yellow;
      }
    
  

字體：

• font-family: 定義字體系列
• font-size: 設置字體大小
• font-weight: 定義字體的粗細

例子：

    
      h1 {
        font-family: 'Georgia', serif;
        font-size: 36px;
        font-weight: bold;
      }
    
  

文本：

• text-align: 對齊元素內的文本
• text-decoration: 添加文本效果，如下劃線

例子：

    
      a {
        text-align: left;
        text-decoration: none;
      }
    
  

內外邊距和邊框：

• margin: 設置元素周圍的外邊距
• padding: 設置元素內部的內邊距
• border: 定義元素的邊框

例子：

    
      .container {
        margin: 0 auto;
        padding: 20px;
        border: 2px solid #000000;
      }
    
  

尺寸和位置：

• width 和 height: 設定元素的寬度和高度
• position: 定義元素的定位方式

例子：

    
      .box {
        width: 200px;
        height: 100px;
        position: absolute;
        top: 50px;
        left: 100px;
      }
    
  

你需要做的是：

• 記住標準元素的屬性
• 記住這些屬性的標準值
• 記住不同元素的獨特屬性
• 記住這些屬性如何實際運作
• 記住這些屬性如何相互影響

最好的方式是通過練習來做到這一點——寫很多 CSS 並觀察其效果。