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>
