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 規則由選擇器和聲明塊組成。
選擇器指向要設置樣式的 HTML 元素。
聲明塊包含一個或多個用分號分隔的聲明。
每個聲明都包含一個 CSS 屬性名稱和一個值,以冒號分隔。
多個 CSS 聲明用分號分隔,聲明塊用花括號括起來。
p {
color: red;
text-align: center;
}
示例說明
p
是 CSS 中的一個選擇器(它指向要設置樣式的 HTML 元素:<p>)。color
是屬性,red
是屬性值text-align
是屬性,center
是屬性值