1、 Css基础

1.1 CSS（层叠样式表 Multiple Styles）

  CSS 是 Cascading Style Sheets(层叠样式表)的简称。

CSS 语言是一种标记语言，它不需要编译，可以直接由浏览器解释执行。

CSS 文件也可以说是一个文本文件，它包含了一些 CSS 标记，CSS 文件必须使用 css 为文件名后缀。

1.2 CSS权值、CSS优先级

CSS的权值设计到浏览器解析CSS 优先级的问题，当选择器权值越大则优先级越大，最直接的体现是设定后的CSS后却没有效果，样式失效，样式冲突，

这种问题一般发生于新手，很多情况下是忽视了CSS中的权重 specificity；

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

   <style>

       #btnFirst{

           backgroud-color:red;

       }

       /*

  #btnFirst

  {

      background-color: blue;

  }

 */

       #button-group button{

           background-color: green;

       }

   </style>

 </head>

 <body>

 <div id="button-group">

     <div>

         <button type="button" id="btnFirst" class="btn">提交</button>

     </div>

     <button type="button" class="btn">提交</button>

 </div>

 </body>

 </html>

如上显示提交按钮为绿色；

下面是权值的规则：

  1. 通配选择符的权值 0,0,0,0
  2. 标签的权值为 0,0,0,1
  3. 类的权值为 0,0,1,0
  4. 属性选择的权值为 0,0,1,0
  5. 伪类选择的权值为 0,0,1,0
  6. 伪对象选择的权值为 0,0,0,1
  7. ID的权值为 0,1,0,0
  8. important的权值为最高 1,0,0,0

计算规则也很简单，就是 选择器的权值加到一起，大的优先；如果权值相同，后定义的优先 。

从上面我们可以得出两个关键的因素：

  1. 权值的大小跟选择器的类型和数量有关；
  2. 样式的优先级跟样式的定义顺序有关；

为了方便整理顺便提下样式的优先级

     永记在心： important > 内联 > ID > 类|属性|伪类 > 标签|伪元素  > 通配符 > 继承  

     简单记住这几个就够用了： important > 内联 > ID > 类|属性|伪类 > 标签|伪元素

                            important > style="" >#first > .myClass | [type='button'] | :hover > input | ::after  

1.3 关于继承

除了直接指定到元素上的样式规则以外，每个属性值还有一个可能为 inherit(继承) 的值。表示元素的该样式属性继承自父级元素，与父级元素的定义一致。比如：

<style>

  .list .item { color: red }

</style>

<ul class="list">

    <li class="item">

        <span>某些文字</span>

    </li>

</ul>

上例中，样式规则并未针对 span 标签指定 color 属性， 但是 span 中的文字会显示为红色， 这就是因为 span 的 color 属性默认值为 inherit.

对于 inherit 的属性，只要记住一点： 继承而来的属性值，权重永远低于明确指定到元素的定义。只有当一个元素的某个属性没有被直接指定时，才会继承父级元素的值。例如：

 <style>

   span { color: blue }

   .list .item { color: red }

 </style>

 <ul class="list">

     <li class="item">

         <span>某些文字</span>

     </li>

 </ul>

同样的例子， 第一条规则的权重是 0,0,0,1, 第二条规则的权重是 0,0,2,0. 虽然第二条规则的权重更高，但是它是针对 li 元素的直接指定，并不是针对 span 元素定义的，所以计算 span 的 color 属性权重值时，实际上就是 inherit 的红色与直接指定的蓝色的对比。按照规则，只要有直接指定的值（蓝色），就不会再取继承的值（红色），所以 span 中的文字显示为蓝色。

这条规则最典型的场景就是链接文字的颜色。由于一般浏览器自带的样式表都有针对a 标签的颜色及下划线的直接指定，所以网页样式表中对 a 标签的父级元素指定color 属性及 text-decoration 属性，通常不会起作用。但是我们可以通过下面的reset 来改变这一点：

 <style>

 a { color: inherit; text-decoration: inherit }

 .item { color:red }

 </style>

 <p class="item"><a href="#">链接文字</a></p>

在上例中，由于我们的样式表对 a 标签直接指定了 color 和 text-decoration 属性值， 覆盖了浏览器的默认样式，所以在没有特别指定 a 标签的颜色和下划线定义的前提下， 会从父级元素 p 继承，因此链接会显示为红色。

特别补充：inherit 在 CSS1 规范中并未定义，所以 IE6, IE7 以及 IE8 的 QuirksMode 不支持。

总结

  1. 一条样式规则的整体权重值包含四个独立的部分：[A, B, C, D];
  2. A 表示内联样式，只有 1 或者 0 两个值；
  3. B 表示规则中 ID 的数量；
  4. C 表示规则中除了 ID、标签和伪元素以外的其它选择器数量；
  5. D 表示规则中标签和伪元素的数量；
  6. 比较时从高位到低位（从 A 到 D）分别比较，高位相同才需要比较低位；
  7. 有 !important 标记的属性权重值无视没用 !important 指定的一切情况；
  8. 多次指定 !important 时，相互抵销。
  9. inherit 而来的属性定义，优先级低于任何直接指定的属性值。

