大连网站开发公司电话东莞网络公司网络推广
一.复合选择器：
定义：
由两个或多个基础选择器通过不同的方式组合而成
作用：
更准确，高效地选择目标元素（标签）
（1）.后代选择器：
作用：
选中某元素的后代元素
写法：
父级选择器 子选择器(CSS属性)简单案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>div span {color: blue;}
</style>
</head>
<body><!-- 在本案例中我们控制后代选择器选择只改变在div中的span的颜色 --><span>span标签</span><div><span>后代选择器</span></div>
</body>
</html>
注意：在后代选择器中，只要其中包含它的后代，那么不管中间差了几级，都是可以进行改变的，如下方案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>div span {color: blue;}
</style>
</head>
<body><!-- 在这里我们又加了一个p标签，也就是把span标签又下放了一级，但是后代选择器依然能起作用 --><span>span标签</span><div><p><span>后代选择器</span></p></div>
</body>
</html>
（2）.子代选择器
虽然后代选择器的功能很强大，但有些时候它也显得过于强大了，如果在当时我们只是想要修改某元素的子代元素，那么又该怎么办呢？
这时候我们就要用到子代选择器了
简单案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>div > span {color: blue;}
</style>
</head>
<body><span>span标签</span><div><span>子代选择器</span><!-- 这个span并不会被改变，因为它并不是div标签的子级 --><p><span>子代选择器</span></p></div>
</body>
</html>
（3）.并集选择器：
作用：
选中多组标签并为它们设置相同的样式
选择器的写法：
选择器1, 选择器2, ..., 选择器n简单案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>div, p, span {color: blue;}
</style>
</head>
<body><!-- 并集选择器 --><div>div标签</div><p>p标签</p><span>span标签</span>
</body>
</html>
（4）.交集选择器：
作用：
选中同时满足多个条件的元素
选择器的写法：
选择器1选择器2...选择器n简单案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>/* 在交集选择器中，只有同时满足两个条件的标签才会被选择器选中 */p.box {color: blue;}p {color: aqua;}div.box {color: bisque;}
</style>
</head>
<body><!-- 交集选择器 --><p class="box">p标签，class为box</p><p>p标签</p><div class="box">div标签，class为box</div>
</body>
</html>
注意：如果交集选择器中有标签选择器，那么标签选择器必须写在最前面（p，div，span等等标签）
（5）.伪类选择器：
伪类表示元素状态，选中元素的某个状态设置样式
①：鼠标悬停状态（伪类选择器）：
写法：
选择器:hover简单案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>/* 选择器:hover形式 */a:hover {color: aqua;}/* 类:hover形式 */.test:hover {color: bisque;}</style>
</head>
<body><a href="#">a标签</a><div class="test">div标签</div>
</body>
</html>
②：伪类——超链接
如我们之前所学的，超链接一共有四个状态：
:link表示访问前
:visited表示访问后
:hover表示鼠标悬停时
:active表示点击时（激活时）
其中包含一个注意点：如果要给超链接设置以上四个状态，我们需要按照LVHA（link，visited，hover，active）的顺序书写
简单案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>a:link {color: aqua;}a:visited {color: aquamarine;}a:hover {color: azure;}a:active {color: bisque;}
</style>
</head>
<body><a href="#">a标签</a>
</body>
</html>
二.CSS特性
CSS的特性：
简化代码，定位问题并解决
（1）.继承性：
子级默认继承父级的文字控制属性
简单案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>body {font-size: 30px;color: aqua;font-weight: 300;}
</style>
</head>
<body><div>div标签</div><p>p标签</p><span>span标签</span><!-- 如果标签自己有样式，那么在它们自己的样式中就不会沿用父级的样式 --><a href="#">a标签</a><h1>h1标签</h1>
</body>
</html>
（2）.层叠性
特点：
①：相同的属性会覆盖，后面的CSS属性会覆盖前面的CSS属性
②：不同的属性会叠加，不同的CSS属性都会生效
简单案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>/* font-size和font-weight属于不同的属性，它们不会相互干扰，但是由于在之后又定义了一次color属性，所以后面的color属性会覆盖前面的属性，导致最后呈现的颜色为紫色 */div {font-size: 30px;color: aqua;}div {font-weight: 300;color: blueviolet;}
</style>
</head>
<body><div>div标签</div>
</body>
</html>
（3）.优先级
优先级也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则会产生相应的变化
匹配规则：
选择器优先级高的样式才生效
优先级的排列：
通配符选择器（*）<标签选择器（div，p等标签）<类选择器（.类名）<id选择器（#id名）<行内样式（直接在标签内写入style属性）<!important（直接写在属性之后，将其优先级提到最高）（选中的标签的范围越大，优先级越低）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>/* 本来在上方使用通配符的优先级是最低的，所以下方的div标签应该是test中所规定的颜色但是由于在通配符中使用了!important属性，将其优先级提到最高，所以显示的是通配符中所规定的颜色 */* {color: aquamarine !important;}.test {color: blue;}
</style>
</head>
<body><div class="test">div标签</div>
</body>
</html>
注意：
在优先级中还有一个叠加计算规则，即：如果是在复合选择器中，权重需要叠加进行计算
优先级的排列顺序为：行内样式>id选择器>类选择器>标签选择器
在比较时我们需要从左向右依次比较个数，同一级个数更多的，优先级就更高，如果同一级的个数相同，那么继续向后比较（!important的权重最高，继承的权重最低）
叠加计算的简单案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>/* 这个复合选择器中包含两个类选择器，一个标签选择器 */.c1 .c2 div {color: aqua;}/* 一个id选择器，一个标签选择器 */div #box3 {color: black;}/* 一个id选择器，一个类选择器 */#box1 .c3 {color: blueviolet;}
</style>
</head>
<body><!-- 根据叠加计算规则，最后显示出的颜色为紫色 --><div id = "box1" class="c1"><div id = "box2" class="c2"><div id = "box3" class="c3">div标签</div></div></div>
</body>
</html>
三.Emmet写法
Emmet写法是一种代码的简写方式，输入缩写时VSCode会自动生成对应的代码，而这种写法同时适用于HTML和CSS这两种文件之中
注意：大多数简写方式都是属性单词的首字母
（1）.直接写出标签名，VSCode会生成一个简易的标签结构
<body><!-- 直接输入div --><div></div>
</body>（2）.写出标签名+.类名
<body><!-- 直接输入div.test --><div class="test"></div>
</body>（3）.写出标签名+#id名
<body><!-- 直接输入div#test --><div id="test"></div>
</body>（4）.标签名+标签名（同级）
<body><!-- 直接输入div+p --><div></div><p></p>
</body>（5）.标签名>标签名（父子级）
<body><!-- 直接输入div>p --><div><p></p></div>
</body>（6）.标签名*数量（同时创建几个相同的标签）
<body><!-- 直接输入div*3 --><div></div><div></div><div></div>
</body>（7）.标签名{输入内容}（带内容的标签）
<body><!-- 直接输入div{div标签} --><div>div标签</div>
</body>（8）.CSS中的简写
<style>div {/* 直接输入w */width: ;/* 直接输入h */height: ;/* 直接输入w400 */width: 400px;/* 直接输入bgc */background-color: #fff;/* 直接输入w300+h300+bgc */width: 300px;height: 300px;background-color: #fff;}
</style>四.背景属性
1.背景色
之前经常用到，就不多说了
background-color: #fff;2.背景图
在网页中使用背景图实现装饰性的图片效果
属性名：background-image（缩写为bgi）
属性值：url（背景图的url，即地址）
背景图的简单案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>div {width: 500px;height: 500px;/* 这是相对地址的写法，如果读者想要实现背景图的效果的话请换成自己的图片地址 */background-image: url(./images/1.jpeg);}
</style>
</head>
<body><div>div标签</div>
</body>
</html>
3.背景图平铺方式
平铺的表现方式：会使用重复的该张图片填满整个区域
属性名：background-repeat（缩写为bgr）
属性值：no-repeat（不平铺），默认为repeat（平铺），repeat-x（水平方向平铺），repeat-y（垂直方向平铺）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>div {width: 500px;height: 500px;background-image: url(./images/1.jpeg);/* 为了更好的理解背景图平铺的效果，建议各位读者还是自己去试试平铺与不平铺的效果 */background-repeat: no-repeat;}
</style>
</head>
<body><div>div标签</div>
</body>
</html>
4.背景图位置
属性名：background-position（简写为bgp）
属性值：水平方向位置与垂直方向位置
关键字：left（左侧），right（右侧），center（居中），top（顶部），bottom（底部）
坐标（数字+px，数字无论正负都可以）
注意，背景图的默认位置为左上角，代码表现为：
/* 背景图默认位置 */background-position: 0 0;background-position: left top;背景图位置全取决于之后的需求，所以在这里不做过多演示，只有一个简单案例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>div {width: 500px;height: 500px;background-image: url(./images/1.jpeg);/* 使用不平铺，只有一张图片的方式更容易看出效果 */background-position: center top;}
</style>
</head>
<body><div>div标签</div>
</body>
</html>
注意：
1.在关键字的写法中不区分先后顺序，只看你的关键字（数字方式的写法中，左边的数值是水平方向的位置，右边的数值是垂直方向的位置）
2.关键字和数字的写法也可以只写一个数值，另一个方向就会默认是center（居中）
/* 水平位置在左边，垂直位置默认为center */background-position: left;/* 水平位置在50px，垂直位置默认为center */background-position: 50px;5.背景图缩放
作用：
设置背景图的大小
属性值：
background-size（缩写为bgz）
常用属性值：
（1）.关键字：
cover（等比例缩放背景图片以完全覆盖背景区，可能会导致背景图片部分看不见），contain（等比例缩放背景图片以完全装入背景区，可能会导致背景区部分空白）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>div {width: 500px;height: 500px;background-image: url(./images/1.jpeg);background-repeat: no-repeat;background-size: contain;}
</style>
</head>
<body><div>div标签</div>
</body>
</html>
（2）.百分比：
根据盒子尺寸计算图片大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>div {width: 500px;height: 500px;background-image: url(./images/1.jpeg);background-repeat: no-repeat;background-size: 100%;}
</style>
</head>
<body><div>div标签</div>
</body>
</html>
（3）.数字+单位（px等）
这种方式需要进行一定程度的计算，在实际遇到这种情况时读者再自己试试吧
6.背景图固定（默认为随着元素的内容滚动，如果不滚动则只会停留在网页中一个固定的位置上）
作用：
使得背景不会随着元素的内容滚动
属性名：
background-attachment（缩写为bga）
属性值：
fixed
7.背景复合属性
属性名：
background（简写为bg）
属性值：
背景色，背景图，背景图平铺方式，背景图位置，背景图缩放，背景图固定（使用空格隔开各个属性值，并且不需要区分顺序）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>div {width: 500px;height: 500px;/* background复合属性简单案例 */background: blueviolet url(./images/1.jpeg) no-repeat center/cover;}
</style>
</head>
<body><div>div标签</div>
</body>
</html>
五.显示模式
显示模式表示标签（元素）的显示方式
作用：
布局网页的时候，根据标签的显示模式选择合适的标签摆放内容
1.块级元素
（1）.特点：
①：独占一行
②：宽度默认是父级的100%
③：添加宽高属性生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>div {width: 300px;height: 300px;}
</style>
</head>
<body><!-- 块级元素的特点 --><div>div标签</div><div>div标签</div>
</body>
</html>
2.行内元素
（1）.特点：
①：一行内可以共存多个
②：尺寸由内容撑开
③：加宽高不会生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>span {width: 300px;height: 300px;}
</style>
</head>
<body><!-- 行内元素的特点 --><span>span标签</span><span>span标签</span>
</body>
</html>
3.行内块元素
（1）.特点：
①：一行共存多个
②：默认尺寸由内容撑开
③：加宽高会生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>img {width: 300px;height: 300px;}
</style>
</head>
<body><!-- 行内块元素的特点 --><img src="./images/1.jpeg" alt=""><img src="./images/2.jpeg" alt="">
</body>
</html>
4.转换显示模式
属性名：display
属性值：block（块级），inline-block（行内块），inline（行内）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>div {width: 300px;height: 300px;/* 转换为行内块元素 */display: inline-block;}.div1 {background-color: aqua;}.div2 {background-color: blueviolet;}
</style>
</head>
<body><!-- 转换显示模式 --><div class="div1">div标签</div><div class="div2">div标签</div>
</body>
</html>