一.引入样式
1.行内样式表
<h1 style="color: red;font-size: 18px;">10-30</h1>
2.内部样式表(在head标签里面,title标签下面)
<style type="text/css">
h2{
color: yellow;
font-size: 20px;
}
</style>
3.外部样式表
链接式
<link href="../css/index.css" rel="stylesheet" type="text/css"/>
导入式
<style type="text/css">
@import "../css/index.css";
</style>
导入式和链接式区别
1.<link/>标签属于XHTML，@import是属于CSS2.1
2.使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示
3.使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
4.4.@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的
4.样式优先级
行内>内部>外部
就近原则
二.基本选择器
1.标签选择器(通过标签名称定位)
h2{
color:red;
}
2.类选择器(通过标签中class属性的值定位，值可以重复，不能以数字开头)
.class01{
color:red;
}
<h1 class="class01">类选择器</h1>
3.ID选择器(通过标签中id属性的值定位，值不可以重复，不能以数字开头)
#id01{
color: red;
}
<h2 id="id01">10-30</h2>
4.基本选择器的优先级
不遵循就近原则，无论哪一种样式表的导入，都遵循：id选择器>类选择器>标签选择器
三.高级选择器
1.层次选择器
1.后代选择器
li p{
background-color: yellow;
}
2.子代选择器
body>p{
background-color: aqua;
}
3.相邻兄弟选择器
.class01+p{
background-color: red;
}
4.通用兄弟选择器
.class01~p{
background-color: blue;
}
初始CSS
原文地址：https://www.cnblogs.com/xiao-ran/p/9878548.html