进击のpython

*****

前端学习——CSS性质

那在CSS上还有一些很重要的性质：继承性，层叠性以及特殊性

那本小节就基于这三个性质进行展开... ...

继承性

在CSS的某些样式是具有继承性的，那什么是继承性呢？

在官方上说，继承是一种规则，他允许样式不仅应用于特定的html标签元素，而且应用于其后代元素

如果你父亲是双眼皮，你母亲也是双眼皮，那你是双眼皮你就继承了父亲的双眼皮

那拿到我们实际的代码中应用呢？

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>继承性</title>
  6.   <style type="text/css">
  7.     div{
  8.       color: red;
  9.     }
  10.   </style>
  11. </head>
  12. <body>
  13.   <div>
  14.     百因<span>必</span>有果,你的<span>报应</span>就是我！
  15.   </div>
  16. </body>
  17. </html>

你会发现该颜色不仅仅应用在了div标签上，还应用在与div标签中所有子元素文本

但是并不是所有的属性都可以继承下来，像常见的color、font系列的、text-系列的是可以继承的

而有些继承，比如border:1px solid green，就不可以被继承

如果给div设置一个border:1px solid green;你就会发现，div是有条实心边框线

但是子元素span包含的文本根本就没起到作用

应用上也很普遍，比如我们在去设计网站的时候，网站统一的字体颜色是red，字体大小为16px，那么我们就可以很好地利用CSS的继承来实现此效果：

  1. body{
  2.     color:gray;
  3.     font-size:14px;
  4. }

层叠性

在之前我们学习了那么多的选择器，也知道会所采用就近原则来处理CSS的样式

那要是多个样式又要怎么确定与划分呢？

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         p {
  8.             color: red;
  9.         }
  11.         #wrap {
  12.             color: green;
  13.         }
  15.         .box {
  16.             color: yellow;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21. <p class='box' id="wrap">
  22.     猜猜我是什么颜色
  23. </p>
  24. </body>
  25. </html>

啊！是绿色的！那为什么呢？这就要介绍一下权重，权重高的就会优先显示

CSS权值的规则：

直接说可能不是很明白，我们可以用一个例子来研究：

  1. <div class='wrap1' id='box1'>
  2.     <div class="wrap2" id="box2">
  3.         <p class='active'>MJJ</p>
  4.     </div>
  5. </div>
  1. p{color:gray;}/*权值为1*/
  2. div div p{color:yellow;}/*权值为1+1+1=3*/
  3. .active{color:red;}/*权值10*/
  4. div .active{color:black;}/*权值为11*/
  5. div div .active{color:blue;}/*权值为12*/
  6. .wrap #box2 .active{color:purple;}/*权值为120*/
  7. #box1 #box2 .active{color:green;}/*权值为210*/

由此可以看出，其实对于权值的计算来说，首先它是不进位的，对于使用的选择器我们无非就是在数数，

数选择器的数量(按照顺序来，先是id再是class，再是元素)，比如：

  1. /*权值为 1  1  1*/
  2. #box1 .wrap2 div{
  3.     color:red;
  4. }

注意：继承来的属性也有权值，不过它的权值非常低，有的文档提出它只有0.1,所以可以理解为继承的权值最低。

特殊性

这部分，不到万不得已，不要用！因为它破坏了继承规则！

我们在做网页代码的时候，有些特殊的情况需要将某些样式设置成最高权限，怎么办？

我们知道内联样式的权值是1000，比较大，那么我们可以使用!important来解决

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>!important的使用</title>
  6.   <style type="text/css">
  7.     div{
  8.       color:green !important;
  9.     }
  10.   </style>
  11. </head>
  12. <body>
  13.   <div id="box" style="color:red;">
  14.     <span>么么哒</span>
  15.   </div>
  16. </body>
  17. </html>

注意：!important要写在分号的前面

你就会发现文本变成了绿色！但！是！使！用！imporrtant是一个坏习惯

应该尽量避免，因为这严重破坏了样式表中固有的权值比较规则，使得在调试bug变得更加困难

当两条相互冲突的带有!important规则作用与同一个标签，那么拥有最大优先级的将会被采用

什么时候采用

  • 第一种

    • 你的网站上有一个设计了全站样式的css文件
    • 同时你或者你的小伙伴写了一些很差的内联样式

  • 第二种

    1. #box p { color: blue; }
    2. p.awesome { color: red; }

    怎样才能使得文本的颜色变为红色？这种情况下，如果不用!important.第一条规则永远大于第二条的规则

*****
*****

