CSS在应用过程中的几种特性_css 包含的特性有几种-CSDN博客

本文链接：https://blog.csdn.net/qq_36801250/article/details/106022728

CSS在应用过程中的几种特性

统一性
便捷性
分离性

我们的分离性是把结构代码HTML与样式代码CSS进行分离，在分离的过程当中，我们可以把行内样式分离成内部样式块，也可以把内部样式块直接分离到一个CSS文件当中去

当单独的分离成了一个CSS文件以后，这个时候，我们可以通过两种方式来引入我们的这个CSS文件（页面文件引入样式文件）

第一种方式
```
<link type="text/css" href="css/css02.css" rel="stylesheet" />
```
第二种方式
```
<style type="text/css">
    @import url("css/css02.css");
</style>
```
**说明：**上面的两种方式都引入了CSS文件，但是最常见的还是第一种试

第一种方式没有浏览器兼容性的问题，它在任何浏览器下面都可以去使用，但是第二种@import这种方式还有兼容性(IE6不兼容)

@import可以直接在一个CSS文件里面引入另一个文件的CSS样式，这样可以把多个CSS文件合并成一个文件

上面的三个特性是我在最开始学习CSS的时候最基本的三个特性

大家在以后编写CSS代码的时候，一定要遵守三个特性

继承性

CSS样式的继承性指的就是后代元素可以继承父级元素的一些CSS属性，但是并不是所有的属性都可以去继承，c例如a标签就不会继承外边的color这个样式，因为a标签有自己的默认颜色

有些样式是明确表示不能继承

display不能继承

width/height不能继承

border也不继承

在编写样式的过程当中，如果某些样式出现了样式继承，我们没有必要再单独的去设置它的样式了

层叠性

一个页面上面，某一个元素最终显示的样式应该包含这几个方法

元素的默认样式 user agent stylesheet
元素继承的样式 Inherited(继承)
元素的块级样式
元素的行内样式

在这里插入图片描述

上面的图中，a标签继承了类样式.div1,同时也具备自己的样式user agent stylesheet,这个时候，它就有两个样式了

在这里插入图片描述

上在的图中.a1代表的就是内部样式块，这个时候，这个a标签就会被设置成蓝色

在这里插入图片描述

在上面的a标签当中，它就有四种情况下的样式，而这个a标签最终呈现出来的是经过这些样式叠加以后的，一个元素如果要呈现出效果，必然是通过这四种情来叠家而来的，这种CSS属性相叠加的特性，我们叫层叠性（层叠样式表）

优先级

我们在编写样式的时候，经常会发生一种样式冲突的情况，这个时候，我们要合理的利用自己的选择器来提高自己的优先级

在选择器过程当中，我们会把style,id,class,标签这几种类型的选择器去做一个权重拆分，具体信息如下

选择器类型	权重值
!important	10000
style	1000
id	100
class	10
标签	1

我们在使用的过程当中，可以利用这些值来进行选择器的权重相加，案例如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS优先级</title>
    </head>
    <body>
        <div class="div1">
            <!--style它的优先级是1000 -->
            <p class="p1" id="p2" style="color: lightseagreen;">天气真TMD热</p>
        </div>
    </body>
    <style type="text/css">
        /*1+1=2*/
        div p{
            color: green;
        }
        /*1*/
        p{
            /*!important权重10000*/
            color: red !important;
        }
        /*10*/
        .p1{
            color: pink;
        }
        /*1+10=11*/
        p.p1{
            color: darkblue;
        }
        /*1+1+10=12*/
        div>p.p1{
            color: orangered;
        }
        /*100*/
        #p2{
            color: white;
        }
        /*1+100=101*/
        p#p2{
            color: lightcoral;
        }
        /*1+1+100=102*/
        div>p#p2{
            color: lightgreen;
        }
        /*
          !important 10000
          style     1000
          ID        100
          Class     10
            标签             1
         * */
    </style>
</html>

上面的案例就充分的说明了选择器在这个地方它的优先级计算问题

上面的样式冲突是在不同的选择器下面进行的，如果有一个样式在一个选择器里面出现了多次，这个时候，又应该如何去处理呢？？？？？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>样式冲突</title>
    </head>
    <body>
        <p>样式冲突的问题</p>
    </body>
    <style type="text/css">
        p{
            color: red;
            border: 1px solid black;
            color: blue;
        }
        /*同一个选择器里面，一个样式出现了多次，应该怎么办？？？
         * 这个时候，它最终会显示为什么颜色呢*/
    </style>
</html>