首页 web前端 css教程 css继承是什么意思?css哪些属性可以继承?

css继承是什么意思?css哪些属性可以继承?

Sep 03, 2018 pm 05:23 PM
css 继承

在css的学习过程中,我们会遇到一些属性可以继承,那么,css中的继承是什么意思?有哪些属性可以继承呢?本篇文章就给大家来介绍一下css中继承性的内容。

我们定义css继承前,先来看一看HTML DOM(文档树),HTML DOM(文档树)是由html元素组成,文档树和家族树类似,也有祖先、后代、父亲、孩子和兄弟。其实很容易就可以理解,这里就不多说了,要想了解更多的话可以看一下这个HTML DOM中文参考手册

css继承是什么意思?

看了文档树后,我们css中的继承就可以定义为特定的css属性向下传递到子孙元素。这其实也很好理解,就是指被包在内部的标签将拥有外部标签的样式性,即子元素可以继承父元素的属性。

我们下面就用一个例子再来具体的说明一下css的继承性是什么。

<p>
CSS<em>继承性</em>代码
</p>
登录后复制

需要注意的是em是包含在p之内的。

当我们指定p的css样式时,看看em会有什么变化呢?

<style>
p { color:red; }
</style>
登录后复制

在浏览器中p标签和em标签的字体同时变红。我们并没有指定em的样式,但em继承了它的父亲元素p的样式特性。

看到这里,我相信你应该非常清楚css中的继承是什么意思了,其实css继承在我们写代码时是经常会用到的,甚至在不知不觉间就用到了。

当然了,上述例子中我们的属性是可以被继承的,但是并不是所有属性都可以被继承的,那么css有哪些属性可以继承呢?下面我们来总结一下。

css有哪些属性可以继承?

1、css中有继承性的属性之字体属性中的:

font:字体。font-family:规定元素的字体。font-weight:设置字体的粗细。

font-size:设置字体的尺寸。font-style:定义字体的风格。

font-variant:设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。

font-stretch:对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。

font-size-adjust:为某个元素规定一个 aspect 值,这样就可以保持首选字体的 x-height。

2、css中有继承性的属性之文本属性中的:

text-indent:文本缩进。text-align:文本水平对齐。line-height:行高。word-spacing:增加或减少单词间的空白(即字间隔)。

letter-spacing:增加或减少字符间的空白(字符间距)。text-transform:控制文本大小写。direction:规定文本的书写方向。

color:文本颜色

3、css中有继承性的属性之元素可见性:

visibility:规定元素是否可见。

4、css中有继承性的属性之表格布局属性:

caption-side:设置表格标题的位置。border-collapse:设置是否将表格边框折叠为单一边框。

border-spacing:设置分隔单元格边框的距离。empty-cells:设置是否显示表格中的空单元格。

table-layout:设置显示单元、行和列的算法。

5、css中有继承性的属性之列表布局属性:

list-style-type:修改用于列表项的标志类型。list-style-image:对各标志使用一个图像。

list-style-position:可以确定标志出现在列表项内容之外还是内容内部。

list-style:简写列表样式,用于把所有用于列表的属性设置于一个声明中。

6、css中有继承性的属性之生成内容属性:

quotes:设置嵌套引用的引号类型。

7、css中有继承性的属性之光标属性:

cursor:规定要显示的光标的类型(形状)

8、css中有继承性的属性之页面样式属性:

page:规定元素应该被显示的页面特定类型。page-break-inside:设置在表格元素内部避免进行分页的分页行为。

windows:设置当元素内部发生分页时必须在页面顶部保留的最少行数。

orphans:设置当元素内部发生分页时必须在页面底部保留的最少行数。

9、css中有继承性的属性之声音样式属性

speak:设置或检索声音是否给出。speak-punctuation:设置或检索标点符号如何发音。

speak-numeral:设置或检索数字如何发音。speak-header:设置或检索表格头与其后的一系列单元格发生多少次关系。

speech-rate:设置或检索发音速度。volume:设置或检索音量。

voice-family:设置或检索当前声音类型。pitch:设置或检索音高。

pitch-range:设置或检索声音的平滑程度。stress:和pitch-range相似。设置或检索当前声音波形的最高峰值。

richness:设置或检索当前声音的音色。azimuth:设置或检索当前声音的音场角度。

elevation:设置或检索当前声音的音源仰角。

10、所有元素可以继承的属性:visibility、cursor

11、内联元素可以继承的属性:

(1)字体系列属性

(2)除text-indent、text-align之外的文本系列属性

12、块级元素可以继承的属性:text-indent、text-align

 上面这些就是关于css继承所给大家总结的内容了,当然了,如果你想在更进一步的去认识css继承的有关知识,你可以去php中文网看一看css视频教程栏目或者css3视频教程栏目,里面的各式css相关的视频。

相关推荐:

CSS 继承深度解析

css中属性值继承介绍

以上是css继承是什么意思?css哪些属性可以继承?的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

vue中怎么用bootstrap vue中怎么用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分为五个步骤:安装 Bootstrap。在 main.js 中导入 Bootstrap。直接在模板中使用 Bootstrap 组件。可选:自定义样式。可选:使用插件。

HTML,CSS和JavaScript的角色:核心职责 HTML,CSS和JavaScript的角色:核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构,CSS负责样式和布局,JavaScript赋予动态交互。三者在网页开发中各司其职,共同构建丰富多彩的网站。

bootstrap怎么写分割线 bootstrap怎么写分割线 Apr 07, 2025 pm 03:12 PM

创建 Bootstrap 分割线有两种方法:使用 标签,可创建水平分割线。使用 CSS border 属性,可创建自定义样式的分割线。

了解HTML,CSS和JavaScript:初学者指南 了解HTML,CSS和JavaScript:初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

解释self ::,parent ::和static :: in php oop中的区别。 解释self ::,parent ::和static :: in php oop中的区别。 Apr 09, 2025 am 12:04 AM

在PHPOOP中,self::引用当前类,parent::引用父类,static::用于晚静态绑定。1.self::用于静态方法和常量调用,但不支持晚静态绑定。2.parent::用于子类调用父类方法,无法访问私有方法。3.static::支持晚静态绑定,适用于继承和多态,但可能影响代码可读性。

bootstrap怎么调整大小 bootstrap怎么调整大小 Apr 07, 2025 pm 03:18 PM

要调整 Bootstrap 中元素大小,可以使用尺寸类,具体包括:调整宽度:.col-、.w-、.mw-调整高度:.h-、.min-h-、.max-h-

bootstrap怎么设置框架 bootstrap怎么设置框架 Apr 07, 2025 pm 03:27 PM

要设置 Bootstrap 框架,需要按照以下步骤:1. 通过 CDN 引用 Bootstrap 文件;2. 下载文件并将其托管在自己的服务器上;3. 在 HTML 中包含 Bootstrap 文件;4. 根据需要编译 Sass/Less;5. 导入定制文件(可选)。设置完成后,即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。

bootstrap怎么插入图片 bootstrap怎么插入图片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入图片有以下几种方法:直接插入图片,使用 HTML 的 img 标签。使用 Bootstrap 图像组件,可以提供响应式图片和更多样式。设置图片大小,使用 img-fluid 类可以使图片自适应。设置边框,使用 img-bordered 类。设置圆角,使用 img-rounded 类。设置阴影,使用 shadow 类。调整图片大小和位置,使用 CSS 样式。使用背景图片,使用 background-image CSS 属性。

See all articles