网页|CSS继承性

提出问题

为了使我们的网页能够以更加有效的方式设置为网页格式,我们添加CSS,但我们不可能重复的添加相同的样式,这样太浪费时间,因此CSS增加了继承。继承是指包含在内部样式的标签能够拥有外部标签的样式性,即子元素可以继承父元素的属性。这种继承性允许样式不仅应用于某个特定的元素,同时也应用于其后代,而其后代所定义的新样式,却不会影响父代样式。但我们在写写继承的时候总是会出错,所以接下来我们就来系统的讲一下CSS的继承性的一些特殊点。

解决问题

1、CSS继承的局限性

在CSS中,继承是一种非常自然的行为,我们甚至不需要考虑是否能够这样去做,但是继续也有其局限性。首先,有些属性是不可继承的。这没有任何原因,只是因为它就是这么设置的。举个例子来说:border属性,大家都知道,border属性是用来设置元素的边框的,它就没有继承性。如果继承了边框属性,那么文档看起来就会很奇怪,除非采取另外的办法闭掉边框的继承属性。Padding(补白),Margin(边界),背景和边框的属性都是不能继承的。

2.继承中容易引起的错误

有时候继承也会带来些错误,比如说下面这条CSS定义:

body{color:blue}

在有些浏览器中这句定义会使除表格之外的文本变成蓝色。从技术上来说,这是不正确的,但是它确实存在。所以我们经常需要借助于某些技巧,比如将CSS定义成这样:

body,table,th,td{color:blue}

这样表格内的文字也会变成蓝色

3.多种样式混合应用

既然有了继承性,那么在样式表中的应用上可能会有些读者搞不清,多个样式表同时应用到一个对象上会发生什么情形呢?先举个简单的例子:

样式定义:

.apple{color:red;}  h1{color:yellow;}

应用举例代码:

<h1 class=”apple”>这儿的苹果好红啊</h1>

应用举例效果:

因为选择符H1和.apple都匹配上面的H1元素,那么到底浏览器会应用哪一个呢?通过在浏览器中观察,我们发现这段文字应用了.apple这个样式,所以它显示的是红色。这是因为两条规则的特殊性不一样,CSS规则必须这样进行处理。

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

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

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

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

4.CSS继承的优先级问题

上面我们讨论了CSS的继承性和特殊性,在特殊性的框架下,被继承的特性值为0,这就意味着任何显示声明的规则将会覆盖其继承样式。因此,不管一条规则具有多高的权重,如果没有其他规则能应用于这个继承元素,那么它也只是个被继承的规则而已,举例说明。

样式定义:

body {background:pink;}li {color:gray;}ul white{color:white;}

应用举例代码:

<ul>  <li>举例列表一</li>  <li>举例列表二</li>  <li>举例列表三</li>  <li>举例列表四</li></ul>

结果:

为什么我们在ul里面设置了颜色为白色,但是显示出来的颜色却变成了灰色呢?因为带选择符li的显式声明的权值比从ul white规则那里继承过来的权值要大,所以每个列表项都是灰色的。所以在设置的时候要注意一下选择符的优先级。

CSS的继承是我们在写CSS样式时最容易出现的错误,我们要注意以上的一些内容,避免自己的样式显示不出来,又找不到问题。

本文分享自微信公众号 - 算法与编程之美(algo_coding)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Android动画-概述

    其中Drawable Animations对大多数人来说是三者中最容易理解的,其实它就是很多书籍中提到的逐帧动画(frame-by-frame animatio...

    剑行者
  • Webkit底层原理(5)--CSS解释器和样式布局

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    从入门到进错门
  • 2篇搞定CSS基础知识----第一篇

    CSS层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML或者XML等文件样式的计算机语言。其扩展名为.css。CSS不仅...

    Lemon黄
  • 微信小程序页面路由

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    菲宇
  • Android动画-Drawable Animation(帧动画)

    Drawable Animation是逐帧动画,就像GIF图片,通过一系列Drawable依次显示来模拟动画的效果,那么使用它之前必须先定义好各个帧。我们可以通...

    剑行者
  • Android动画-Property Animation

    Property Animation故名思议就是通过动画的方式改变对象的属性了,所以他也是功能最为强大的,可以这样说前面的帧动画和视图动画能做到的,他都能做到,...

    剑行者
  • 2篇搞定CSS基础知识----第二篇

    padding-top(上内边距),padding-right(右内边距),padding-bottom(下内边距),padding-left(左内边距)

    Lemon黄
  • 高性能Web动画和渲染原理系列(2)——渲染管线和CPU渲染

    动画的流畅程度通常是以FPS(Frame Per Second,每秒帧率)作为衡量的。在摄像机录制视频时每一帧实际上包含了一段时间内的画面记录(长曝光摄影的道理...

    大史不说话
  • Android动画之View Animation

    Android的View animation由四种类型组成:alpha、scale、translate、rotate

    剑行者
  • 个人常用设计类网站汇总分享

    由于自己偶尔会写一些微信公众号的文章,同时在学习ps的过程中也遇到一些不错的网站。这里总结下来,希望对大家有帮助。推荐的只是网站,有大量优秀的客户端设计工具,后...

    卡二条的技术圈子

扫码关注云+社区

领取腾讯云代金券