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

最新推荐文章于 2024-06-28 22:28:59 发布

不起眼的皮皮虾

最新推荐文章于 2024-06-28 22:28:59 发布

阅读量98

点赞数

分类专栏： CSS 文章标签： css

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

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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>

**说明：**在上面的代码中，我们看到一个p标签的选择器里，同时出现了两次color这个属性，第一次设置为红色，第二次设置为蓝色，这个时候，p标签到底显示为什么颜色？？

重点：如果在一个选择器里面，一个属性出现多次，那么，以最后一次出现的为主

在样式层叠性的冲突里面，行内样式权重>块级样式权重>默认样式权重>继承样式权重

选择器的渐近增强

在CSS当中使用选择器的时候，我们应该遵守一个规则渐近增强与优雅降级（这个规则不仅仅适用于我们的选择器，后到期还适用于我们的浏览器的兼容性【JS兼容性】）

不起眼的皮皮虾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS在应用过程中的几种特性

CSS在应用过程中的几种特性统一性便捷性分离性我们的分离性是把结构代码HTML与样式代码CSS进行分离，在分离的过程当中，我们可以把行内样式分离成内部样式块，也可以把内部样式块直接分离到一个CSS文件当中去当单独的分离成了一个CSS文件以后，这个时候，我们可以通过两种方式来引入我们的这个CSS文件（页面文件引入样式文件）第一种方式<link type="text/css" href="css/css02.css" rel="stylesheet" />第二种方式
复制链接

扫一扫