css的继承性小白入门_继承入门基础知识

css 的继承性是什么?在面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法。
那么我们现在主要研究css,css就是在设置属性的。不会牵扯到方法的层面。css的继承:就是给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承。 官方解释,继承是一种规则,它允许样式不仅应用于特定的html标签元素,而且应用于

css的继承性小白入门

css 的继承性是什么?

在面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法。
那么我们现在主要研究css,css就是在设置属性的。不会牵扯到方法的层面。

css的继承性小白入门_继承入门基础知识

css的继承:就是给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承。 

官方解释,继承是一种规则,它允许样式不仅应用于特定的html标签元素,而且应用于其后代元素。 

代码 实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>继承性</title>
  <style type="text/css">
    div{
        color: deeppink;
        font-size: 40px;
        background: aqua;
        width: 400px;
        height: 400px;
    }
  </style>
</head>
<body>
  <div>
      小白兔<span>白又白</span>两只<span>耳朵</span>竖起来
  </div>
</body>
</html>

执行效果

css的继承性小白入门_继承入门基础知识

父元素的属性那些可以被子元素继承,哪些不能呢?

一、无继承性的属性

1、display:规定元素应该生成的框的类型

2、文本属性:

​ vertical-align:垂直文本对齐

​ text-decoration:规定添加到文本的装饰

​ text-shadow:文本阴影效果

​ white-space:空白符的处理

​ unicode-bidi:设置文本的方向

3、盒子模型的属性:width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、 border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

4、背景属性:background、background-color、background-image、background-repeat、background-position、background-attachment

5、定位属性:float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

6、生成内容属性:content、counter-reset、counter-increment

7、轮廓样式属性:outline-style、outline-width、outline-color、outline

8、页面样式属性:size、page-break-before、page-break-after

9、声音样式属性:pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

二、有继承性的属性

1、字体系列属性

​ font:组合字体

​ font-family:规定元素的字体系列

​ font-weight:设置字体的粗细

​ font-size:设置字体的尺寸

​ font-style:定义字体的风格

​ font-variant:设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写 字体的字母与其余文本相比,其字体尺寸更小。

​ font-stretch:对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。

​ font-size-adjust:为某个元素规定一个 aspect 值,这样就可以保持首选字体的 x-height。

2、文本系列属性

​ text-indent:文本缩进

​ text-align:文本水平对齐

​ line-height:行高

​ word-spacing:增加或减少单词间的空白(即字间隔)

​ letter-spacing:增加或减少字符间的空白(字符间距)

​ text-transform:控制文本大小写

​ direction:规定文本的书写方向

​ color:文本颜色 a元素除外

3、元素可见性:visibility

4、表格布局属性:caption-side、border-collapse、border-spacing、empty-cells、table-layout

5、列表布局属性:list-style-type、list-style-image、list-style-position、list-style

6、生成内容属性:quotes

7、光标属性:cursor

8、页面样式属性:page、page-break-inside、windows、orphans

9、声音样式属性:speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、 pitch、pitch-range、stress、richness、、azimuth、elevation

三、所有元素可以继承的属性

1、元素可见性:visibility

2、光标属性:cursor

四、内联元素可以继承的属性

1、字体系列属性

2、除text-indent、text-align之外的文本系列属性

五、块级元素可以继承的属性

1、text-indent、text-align

海计划公众号
(0)
上一篇 2020/03/30 07:13
下一篇 2020/03/30 07:13

