一.概述
css一共有三种样式，分别是：行内样式，内部样式，外部样式
行内样式：写入在HTML标签内，是最不规范的写法，没有突出HTML+CSS的关键就是骨架和美化分离，这样写在一起的行内样式，代码的复读性也很低，所以一般不建议使用
内部样式：一般写在头部标签中，代码可读性比较高，不适合大量的css样式的写入
外部样式：单独建一个stylesheet文件用来专门控制样式，适用于大量的css样式写入，文件后缀.css
测试：
HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的三种导入方式</title>
<!--外部样式-->
<link rel="stylesheet" href="/CSS/frist.css">
<!--内部样式-->
<style type="text/css">
h1{
color: orange;
}
</style>
</head>
<body>
<!--行内样式-->
<h2 style="color: red">hello，world！</h2>
</body>
</html>
CSS样式：
/*外部样式*/
h1{
color: blue;
}
注意：
对于样式生效的优先级，行内样式始终处于最高级
内部样式和外部样式则采用就近原则的规律来生效，指的就是那个样式离对应的HTML标签近，那个css就生效，也可以理解为内部样式和外部样式谁在下面谁就生效
外部样式的两种导入方式：
HTML中的<link>标签
css2.1特有的@import （）导入，这个导入必须嵌入<style>标签中
<link rel="stylesheet" href="CSS/frist.css">
<style>
@import url("CSS/frist.css");
</style>
二.选择器
一般有三种基础选择器：
标签选择器 h1{
}，
类选择器 .class类名{
}，
id选择器 # i d名{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
/*标签选择器*/
h1{
color: red;
}
/*类选择器*/
.abandon{
color: orange;
}
/*id选择器*/
#oop{
color: khaki;
}
</style>
</head>
<body>
<h1>标签选择器</h1>
<h1 class="abandon">类选择器</h1>
<h1 id="oop">id选择器</h1>
</body>
</html>
注：
当三种基础选择器撞到一起的时候，我们的优先级就不再是就近原则了；
选择器的优先级就是很明显的顺序：id选择器 > 类选择器 > 标签选择器
在这其中：
id选择器必须全局唯一
三.层次选择器
后代选择器：空格隔开
body h1{
}
子选择器：后面一代有变化
body>p{
}
相邻兄弟选择器：（相邻的才会有效）
.acj + p{
}
通用选择器：（通用兄弟选择器）
.ach~p{
}
标签：样式,标签,HTML,css,选择器,CSS From： https://www.cnblogs.com/5ran2yl/p/17259627.html