文档章节

CSS 继承性

Yardbaby
 Yardbaby
发布于 2016/06/28 10:29
字数 527
阅读 6
收藏 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。

 

 

© 著作权归作者所有

共有 人打赏支持
Yardbaby
粉丝 0
博文 9
码字总数 2628
作品 0
杭州
程序员
前端开发笔记(2)css基础(上)

CSS介绍 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修...

lxq_xsyu
2016/11/18
0
0
Css3 filter图片处理

CSS3 增加了filter,即过滤功能,此功能非IE得filter 我想光看上面的效果就能吸引你了,要是你自己动手的话,我想您更会感到神奇。细一看,这些效果就像是photoshop整出来的一样,其实是真是...

IamOkay
2015/08/08
0
0
CSS background 属性

CSS background 属性 定义和用法 background 简写属性在一个声明中设置所有的背景属性。 可以设置如下属性: background-color background-position background-size background-repeat bac...

ke_ry
2016/09/02
0
0
-webkit-line-clamp实现多行文字溢出隐藏显示省略号

概述: -webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。 限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他外来...

欢乐小金鱼
2015/03/24
0
1
css 中的 initial inherit unset 意思

写css时,在对属性进行选值,经常遇到unset , initial,inherit三个值。这几个值的含义。 1.inherit 可继承性 继承的意思。 每一个 CSS 属性都有一个特性就是,这个属性必然是默认继承的 () 或...

longer88
08/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

命令行新建Maven多项目

参考地址 # DgroupId 可以理解为包名# DartifactId 可以理解为项目名mvn archetype:generate -DgroupId=cn.modfun -DartifactId=scaffold -DarchetypeArtifactId=maven-archetype-quickst......

阿白
26分钟前
0
0
OSChina 周四乱弹 —— 上帝对我单身年限的惩罚越来越长了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @达尔文:分享张卫健的单曲《身体健康》 《身体健康》- 张卫健 手机党少年们想听歌,请使劲儿戳(这里) 昨天是重阳节咯, 可惜小小编辑总是晚...

小小编辑
28分钟前
4
0
django rest framework 外键序列化方法与问题总结

django rest framework 外键序列化方法与问题总结 当借口中需要出现一对多关系的时候,我们可以用rest_framwork的序列化功能来处理,代码如下. # models.pyfrom django.db import modelscl...

_Change_
昨天
1
0
SingleNumber136 leetCode

Given a non-empty array of integers, every element appears twice except for one. Find that single one. Note: Your algorithm should have a linear runtime complexity. Could you im......

woshixin
昨天
1
0
String ,  StringBuffer ,  StringBuilder的区别

String , StringBuffer , StringBuilder的区别 String 首先,String 是用来表示一个字符串常量的,它是一个不可变对象,意味着,一旦我们创建了某个字符串之后,就不能再改变它的值了,我们可...

tsmyk0715
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部