CSS(Cascading Style Sheets)层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化，能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
优先级：就近原则
在标签元素中编写一个style属性，编写样式即可。不符合结构与表现分离
<h1 style="color:red">标题</h1><style>
h1{
color:green;
}
</style>链接式
<link rel="stylesheet" href="../css/aa.css">导入式
<style>
@import url("../css/aa.css");
</style>选择页面上的某一个或者某一类元素
优先级不遵循就近原则，id选择器>clss选择器>标签选择器
选择一类标签
?标签名+{}
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
color: green;
}
</style>
</head>
<body>
<h1>标题1</h1>
<h1>标题2</h1>
</body>.+类名{}
?可以多个标签归类 是同一个class，可以复用
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hi{
color: green;
}
.hello{
color: aliceblue;
}
</style>
</head>
<body>
<h1 class="hi">标题1</h1>
<h1 class="hello">标题2</h1>
</body>ID必须保证全局唯一?
#id名称+{}
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#hi{
color: green;
}
#hello{
color: aliceblue;
}
</style>
</head>
<body>
<h1 id="hi">标题1</h1>
<h1 id="hello">标题2</h1>
</body>在某个元素的后面
<style>
body p{
background: blue;
}
</style>只有一代有效果
<style>
body>p{
background: blue;
}
</style>只有一个，相邻(向下)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>awa</title>
<style>
.active+p{
background: aqua;
}
</style>
</head>
<body>
<p class="active">2</p>
<p>3</p>
<ul>
<li>
<p>4</p>
</li>
<li>
<p>4</p>
</li>
</ul>
</body>
</html>只有3变色?
当前选中元素向下的所有元素
<style>
.active~p{
background: aqua;
}
</style>伪类： 条件
?ul的第一个子元素
<style>
ul li:first-child{
background: blue;
}
</style>ul的最后一个子元素
<style>
ul li:last-child{
background: bisque;
}
</style>id等于first的元素
=代表绝对等于
<style>
a[id="first"]{
background: blue;
}
</style>class中有link的元素
*=表示包含
<style>
a[class*="links"]{
background: blue;
}
</style>herf中以http开头的元素
^=表示以这个开头
<style>
a[herf^=http]{
background: blue;
}
</style>herf中以pdf结尾的元素
$=以这个结尾
<style>
a[herf$=pdf]{
background: blue;
}
</style>