李南江的前端课程知识点（七）CSS的继承、层叠、优先

CSS三大特性

继承性

作用：给父元素设置一些属性，子元素也可以使用，这个我们就称之为继承性。
注意点：
1、并不是所有的属性都可以被继承，只有以color/font-/text-/line开头的属性才可以被继承。
2、在CSS的继承中，不仅仅是儿子可继承，只要是后代都可以继承。
3、CSS继承性中的特殊性：a标签的字体颜色和下划线是不能继承的，h标签的字体大小是不能继承的。
如果我们想要修改超链接和h标签的样式，我们只能通过单独选择出来进行单独的设置。

应用场景：
一般用于设置网页上的一些共性信息，例如网页的文字颜色、字体、字体大小等内容。
body{}

层叠性

作用：层叠性就是CSS解决冲突的一种能力。
注意点：层叠性只有在多个选择器选择同一个标签，然后又设置了相同的属性，才会发生层叠性。
CSS全称：层叠式样式表。

优先级

作用：当多个选择器选择同一个标签，并且又设置相同的属性时，如何层叠就由优先级来确定。
优先级判断的三种方式：
1、是否是直接选中（间接选中就是指继承）
如果是间接选中，谁离目标标签比较近，就听谁的。
2、是否是相同的选择器，相同选择器（直接选中）
如果都是直接选中，并且都是同类型的选择器，谁写在后面就听谁的。
3、不同选择器（直接选中）
如果都是直接选中，并且不是相同类型的选择器，就会按照选择器的优先级进行层叠。
id》类》标签》通配符》继承》浏览器默认.

关于优先级提升

什么是important？
作用：用于提升某个直接选中标签的选择器中的某个属性的优先级的，可以将被指定的属性的优先级提升为最高。
注意点：
1、 important只能用于直接选中，不能用于间接选中。

<style>
        p{
            color: red !important;
        }
        #pp{
            color: magenta;
        }
        .oo{
            color: blue;
        }
</style>

补充：通配符选择器选中的标签也是直接选中的。
2、！important只能提升被指定的属性的优先级，其他的属性的优先级不会被提升。
3、important必须写在分号的前面，感叹号也不能省略。

优先级权重问题

当多个选择器混合在一起使用时，通过计算权重来判断谁的优先级最高。
权重的计算规则：
1、 首先计算选择器中有多少id，id多的选择器优先级最高。
2、如果id的个数一样，再看类名的个数，类名个数多的优先级最高。
3、如果类名的个数一样，再看标签名称的个数，标签名个数多的优先级最高。
4、如果前面的东西都一样，那么就不再往下计算了，谁谁在后面就听谁的。优先级一样，谁写在后面就听谁的。
注意点：
1、权重只有在选择器是直接选中标签的，才需要计算权重。

div和span标签

一般我们使用div和span标签来完成我们的CSS效果。
我们经常会使用div和CSS来完成一个网页的整体上的页面的搭建。
div作用：一般用于配合CSS完成网页的基本布局。大的布局信息。
span：一般用于配合CSS修改网页中的局部信息。修改元素的局部信息。
div和span的区别：
div会单独的占领一行，而span不会单独占领一行。
div是一个容器级的标签，而span是一个文本级的标签。

容器级标签和文本级标签：
容器级的标签中可以嵌套其他所有的标签。比如有div h ul ol dl li
文本级的标签中只能嵌套文字/图片/超链接。比如有span p strong em del

CSS元素的显示模式（display）

在CSS中CSS也将所有的标签分为两类，块级元素和行内元素。
块级元素和行内元素的区别：
1、 块级元素：独占一行。
如果没有设置宽度，块级元素的宽度就默认和父元素一样宽。
如果没有设置高度，块级元素的高度就是被内容撑起的高度。
如果设置了宽高，就按照设置的来。
可以设置宽高。
2、 行内元素：不会独占一行。
行内元素的宽度默认和内容一样宽。
行内元素是不可以设置宽度和高度的，设置了也是没有效果的，设置了也没有用 。
现在我们的需要是：既要元素不独占一行，又可以对其设置宽高。
3、行内块级元素
不独占一行，可以设置宽高。
为了能够让元素不独占一行，又能够设置宽度和高度，就出现了行内块级元素。比如img标签。

