文档章节

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
博文 8
码字总数 1973
作品 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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

新工作与老项目

新的工作不知不觉的干了一个多月了。怎么说呢,跟想象中的差别不少,本来想的能进来跟大公司的同事能有很多交流,能在团队中跟大牛学习更快。结果公司的这个项目上只有两个程序员,项目是十年...

zypy333
8分钟前
0
0
mysql 在windows的安装

mysql 在windows的安装。 mysql64位的server的下载地址是: https://dev.mysql.com/downloads/mysql/ 使用的是5.7版本。 下载安装包,解压至D:\mysql\mysql-5.7.23-winx64\ 在D:\mysql\mysq...

lxzh504
20分钟前
1
0
云技术、大数据(hadoop)入门常见问题回答

当我们学习一门新技术的时候,我们总是产生各种各样的问题,这些问题整理出来,包括该 1.如何学习hadoop? 2.hadoop常见问题? 3.还有hbase、hive安装使用等? 你知道搭建hadoop平台需要些什...

董黎明
20分钟前
1
0
小程序自定义底部tab

场景 1.tabBar是在内页而非首页,这时就不得不自定义一个tabBar了 2.自定义风格 3.子页数量超过5个,得到更多了tab 4.改变点击tab默认事件,比如出登录界面,或者弹出上拉子菜单等 步骤 1.照...

萤火的萤火
26分钟前
1
0
shell炫技

1.为脚本添加“--help” #!/bin/shif [ ${#@} -ne 0 ] && [ "${@#"--help"}" = "" ]; then printf -- '...help...\n'; exit 0;fi; 2.输出字体添加颜色 https://misc.flogisoft.com......

HJCui
26分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部