CSS（Cascading Style Sheets）是一種語言，用於確定Web頁面上的樣式和布局。通過將CSS與HTML結合使用，您可以使網站呈現出美觀和專業的外觀。本文將從基礎知識到高級技巧，介紹如何給HTML元素添加CSS樣式。

一、基本CSS語法

CSS由3個不同的部分組成：選擇器，屬性和值。選擇器指的是要應用樣式的HTML元素。屬性定義要應用的樣式屬性（color，font-size等）。值指屬性的值。

/* 選擇器 {屬性: 值;} */
h1 {color: red;}
p {font-size: 16px;}

二、內嵌樣式表

內嵌樣式表是寫在HTML文件頭中的樣式表。它只適用於當前的HTML文件。

  
  
    h1 {color: red;}
    p {font-size: 16px;}
  


  
標題
  
文本內容

三、外部樣式表

外部樣式表是包含在外部文件中的樣式表。它適用於多個HTML文件，以及具有相同風格的整個網站。

/* style.css */
h1 {color: red;}
p {font-size: 16px;}

/* index.html */



  
  


  
標題
  
文本內容

四、類選擇器和ID選擇器

類選擇器用於針對一組具有相同類的HTML元素應用樣式。ID選擇器用於選擇一個唯一的HTML元素。

/* .class {屬性: 值;} */
.text-red {color: red;}

/* #id {屬性: 值;} */
#header {font-size: 24px;}

五、偽類和偽元素選擇器

偽類和偽元素選擇器用於選擇HTML元素的特定狀態或位置，例如鼠標懸停或插入內容。

/* :hover 用於選擇鼠標懸停的元素 */
a:hover {color: blue;}

/* :before 插入內容之前 */
p:before {content: "- ";}

六、繼承

繼承是指子元素繼承其父元素的某些樣式屬性。例如，如果body元素的字體大小為16像素，那麼子元素（如p和h1）的字體大小也將為16像素。

七、優先級

當多個CSS規則應用於同一個HTML元素時，瀏覽器將決定哪個樣式更具有「優先權」。通常，ID選擇器具有最高的優先權，其次是類選擇器，然後是標籤選擇器。

/* #header 比 h1 更具優先權 */
#header h1 {color: red;}

八、總結

本文介紹了如何使用CSS樣式表來給HTML元素添加樣式。從基礎語法，到內嵌，外部樣式表，類選擇器和ID選擇器，偽類和偽元素選擇器，繼承和優先級。通過這篇文章，您應該已經掌握了如何使用CSS為您的網站添加美麗的風格和布局。