1.概述
CSS全名是cascading style sheets,中文名层叠样式表。
用于定义网页样式和布局的样式表语言。
通过 CSS，你可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式，从而实现更精确的页面设计。
HTML与CSS的关系：HTML相当于毛坯房，CSS是装修。
CSS 通常由选择器、属性和属性值组成，多个规则可以组合在一起，以便同时应用多个样式
- 选择器的声明中可以写无数条属性
- 声明的每一行属性，都需要以英文分号结尾;
- 声明中的所有属性和值都是以键值对这种形式出现的;
CSS三种导入方式：
1.内联样式（Inline Styles）
2.内部样式表（Internal Stylessheet）
3.外部样式表（External Stylesheet）
三种导入方式的优先级：内联样式>内部样式表>外部样式表
内联样式：
<head><link rel="stylesheet" href="style.css"><style>h2{color: red;font-size: 30px;}</style>
</head>
<body>
<h1 style="color: yellowgreen;">这是一个内联样式</h1>
<h2>二级标题标签，应用内部样式</h2>
<h3>三级标题标签,使用外部样式</h3>
</body>
style.css
h3{color: aqua;font-size: 20px;
}
效果：
2.选择器
选择器是 CSS中 的关键部分，它允许你针对特定元素或一组元素定义样式
(1)元素选择器
<head><style>h1{color: red;font-size: 30px;}</style>
</head>
<body>
<h1>这是一个元素选择器</h1>
</body>
（2）类选择器
<head><style>.highlight {color: red;font-size: 30px;}</style>
</head>
<body>
<h1 class="highlight">这是一个类选择器</h1>
</body>
（3）id选择器
<head><style>#unique {color: blue;font-size: 25px;}</style>
</head>
<body><h2 id="unique">这是一个ID选择器</h2>
</body>
（4）通用选择器
<head><style>* {font-family: KaiTi;font-size: 20px;color: green;}</style>
</head>
<body><h2 id="unique">这是一个ID选择器</h2><p>这是一个简单的HTML示例1。</p><p>这是一个简单的HTML示例2。</p>
</body>
（5）子元素选择器
<head><style>.father > .son {color: yellow;font-size: 20px;}</style>
</head>
<body><div class="father"><p class="son">这是一个子元素选择器</p></div>
</body>
（6）后代选择器
<head><style>.father .grandson {color: orange;font-size: 10px;}</style>
</head>
<body><div class="father"><p class="son">这是一个子元素选择器</p><div><p class="grandson">这是一个后代选择器</p></div>
</body>
（7）兄弟选择器
<head><style>h3 + p {color: pink;font-size: 18px;}</style>
</head>
<body><p>这是一个普通的标签</p><h3>这是相邻兄弟选择器示例</h3><p>这是另一个P标签</p>
</body>
（8）伪类选择器
伪类是用来添加一些选择器的特殊效果。
如链接的不同状态都可以以不同的方式显示
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
注意：伪类的名称不区分大小写。
<head><style>#element:hover{background-color: lightblue;}</style>
</head>
<body><p id="element">这是一个伪类选择器</p>
</body>
