CSS 入門：設計網頁樣式

CSS（層疊樣式表）是網頁設計的基石。它允許您控制網站的外觀和感覺，從顏色字體到佈局和動畫。

1.CSS是什麼？

CSS 是一種用來描述 HTML 文件呈現方式的語言。它定義了 HTML 元素在螢幕、紙張或其他媒體上的顯示方式。

2. 基本語法

CSS 規則由選擇器和宣告區塊組成：

selector {
  property: value;
}

例如：

body {
  background-color: lightblue;
}

這會將頁面的背景顏色變更為淺藍色。

3. 選擇器

選擇器可讓您針對特定的 HTML 元素來套用樣式。您可以透過以下方式選擇元素：

• 類型：p {} 定位所有段落。
• 類別：.my-class {} 定位類別為「my-class」的元素。
• ID：#my-id {} 定位 ID 為「my-id」的元素。

4. 盒子模型

每個 HTML 元素都可以被認為是一個盒子，由以下部分組成：

• 內容：裡面的實際文字或媒體。
• 填滿：內容與邊框之間的空間。
• 邊框：元素周圍的輪廓。
• Margin：邊框外的空間，分隔元素。

5. 通用屬性

顏色：顏色：紅色；更改文字顏色。

• 字體：字體大小：16px；設定文字大小。
• 背景：背景顏色：淺灰色；改變背景顏色。
• 寬度/高度：寬度：100%；高度：200px；定義元素尺寸。

6.響應式設計

使用媒體查詢讓您的網頁在所有裝置上看起來都不錯。例如：

@media screen and (max-width: 600px) {
  body {
    background-color: lightyellow;
  }
}

當螢幕寬度為 600 像素或更小時，背景顏色將變更為淺黃色。

以上是CSS 入門：設計網頁樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！