CSS 继承

1、说明解释   -  TOP

这里DIV CSS 继承是指我们设置上级(父级)的CSS样式，上级（父级）及以下的子级（下级）都具有此属性。
一般只有文字文本具有继承特性，如文字大小、文字加粗、文字颜色、字体等。

2、实例：   -  TOP

  1. <!DOCTYPE html>
  2. <head>
  3. <meta http-equiv="Content-Type"
  4. content="text/html; charset=utf-8" />
  5. <title>CSS 继承特性 - www.divcss5.com</title>
  6. <style type="text/css">
  7. .yangshi{width:400px; color:#F00;}
  8. .ziji{ float:left; width:300px;}
  9. </style>
  10. </head>
  11. <body>
  12. <div class="yangshi">
  13. <div class="ziji">我是子级，我上级是yangshi</div>
  14. </div>
  15. </body>
  16. </html>


说明：我设置上级(父级：yangshi)的文字颜色为红色，而子级(ziji)未设置文字颜色，但是文字具有继承特性，所以子级文字内容依然是红色。

假如设置父级文字样式后，其多个子级中，可能有些子级颜色不想与父级相同，这个时候只需对对应子级设置需要颜色即可。
演示如下：

  1. <!DOCTYPE html>
  2. <head>
  3. <meta http-equiv="Content-Type"
     content="text/html; charset=utf-8" />
  4. <title>DIV CSS继承特性 - www.divcss5.com</title>
  5. <style type="text/css">
  6. .yangshi{width:400px; color:#F00;}
  7. .ziji{width:300px;}
  8. .ziji2{ width:300px; color:#000;}
  9. </style>
  10. </head>
  11. <body>
  12. <div class="yangshi">
  13. <div class="ziji">我是子级，我上级是yangshi</div>
  14. <div class="ziji2">我是子级2，我设置文字颜色为黑色</div>
  15. </div>
  16. </body>
  17. </html>


说明：yangshi下有ziji与ziji2两个子级，其中ziji继承了父级(上级的红色样式)，而ziji2我们需要的是黑色，所以单独对ziji2设置文字为黑色的样式。

3、继承好处   -  TOP

可以只设置上级的CSS样式表属性，子级（下级）不用设置，都有此CSS属性，可以减少CSS代码，便于维护。

4、常见继承CSS属性   -  TOP

1、字体：font-family
2、文字大小：css font-size
3、文本粗细：font-weight
4、文字颜色：css color
通常只有文字CSS font具有继承特性，所以大家好好利用与认识。

来自：http://www.divcss5.com/rumen/r132.shtml

时间： 2024-08-01 10:45:17

CSS 继承的相关文章

css 继承和层叠

css继承 1.css 可以继承的是背景(background).字体(font).文本(text) 宽高.浮动的元素不会继承. 2.css样式:浏览器默认样式.用户指定样式.作者定义样式. 3.css优先级(权值) 选择器   a  b  c   d 内嵌     1   0   0  0 id       0   1   0   0 属性/伪类 0   0   1   0 元素         0   0    0   1 !important 最高 一般:内嵌>内联/外部 eg: #con

谈谈一些有趣的CSS题目（四）-- 从倒影说起，谈谈 CSS 继承 inherit

开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 所有题目汇总在我的 Github . 4.从倒影说起,谈谈 CSS 继承 inherit 给定一张有如下背景图的 div: 制作如下的倒影效果: 方法很多,但是我们当然要寻找最快最便捷的方法,至少得是无论图

开发路程(26):CSS继承—深入剖析

CSS的继承是指被包在内部的标签将拥有外部标签的样式性质.继承特性最典型的应用通常发挥在整个网页的样式预设,即整体布局声明.而需要要指定为其它样式的部份设定在个别元素里即可达到效果.这项特性可以给网页设计者提供更理想的发挥空间.但同时继承也有很多规则,应用的时候容易让人迷惑. CSS允许我们为文档设置更为丰富且便于修改的外观.我们现在主要想和朋友们一起对CSS的继承性进行一点深入的探讨. CSS的一个主要特征就是继承,它是依赖于祖先—后代的关系的.继承是一种机制,它允许样式不仅可以应用于某个特定

css选择器、css继承关系、css盒子模型

一.摘要 总结前端部分css选择器.css继承关系.css盒子模型等相关知识,并对容易出错的地方进行分析说明. 二.原因 在开发前端页面时如果对css选择器.继承关系,层叠,以及padding.margin区别和浮动问题理解不到位,会导致不知道什么时候该用哪种方法来处理问题.此文档是针对这些问题进行说明. 以下是对相关知识点的总结与分析: 三.选择器 1.基本选择器 (1)* 通配符选择器  代表所有元素 例子: *{ margin:0; padding:0;} (2)标签选择器 代表网页中的所

CSS 继承深度解析

FROM ME: 之前在研究前端性能优化的时候,就有学习关于CSS中“善用CSS中的继承”. 原文:CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends 译文:掘金翻译计划 我酷爱模块化设计.长期以来我都热衷于将网站分离成组件,而不是页面,并且动态地将那些组件合并到界面上.这种做法灵活,高效并且易维护. 但是我不想我的设计看上去是由一些不相关的东西组成的.我是在创造一个界面,而不是一张超现实主

CSS继承的特殊性

p{color:red;} .first{color:green;} <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩.</p> 有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?我们来看一下上面的代码. p和.first都匹配到了p这个标签上,那么会显示哪种颜色呢?green是正确的颜色,那么为什么呢?是因为浏览器是根据权值来判断使用哪种css样式的,权

CSS继承、层叠和特殊性

1.继承 (1)样式应用于某个特定的HTML标签元素,而且应用于其后代. (2)但某些标签不适用,如border: (3)例子:p{color:red;}设置了颜色 <p class="first"> <p id="second"> 效果一样. 2.特殊性 (1)当标签匹配多个样式,浏览器根据权值来判断适用哪种CSS样式,权值高就使用哪种. (2)例子: p{color:red;} .first{color:green;} <p cla

CSS 继承和优先级

CSS继承性 CSS属性继承:外层元素的样式,会被内层元素进行继承. 多个外层元素的样式,最终都会“叠加”到内层元素上. 什么样的CSS属性能被继承呢? CSS文本属性都会被继承的: color. font-size.font-family.font-style. font-weight text-align.text-decoration.text-indent.letter-spacing.line-height 提示:<body>中的CSS属性,会被所有的子元素继承. CSS优先级 (1

CSS继承特殊

继承 CSS的某些样式具有继承性.继承是一种规则,它允许样式不仅作用于某个特定html标签元素,而且应用于其后代   如:在p中的所有字体都为红色     p{color:red;}    <p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩.</p> 但:只给p标签设置了边框为1像素红色实心边框线    p{border:1px solid red;}   <p>三年级时,我还是一个<span>胆小如鼠</sp