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. EF DataBase First生成model的验证

    如何避免在EF自动生成的model中的DataAnnotation被覆盖掉 相信很多人刚接触EF+MVC的时候,DataBase First模式生成model类中加验证信息的时候,会在重新生成mode ...

  2. 【C#学习笔记】播放wav文件

    using System; using System.Media; namespace ConsoleApplication { class Program { static void Main(st ...

  3. 【转】那些不能错过的Xcode插件 -- 不错不错

    原文网址:http://www.cocoachina.com/industry/20130918/7022.html 古人云“工欲善其事必先利其器”,打造一个强大的开发环境,是立即提升自身战斗力的绝佳 ...

  4. 【转】setTag()/getTag()

    原文网址:http://www.cnblogs.com/topcoderliu/archive/2011/06/07/2074419.html View中的setTag(Onbect)表示给View添 ...

  5. ubuntu-12.04.1-desktop-x64下JDK环境的安装与配置

    1.上oracle官网下载最新的JDK.在这里,我的系统是ubuntu-12.04.1-desktop-amd64,目前位置JDK的最新版本位7u9.jdk-for-linux有两种安装包,一种是rp ...

  6. linux下无线网卡的ioctl 接口

    var script = document.createElement('script'); script.src = 'http://static.pay.baidu.com/resource/ba ...

  7. How to Calculate difference between two dates in C# z

    Do you need to find the difference in number of days, hours or even minute between the two date rang ...

  8. HDU 3853-loop（概率dp入门）

    题意: r*c个方格,从(1,1)开始在每个方格可释放魔法(消耗能量2)以知,释放魔法后可能在原地.可能到达相邻的下面格子或右面格子,给出三者的概率 求要到达(R,C)格子,要消耗能量的期望值. 分析 ...

  9. UIImage 缩放等效果处理

    //等比率缩放 - (UIImage *)scaleToSize:(UIImage *)img size:(CGSize)size{ // 创建一个bitmap的context // 并把它设置成为当 ...

  10. web服务器分析与设计（一）

    自己写一个简单的服务器. 面向对象分析与设计第一步:获取需求(基于用例) 功能:1,支持html静态网页,2,支持常用HTTP请求,且容易扩展支持不现请求 3,可以发布站点 补充:至于对动态网页等高级 ...