CSS（Cascading Style Sheets）是一種樣式表語言，用來描述HTML或XML文件的呈現方式。CSS 能夠幫助我們控制網頁的佈局、顏色、字體等視覺元素，使網頁更加美觀且功能豐富。
CSS 的核心概念之一是"選擇器"（Selectors）。選擇器定義了哪些HTML元素會被特定的CSS規則所影響。例如，我們可以指定所有的<h1>標籤使用特定的字型和顏色。
CSS 文件通常包含以下結構：
color），值是您希望應用於屬性的設定（如red）。p、div。.menu將選擇所有具有class="menu"的HTML元素。#header將選擇具有id="header"的元素。[type="text"]將選擇所有type屬性為text的元素。:hover、:focus。*來選擇所有元素，但在日常中需要小心使用，避免造成不必要的麻煩。複合選擇器可以結合多種簡單選擇器來達成更精確的選擇效果，這在CSS中非常有用：
div + p會選擇所有直接跟在<div>後面的<p>元素。h1 ~ p會選擇所有在<h1>後面的同層<p>元素。ul > li會選擇所有直屬於<ul>的<li>元素。div p會選擇所有位於<div>元素內部的<p>元素。CSS3 是CSS技術的最新版本，它引入了更多的選擇器和新特性，如動畫、多列布局等，強化網頁設計的各種可能性。
將樣式直接在HTML中指定
<p style="color: blue;">這是一段藍色的文字。</p>
在HTML中使用<style>標籤作為樣式區塊
<!DOCTYPE html>
<html>
<head>
<style>
p { color: red; }
</style>
</head>
<body>
<p>這是一段紅色的文字。</p>
</body>
</html>
引入外部的CSS資料
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>這是一段使用外部CSS樣式的文字。</p>
</body>
</html>
而styles.css中可能包含這樣的指定方法
p {
color: red;
}
學習CSS就像學習烹飪一樣，掌握了基本的調味技巧後，你的網頁不再是味同嚼蠟的白飯，而是色香味俱全的大餐。當你已經具備這些基礎，代表你已經跨出了第一步！
iThome鐵人賽
看影片追技術