前端学习（十一）：CSS性质的更多相关文章

  1. 前端学习：CSS的学习总结(图解）

    前端学习:CSS的学习总结(图解) CSS代码笔记 CSS简介 css的引入方式和书写规范 CSS选择器 CSS属性 CSS盒子模型 CSS的定位

  2. 2016.01.22 前端学习 HTML/CSS

    学习HTML/CSS  http://edu.51cto.com/course/course_id-3116.html 明日实践

  3. 前端学习 之 CSS（三）

    九:浮动 浮动是css里面布局最多的一个属性,也是很重要的一个属性. float:表示浮动的意思. 属性值: none: 表示不浮动,默认 left: 表示左浮动 right:表示右浮动 例: htm ...

  4. web前端学习笔记(CSS盒子的定位)

    相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它.      使用relat ...

  5. web前端学习笔记(CSS盒子的浮动)

    在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同.      CSS中有一个float属性 ...

  6. 前端学习之CSS

    CSS介绍 CSS(Cascading Style Sheet, 层叠样式表)定义如何显示HTML元素, 给HTML设置样式, 让它更加美观. 当浏览器读到一个样式表, 它就会按照这个样式表来对文档进 ...

  7. 前端学习 -- Html&Css -- 条件Hack 和属性Hack

    条件Hack 语法: <!--[if <keywords>? IE <version>?]> HTML代码块 <![endif]--> <keyw ...

  8. 前端学习 -- Html&Css -- 相对定位 绝对定位 固定定位

    相对定位 - 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素. - 通过position属性来设置元素的定位. -可选值: static:默认值,元素没有开启定位: rela ...

  9. 前端学习笔记——CSS选择器

    学习css选择器之前我们先了解下css规则: CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 1.id选 ...

  10. 前端学习 之 CSS（二）

    五:继承性和层叠性 css有两大特性,即继承性和层叠性. 1. 继承性 面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css就是在设 ...

随机推荐

  1. python黑帽子之tcp服务端

    试着用python创建一个标准的多线程tcp服务器 import socket import threading bind_ip = "0.0.0.0" bind_port = 8 ...

  2. node+ajax实战案例（3)

    3.用户注册实现 3.1.注册用户功能的实现逻辑 1 用户在表单上输入注册信息 2 点击注册后,收集用户在表单上输入的注册信息并且发送给后台 3 后台接收用户发送过来的注册信息 4 后台需要处理数据并 ...

  3. .Net Core 集成ExceptionLess分布式日志框架之本地化部署

    前言 公司目前使用的项目中关于日志记录这块,之前一直都是使用的Log4net 存放于后台文件中的,对于异常错误啊,或者需要查看一些详情错误的时候感觉很不方便,要到服务器上去打开日志文件检索错误,降低了 ...

  4. scrapy分布式抓取基本设置

    scrapy本身并不是一个为分布式爬取而设计的框架,但第三方库scrapy-redis为其扩展了分布式抓取的功能,在分布式爬虫框架中,需要使用某种通信机制协调各个爬虫工作 (1)当前的爬取任务,下载+ ...

  5. PE文件结构详解（三）

    0x01 前言 上一篇讲到了数据目录表的结构和怎找到到数据目录表(DataDirectory[16]),这篇我们我来讲讲数据目录表后面的另一个结构——区块表. 0x01 区块 区块就是PE载入器将PE ...

  6. 线下---复习day04---作业

    1 学的不好的同学:用ajax提交一个json格式数据,返回一个json格式数据,console.log打印出来 2 通过ajax上传一个文件并保存起来,前端接收到,弹窗说上传成功 urls.py f ...

  7. web 基础（二） HTML5

    web 基础(二) HTML5 一.HTML5 HTML5 是最新的 HTML 标准.是专门为承载丰富的 web 内容而设计的,并且无需额外插件.它拥有新的语义.图形以及多媒体元素.并提供的新元素和新 ...

  8. day58 前端收尾

    目录 一.jQuery结束 1 阻止后续事件执行 2 阻止事件冒泡 3 事件委托 4 页面加载 5 动画效果 6 补充知识点 二.前端框架Bootstrap 1 布局容器 2 栅格系统 3 栅格参数 ...

  9. Python3笔记027 - 6.2 参数传递

    第6章 函数 6.2 参数传递 在理解形参和实参的基础上,理解位置参数.关键字参数.可变参数这三种情形,以及这三种的混合情形. 6.2.1 形式参数和实际参数 形式参数:在定义函数时,函数名后面括号中 ...

  10. java 数据结构（十）：Collection子接口：Set接口

    1. 存储的数据特点:无序的.不可重复的元素具体的: 以HashSet为例说明:1. 无序性:不等于随机性.存储的数据在底层数组中并非照数组索引的顺序添加,而是根据数据的哈希值决定的.2. 不可重复性 ...