美文网首页Web
CSS中的三大特性

CSS中的三大特性

作者: 追逐_chase | 来源:发表于2019-07-10 16:21 被阅读0次
web.jpeg

1.层叠性

  • 层叠性就是一个标签有多个样式属性,产生了属性冲突,层叠性就是解决冲突的,覆盖前面的样式
image.png image.png

2.继承性

  • 主要是指:子元素继承父元素的一些样式
  • 一般是文本类的,比如:color,或者以text-,line-,font-开头的属性样式可以继承,及时关于文字类的样式
  • 注意:a标签不会继承父类的color的属性样式
 <style>
        div{
            color: red;
            font-size: 20px;
        }
    </style>

  <div> 
          <p>这是一个段落</p>
          <a href="#">这是一个a标签</a>
          <ul>
              <li>这是一个ul列表</li>
          </ul>
    
      </div>
image.png

3.优先级(权重)

前面说的层叠性产生覆盖,是权重相同的情况下,如果权重不同,那么就会出现不同的情况,那么权重是怎么计算的呢?

权重的大小是根据,id选择器类选择器,和 标签选择器数量决定
标签选择器 权重是 0 0 0 1
类和伪类的权重是 0 0 1 0
id选择器的权重是 0 1 0 0
行内样式的权重是 1 0 0 0
如果在属性后面加上!important 权重是无限大

image.png

从上图的中可以知道, 第一个样式的权重比较大 所以显示的样式是 红色字体

image.png

如果权重一样大,就用到层叠性 谁在后面听谁的 比如:

image.png
image.png
注意:在设置 文本的样式的时候,必须是选中的 这个文本标签,如果没有选中的话,通过继承类的,那权重是0。
image.png

相关文章

  • CSS中特殊效果的实现方案

    相关文章 CSS中渐变特性的研究 CSS中颜色突变的实现方案 CSS中条纹效果的实现方案 CSS中环形效果的实现方...

  • 老司机Studio课程大纲

    1 前端开发中的基本概念2 CSS3 基本特性3 CSS3 进阶特性4 原生JavaScript5 JQuery的...

  • css3 transition

    transition是css3中新添加的特性,在W3C标准中是这样描述的:“css的transition允许css...

  • 多行文字垂直居中

    CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用,但是在CSS中还有...

  • transform变形

    CSS3中可以通过transform属性修改元素的变形、旋转、缩放、倾斜特性,在CSS3中transform主要包...

  • transform(变形)

    transform(变形) CSS3中可以通过transform属性修改元素的变形、旋转、缩放、倾斜特性,在CSS...

  • --- > css3-变形

    transform(变形) CSS3中可以通过transform属性修改元素的变形、旋转、缩放、倾斜特性,在CSS...

  • CSS中渐变特性的研究

    在用CSS实现等效中,经常会用到渐变,所以,本篇就研究一下渐变的特性; 在CSS中,渐变并不是作为CSS中的一个属...

  • CSS中的三大特性

    1.层叠性 层叠性就是一个标签有多个样式属性,产生了属性冲突,层叠性就是解决冲突的,覆盖前面的样式 2.继承性 主...

  • CSS的三大特性总结(深入理解css权重)

    【目录】 css的三大特性层叠性特性说明原理DEMO继承性优缺点重点DEMOhtml代码css代码优先级css特殊...

网友评论

    本文标题:CSS中的三大特性

    本文链接:https://www.haomeiwen.com/subject/fimhkctx.html