1. 標籤 <style>
如果 HTML-元素有太多的樣式，那麼可以把它們移到專門的
元素中——標籤 style。它通常位於標籤 <head> 裡，長這樣：
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS 範例</title>
<style>
body {
background-color: lightgray;
}
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p>這是使用 style 標籤定義樣式的範例 <style>.</p>
</body>
</html>
現在可以不用在標籤
<body> 的屬性 style 裡寫長串樣式，
而是把它們移到標籤 style 中。這樣非常方便。
同樣適用於標籤 <p>（段落）。更重要的是，
在標籤 <head> 中定義的 <style>
樣式將被應用到文件中的所有段落，即使有好幾千段。這是因為在
<style> 標籤中，樣式是根據 選擇器
來定義的。
5.2 選擇器
選擇器是一種選擇 HTML 元素將應用 CSS 屬性的方式。存在不同類型的選擇器：
標籤選擇器
對所有特定類型的元素應用樣式。你只需要指定標籤名稱，然後用大括號包住樣式。
tagname {
// 樣式
}
tagname 可以是任何標籤：body, image, a, p, … 任何標籤
類別選擇器
也可以將 CSS 屬性不綁定到任何特定的標籤，而是為一組 CSS 屬性指定一個名稱。這樣的組在 CSS 中被稱為
類別。這種樣式適用於具有特定類別的所有元素。類別通過 HTML 的
class 屬性來指定。
</h1>
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p.important {
font-weight: bold;
}
</style>
</head>
<body>
<p class="important">這是重要的文字。</p>
<p>這是普通文字。</p>
</body>
</html>
在上面的例子中，只有第一個段落的文字會加粗，因為它有應用“important”樣式/類別。而第二個段落則沒有這種樣式。
在標籤 <style> 中描述樣式時，可以用以下 3 種方式定義：
- tagname { …}
- tagname.classname { …}
- .classname { …}
我們會在學習 CSS 時更詳細地研究選擇器。目前之所以提到它們， 是因為在 HTML 範例中會遇到 CSS，我經常會將它們移到 style 標籤中， 並通過選擇器為特定的 HTML 元素指定樣式。
GO TO FULL VERSION