4、CSS原理

CSS原理

CSS有两个重要原则

1.优先原则：后解析的内容，会覆盖掉之前解析的内容。

（类似于，在黑板上，有一个人上去写了一些东西，写完之后，后面的人再写，就得先把前面的那个对应的地方擦掉，才能再写东西）

2.继承原则：嵌套在里面的标签（子元素），会拥有外部标签（父元素）的某些样式。

（里面的标签【子元素】的某些样式可以不写，它会直接继承它外部的那个标签【父元素】的这些样式）

优先原则概括：

① 同一个选择器：文件从上往下执行(解析)

② 同一类型的选择器：文件从上往下执行(解析)

③ 不同类型的选择器：由选择器自身的优先级决定了解析的先后顺序，先解析低优先级的选择器，再解析高优先级的选择器。

④ 外部样式与内部样式(文档内嵌样式)：两者合并之后一起解析（这两种样式被归为同一类别，放在同一堆进行解析）。

⑤ 内联样式（元素内嵌样式）：只有当外部样式和内部样式都解析完了之后，才解析内联样式。

⑥ 加了 important 字段的，最后执行(解析)。

继承原则概括：

① 跟文本(文字)相关的样式，才可以被继承，其他的都不能被继承。

② 块级元素的宽度如果不被设置，那么它会继承离它最近的父块级元素的宽。
(高度是由块级元素里面的内容来决定的)

优先原则（针对选择器来讲）

(1) 同一个选择器：文件从上往下执行(解析)，后面的内容会覆盖掉前面的内容。

代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css生效的原理</title>
    <link rel="stylesheet" href="css-principle.css">
</head>
<body>
    <div>div1</div>
</body>
</html>

css

div {
    /*程序执行到这里时，会先将元素的颜色设置为红色*/
    color: red;
    
    /*当程序执行到这里时，又会把红色改成绿色*/
    color: green;
}

效果：

最终实际在页面显示的时候，它对应的内容就是绿色。

(2) 同一类型的选择器：文件从上往下执行(解析)，后面的选择器的内容会覆盖掉前面的选择器的内容。

代码1（实例1）

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css生效的原理</title>
    <link rel="stylesheet" href="css-principle.css">
</head>
<body>
    <div>div1</div>
</body>
</html>

css

/*程序执行到这里时，会先将元素的背景颜色设置为红色*/
div {
    background-color: red;
}
/*当程序执行到这里时，又会把红色改成绿色*/
div {
    background-color: green;
}

效果：

最终实际在页面显示的时候，它对应的内容就是绿色。

代码2（实例2）

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css生效的原理</title>
    <link rel="stylesheet" href="css-principle.css">
</head>
<body>
    <!--这里给标签设置两个class值，让其使用两个同一类型的选择器所声明的样式-->
    <!--html中class值的顺序随意，对最终结果没有影响；对结果有影响的是css中的顺序-->
    <div class="bg1 bg2">div1</div>
</body>
</html>

css

/*程序执行到这里时，会先将元素的背景颜色设置为黄色*/
.bg1 {
    background-color: yellow;
}
/*当程序执行到这里时，又会把黄色改成蓝色*/
.bg2 {
    background-color: blue;
}

效果：

最终实际在页面显示的时候，它对应的内容就是蓝色。

(3) 不同类型的选择器：由选择器自身的优先级决定了解析的先后顺序，先解析低优先级的选择器，再解析高优先级的选择器。

后解析的内容覆盖掉先解析的内容（即：高优先级选择器的内容覆盖掉低优先级选择器的内容）。

注意：解析顺序与 css中选择器书写的先后顺序无关

CSS基本选择器的优先级：通配符选择器 < 标签选择器 < class选择器 < id选择器

代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css生效的原理</title>
    <link rel="stylesheet" href="css-principle.css">
</head>
<body>
    <div class="bg1">div1</div>
</body>
</html>

css

/*根据解析顺序，.bg1选择器后解析，将元素的背景颜色从红色改为绿色*/
.bg1 {
    background-color: green;
}
/*根据解析顺序，div选择器先解析，先将元素的背景颜色设置为红色*/
div {
    background-color: red;
}


/*解析顺序与书写顺序无关*/

效果：

由于class选择器的优先级比标签选择器的高，因此class选择器中的内容是后解析的，所以最后保留下来的是 .bg1 中的样式。

(4) 外部样式与内部样式(文档内嵌样式)：两者合并之后一起解析（这两种样式被归为同一类别，放在同一堆进行解析）。

会先将两种样式按照，外部样式在前，内部样式在后的顺序，合并在一起(归为一堆)，之后套用前三种原则进行解析。

代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css生效的原理</title>
    <link rel="stylesheet" href="css-principle.css">
    <style>
        /*这里会与.css文件中的内容进行合并，合并后这里的样式会排在后面*/
        div {
            background-color: red;
        }
    </style>
</head>
<body>
    <div>div1</div>
</body>
</html>

css

/*这里会与html文件中<style>标签的内容进行合并，合并后这里的样式会排在前面*/
div {
    background-color: yellow;
    font-size: 60px;
}

合并结果：

/*所谓的合并，并不是物理上合并在一起，而是逻辑上合并在一起。*/
/*这里写成这样只是为了方便理解合并是怎么一回事*/
div {
    background-color: yellow;
    font-size: 60px;
}
div {
    background-color: red;
}

