CSS的优点：
1‘ 内容和表现分离
2’ 网页结构统一可以实现复用
3‘ CSS文件可以独立于HTML使用
4’ 通过SEO容易被搜索引擎收录
CSS文件的三种导入方式：
优先级：就近原则
第一种：外部样式
在IDEA中，CSS文件建立方法，在文件夹上右键，新建file，然后在文件命名的时把后缀名改成 .css
在header中建立link或者style标签里通过url导入css文件，实现内容和表现分离
链接式：一起渲染出来
<link rel="stylesheet" href="xxx.css">
? 导入式：先显示框架再渲染
<style>
@import url("css/style.css");
</style>
第二种：行内样式
在HTML的body部分的标签元素中，编写一个style属性，编写样式
<xxx style="color:red;"></xxx>
第三种：内部样式
<style>
选择器
</style>
作用：选择页面上的某一个或某一类元素
优先级：id>class>标签
标签选择器
选中一类标签 标签{}
<head>
<style>
h1{}
</style>
</head>
<body>
<h1></h1>
<h1></h1>
<h1></h1>
</body>
类 选择器 class .class名{}
选择class属性一致的标签，可以跨标签
<head>
<style>
.zhangwenqing{}
</style>
</head>
<body>
<p class="zhangwenqing"></p>
</body>
id 选择器
id保持全局唯一 #id名{}
<head>
<style>
#zhangwenqing{}
</style>
</head>
<body>
<p id="zhangwenqing"></p>
</body>
body p{
background:red;
}
子选择器，一代，儿子
body>p{
background: aqua;
}
相邻兄弟选择器 同辈（
/*兄弟选择器:只有一个，相邻（向下）*/
.test + p{
background: chocolate;
}
通用选择器
/*通用兄弟选择器*/
.test~p{
background: blue;
}
/--选中标签的子标签--/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构伪类选择器</title>
<style>
选中了ul标签中li标签的第一个子标签
ul li:first-child{
background: #768e80;
}
选中了ul标签中li标签的最后一个子标签
ul li:last-child{
background: #8e5752;
}
选中了p标签的父标签的第二个子标签并判断它是否是p标签
p:nth-child(2){
background: #8e6d7a;
}
选中了p标签中第四个p类型的子标签
p:nth-of-type(4){
background: #8e3f3d;
}
</style>
</head>
<body>
<h1>标题1</h1>
<p>段落一</p>
<p>段落二</p>
<p>段落三</p>
<p>段落四</p>
<ul>
<li>行1</li>
<li>行2</li>
<li>行3</li>
<li>行4</li>
</ul>
</body>
</html>
像是class+id选择器，像是标签＋属性
=绝对等于
*=包含这个元素
$=以这个结尾
^=以这个结尾
标签[属性 统配符 条件]{}
例如：p[href^=xxx] 就是p标签中href属性值以xxx结尾的
? a[id] 是a标签中有id属性的
原文：https://www.cnblogs.com/fangpiandang/p/15208011.html