层贴样式表：就是给HTML标签添加样式的，让它变得更加的好看。
css的语法结构
选择器 {
属性1:值1;
属性2:值2;
属性3:值3;
属性4:值4;
}
css的四种引入方式
1、嵌入式
<style>
h1 {
color:red;
}
</style>
2、外链式（最正规的方式，解耦合）
<link rel="stylesheet" href="mycss.css">
3、导入式（了解）
<style>
@import url("mycss.css");
</style>
4、行内式
<p style ="color:red;font-size:50px">你好呀</p>
css选择器
1、基本选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id选择器*/
#d1 {
color:greenyellow; /*id为d1的标签，文本颜色变成绿黄色*/
}
/*类选择器*/
.c1 {
color: red; /*class为c1的标签，文本颜色变成红色*/
}
/*标签选择器*/
span {
color:blue; /*所有span标签文本颜色变成蓝色*/
}
/*通用选择器*/ /*所有标签的文本颜色变成绿色*/
* {
color: green;
}
</style>
</head>
<body>
<div id="d1" class="c1 c2">div
<p>div里面的p</p>
<span>div里面的span</span>
</div>
<p id="d2" class="c1 c2">ppp</p>
<span id="d3" class="c2">span111</span>
<span id="d4" class="c3">span222</span>
</body>
2、组合选择器
在前端我们将标签的嵌套用亲戚关系来表述层级
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后代选择器*/
div span {
color: red;
}
/*儿子选择器*/
div>span {
color: blue;
}
/*毗邻选择器（同级别紧挨者的下面第一个）*/
div+span {
color: orange;
}
/*弟弟选择器（同级别下面所有的span）*/
div~span {
color: greenyellow;
}
</style>
</head>
<body>
<div>div
<p>div p</p>
<p>div p
<span>div p span</span>
</p>
<span>span</span>
<span>span</span>
</div>
<span>span</span>
<span>span</span>
</body>
3、交集选择器与并集选择器
**交集选择器**：给所有选择器选中的标签中，相交的那部分标签设置属性
**并集选择器**：给所有满足条件的标签设置属性
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*交集选择器，除了a链接（要单独设置）*/
div.box1 {
color: red;
}
/*并集选择器*/
div,a,h1 {
color: green;
}
</style>
</head>
<body>
<div class="box1">
<p>11111</p>
<a href="#">点我啊</a>
<p>2222</p>
</div>
<a href="#">点我啊</a>
<h1 class="box1">哈哈哈哈</h1>
</body>
4、序列选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*同一阶级下的第一个标签是p标签，文本颜色变成黄色*/
p:first-child {
color: yellow;
}
/*同一阶级下的最后一个标签是p标签，文本颜色变成红色*/
p:last-child {
color: red;
}
/*同一阶级下的第3个标签是p标签，文本颜色变成橘色（自定义）*/
p:nth-child(3) {
color: orange;
}
/*同一类型下的第一个p标签，文本颜色变成蓝色*/
p:first-of-type {
color:blue;
}
/*同一类型下的第二个p标签，文本颜色变成绿色（自定义）*/
p:nth-of-type(2) {
color: green;
}
</style>
</head>
<body>
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<div>
<hr>
<p>我是段落6</p>
<p>我是段落5</p>
</div>
</body>
5、属性选择器
属性选择器是以[ ]作为标志的
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
[username] { /*将所有含有属性名是username的标签背景色变成红色*/
background-color: red;
}
[username="jason"] { /*找到属性名是username，属性值是jason的标签字体颜色变成橘黄色*/
color: orange;
}
input[username="jason"] { /*找到属性名是username，属性值是jason的input标签背景色变成黑色*/
background-color:black;
}
</style>
</head>
<body>
<input type="text" username>
<input type="text" username="jason">
<input type="text" username="kevin ">
<p username="tank">坦克老师</p>
<div username="egon">矮子老师</div>
<span username="jason">杰森斯坦森</span>
</body>
6、伪类选择器
6.1、a链接原始的样式
a:link {
color:blue;
}
6.2、鼠标悬浮在元素上样式
a:hover {
background-color:red;
}
6.3、鼠标点击过a链接并松开的样式
a:visited {
color:gray;
}
6.4、鼠标点击不松开的样式
a:active {
color:green;
}
6.5、input输入框获取聚焦时的样式
input:focus {
outline:none;
background-color:blue;
}
示例
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link {
color: red;
}
a:hover {
color: green;
}
a:visited {
color: orange;
}
a:active {
color: blueviolet;
}
input:focus {
outline: none;
background-color: blue;
}
</style>
</head>
<body>
<a href="https://wwww.baidu.com">点击我</a>
<input type="text">
</body>
7、伪元素选择器
常用的伪元素
7.1、first-letter:杂志类文章首字母样式调整
p:first-letter {
font-size:40px;
}
7.2、before:用于在元素的内容前面插入新内容
p:before {
content:"你好";
color:red;
}
7.3、after:用于在元素的内容后面插入新内容
p:after {
content:"你好";
color:red;
}
css三大特性
1、继承性
定义：给某一个元素设置一些属性，该元素的后代也可以使用，这个我们就称之为继承性
注意：
1、只有以color、font-、text-、line-开头的属性才可以继承
2、a标签的文字颜色和下划线是不能继承别人的
3、h标签的文字大小是不能继承别人的，会变大，但是会在原来字体大小的基础上变大
应用场景：
通常基于继承性统一设置网页的文字颜色，字体，文字大小等样式
2、层叠性
定义：CSS全称：Cascading StyleSheet层叠样式表，层叠性指的就是CSS处理冲突的一种能力，即如果有多个选择器选中了同一个标签那么会有覆盖效果
3、优先级
定义：当多个选择器选中同一个标签，并且给同一个标签设置相同的属性时，如何层叠就由优先级来确定
https://www.cnblogs.com/linhaifeng/articles/9005117.html
