文档章节

CSS 继承性

Yardbaby
 Yardbaby
发布于 2016/06/28 10:29
字数 527
阅读 52
收藏 0

#程序员薪资揭榜#你做程序员几年了?月薪多少?发量还在么?>>>

继承性:一定有标签的嵌套关系存在。

文字颜色:color可以实现继承;

源码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02</title>
  <style>
    body {
      background-color: #ccc;
    }
    div {
      color: #0f0;
    }
  </style>
</head>
<body>
  <div>
    <p>yardbaby</p>
  </div>
</body>
</html>

效果图:

文字大小:font-size可以实现继承;

源码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02</title>
  <style>
    body {
      background-color: #ccc;
    }
    div {
      color: #0f0;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div>
    <p>yardbaby</p>
  </div>
</body>
</html>

效果图:

行高:line-height可以实现继承;

源码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02</title>
  <style>
    body {
      background-color: #ccc;
    }
    div {
      height: 100px;
      color: #00f;
      font-size: 24px;
      border: 1px solid #000;
      line-height: 100px;
    }
  </style>
</head>
<body>
  <div>
    <p>yardbaby</p>
  </div>
</body>
</html>

效果图:

在块级元素中,width可以实现继承;

子元素是块级元素:

源码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02</title>
  <style>
    body {
      background-color: #ccc;
    }
    div {
      height: 100px;
      color: #00f;
      font-size: 24px;
      border: 1px solid #000;
      line-height: 100px;
    }
  </style>
</head>
<body>
  <div>
    <p>yardbaby</p>
  </div>
</body>
</html>

效果图:

注释:我并没有给div设置width,但是div有width,原因是div继承了body的width。

子元素是行内元素:

源码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02</title>
  <style>
    body {
      background-color: #ccc;
    }
    div {
      height: 100px;
      color: #00f;
      font-size: 24px;
      border: 1px solid #000;
      line-height: 100px;
    }
  </style>
</head>
<body>
  <div>
    <span>yardbaby</span>
  </div>
</body>
</html>

效果图:

注释:如上图源码所示,div中的span不能继承div的width,足以说明若子元素是行内元素,子元素不能继承父元素的width。

子元素是行内块元素:

源码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02</title>
  <style>
    body {
      background-color: #ccc;
    }
    div {
      height: 100px;
      color: #00f;
      font-size: 24px;
      border: 1px solid #000;
      line-height: 100px;
    }
    span {
      display: inline-block;
    }
  </style>
</head>
<body>
  <div>
    <span>yardbaby</span>
  </div>
</body>
</html>

效果图:

注释:当我把span变成行内块元素,但是span还是不能继承div的width。以上所综述,子元素能继承父元素的width,子元素必须是块级元素。

 

总结:所有涉及文字大小、字体、颜色。。。都可以实现继承。

特例:

    超链接a标签不能继承文字颜色(自己的颜色给父元素中的颜色层叠掉);

    标题标签不能继承font-size。

 

 

© 著作权归作者所有

上一篇: CSS层叠性
下一篇: 工作中遇到的坑
Yardbaby
粉丝 0
博文 20
码字总数 4622
作品 0
杭州
前端工程师
私信 提问
加载中

评论(0)

【CSS基础学习】CSS的三大特性

文章目录 CSS有三大特性,分别是 继承性,层叠性,优先级。CSS的主要特征是继承性,这里先讲解继承性。 继承性 继承性的使用说明 继承性的描述: 继承性是指被包在内部的标签将拥有外部标签的...

董小宇
04/17
0
0
CSS学习笔记4:CSS层叠性、继承性以及权重计算

在实际使用CSS选择器时,会遇到各种各样的情况,比如给一个父亲标签添加的样式会不会遗传给后代?比如如果用不同的方式给同样的内容添加样式,会听谁的?了解了CSS继承性、层叠性以及选择器的...

麦芒上的守望
2017/02/10
0
0
css的继承之width属性(容易忽略)

众所周知,css的三大特性分别是 继承性,层叠性,和优先级。 那么这里就详细说一下css中width的继承性及其特殊情况。 继承性概念详解:css的继承性指的被包在内部的标签拥有外部标签的样式性...

osc_0zx29dnz
2019/04/04
17
0
CSS(4)---三大特性(继承性,层叠性,优先级)

<center>三大特性(继承性,层叠性,优先级)</center> CSS有三大特性分别是: ,,。 <font color=#FFD700> 一、继承性</font> 给父元素设置一些属性,子元素也可以使用,这个我们就称之为继承...

osc_mblu5qn4
04/16
1
0
css 两大特性:继承性和层叠性

css 有两大特性: 继承性和层叠性,  继承性     面向对象语言都会存在继承的概念,在面向对象的语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css中没有方法,所以我...

osc_avwazwuz
2018/10/18
2
0

没有更多内容

加载失败,请刷新页面

加载更多

PDF如何添加下划线?迅捷PDF编辑器一键添加

“在PDF文件中如何添加下划线?”最近,很多办公室小伙伴都向小编咨询这样一个问题。我们常常需要接触、使用到PDF文件,通过查看、阅读、编辑PDF文件以处理各种各样的学习、工作任务。当我们...

dawda
17分钟前
20
0
go中gin框架+realize实现边写代码边编译,热更新

最近看到了热加载,相关的,就搜索了goland实现热加载 发现了一个插件realize https://github.com/oxequa/realize 然后,为了自己撸代码更方便,配合gin写个教程 1.准备 go get github.com/...

osc_ho8dcqsx
17分钟前
17
0
CAP理论的理解

转自:https://www.cnblogs.com/mingorun/p/11025538.html CAP理论的理解 CAP理论作为分布式系统的基础理论,它描述的是一个分布式系统在以下三个特性中: 一致性(Consistency) 可用性(Ava...

osc_5rgbamh9
18分钟前
24
0
求所有科目都大于80分的学生姓名

   蠢蠢的我=》 select t1.name from ( select name,count(*) as num from table t where fenshu>80 group by name) t1join( select name,count(kecheng) as num from table group ......

osc_gk4myeyk
19分钟前
13
0
Memcache(1.1)Memcache 基本概述与架构概述

【1】基本概念介绍 官网:https://memcached.org/ 【1.1】memcache与memcached memcache:是早期使用的,与php结合的,是Php中常用的一个原生插件,完全在php框架内开发的 memcached:是建立...

osc_7ie26pzn
20分钟前
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部