感觉说了好多，其实就两点：

1、浏览器渲染CSS时会计算用哪些选择器的样式，所以通过权值来决定

权值的大小跟选择器的类型和数量有关

2、浏览器在渲染CSS时难免会存在多个样式对同一元素产生影响，这就需要样式优先级来控制

样式的优先级跟样式的定义顺序有关

推荐书籍《页面重构中的模块化设计》；

CSS基础(01)的更多相关文章

  1. CSS基础01

    1.line-height:设置每行的高度,默认是会以文字的高度来决定 2.text-align:设置文本的对齐方式 3.vertical-align: sub 垂直对齐文本的下标. super 垂直 ...

  2. CSS基础知识01

    一.CSS基础知识介绍 1.css是cascading style sheet层叠式样式表的简写 2.css小用法 加粗:font-weight:bold;             正常用:norma ...

  3. javascript基础01

    javascript基础01 Javascript能做些什么? 给予页面灵魂,让页面可以动起来,包括动态的数据,动态的标签,动态的样式等等. 如实现到轮播图.拖拽.放大镜等,而动态的数据就好比不像没有 ...

  4. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  5. (转)第一天　XHTML CSS基础知识 文章出处：标准之路(http://www.aa25.cn/div_css/902.shtml)

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...

  6. CSS基础选择器(选择器的优先级)，CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成，盒模型-block，盒模型布局

    CSS基础选择器 (1)id选择器:   #       =>  标签拥有 id="user"  属性 <style> #user { width: 200px; ...

  7. CSS基础入门

    css基础语法 一.CSS格式 选择器{ 属性名:属性值; 属性名:属性值; } 选择器负责圈定范围,要修改的元素集合,花括号内的声明由属性名和属性值组成(key:value)的形式,用于设定具体样式 ...

  8. CSS 基础知识点 样式 选择器 伪类

    CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...

  9. HTML3/CSS基础

    1. HTML 1.1 什么是HTML HTML是用来制作网页的标记语言 HTML是Hypertext Markup Language的英文缩写,即超文本标记语言 HTML语言是一种标记语言,不需要编 ...

随机推荐

  1. ubuntu下安装使用vmware、kvm、xen

    一. 概念介绍: (1)全虚拟化(Full Virtulization) 简介:主要是在客户操作系统和硬件之间捕捉和处理那些对虚拟化敏感的特权指令,使客户操作系统无需修改就能运行, 速度会根据不同的实 ...

  2. HDU 3749 Financial Crisis 经济危机（点双连通分量）

    题意: 给一个图n个点m条边(不一定连通),接下来又q个询问,询问两个点是为“不相连”,“仅有一条路径可达”,“有两条及以上的不同路径可达”三种情况中的哪一种.注:两条以上的路径指的是路径上的点连1个 ...

  3. C# chart绑定数据的方式整理

    C#chart 画图曲线的条数决定是你的数据源也就Series.Series是对象 你动态创建就可以了. 一.数组, List 等简单Collection类型的方式 Series s1= new Se ...

  4. Keep the Customer Satisfied

    题意: n个订单,每个订单有完成需要的天数,和限制的天数,求最多能完成多少订单 分析: 先按限制日期升序排列,若当前订单不能完成,和上面已选中的订单中需要天数中最大的比较,若比它小,则替换他. #in ...

  5. HDU 5730 Shell Necklace cdq分治+FFT

    题意:一段长为 i 的项链有 a[i] 种装饰方式,问长度为n的相连共有多少种装饰方式 分析:采用dp做法,dp[i]=∑dp[j]*a[i-j]+a[i],(1<=j<=i-1) 然后对 ...

  6. Linux--使用expect进行自动交互

    在linux下进行一些操作时,有时需要与机器进行一些交互操作,比如切换账号时输入账号密码,传输文件时输入账号密码登陆远程机器等,但有时候这些动作需要在shell脚本中进行,这个时候就可以使用expec ...

  7. 记录一下学习Android时遇到一些问题

    实在是不擅长Android开发,但在努力的学习当中.这篇文章就记录一下学习过程中,自己犯下的一些错误,同时也让自己记住别再犯同样的错误了.各位看官勿见笑! 一个关于空指针的错误 错误类型一: 未对对象 ...

  8. Robotium简要学习

    Robotium是一款国外的Android自动化测试框架,主要针对Android平台的应用进行黑盒自动化测试,它提供了模拟各种手势操作(点击.长按.滑动等).查找和断言机制的API,能够对各种控件进行 ...

  9. （转载） VS编译duilib项目时候的错误解决方法整理

    原文地址:http://blog.csdn.net/x356982611/article/details/30217473 @1:找不到Riched20.lib 用everything等软件搜索下磁盘 ...

  10. CodeForce---Educational Codeforces Round 3 D. Gadgets for dollars and pounds 正题

    对于这题笔者无解,只有手抄一份正解过来了: 基本思想就是 : 二分答案,对于第x天,计算它最少的花费f(x),<=s就是可行的,这是一个单调的函数,所以可以二分. 对于f(x)的计算,我用了nl ...