一.样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 内部样式 -->
<!-- <style>
h1{
color: red!important;
}
h2{
color: blue;
}
</style> -->
<!-- 外部样式引入 -->
<!-- <link rel="stylesheet" type="text/css" href="04.css"/> -->
<!-- <style>
@import url(04.css);
</style> -->
<!-- link和import引入的区别
1.本质的差别：link宿儒XHTML标签，而@import完全是css提供的一种方式
2.加载顺序的差别：当一个页面被加载的时候(就是被浏览着浏览的时候).link引用的css会同时被加载，
而@import引用的css会等到页面全部被下载完成在被加载，所以有的时候浏览@import加载的css的页面时
开始会没有样式（就是闪烁），网速慢的时候还挺明显
3.兼容性的差别，@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上才能识别，而link标签无此问题
-->
<!-- 样式表的优先级 !important>行内>内部>外部 -->
</head>
<body>
<!-- 行内样式 -->
<h1 style="color: red;">11111</h1>
<h2 style="color: red!important;">22222</h2>
<h3>33333</h3>
</body>
</html>
二.选择器
为什么要用选择器？
要使用css对html页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到css选择器
1.标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 元素选择符/类型选择符 例如： div{ background-color: red;}
语法：元素名称{属性:属性值} 例如：div,h1,img,a,span,i,em,strong....等
说明：
a.元素选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符 例如：div,h1,img,a,span,i,em,strong....等
b.所有页面元素都可以作为选择符
用法：
1.如果想改变某个元素的默认样式时，可以使用类型选择符 例如改变一个div的样式
2.当统一文档某个元素的显示效果时，可以使用类型选择符 例如改变文档所有p段落的样式
-->
<style>
div{
background-color: red;
}
</style>
</head>
<body>
<div>111</div>
</body>
</html>
2.类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- class选择器/类选择器
语法：.class名{属性：属性值}
说明：
a.当我们使用class选择符时，应先为每个元素定义一个class名称
b.class选择符的语法格式是：如 <div class="top">111</div>
.top{ background-color: green;}
用法：class选择符更适合定义一类的样式
-->
<style>
.top{
background-color: green;
}
</style>
</head>
<body>
<div class="top">111</div>
</body>
</html>
3.id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 语法：#id名{属性：属性值}
说明：
a.当我们使用id选择符时，应该为每个元素定义一个id属性，例如：<div id="box"></div>
b.id选择符的语法格式是#加上自定义的id名 比如 #box{color: red;}
c.起名时要取英文名，不能用关键字（所有的标记和属性都是关键字）
d.一个id名称只能对应文档中一个具体的元素对象（唯一性）
-->
<style>
#box{color:blue;}
</style>
</head>
<body>
<h1 id="box">11111</h1>
</body>
</html>
4.通配符选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
/* 外边距 */
margin: 0;
/* 内边距 */
padding: 0;
}
</style>
</head>
<body>
<h1 >11111</h1>
</body>
</html>
5.群组选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* div{
background-color: yellow;
}
p{
background-color: yellow;
}
h1{
background-color: yellow;
} */
/* 群组选择器 */
/* div,p,h1{
background-color: yellow;
} */
/* .box,p,h1{
background-color: green;
} */
</style>
</head>
<body>
<div class="box">111</div>
<p>11111111</p>
<h1>1111111</h1>
</body>
</html>
5.后代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 后代选择器，包含选择器 */
/* div .box{
background-color: green;
} */
div p{
background-color: green;
}
</style>
</head>
<body>
<div >111
<p>11111111</p>
</div>
<p>11111111</p>
</body>
</html>
6.伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 伪类选择器
语法：
a:link{属性：属性值;}超链接初始状态
a:visited{属性：属性值;}超链接被访问状态
a:hover{属性：属性值;} 鼠标划过超链接状态
a:active{属性：属性值;}超链接被激活状态
link--visitied--hover--active。
说明：
a.当这四个超链接伪类选择符联合使用时，应注意他们的顺序为正常顺序link--visitied--hover--active。
错误的顺序有时会使超链接的样式失效
b.为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中
/* 表示超链接的初始和访问过后的状态一样，鼠标划过去的状态和点击时的状态一样
a{
color: red;
}
a:hover{
color: yellow;
} */
-->
<style>
/* 初始状态 */
a:link{
color: yellow;
}
/* 被访问状态 */
a:visited{
color: red;
}
/* 鼠标划过超链接状态 */
a:hover{
color: orange;
}
/* 超链接被激活状态 */
a:active{
color: green;
}
</style>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">baidu</a>
</body>
</html>
<!-- 选择器的权重
当多个选择器，选中同一个元素，且都为他们定义了样式，如果属性发生冲突了，会选择权重高的来执行
!important权重>行内样式权重>id选择器权重>class选择器>元素选择器权重
包含选择器的权重为包含选择符的权重之和
css选择器权重解析规则：
1.当不同选择符的样式设置有冲突的时候，高权重选择符的样式会覆盖低权重选择符的样式
2.相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符样式
-->
