CSS样式表继承小结

2024-08-27 13:38

本文主要是介绍CSS样式表继承小结,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

CSS样式中不是全部的属性都是可以被子元素继承的,下面列出 CSS中可以和不可以继承的属性。

不可继承的:

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。

 

所有元素可继承:  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。

表格元素可继承:border-collapse。

-----------------------------------------我是分割线---------------------------------------

什么是css 继承?
要想了解css样式表的继承,我们先从文档树(HTML DOM)开始。文档树由HTML元素组成。

文档树和家族树类似,也有祖先、后代、父亲、孩子和兄弟^_^。这很容易理解吧,笔者在这里就不一一赘述了。希望深入了解的朋友请google之。

那么CSS样式表继承指的是,特定的CSS属性向下传递到子孙元素。

下面举个例子,有如下html代码片段:

<p>
CSS样式表<em>继承特性</em>的演示代码
</p>

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

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

<style>
p { color:red; }
</style>

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

也许各位看了以后觉得这是理所当然的,根本不值一哂^_^。其实,这就是继承。在不知不觉中影响这我们的代码(想像一下如果没有继承特性,你就需要为每一个元素定义颜色属性,这是多么痛苦的一件事情!!!=_=!)。

当然也不是所有的css属性都会被子类继承,例如border属性。继续利用上面的一段代码。我们为p元素添加border属性

p { border: 1px solid red; }

还好,p的border属性没有被em继承,否则是不是怪怪的呢?!^_^

那么,哪些属性是可以继承的呢?css样式表属性可以继承的有如下:

azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing

吓?!这么多?!怎么记得住呢?别急,我们来理一理这些属性。

文本相关属性:

azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells
font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height
, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, 
text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, 
word-spacing

列表相关属性:

azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style
, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing

还有一个属性比较重要,color属性。

值得一说的是font-size。很显然font-size是可以被继承的。但是它的方式有一些特别。Font-size的子类继承的不是实际值,而是计算后的值。下面解释下为什么font-size会这么特别呢?

看一个例子:

<p>
字体大小属性<em>继承特性</em>的演示代码
</p>

为p定义字体大小为默认字体的80%。

p { font-size:80%}

如果font-size继承的是相对值,那么结果会怎么样呢?依照这样的逻辑,em的font-size为80%X80%=64%,网页看起来应该是这样的。

但,实际情况却不是如此。em内的文字并没有改变大小,而是和p保持一致。

下面举三个例子,让各位有个直观的认识

p { font-size:14px;}

由于浏览器默认字体大小是16px,而p定义了字体14px,所以em继承了p的字体大小属性,也是14px;

元素 计算后的值
默认字体大小 约16像素  
<body> 未指定 约16px
<p> 14px 14px
<em> 未指定 继承值=14px

p { font-size:85%;}

浏览棋默认字体大小16px,而p定义了字体大小(16px X 85% = 13.6px). 13.6px这个值将被子元素em继承。

元素 计算后的值
默认字体大小 约16像素  
<body> 未指定 约16px
<p> 85% 16px X 85% = 13.6px
<em> 未指定 继承值=13.6px

p { font-size:0.85em;}

浏览棋默认字体大小16px,而p定义了字体大小(16px X 0.85em = 13.6px). 13.6px这个值将被子元素em继承。

元素 计算后的值
默认字体大小 约16像素  
<body> 未指定 约16px
<p> 0.85em 16px X 0.85em= 13.6px
<em> 未指定 继承值=13.6px

 

上面的例子都比较简答,再来个复杂的

body { font-size: 85%; }
h1 { font-size: 200%; }
h2 { font-size: 150%; }

浏览棋默认字体大小16px,而body定义了字体大小(16px X 85% = 13.6px). 如果子元素没有指定字体大小13.6px这个值将被子元素继承。

元素 计算后的值
默认字体大小 约16像素  
<body> 85% 16px X 85% = 13.6px
<h1> 200% 继承值=13.6px X 200%= 27.2px
<h2> 150% 继承值=13.6px X 150%= 20.4px
<p> 未指定 继承值=13.6px
<em> 未指定 继承值=13.6px

 

说到这里,CSS样式表的继承基本上讲完了。在实践中,还有一个特性值需要解释一下,这和继承的应用也是息息相关的。

