web前端技術：HTML（結構）、CSS（外觀）、JavaScript（行爲）
CSS: 指層疊樣式表 (Cascading Style Sheets)
HTML引入CSS的三種方式：
- 外部樣式表（優先使用）
- 內部樣式表
- 內聯樣式表（除非特殊）
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css"/>
<style type="text/css">
h2 {
color:green;
}
</style>
</head>
<body>
<h1>外部樣式表</h1>
<hr/>
<h2>內部樣式表</h2>
<hr/>
<h3 style="color:gray;">內聯樣式表</h3>
</body>
</html>
style.css文件
h1 {
color:red;
}選擇器：選擇的方式
Id：唯一
class：不唯一
樣式：指的就是選擇器、屬性、屬性值
常用的選擇器：
- 元素（元素名）
- id （#id）
- class（.class名）
<html>
<head>
<style type="text/css">
h1 {
color:green;
}
#h2 {
color:red;
}
.h3_class {
color:gray;
}
</style>
</head>
<body>
<h1>元素選擇器</h1>
<hr/>
<h2 id="h2">id選擇器</h2>
<hr/>
<h3 class="h3_class">class選擇器</h3>
</body>
</html>可能還會用到的其他的選擇器
- 子元素選擇器（父選擇器 子選擇器)
- 相鄰選擇器（A選擇器+B選擇器)
- 羣組選擇器(A選擇器，B選擇器···)
<html>
<head>
<style type="text/css">
#f1 .p1 {
color:green;
}
#f2+div {
color:red;
}
#f2,h1 {
color:gray;
}
</style>
</head>
<body>
<h1>羣組選擇器</h1>
<div id="f1">
<p class="p1">子元素選擇器</p>
<p class="p2">段落</p>
</div>
<div id="f2">
<p class="p1">羣組選擇器</p>
<p class="p2">羣組選擇器</p>
</div>
<div>
<p>相鄰選擇器</p>
</div>
</body>
</html>
