文档章节

CSS 继承性

yardbaby
 yardbaby
发布于 2016/06/28 10:29
字数 527
阅读 6
收藏 0
点赞 0
评论 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
杭州
程序员
Css3 filter图片处理

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

IamOkay ⋅ 2015/08/08 ⋅ 0

前端开发笔记(2)css基础(上)

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

lxq_xsyu ⋅ 2016/11/18 ⋅ 0

-webkit-line-clamp实现多行文字溢出隐藏显示省略号

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

欢乐小金鱼 ⋅ 2015/03/24 ⋅ 1

CSS background 属性

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

ke_ry ⋅ 2016/09/02 ⋅ 0

CSS overflow属性用法总结

CSS的overflow属性用法总结: 一个小知识点,积累一下。最近又开始接触界面了,也正好复习一下。 1、定义和用法: overflow 属性规定当内容溢出元素框时发生的事件。 2、说明: 这个属性定义...

Jose_Wang ⋅ 2014/01/23 ⋅ 0

overflow --百度百科

overflow CSS属性 overflow 为CSS中设置当对象的内容超过其指定高度及宽度时如何管理内容的属性。 基本特性 初始值: visible 适用于: block-level and replaced elements 继承性: 无 百分...

折冲樽俎 ⋅ 2011/05/09 ⋅ 0

css padding属性的用法,margin外边距,cursor 属性

CSS cursor 属性 css cursor: pointer变鼠标手 CSS margin外边距 围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。 设置外边距的最简单的方法就是使用 margin 属...

writeademo ⋅ 2016/10/10 ⋅ 0

border-collapse 各边框的显示优先级

border-collapse 属性设置表格中相邻td的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示。 默认值: separate 继承性: yes 版本: CSS2 JavaScript 语法: object.s...

隋茂华 ⋅ 2014/09/29 ⋅ 0

css对于继承问题的探索

对于css的继承有不了解的同学,我首先声明一下: 块级元素和内联级元素 块级元素: ①总是在新行上开始; ②高度,行高以及外边距和内边距都可控制; ③宽度缺省是它的容器的100%,除非设定一...

临江若仙 ⋅ 2014/02/16 ⋅ 0

CSS z-index 属性 控制div上下层次

CSS z-index 属性 控制div上下层次 CSS中 z-index z-index越大则显示在页面的最上面 CSS z-index 属性 http://www.w3school.com.cn/css/prposz-index.asp: 定义和用法 z-index 属性设置元素的...

一枚Sir ⋅ 2014/06/13 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

BS与CS的联系与区别【简】

C/S是Client/Server的缩写。服务器通常采用高性能的PC、工作站或小型机,并采用大型数据库系统,如Oracle、Sybase、InFORMix或 SQL Server。客户端需要安装专用的客户端软件。 B/S是Brower/...

anlve ⋅ 43分钟前 ⋅ 0

发生了什么?Linus 又发怒了?

在一个 Linux 内核 4.18-rc1 的 Pull Request 中,开发者 Andy Shevchenko 表示其在对设备属性框架进行更新时,移除了 union 别名,这引发了 Linus 的暴怒。 这一次 Linus Torvalds 发怒的原...

问题终结者 ⋅ 今天 ⋅ 0

在树莓派上搭建一个maven仓库

在树莓派上搭建一个maven仓库 20180618 lambo init 项目说明 家里有台树莓派性能太慢。想搭建一个maven私服, 使用nexus或者 jfrog-artifactory 运行的够呛。怎么办呢,手写一个吧.所在这个...

林小宝 ⋅ 今天 ⋅ 0

Spring发展历程总结

转自与 https://www.cnblogs.com/RunForLove/p/4641672.html 目前很多公司的架构,从Struts2迁移到了SpringMVC。你有想过为什么不使用Servlet+JSP来构建Java web项目,而是采用SpringMVC呢?...

onedotdot ⋅ 今天 ⋅ 0

Python模块/包/库安装(6种方法)

Python模块/包/库安装(6种方法) 冰颖机器人 2016-11-29 21:33:26 一、方法1: 单文件模块 直接把文件拷贝到 $python_dir/Lib 二、方法2: 多文件模块,带setup.py 下载模块包(压缩文件zip...

cswangyx ⋅ 今天 ⋅ 0

零基础学习大数据人工智能,学习路线篇!系统规划大数据之路?

大数据处理技术怎么学习呢?首先我们要学习Python语言和Linux操作系统,这两个是学习大数据的基础,学习的顺序不分前后。 Python:Python 的排名从去年开始就借助人工智能持续上升,现在它已经...

董黎明 ⋅ 今天 ⋅ 0

openJdk和sun jdk的区别

使用过LINUX的人都应该知道,在大多数LINUX发行版本里,内置或者通过软件源安装JDK的话,都是安装的OpenJDK, 那么到底什么是OpenJDK,它与SUN JDK有什么关系和区别呢? 历史上的原因是,Ope...

jason_kiss ⋅ 今天 ⋅ 0

梳理

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。 它是JS的状态容器,是一种解决问题的方式,所以即可以用于 react 也可以用于 vue。 需要理解其思想及实现方式。 应用中所有的 stat...

分秒 ⋅ 今天 ⋅ 0

Java 后台判断是否为ajax请求

/** * 是否是Ajax请求 * @param request * @return */public static boolean isAjax(ServletRequest request){return "XMLHttpRequest".equalsIgnoreCase(((HttpServletReques......

JavaSon712 ⋅ 今天 ⋅ 0

Redis 单线程 为何却需要事务处理并发问题

Redis是单线程处理,也就是命令会顺序执行。那么为什么会存在并发问题呢? 个人理解是,虽然redis是单线程,但是可以同时有多个客户端访问,每个客户端会有 一个线程。客户端访问之间存在竞争...

码代码的小司机 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部