显示模式转换（display）

1、如何转换CSS元素的显示模式？

设置元素的display属性。
2、display属性的取值
block：转换为块级，可以设置宽高，但是要独占一行。
inline：转换为行内，不可以设置宽高，不独占一行。
inline-block：转换为行内块级元素，可以设置宽高，不独占一行。

背景颜色

如何设置背景颜色？
在我们HTML中，所有的标签都可以设置背景颜色。
background-color：属性就是专门用来设置标签的背景颜色。

背景图片

如何设置背景图片？
在CSS中有一个叫做background-image：url()；的属性，就是专门用于设置背景图片的。
注意点：
1、 图片地址必须放在url()中，图片的地址可以说本地和网络地址。
2、如果图片的大小没有标签的大小大，那么会自动在垂直和水平方向平铺和填充。
3、如果网页上出现了图片，那么浏览器会再次发送请求获取图片。

背景平铺

如何控制背景图片的平铺方式？
在CSS中有一个叫background-repeat：的属性，就是专门用于设置背景图片的平铺方式的。
取值：
repeat：默认设置，在水平和垂直都平铺。
no-repeat：在水平和垂直都不需要平铺，即背景图片在整个页面上只出现一次，不占满整个页面。
repeat-x：只在水平方向平铺，背景图片在水平方向上面重复。
repe-y：只在垂直方向平铺，背景图片在垂直方向上面重复。
应用场景：
可以通过背景图片的平铺来降低图片的大小，提升网页的访问速度。

背景定位

注意点：同一个标签可以同时设置背景图片和背景颜色，如果同时存在，图片会覆盖颜色。
如何控制背景图片的位置？即控制背景图片显示在页面的哪个地方？
在CSS中有一个叫background-position：水平方向，垂直方向 ；的属性，就是专门用于设置背景图片的位置的，可以改变背景图像的位置。
格式：background-position：水平方向，垂直方向 ；
取值：
1、具体的方位名词
水平方向：left、center、right
垂直方向：top、center、bottom
2、具体的像素
例如：background-position：100px，200px;
记住一定要在数字后面写单位px。

上面的代码是让较大的背景图片居中显示，是应用比较多的，以表便我们子啊不同的分辨率下都可以得到图片的中间最重要的信息，水平居中，顶部不变。

背景关联和缩写

背景属性缩写的格式：
background：背景颜色 背景图片 平铺方式 关联方式 定位方式；
注意点：在background属性中，任何一个属性都可以被省略。
比如background：red；就表示我们只给背景设置了背景颜色，其他的都省略掉了，当然我们也可以通过这个属性再加上其他的属性，可以只写其中的一个，都无所谓。
什么是关联方式？
background-attachment：背景图像是否固定或者随着页面的其余部分滚动。
默认情况下背景图片会随着滚动条的滚动而滚动。
如果我们想设置背景图片不随滚动条的滚动而滚动，那么我们可以设置背景图片的关联方式。

背景图片和插入图片的区别

1、背景图片仅仅是一个装饰，不会占用位置。插入图片会占用位置。
2、背景图片可以利用定位属性任意改变位置，但是插入图片要改变位置就比较难，不太方便。
3、插入图片的语义比背景图片的语义强，所以开发中如果要让图片被搜索引擎收录，那么推荐使用插入图片。

CSS精灵图

什么是CSS精灵图
CSS精灵图是一种图像合成技术。
CSS精灵图作用
可以减少请求的次数，一级可以降低服务器处理压力。
如何使用CSS精灵图片
CSS精灵图需要配合背景图片和背景定位来实现。

边框

什么是边框？
边框就是环绕在标签宽度和高度周五的线条。
边框属性的格式
1、连写（同时设置四条边的边框）

2、连写（分别设置四条边的边框）

注意点：
1、连写格式中颜色属性可以省略，省略之后默认就是黑色。
2、连写格式中样式（实线还是虚线）不能省略，省略之后就看不到边框了。
3、连写格式中宽度可以省略，省略之后还是可以看到边框。

按照顺时针来赋值。
用CSS边框实现一个倒三角：