文档章节

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。

 

 

© 著作权归作者所有

共有 人打赏支持
上一篇: CSS层叠性
下一篇: CSS层级
Yardbaby
粉丝 0
博文 9
码字总数 2628
作品 0
杭州
程序员
私信 提问
前端开发笔记(2)css基础(上)

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

lxq_xsyu
2016/11/18
0
0
宋祥周结

这周看了css层叠样式表,学习了选择符样式,选择器,伪类选择符,标签继承性特殊性,还有文字排版。 选择符有1.内联式 2.嵌入式

sx宋祥
2015/10/27
2
1
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

没有更多内容

加载失败,请刷新页面

加载更多

Dubbo下一站:Apache顶级项目

摘要: 导读: 近日,在Apache Dubbo开发者沙龙杭州站的活动中,阿里巴巴中间件技术专家曹胜利(展图)向开发者们分享了Dubbo2.7版本的规划。 本文将为你探秘 Dubbo 2.7背后的思考和实现方式。...

阿里云云栖社区
13分钟前
1
0
Vim中快捷键命令介绍

map命令简介 map是一个映射命令,将常用的很长的命令映射到一个新的功能键上。map是Vim强大的一个重要原因,可以自定义各种快捷键,用起来自然得心应手。Vim中有五种映射存在: 用于普通模式:...

陶小陶
17分钟前
2
0
结合实际场景谈一谈微服务配置

作为 Nacos 5W1H 的系列文章,本文将围绕“Where”,讲述 Nacos 配置管理的三个典型的应用场景: 数据库连接信息 限流阈值和降级开关 流量的动态调度 上一篇:Nacos帮我解决了什么问题? 数据...

阿里云官方博客
19分钟前
1
0
Docker | 采用镜像alpine缺少时区解决方法

加入: RUN apk --update add tzdata当然也可以安装其他的如 procps, php 等

云迹
19分钟前
2
0
在Python中调用Java扩展包HanLP测试记录

最近在研究中文分词及自然语言相关的内容,关注到JAVA环境下的HanLP,HanLP是一个致力于向生产环境普及NLP技术的开源Java工具包,支持中文分词(N-最短路分词、CRF分词、索引分词、用户自定义...

左手的倒影
30分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部