一、 CSS简介
css（Cascading Style Sheets，缩写为 CSS，也叫作层叠样式表）是一套美化HTML标签所编写出页面的语法，CSS描述了如何在不同设备上渲染内容的方法。
二、 CSS基本引入方法
<!-- Cascading style shet:层叠样式表（CSS）
css引入方法 -->
<html lang="en">
<head>
<meat charset="UTF-8">
<title>CSS引入方法</title>
<!-- 2.页面级引入在style标签中编写 -->
<style type="text/css">
div {
Width: 100px;
Height: 100px;
Background-color: green;
}
</style>
<!-- 3.外部引入css文件
div{
Width:100px;
Height:100px;
Border-radius:50%;
Background-color:black;
}
将该内容保存为tp.css，在相对路径下，内容为宽高各100像素，形状是圆角形，背景颜色为黑色
在计算机中，同步和异步与生活中的正确理解是正好相反的，也就是说，生活中，两个人在同一时间吃饭是同步，而在计算机中，这个过程是叫做异步
-->
<link rel="stylesheet" type="text/css" href="tp.css">
</head>
<body>
<!-- 1.行间样式 style中的就是CSS代码-->
<div style="Width:100px;height:100px;Background-color:red;"></div>
</body>
</html>
三、CSS选择器
/* 1.通配符选择器 */
* {
margin: 0px;
padding: 0px;
/* !important表示优先使用 */
Background-color: red !important;
}
/* css选择器 2.id选择器 */
#only {
Background-color: red;
}
/* css选择器 3.CLASS选择器
背景颜色为绿色，class为demo的都加上该CSS
*/
.demo {
Background-color: green;
}
/* css选择器 4.标签选择器
设置字体颜色为橘色，font-weight设置字体为加粗 标签选择器表示所有div都采用该格式
*/
div {
Background-color: black;
Color: #f40;
Font-weight: bold;
}
/*css选择器 5.分组选择器 > 组合器选择前一个元素的直接子代的节点 */
div,
span,
p {
color: red;
}
/*css选择器 6.直接子代选择器 */
ul>li {
font-size: 20px;
}
/* css选择器 7.一般兄弟组合器 p ~ span 匹配同一父元素下，<p> 元素后的所有 <span> 元素 */
p~span {
color: #f40;
}
/* css选择器 8.紧邻兄弟选择器 h3 + p 会匹配紧邻在 h2 元素后的第一个 <p> 元素 */
h3+p {
color: #000;
}
/* css选择器 9.结构伪类选择器
first-child:查找第一个元素
last-child:查找最后一个元素
nth-child(n):查找第n个元素，第一个元素n为1
*/
p:first-child {
color: red;
}
/* css选择器 9.伪类选择器 */
a:hover {
color: #00f;
}
/* css选择器 10.属性选择器 '[ ]'可以选择任何有值得属性填入其中，调用这个css样式 也可以只给这个一个属性加上样式（id="ls"） */
[id] {
Background-color: blue;
}
/* css选择器 11.父子选择器/派生选择器 */
div span {
background-color: red;
}
四、 CSS优先级问题
选择器的优先级：
- !important > 内联样式 > id 选择器> class选择器 == 属性选择器 == 伪类选择器 > 标签选择器 > 通配符选择器
- 权重值越高优先级越大，多种选择器叠加使用可以通过权重值相加，从而得出最终的权重
- css权重是属于256进制，0到1之间隔了256位后才进的1
选择器 权重 优先级 !important Infinity(正无穷) 最高 内联样式 1000 第一 id选择器 100 第二 class、伪类、属性选择器 10 第三 标签选择器、伪元素选择器 1 第四 通用选择器、子选择器、一般兄弟选择器，紧邻兄弟选择器 0
五、寄语
1.css是前端重要的组成部分，学会css可以有很多的玩法；
2.多学习、多看、学想、多实操，成为更好的你；
3.喜欢的小伙伴可以点赞、关注、收藏哟！