本文已参与「新人创作礼」活动，一起开启掘金创作之路。
一.CSS介绍和基本使用
1.CSS基本概念
css即层叠样式表(Cascading Style Sheets)，是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
2.使用方法
1）行内样式：在行内标签内，通过style属性,以键值对的方式引入属性
2）内部样式：在head头部里引入style样式
3）外部样式：使用外部 .css 文件，通过link标签引入进来
具体引用方法如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--3）外部样式：外部引入CSS样式 使用link标签引入-->
<!-- （1）rel="stylesheet"表示引入的是一个CSS文件-->
<!-- （2）href=""里面传入相对路径，不要去传绝对路径，同层级的情况下只需要写文件名就行-->
<link rel="stylesheet" href="01CSS介绍和基本使用.css">
<!-- 内部样式-->
<!-- <style>-->
<!-- p{-->
<!-- color: greenyellow;-->
<!-- }-->
<!-- </style>-->
</head>
<body>
<!--1.CSS引用方式-->
<!--1）行内样式-->
<!--在行内标签内，通过style属性,以键值对的方式引入属性-->
<!--<p style="color: #63c7f9">你是一个果子</p>-->
<!--2）内部样式
在head头部里面引入style标签-->
<p>你是一个果子</p>
</body>
</html>
二.CSS选择器
1.基本介绍
1）选择器的作用：给指定的元素设置样式，能够更加精准
2）选择器种类：标签选择器、ID选择器、class选择器、兄弟选择器、后代/子代选择器、复杂选择器、伪类选择器
3）选择器权重：当出现冲突样式的时候，权重大的样式才会生效。id选择器>class选择器>标签选择器
（1）先介绍一些基本的选择器：class选择器、id选择器、群组选择器、全选选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器 */
/*p{*/
/* color: skyblue;*/
/*}*/
/*1.class选择器:来选择改变对应标签的样式*/
/*1）对应标签中首先设置class标识 通过.标识 如.p1{样式颜色} 对应标签的样式就会改变没有设置的就是p标签设置的颜色*/
/*2）多个class的名称可以一样，但是每个标签的id是唯一的*/
/* .p1{*/
/* color: red;*/
/* }*/
/*2.id选择器*/
/*1)通过#标识来表示选择的是id选择器*/
/* #p2{*/
/* color:green;*/
/* }*/
/*3.群组选择器:可以更改多个标签样式，中间用逗号隔开*/
/* 1）可以放id选择器，class选择器，标签名*/
/* p,#p2,div,span{*/
/* color: deeppink;*/
/* }*/
/*4.全选选择器:用*来表示*/
*{
color: #2f4b9e;
}
</style>
</head>
<body>
<p class="p1" id="p2">你是一个果子</p>
<p class="p1">今天天气真好</p>
<div>不忘初心</div>
<span>方得始终</span>
</body>
</html>
<!--1.在实际代码过程中，实际CSS代码和HTML代码是分开的
因为代码一多，页面就容易混乱，所以行内样式就用的比较少，一般都是用外部样式，也有一部分是内部样式-->
<!--2.权重比较：id>class>标签名-->
（2）层次选择器：包括子代选择器、后代选择器、兄弟选择器、相邻选择器、属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*1.子代选择器:用>表示子代，只有div下面的span 才会变颜色,p标签里面包含的span标签就不会变颜色*/
/*div>span{*/
/* color: orangered;*/
/*}*/
/*2.后代选择器：中间用空格隔开，div下面的所有span都会变颜色*/
/*div span{*/
/* color: #ff00ef;*/
/*}*/
/*3.兄弟选择器~：p1下面的p标签都会加上颜色，上面的不会，因为代码是从上往下执行的*/··
/*#p1~p{*/
/* color: #63c7f9;*/
/*}*/
/*4.相邻选择器+：只有相邻的才会加上颜色，如果中间隔了一个标签（无论什么标签），就不会加上颜色*/
/*#p1+p{*/
/* color: red;*/
/*}*/
/*5.属性选择器*/
p[name='p2']{
color: red;
}
</style>
</head>
<body>
<div>
<p>别跟我说晚上需要节食</p>
<p id="p1">我是工具人p</p>
<p>我以前很瘦，未来也会很瘦
<span>如果夜里不需要吃东西</span>
</p>
<p name="p2">不忘初心，方得始终</p>
<span>为什么冰箱里面会有灯</span>
<p>不忘初心，方得始终</p>
</div>
</body>
</html>
<!--利用选择器创建盒子的快捷方式-->
<!--1.div#box>div*3：创建一个div,里面id属性是box，然后里面包含三个小div-->
<!--2.div.box>div*3：创建一个div，里面的class属性是box，然后里面包含三个小div-->
（3）伪类选择器：伪类选择器有四种状态:link、hover、active、visited
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*1.未访问时的状态:点击完后就会变成原来的蓝色，这时候要在浏览器的更多工具里面清除浏览器数据，才能恢复黑色*/
a:link{
color: black;
}
/*2.鼠标悬浮状态*/
a:hover{
color: #63c7f9;
}
/*3.鼠标激活时状态*/
a:active{
color: red;
}
/*4.访问过后的状态*/
a:visited{
color: greenyellow;
}
</style>
</head>
<body>
<!--a标签不做跳转，传一个#-->
<a href="#">点我试试</a>
</body>
</html>
