精华内容
下载资源
问答
  • css属性继承

    2012-04-17 11:22:36
    CSS中,许多属性都是可以继承的,如某个段落的字体设置为白色,其元素的字体不用设置或设置为inhert,它就是白色。这些属性被称之为inherited property,它会从父元素获取对应属性的经过计算与转换的值(computed ...
  • CSS属性继承

    千次阅读 2019-06-19 14:16:13
    一个子元素可以从祖先元素继承“可继承属性”的计算值。 可以对比Java的继承来理解,子类的实例调用某方法show()时,如果子类中不存在,则会调用父类中的show()方法,如果父类中也没有,则调用父类的父类中的show()...

    CSS 继承

    MDN 的教程:https://developer.mozilla.org/zh-CN/docs/Web/CSS/inheritance

    什么是继承呢?

    一个子元素可以从祖先元素继承“可继承属性”的计算值

    可以对比Java的继承来理解,子类的实例调用某方法show()时,如果子类中不存在,则会调用父类中的show()方法,如果父类中也没有,则调用父类的父类中的show()方法,这样依次查找,直到顶端。

    举个栗子:

    <div class="par1">
       1
       <div class="par2">
           2
           <div class="par3">3</div>
       </div>
    </div>
    
    // css
    .par1 {
       font-size: 20px;
    }
    .par2 {
       color: red;
    }
    

    在这里插入图片描述

    实测发现,2,3的字体颜色都为红色了而且字体大小都是20px,但是par3本身并没有声明这些属性值。

    形成这个现象的的原理,就是“CSS属性的继承”的特性。color值继承自par2, font-size的值继承自par1

    并不是所有的CSS属性都是可以继承的,或者说是自动继承

    <div class="par1">
       1
       <div class="par2" id="par2">
           2
       </div>
    </div>
    
    <style>
    .par1 {
       display: inline-block;
       font-size: 20px;
    }
    .par2 {
       color: red;
    }
    </style>
    
    <script>
    const par2 = document.getElementById('par2');
    const style2 = window.getComputedStyle(par2);
    console.log(style2.display); // block
    </script>
    
    

    window.getComputedStye() ,这个方法可以获取某个元素“计算后的CSS属性”。

    为什么par2的display是block, 而不是inline-block呢?

    par2的display的属性值为“block”,但是其父元素par1是"inline-block"。 形成这种现象的原理是“display为非自动继承的属性值”。

    如何让par2的display的值,随par1的值自动变化(也可以是继承自par1)呢?

    代码如下:

    .par2 {
        display: inherit;
    }
    

    此时, console.log(style2.display); 的输出值就是"inline-block"了。

    CSS能自动继承的属性

    border-collapse
    border-spacing
    color
    cursor
    direction
    empty-cells
    font(-style | - variant | -weight | -size | -family | -stretch | -size | -adjust)
    letter-spacing
    line-height
    list-style(-image | -position | -type)
    overflow-wrap
    pointer-events
    quotes
    text-indent 缩进
    text-size-adjust
    text-underline-position
    text-shadow
    text-align
    text-align-last
    text-justify
    test-transform
    tab-size
    table-layout
    white-space
    word-break
    word-wrap
    word-spacing
    writing-mode
    visibility
    zoom

    展开全文
  • css中无继承性的属性有:1、display;2、文本属性;3、盒子模型属性;4、背景属性;5、定位属性;6、生成内容属性;7、轮廓样式属性;8、页面样式属性;9、声音样式属性。本教程操作环境:windows10系统、css3、Dell...

    css中无继承性的属性有:1、display;2、文本属性;3、盒子模型属性;4、背景属性;5、定位属性;6、生成内容属性;7、轮廓样式属性;8、页面样式属性;9、声音样式属性。

    a0c6ff1c65a37f5a62f0ca42e5d3b93b.png

    本教程操作环境:windows10系统、css3、Dell G3电脑。

    无继承性的属性:

    1、display:规定元素应该生成的框的类型

    2、文本属性:

    vertical-align:垂直文本对齐

    text-decoration:规定添加到文本的装饰

    text-shadow:文本阴影效果

    white-space:空白符的处理

    unicode-bidi:设置文本的方向

    3、盒子模型的属性:width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

    4、背景属性:background、background-color、background-image、background-repeat、background-position、background-attachment

    5、定位属性:float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

    6、生成内容属性:content、counter-reset、counter-increment

    7、轮廓样式属性:outline-style、outline-width、outline-color、outline

    8、页面样式属性:size、page-break-before、page-break-after

    9、声音样式属性:pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

    相关推荐:CSS教程

    (学习视频分享:css视频教程)

    展开全文
  • css会被继承属性

    2018-04-13 02:29:04
    css会被继承属性css会被继承属性css会被继承属性
  • 所有元素可继承:visibility、cursor。内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration...

    所有元素可继承:visibility、cursor。

    内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。

    终端块状元素可继承:text-indent和text-align。

    列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。

    不可继承的:display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。

    展开全文
  • css属性继承问题

    千次阅读 2015-01-08 20:28:07
    概念:所谓CSS继承是指被包在内部的标签将拥有外部标签的样式性质,它是依赖于祖先-后代的关系的。继承特性最典型的应用通常发挥在整个网页的样式预设,需要指定为其它...color属性继承 案例1://body{color:red

    概念:所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式性质,它是依赖于祖先-后代的关系的。继承特性最典型的应用通常发挥在整个网页的样式预设,需要指定为其它样式的部份设定在个别元素里即可。

    css规则告诉浏览器如何去渲染HTML页面上特定的元素,css规则由两大部分组成,选择器+声明块,如:body{color:red;}

    color属性的继承
    案例1://body{color:red;}
     <p>>父级P<strong class="class_s" id="id_s">子级strong</strong>父级P</p>
     <ul>
            父级ul
             <li>子级li1</li>
             <li>子级li2</li>
            父级ul结束
         </ul>

    html文档树的理解,请看图: 文档树.png

    list-style属性的继承
    案例2:ul{list-style:none} li{list-style:none}


    优先级(权值越大优先级越高)来确定css规则继承指定的值:
    1、声明的权值比继承过来的权值高;
    案例4:ul{color:pink} li{color:lightblue}

    2、多种样式混合应用时的优先级如下:
    内联样式 > id选择器 > class选择器和伪类选择器 > 元素选择器和伪类元素选择器 > 通配符选择器 > 外联样式
    案例5: strong{color:black}
     .class_s{color:wheat}
      #id_s{color:blue}

     

    3、在文档中出现的顺序,越在后面出现的,优先级越高
    案例5:  strong{color:black} strong{color: lawngreen}

    4、人为定义CSS继承优先级(important规则)通过在一条规则的分号前插入!important这样一个短语来标记一条重要规则
     其优先级最高
    案例6:strong{color:black !important}


    并非所有的属性是继承的,例如boder,width,display等属性就不能继承
    案例7: p{border:1px solid;width:200px}
     <p>父级P<strong>子级strong</strong>父级P</p>
    <script>
         var p=document.getElementsByTagName("p")[0];
            var num=0;
            function bul(){
                if(num==0){
                    p.style.display="none";
                    num=1;
                }
                else{
                    p.style.display="block";
                    num=0;
                }

            }
        </script>
     

    下面总结了一些关于样式表的属性是否继承:
    1、字体(Font)
    继承性——有:font、color、font-family、font-size、font-size-adjust、font-stretch 、font-style 、font-style 、text-underline-position 、font-variant 、 text-transform line-height、letter-spacing 、word-spacing               
         
    继承性——无:text-decoration 、text-shadow


    2、文本(Text)
    继承性——有:text-indent 、text-align 、layout-flow 、writing-mode 、white-space 、word-wrap 、text-kashida-space 、layout-grid 、layout-grid-char 、layout-grid-char-spacing 、layout-grid-line 、layout-grid-mode 、layout-grid-type

    继承性——无:text-overflow 、vertical-align 、direction、unicode-bidi 、word-break 、line-break 、text-autospace、text-justify 、ruby-align 、ruby-overhang 、ruby-position 、ime-mode 、


    3、背景(Background)
    继承性都为无:
    background、background-origin 、background-clip 、background-size 、background-attachment 、background-color、background-image 、background-position 、background-positionX 、background-positionY 、background-repeat 、layer-background-color 、layer-background-image 


    4、定位(Position)
    继承性都为无:
    position 、z-index 、top、right 、bottom 、left


    5、尺寸(Dimensions)
    继承性都为无:
    height 、max-height 、min-height 、width、max-width 、min-width


    6、布局(Layout)
    继承性都为无:
    clear 、float、clip 、overflow、overflow-x、overflow-y、display、visibility


    7、外补丁(Margins)
    继承性都为无:
    margin 、margin-top 、margin-right 、margin-bottom 、margin-left


    8、轮廓(Outlines)
    继承性都为无:
    outline、outline-color 、outline-style 、outline-style 、outline-width


    9、边框(border)
    继承性都为无:
    border、border-color 、border-style 、border-image 、border-radius 、box-shadow、border-width 、border-top 、border-top-color 、border-top-style 、border-top-width 、border-right 、border-right-color 、border-right-style 、border-right-width 、border-bottom 、border-bottom-color 、border-bottom-style 、border-bottom-width 、border-left 、border-left-style 、border-left-width


    10、内补丁(Padding)
    继承性都为无:
    padding 、padding-top 、padding-right 、padding-bottom 、padding-left

     
    11、列表(Lists)
    继承性——有:list-style 、list-style-image 、list-style-position 、list-style-type

    继承性——无:marker-offset


    12、表格(Tabble)
    继承性都为有:
    border-collapse 、border-spacing 、caption-side 、empty-cells 、table-layout 、speak-header


    13、其他
    继承性都为无:
    cursor、zoom

    展开全文
  • 一、无继承性的属性 1、display 2、文本属性: vertical-align、text-decoration、text-shadow、white-space、unicode-bidi 3、盒子模型的属性: width、height、margin 、margin-top、margin-right、margin-bottom...
  • 这是一个十分新的 CSS 属性,使用起来十分简单,可以从各个方向反射我们内容。不过兼容性过于惨淡: 基本上是只有 -webkit- 内核的浏览器才支持。 不过使用起来真的是方便,解题如下: 不过使用起来真的是方便,...
  • CSS继承属性和不可继承属性

    千次阅读 2020-03-07 20:35:25
    继承属性: 1、所有元素可继承:visibility和cursor 2、内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-...
  • css属性继承,优先级

    2018-07-25 14:55:10
    css优先级 !important &gt; 行内样式 &gt; ID选择器 &gt; 类选择器 &gt; 标签 &gt; 通配符 &gt; 继承 &gt; 浏览器默认属性 不可继承属性(经常用的) display:规定元素应该生成...
  • CSS继承属性

    千次阅读 2019-06-24 20:20:34
    继承性的属性: 1、字体系列属性 font:组合字体 font-family:规定元素的字体系列 font-weight:设置字体的粗细 font-size:设置字体的尺寸 font-style:定义字体的风格 font-variant:设置小型大写字母的字体...
  • csscss继承属性
  • 哪些CSS属性可以继承

    2016-09-20 20:57:23
    (X)HTML元素可以从其父元素那里继承部分CSS属性,即使当前元素并没有定义该属性。 可以继承的属性有: azimuth border-collapse border-spacing caption-side color cursor directio
  • CSS 样式继承 inherit 属性

    千次阅读 2019-07-11 14:29:21
    CSS中,子元素会继承了父元素的一些样式属性。能够继承到子类的样式属性非常有限,仅是文字、字体、颜色... 子类如果还想继承父类的属性,可以通过inherit强制继承。 通过编辑器做了个合同管理的系统,要求就是...
  • 4.5.1值的继承 继承也是基于文档树的,文档树中元素的某些属性可以被其子元素继承,每一个CSS属性都定义了它能否被继承。例如有下列代码,其在浏览器内显示如图4-29所示。 p{color:green;} 文档树中一元素的某些值...
  • css属性哪些可以继承

    千次阅读 2020-08-26 10:41:51
    css的学习过程中,我们会遇到一些属性可以继承,那么,css中的继承是什么意思?有哪些属性可以继承呢?下面我们来看一下css中的属性有哪些可以继承css中有继承性的属性: 1、字体系列属性 font:组合...
  • css-可继承和不可继承属性

    千次阅读 2016-09-16 11:15:32
    css属性分类字体属性:font-family,font-size,font-style,font-variant,font-weight,font可继承ps: font-size继承的是计算后的实际值文本属性:word-spacing letter-spacing text-align text-transform text-indent...
  • Css属性继承

    千次阅读 2017-08-27 12:24:24
    肯定有很多人不知道什么是继承继承就是指子节点默认使用父节点的样式属性。 不可继承属性太多了不要背,记住可以继承属性有哪些就行了。可以继承属性很少,只有颜色,文字,字体间距行高对齐方式,和列表的...
  • css中可以和不可以继承属性

    千次阅读 2016-07-23 22:10:36
    css样式中不是全部的属性都是可以被子元素继承的,下面列出 css中可以和不可以继承属性
  • CSS中可以和不可以继承属性

    千次阅读 2017-07-16 15:27:42
    CSS中可以和不可以继承属性
  • 可以继承的样式:font-size、font-family、color、list-style、cursor 不可继承的样式:width、height、border、padding、margin、background
  • css可以从父元素继承属性有: 一 、字体系列属性 <!->通过指定font-size-adjust属性,浏览器将调整字体大小,无论字体系列("宋体"性质值0.58):<-!> font:组合字体 font-family:规定元素的字体...
  • 主要介绍了css属性继承,介绍了属性的可以继承和不可继承,同时分析了继承的局限性以及是否可以取消等等,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。
  • css样式表继承指的是,特定的css属性向下传递到后代元素,之前我们已经看了css中可以继承的属性,下面我们来看一下css中有哪些不可继承的属性。查看css中可继承的属性可以参考:css哪些属性可以继承?css中不可继承...
  • CSS哪些属性可以继承哪些不可继承继承属性:1.字体系列属性font:组合字体font-family:规定元素的字体系列font-weight:设置字体的粗细font-size:设置字体的尺寸font-style:定义字体的风格font-variant:偏大或偏小...
  • CSS继承属性和非继承性的属性

    千次阅读 2019-05-27 09:21:24
    不可继承的:display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-...
  • css子元素继承父元素属性

    千次阅读 2019-05-28 11:34:28
    样例: :global { .ant-form-item-label label { color: inherit; font-size: inherit;...css属性继承 - 文本 color(颜色,a元素除外) direction(方向) font(字体) font-family(字体...
  • CSS哪些属性会被继承

    2015-11-04 17:01:46
    CSS哪些属性会被继承: *文本 color颜色,a元素除外 direction方向 font字体 font-family字体系列 font-size字体大小 font-style用于设置斜体 font-variant用于设置小型大写字母 font-weight用于设置粗体 ...
  • css继承属性和不可继承属性

    千次阅读 2016-05-19 21:21:39
    不可继承的:display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 113,851
精华内容 45,540
关键字:

能继承的css属性