html页面中引入css的方式
1.内联样式：在标签style中引入css样式
<div class="box">
<h1 style=color:red;font-size:50px;>这是一个善良的h1</h1>
</div>
2.内部样式：通过style标签引入CSS
<style type="text/css">
h1{color: purple; background-color: green;}
</style>
</head>
<body>
<h1>这是标题 1</h1>
</body>
3、外部样式：通过link标签引入外部css样式文件
/*style.css*/
h1{
color: purple;
background-color: green;
}
<link rel="stylesheet" href="first.css">
<body>
<h1>这是标题 1</h1>
</body>
优先级（多种引入方式操作同一个标签，以哪个为准）
- 内联优先级最高
- 内部和外部同时存在，则就近原则
- 标签默认效果优先级最低
选择器
1、标签名选择器：通过标签的名称找到指定标签
格式：元素名{ }
<style type="text/css">
h1{color: purple; background-color: green;}
</style>
</head>
<body>
<h1>这是标题 1</h1>
</body>
2、类选择器：通过标签的class属性值选中指定标签,多个标签可以有相同的class值
格式：.d1{ }
<style>
.demo{
color:red;
font-size:50px
}
</style>
</head>
<body>
<h1 class="demo">这是标题 1</h1>
</body>
3、id选择器：通过id找到标签，一个html文件中id不能重复
格式： #id{}
<style>
#demo{
color:red;
font-size:50px
}
</style>
</head>
<body>
<h1 id="demo">这是标题 1</h1>
</body>
4、派生选择器（后代选择器）：类似于路径，找到符合要求的标签，会匹配所有的后代标签
格式： ul li a{} #id li a{}
<style>
div .demo{
color:red;
font-size:50px
}
</style>
</head>
<body>
<div>
<h1 class="demo">这是标题 1</h1>
</div>
</body>
5、子元素选择器：和后代类似，但是只能获得子元素
格式： ul>li>a{}
<style>
div h1{
color:red;
font-size:50px
}
</style>
</head>
<body>
<div>
<h1 class="demo">这是标题 1</h1>
</div>
</body>
6、分组选择器：可以将多种选择器结合到一起使用，用来统一设定样
格式: h1,h2,#abc,.m{ }
<style>
div,h1,h2{
color:red;
font-size:50px
}
</style>
</head>
<body>
<div>
<h1 class="demo">这是标题 1</h1>
</div>
<div>
<h2 class="demo">这是标题 1</h1>
</div>
</body>
7、伪元素选择器：伪元素选择器选择的是元素的状态，状态分为以下几种：
- link 表示元素未被点击时的状态
- hover 表示鼠标悬停时的状态
- active 表示元素被点击时的状态
- visited 表示元素被点击后的状态
格式： #id:hover{ }
查看代码
<html>
<head>
<style type="text/css">
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>
</head>
<body>
<p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p>
<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p>
<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p>
</body>
</html>