样式表中的特性值描述了不同规则的相对权重,它的基本规则是:

◆统计选择符中的ID属性个数。

◆统计选择符中的CLASS属性个数。

◆统计选择符中的HTML标记名格式。

最后,按正确的顺序写出三个数字,不要加空格或逗号,得到一个三位数。(注意,你需要将数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。

以下是一个按特性分类的选择符的列表:

H1{color:blue;}     特性值为:1
PEM{color:purple;} 特性值为:2
.apple{red;}   特性值为:10
P.bright{color:yellow;}    特性值为:11
P.brightEM.dark{color:brown;}   特性值为:22
#id316{color:yellow}    特性值为:100

从上表我们可以看出#id316具有更高的特殊性,因而它有更高的权重。当有多个规则都能应用于同一个元素时,权重越高的样式将被优先采用。而继承属性的特性值为0;也就是说,任何一条与css继承值冲突的属性值都会覆盖继承的属性值!!!



这篇关于CSS样式表继承小结的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/1111825

相关文章

C#中lock关键字的使用小结

《C#中lock关键字的使用小结》在C#中,lock关键字用于确保当一个线程位于给定实例的代码块中时,其他线程无法访问同一实例的该代码块,下面就来介绍一下lock关键字的使用... 目录使用方式工作原理注意事项示例代码为什么不能lock值类型在C#中,lock关键字用于确保当一个线程位于给定实例的代码块中时

flask库中sessions.py的使用小结

《flask库中sessions.py的使用小结》在Flask中Session是一种用于在不同请求之间存储用户数据的机制,Session默认是基于客户端Cookie的,但数据会经过加密签名,防止篡改,... 目录1. Flask Session 的基本使用(1) 启用 Session(2) 存储和读取 Se

Python获取浏览器Cookies的四种方式小结

《Python获取浏览器Cookies的四种方式小结》在进行Web应用程序测试和开发时,获取浏览器Cookies是一项重要任务,本文我们介绍四种用Python获取浏览器Cookies的方式,具有一定的... 目录什么是 Cookie?1.使用Selenium库获取浏览器Cookies2.使用浏览器开发者工具

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

Kotlin Map映射转换问题小结

《KotlinMap映射转换问题小结》文章介绍了Kotlin集合转换的多种方法,包括map(一对一转换)、mapIndexed(带索引)、mapNotNull(过滤null)、mapKeys/map... 目录Kotlin 集合转换:map、mapIndexed、mapNotNull、mapKeys、map

Redis中Stream详解及应用小结

《Redis中Stream详解及应用小结》RedisStreams是Redis5.0引入的新功能,提供了一种类似于传统消息队列的机制,但具有更高的灵活性和可扩展性,本文给大家介绍Redis中Strea... 目录1. Redis Stream 概述2. Redis Stream 的基本操作2.1. XADD

SpringSecurity整合redission序列化问题小结(最新整理)

《SpringSecurity整合redission序列化问题小结(最新整理)》文章详解SpringSecurity整合Redisson时的序列化问题,指出需排除官方Jackson依赖,通过自定义反序... 目录1. 前言2. Redission配置2.1 RedissonProperties2.2 Red

C++中NULL与nullptr的区别小结

《C++中NULL与nullptr的区别小结》本文介绍了C++编程中NULL与nullptr的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编... 目录C++98空值——NULLC++11空值——nullptr区别对比示例 C++98空值——NUL

C++ Log4cpp跨平台日志库的使用小结

《C++Log4cpp跨平台日志库的使用小结》Log4cpp是c++类库,本文详细介绍了C++日志库log4cpp的使用方法,及设置日志输出格式和优先级,具有一定的参考价值,感兴趣的可以了解一下... 目录一、介绍1. log4cpp的日志方式2.设置日志输出的格式3. 设置日志的输出优先级二、Window

Python中反转字符串的常见方法小结

《Python中反转字符串的常见方法小结》在Python中,字符串对象没有内置的反转方法,然而,在实际开发中,我们经常会遇到需要反转字符串的场景,比如处理回文字符串、文本加密等,因此,掌握如何在Pyt... 目录python中反转字符串的方法技术背景实现步骤1. 使用切片2. 使用 reversed() 函