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. Android 开发问题集合

    1.屏幕横.竖切换 修改“AndroidManifest.xml”的android:screenOrientation 一般需要:landscape.portrait 2.修改应用名字 修改“Andr ...

  2. HDU 1233 还是畅通工程(最小生成树，prim)

    题意:中文题目 思路:prim实现,因为有n*(n-1)/2条边,已经是饱和的边了,prim比较合适. (1)将点1置为浏览过,点1可以到达其他每个点,所以用low[i]数组记录下目前到达i点的最小长 ...

  3. 学习：java设计模式—工厂模式

    一.工厂模式主要是为创建对象提供过渡接口,以便将创建对象的具体过程屏蔽隔离起来,达到提高灵活性的目的. 工厂模式在<Java与模式>中分为三类: 1)简单工厂模式(Simple Facto ...

  4. 【转】IOS 计时器 NSTimer

    原文网址:http://blog.csdn.net/tangshoulin/article/details/7644124 1.初始化 + (NSTimer *)timerWithTimeInterv ...

  5. oracle返回多结果集

    kavy 原文 oracle返回多结果集 Oracle存储过程: create or replace procedure P_Sel_TopCount2(in_top in number, out_c ...

  6. Linux(CentOs)下安装Phantomjs + Casperjs

    Linux(CentOs)下安装Phantomjs + Casperjs 是参照cnMiss's Blog http://ju.outofmemory.cn/entry/70691的博客进行安装的 1 ...

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

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

  8. 遍历 集合 Dictionary 的时候修改集合 方法

    Dictionary<string, string> dic = new Dictionary<string, string>(); dic.Add("1" ...

  9. javascript AES加密 C#AES解密实现

    首先需要引入js类库 crypto-js(开源),地址:http://code.google.com/p/crypto-js 现在很多人无法打开这个地址不要紧,下面我们会将全部代码贴出来 需要引入 a ...

  10. 关于“心脏出血”漏洞(heartbleed)的理解

    前阵子“心脏出血”刚发生的时候读了下源代码,给出了自己觉得比较清楚的理解.   -------------------------穿越时空的分割线--------------------------- ...