XZ_CSS之CSS属性-继承和不可继承

最新推荐文章于 2024-05-20 17:52:28 发布

Understand_XZ

最新推荐文章于 2024-05-20 17:52:28 发布

阅读量425

点赞数

分类专栏： CSS 文章标签： CSS属性-继承 CSS属性-不可继承块级标签可继承列表标签可继承

本文链接：https://blog.csdn.net/understand_XZ/article/details/77561583

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS属性-继承和不可继承

CSS有N多属性，根据继承性，主要分为2大类：

可继承属性

父标签的属性值会传递给子标签
一般是文字控制属性

不可继承属性

父标签的属性值不能传递给子标签
一般是区块控制属性

< style >

/** 可继承性 */

body {

color : brown;

font-size : 18 px ;

}

</ style >

< body >

< div >我是块级标签</ div >

< span >我是行内标签</ span >

< button >我是行内-块级标签</ button >

</ body >

< style >

/** 不可继承性 */

#main {

background-color : gold;

width : 300 px ;

height : 100 px ;

}

.test1 {

background-color : green;

width : 150 px ;

}

</ style >

< body >

< div id = "main" >

< div class = "test1" >

我是里面的div

</ div >

</ body >

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（属性规定添加到文本的修饰, 这个属性允许对文本设置某种效果，如加下划线, 穿过文本下的一条线）、 text-transform 、 direction

/** 属性规定元素是否可见:这个属性指定是否显示一个元素生成的元素框，这意味着元素仍占据其本来的空间，不过可以完全不可见；

hidden隐藏，但是，保留占位；

默认值：visible；

可继承；

collapse当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用，如果此值使用在其他元素上，会呈现为"hidden" */

visibility : hidden ;

/** none隐藏且没有占位； */

display : none ;

cursor 属性规定要显示的光标的类型（形状）: 该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。

默认值：auto；可继承；

可能的值： crosshair（光标呈现为十字线。）； pointer（光标呈现为指示链接的指针（一只手））； move（此光标指示某对象可被移动。）； help（此光标指示可用的帮助（通常是一个问号或一个气球））。

text-decoration

< a href = "#" >我是超链接</ a >

a {

text-decoration : none ;

}

块级标签可继承

text-indent、text-align

text-indent:首行缩进

p .text1 {

/** 缩进30 */

text-indent : 30 px ;

}

p .text2 {

/** 根据父视图的7%缩进 */

text-indent : 7 % ;

}

< p class = "text1" >我是段落我是段落我是段落我是段我是段落我是段落我是段落我是段落落我是段落我是段落我是段落我是段我是段落我是段落我是段落我是段落落我是段落我是段落我是段落我是段我是段落我是段落我是段落我是段落落我是段落我是段落我是段落我是段我是段落我是段落我是段落我是段落落</ p >

< p class = "text2" >我是段落我是段落我是段落我是段我是段落我是段落我是段落我是段落落我是段落我是段落我是段落我是段我是段落我是段落我是段落我是段落落我是段落我是段落我是段落我是段我是段落我是段落我是段落我是段落落我是段落我是段落我是段落我是段我是段落我是段落我是段落我是段落落</ p >

列表标签可继承

list-style 、 list-style-type、 list-style-position、 list-style-image、

l ist-style 简写属性在一个声明中设置所有的列表属性。

可以按顺序设置如下属性：