必须掌握的CSS三大特性🎨

简介: CSS三大特性是前端开发中所必用到的下面来解释一下三大特性的概念与规则

CSS三大特性🎨

CSS三大特性是前端开发中所必用到的

下面来解释一下三大特性的概念与规则

拉架的层叠性

CSS的全名为层叠样式表,所以可见层叠性的重要性。

  1. 特性:层叠性主要用于解决样式冲突, 也就是拉架。

样式冲突:一个元素被多种选择器添加了相同的属性,那么将按最底部的属性值来渲染

  1. 原理:这与浏览器的渲染原理有关
    在打开一个网页时,浏览器会先下载文档(也就是我们的document),加载文档的head样式资源
    依次加载dom与样式,所以同权重情况下下面的样式会覆盖上面的样式
  2. 案例时间:
<div>层叠</div>
<style>
    div{
      width: 300px;
      height: 150px;
      background-color: red;
      background-color: rgb(43, 159, 226);
      color:pink;
      color:#fff;
    }
    div{
      color:rgb(236, 240, 236);
    }
  </style>
复制代码

如图所示:div的背景颜色:rgb(43, 159, 226);字体颜色:color:rgb(236, 240, 236);

1.webp.jpg

功名利禄的权重

因为层叠是对同权重的规则,所以权重的出现会直接打破层叠的规则,即谁的权重大谁就被渲染

  1. 概念:CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式
  2. 规则:
Name 0,0,0,0
元素 0,0,0,1
类/伪类 0,0,1,0
ID 0,1,0,0
行内式 1,0,0,0
!import 无穷大
  1. 案例时间:
<p id="txt" class="txt">CSS的权重</p>
<style>
    #txt{
        color: black;
    }
    p .txt{
        color: blue;
    }
</style>
复制代码

图片所示:段落的颜色最后为黑色,而按层叠来讲颜色应该是蓝色,这就是因为id选择器的权重较大,所以最后渲染为黑色。

1.webp.jpg

子承父业的继承

html标签拥有父子关系,那么在其元素上也有子承父业的规则

  1. 概念:子标签会继承父标签的能继承的样式
  2. 可继承的属性:字体,文本,元素可见性,等等
  3. 不可继承的属性:盒子模型属性,北京属性,定位属性,outline,display
  4. 案例时间
<div class="father">
        父亲
        <p class="son">儿子</p>
    </div>
    <style>
        .father {
            width: 300px;
            height: 200px;
            font-size: 20px;
            font-weight: 700;
            text-align: right;
            background-color: rgb(0, 98, 128);
            color: rgb(241, 243, 239);
            position: relative;
        }
        .son {
            width: 50%;
            height: 90%;
            background-color: rgb(0, 183, 255);
            position: absolute;
            bottom: 0;
            left: 0;
            color: #fff;
        }
    </style>
复制代码

图片所示:子标签继承了父元素的字体颜色,文本,没有继承定位等。

1.webp.jpg

PS:

  1. 子标签继承过来的元素的权重据文献表明为0.1,即我们用元素选择器就可以覆盖掉继承的属性
  2. 为什么要用继承呢?因为继承减少了代码冗余,降低CSS的复杂性
  3. 合理运用CSS三大特性,在开发大量中减少了样式bug,减少秃头。



目录
打赏
0
0
2
0
69
分享
相关文章
探索Web设计新纪元:CSS3的革新特性如何重塑我们的网页视觉体验?
【8月更文挑战第26天】随着Web技术的发展,CSS3为前端开发带来了众多激动人心的新特性,极大提升了网页设计的视觉效果与创意空间。本文通过对比CSS3与CSS2,详细介绍了CSS3在选择器增强、圆角阴影处理、渐变背景应用、转换动画实现、文字效果优化、媒体查询支持及多列布局方面的显著改进,展示了CSS3如何助力开发者打造更具吸引力和互动性的网页体验。
62 1
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性:继承性、层叠性和优先级,并深入讲解了背景图的相关属性,包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中,继承性指子元素自动继承父元素的文字控制属性;层叠性指相同属性后定义覆盖前定义,不同属性可叠加;优先级涉及选择器权重,包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
274 91
css特性
css特性 1.继承性:子级继承父级文字控制属性 ps:子级拥有自己的样式则不会继承父级。 2.层叠性:相同的属性后面覆盖前面,不同的属性叠加 3.优先级:选择器优先级高的样式生效 公式:通配符<标签<类<id<行内样式<!important(选中范围越大,优先级越低) 叠加计算规则:存在复合选择器时,从左向右依次比较个数,同一级个数多的优先级高,如果个数相同,则向后比较;!important权重最高;继承权重最低。
Vue 3 新特性:在 Composition API 中使用 CSS Modules
Vue 3 新特性:在 Composition API 中使用 CSS Modules
CSS3作为CSS的最新版本,引入了许多强大的新特性和改进
【5月更文挑战第26天】CSS3作为CSS的最新版本,引入了许多强大的新特性和改进
89 2
番外篇-CSS3新增特性
番外篇-CSS3新增特性
40 0
【专栏:CSS 进阶篇】CSS3 新特性:过渡、动画与变形
【4月更文挑战第30天】CSS3的过渡、动画和变形三大特性为网页设计注入活力,创造生动丰富的用户体验。过渡提供平滑效果,常用于按钮点击等;动画实现复杂动态效果,适用于滚动字幕等;变形允许元素几何变换,如旋转和缩放。实际应用包括动态导航菜单、图片轮播和加载动画。然而,需注意浏览器兼容性、性能优化和设计平衡。掌握这些特性,将为网页设计带来更多创新可能。
219 1
【Web 前端】css3的新特性有哪些?
【4月更文挑战第22天】【Web 前端】css3的新特性有哪些?
CSS面试考点:隐藏元素、BFC、垂直居中、CSS3新特性
【4月更文挑战第2天】 CSS面试考点:隐藏元素、BFC、垂直居中、CSS3新特性
61 10