合并之后，就该选择套用哪个原则了。

这个例子中的选择器为多个的标签选择器，因此套用第二个原则——“同一类型的选择器” 的原则。

效果：

由于套用的是 “同一类型的选择器” 的原则，因此，文件从上往下执行(解析)，后面的选择器的内容会覆盖掉前面的选择器的内容。

最终实际在页面显示的时候，它对应的内容的样式就是 60px字号和红色背景。

(5) 内联样式（元素内嵌样式）：只有当外部样式和内部样式都解析完了之后，才解析内联样式。

后解析的内联样式会覆盖掉先解析的外部样式和内部样式。

代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css生效的原理</title>
    <link rel="stylesheet" href="css-principle.css">
    <style>
        /*这里会与.css文件中的内容进行合并，合并后这里的样式会排在后面*/
        div {
            background-color: red;
        }
    </style>
</head>
<body>
    <!--这里会在 外部样式 和 内部样式 解析完之后，进行解析-->
    <div style="font-size: 200px">div1</div>
</body>
</html>

css

/*这里会与html文件中<style>标签的内容进行合并，合并后这里的样式会排在前面*/
div {
    background-color: yellow;
    font-size: 60px;
}

合并结果：

/*所谓的合并，并不是物理上合并在一起，而是逻辑上合并在一起。*/
/*这里写成这样只是为了方便理解合并是怎么一回事*/
div {
    background-color: yellow;
    font-size: 60px;
}
div {
    background-color: red;
}

这个例子，先将外部样式和内部样式合并，并套用第二个原则——“同一类型的选择器” 的原则，进行解析。

合并解析完成后，再解析内联样式 style="font-size: 200px" ，后解析的内联样式会覆盖掉先解析的外部样式和内部样式。

效果：

最终实际在页面显示的时候，它对应的内容的样式就是 200px字号和红色背景。

(6) 加了 important 字段的，最后执行(解析)。

代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css生效的原理</title>
    <link rel="stylesheet" href="css-principle.css">
    <style>
        /*这里会与.css文件中的内容进行合并，合并后这里的样式会排在后面*/
        div {
            background-color: red;
        }
    </style>
</head>
<body>
<!--这里会在 外部样式 和 内部样式 解析完之后，进行解析-->
<div style="font-size: 200px">div1</div>
</body>
</html>

css

/*这里会与html文件中<style>标签的内容进行合并，合并后这里的样式会排在前面*/
div {
    /*这里加了！important字段，这一条要等到所有其他样式解析完，才进行解析*/
    background-color: green!important;
}
div {
    background-color: yellow;
    font-size: 60px;
}

合并结果：

/*所谓的合并，并不是物理上合并在一起，而是逻辑上合并在一起。*/
/*这里写成这样只是为了方便理解合并是怎么一回事*/
div {
    /*这里加了！important字段，这一条要等到所有其他样式解析完，才进行解析*/
    background-color: green!important;
}
div {
    background-color: yellow;
    font-size: 60px;
}
div {
    background-color: red;
}

这个例子，先将外部样式和内部样式合并，并套用第二个原则——“同一类型的选择器” 的原则，进行解析。但由于其中一条样式中有important字段，所以那条语句会先跳过不解析，其他的依旧按顺序解析。

合并解析完成后，再解析内联样式 style="font-size: 200px" ，后解析的内联样式会覆盖掉先解析的外部样式和内部样式。

最后解析之前跳过的带有important字段的样式，这最后解析的带有important字段的样式会覆盖掉之前解析的内联样式。

（说白了，就是看每种样式谁最后解析，谁的样式就能留到最后）

效果：

最终实际在页面显示的时候，它对应的内容的样式就是 200px字号和绿色背景。

继承原则

(1) 跟文本(文字)相关的样式，才可以被继承，其他的都不能被继承。

代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css生效的原理</title>
    <link rel="stylesheet" href="css-principle.css">
</head>
<body>
    <div class="txt">
        div1
        <div>
            div2
            <p>p2</p>
        </div>
        <p>p1</p>
    </div>
</body>
</html>

css

div.txt {
    color: red;
}

效果：

子元素可以继承父元素的文本样式，因此这里的所有元素的文本颜色都为红色。

子元素不能继承父元素的其他样式，因此这里只有最外层的元素有边框。

(2) 块级元素的宽度如果不被设置，那么它会继承离它最近的父块级元素的宽。(高度是由块级元素里面的内容来决定的)

代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css生效的原理</title>
    <link rel="stylesheet" href="css-principle.css">
</head>
<body>
    <div class="txt02">
        div1
        <div>
            div2
            <p>p2</p>
        </div>
        <p>p1</p>
    </div>
</body>
</html>

css

div.txt02 {
    width: 200px;
    height: 200px;
    border: 1px solid black;
}
p {
    border: 1px solid black;
}

效果：

未设置宽度的块级元素会继承离它最近的父块级元素的宽，因此这里的所有元素的宽都为200px。

高度是由块级元素里面的内容来决定的，因此就算设置了200px，元素也依旧根据其内部内容的多少，自适应调整高度。

posted @ 2021-03-06 10:53 丨Mr丨C 阅读(78) 评论(0) 收藏举报

刷新页面返回顶部

4、CSS原理

CSS原理

公告