您可能感兴趣的内容

  • Freeplane新手入门_免费思维导图制作工具

    Freeplane新手入门 官方网址:https://www.freeplane.org/ 简介描述:免费思维导图制作工具 “Freeplane”是一款免费且功能强大的思维导图制作…

    2020/03/11
  • MontageJS使用攻略_一个现代化,完整的HTML5的框架

    MontageJS使用攻略 官方网址:https://github.com/montagejs/montage GitHub:http://montagestudio.com/mo…

    2020/03/06
  • 计算机毕业大学生如何解决难就业问题?使用指南_就业小白常识

    计科专业已经毕业7.8年了,一直从事着软件开发方面的工作,计算机毕业的大学生从事软件编程只是其中一个选择。计算机专业内部包含的种类也是非常繁多,毕业后能直接做的事情也是非常多,现在就以个人的经历描述下一个计算机毕业的大学生如何从事编程开发方面的工作,学校里面开设的课程主要还是理论为主,毕竟学校面向的是所有社会各种工作类型,不可能直接就是面向一个固定的方向。其

    2020/03/30
  • 程序员在职场工作中会担心什么?小白基础_职场入门基础教程

    最近热点的事件比较多,“996.ICU”事件风波,各大互联网公司裁员美其名曰“优化”,跳槽出去又碰见“寒冬”,偏偏恰逢你中年的时候有个代名词名曰“中年危机”。这让很多人非常的焦虑,正所谓祸兮福所倚,福兮祸所伏,你焦虑说明你还是有忧患意识的,古人云生于忧患,死于安乐。所以其实职场人更担心的是死于安乐,停止了你学习进步的脚步。“996.ICU”事件风波996由来

    2020/03/29
  • Rickshaw小白基础一个用于绘制时序图的简单 jS 库

    Rickshaw基础入门 官方网址:https://shutterstock.github.io/rickshaw GitHub:https://github.com/shutte…

    2020/03/05
  • 简述dom diff原理基础知识入门_dom菜鸟知识

    前言:关于react的虚拟dom以及每次渲染更新的dom diff,网上文章很多。但是我一直信奉一个原则,即:但凡复杂的知识,理解之后都只需要记忆简单的东西,而想简单、精确描述一个复杂知识,是极困难的事。正文dom diff是什么?1.从根节点开始遍历所有节点;2.对于不同类型的标签,删除原标签,新建标签;3.对于类型相同、属性不同的标签,只修改属性;4.对

    2020/03/30
  • ThinkPHP框架基础知识教程_中文最佳实践PHP开源框架,专注WEB应用快速开发

    ThinkPHP框架基础知识教程 官方网址:http://www.thinkphp.cn/ GitHub:https://github.com/top-think/think 简介…

    2020/03/06
  • Vue常用经典开源项目汇总参考-海量指南攻略_vue基础入门

    Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简

    2020/04/05
  • Laravel 软删除存在的问题使用攻略_Laravel使用教程

    1、软删除使用的标记类型是时间类型,通过is null条件查询,删除标记取值不支持定义//Illuminate\Database\Eloquent\SoftDeletingScopepublic function apply(Builder $builder, Model $model)
    {$builder->whereNull($model->getQua

    2020/03/26
  • 20 行代码实现模板引擎入门知识_引擎小白攻略

    实现功能 : 变量值的替换、if / else 及 for 循环等复杂操作。// 最终效果
    var opt = {hero: {name: ‘Flash’,age: 22,},skills: [‘time travel’,’speed force’,’strike lightening’]
    }var str =

    ‘ + ‘<% if( this.h

    2020/03/24
  • web图片前端裁剪功能实现小白常识利用html5 canvas技术实现图片裁剪_canvas入门基础教程

    用户上传头像然后截图的需求很常见,很多做法是把图像发送到后端,把裁剪后的结果发送给浏览器,这种方式会增加处理时延。最近正好学习了HTML5里的canvas,发现它的图片处理功能比较强大,就打算用canvas提供的API实现纯前端的剪切。这里头关键有三步:显示未经处理的图片,得到裁剪区域,显示裁剪后的区域。我们分别讨论:1. 显示未经处理的图片 创

    2020/04/05
  • JS算法题之整数反转菜鸟教程_算法题入门基础知识

    题目描述给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转。注意:假设我们的环境只能存储得下 32 位的有符号整数,则其数值范围为 [−231, 231 − 1]。请根据这个假设,如果反转后整数溢出那么就返回 0。示例输入: 123输出: 321输入: -123输出: -321输入: 120输出: 21解答这题就很简单了,不过要考虑好边

    2020/03/29
  • Bootstrap Table 后端分页基础知识教程_分页小白攻略

    之前一直用的前端分页,在数据不是太多的情况下,前端分页还是很方便的,也可以使用自带的搜索等功能,如果数据量比较多的情况就要使用后端分页。实现的原理:前端把offset和limit(每一页显示的数量)发送给后端,后端查询数据库 返回JSON,前端根据后端返回的total展示出pagination。返回的JSON格式{“total”: 25,”rows”: [{

    2020/03/24
  • 什么是CDN缓存?CDN的入门了解小白入门_CDN入门百科

    前言这段时间,在工作中遇到了一个CDN导致的图片资源加载的错误,在排查问题的过程中,发现自己对CDN的了解非常的片面,仅仅停留在它能缓存静态资源,提升访问速度的了解中。所以觉得还是非常有必要深入去了解下。什么是CDN?CDN的全称是Content Delivery Network,即内容分发网络,是指一种通过互联网互相连接的电脑网络系统,利用最靠近每位用户的

    2020/04/05
  • javascript中defer的作用是什么菜鸟教程网_脚本入门基础教程

    javascript中defer的作用是什么菜鸟教程网 Javascript中defer的作用是文档加载完毕了再执行脚本,这样会避免找不到对象的问题。 defer是脚本程序强大功能…

    2020/03/19
  • CSS margin的一些让你模糊的点入门基础知识_margin小白攻略

    当我们学习CSS时,我们大多数人学到的第一件事是CSS中盒子的各个部分的细节,这部分通过叫做 CSS盒、模型。“盒模型”中的元素之一是margin,即盒子周围的透明区域,它会将其他元素从盒子内容中推开。CSS1中描述了 margin-top、margin-right、margin-bottom和margin-left属性,以及一次设置所有四个属性的简写 ma

    2020/03/26