CSS 介紹


CSS 是設計和美化網站外觀的最重要工具之一。 我們將教您基礎知識以及如何使用 CSS


CSS 可以改變 HTML 美感樣式



CSS 是我們用來設置網頁樣式的語言。


什麼是 CSS?



  • CSS 代表層疊樣式表
  • CSS 描述 HTML 元素如何在屏幕、紙張或其他媒體中顯示
  • CSS 節省了大量工作。它可以一次控制多個網頁的佈局
  • 外部樣式表存儲在 CSS 文件中



CSS 演示 - 一個 HTML 頁面 - 多種樣式!



在這裡,我們將展示一個帶有四種不同樣式表的 HTML 頁面。單擊下面的“樣式表 1”、“樣式表 2”、“樣式表 3”、“樣式表 4”鏈接以查看不同的樣式:



為什麼使用 CSS?



CSS 用於為您的網頁定義樣式,包括針對不同設備和屏幕尺寸的設計、佈局和顯示變化。
body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p {
font-family: verdana;
font-size: 20px;
}



CSS 解決了一個大問題



HTML 從未打算包含用於格式化網頁的標籤!

創建 HTML 是為了描述網頁的內容,例如:

<h1>這是一個標題</h1>

<p>這是一個段落。</p>

當<font> 和顏色屬性等標籤被添加到 HTML 3.2 規範中時,它開始了 Web 開發人員的噩夢。大型網站的開發,其中字體和顏色信息被添加到每個頁面,成為一個漫長而昂貴的過程。

為了解決這個問題,萬維網聯盟 (W3C) 創建了 CSS。

CSS 從 HTML 頁面中刪除了樣式格式!


CSS 節省了大量工作!



樣式定義通常保存在外部 .css 文件中。

使用外部樣式表文件,您只需更改一個文件即可更改整個網站的外觀!


CSS 語法



CSS 規則由選擇器和聲明塊組成。
CSS 介紹


選擇器指向要設置樣式的 HTML 元素。

聲明塊包含一個或多個用分號分隔的聲明。

每個聲明都包含一個 CSS 屬性名稱和一個值,以冒號分隔。

多個 CSS 聲明用分號分隔,聲明塊用花括號括起來。
p {
color: red;
text-align: center;
}



示例說明​​




  • p 是 CSS 中的一個選擇器(它指向要設置樣式的 HTML 元素:<p>)。
  • color是屬性,red是屬性值
  • text-align是屬性,center是屬性值


CSS 介紹