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裁剪固定大小头像的功能

    转载自: http://www.eoeandroid.com/thread-497277-1-1.html 效果很好,特意转载过来记录一下,加深一下印象. 效果就是 :中间的方框不动,可以拖动图片,选 ...

  2. 【转】一致性hash算法(consistent hashing)

    consistent hashing 算法早在 1997 年就在论文 Consistent hashing and random trees 中被提出,目前在 cache 系统中应用越来越广泛: 1  ...

  3. 只用css实现“每列四行，加载完一列后数据自动填充到下一列”的效果

    只用css实现“每列四行,加载完一列后数据自动填充到下一列”的效果.这个题目用图表示如下: 如果将题目换成“只用css实现每行四列,加载完一行后数据自动填充到下一行”,那这个问题就简单多了,相信大家都 ...

  4. [Everyday Mathematics]20150125

    试求极限 $$\bex \lim_{x\to 0^+}\int_x^{2x} \frac{\sin^m t}{t^n}\rd t\quad\sex{m,n\in\bbN}. \eex$$

  5. Hadoop中的InputFormat解析

    1.InputFormat InputFormat是Hadoop平台上Mapreduce输入的规范,仅有两个抽象方法. List<InputSplit> getSplits(), 获取由输 ...

  6. Fitnesse+RestFixture：Web服务回归测试利器

    RestFixture是Fitness的一个测试REST服务的插件,用于调用标准的http GET/POST等请求方法,并可以用XPath语法和Javascript语法检验http响应.本文介绍安装运 ...

  7. OpenGL超级宝典第5版&&glProvokingVertex

    翻译:https://www.opengl.org/sdk/docs/man3/xhtml/glProvokingVertex.xml 方法原型:void glProvokingVertex(GLen ...

  8. 取消eclipse启动时的subclipse Usage弹窗

    取消windows–>perferences–>general–>startup and shutdown里最下面的Subclipse Usage report 勾选即可

  9. HTML5的manifest缓存

    要使用manifest缓存,我们首先需要写一个manifest文件.这个文件有严格的格式要求,下面是个例子CACHE MANIFEST#我是注释,这个文件名叫test.manifestCACHE:/t ...

  10. 《锋利的Jquery第二版》读书笔记 第一章

    按照书本介绍顺序整理jquery库相关的语法.要点. window.onload与$(document).ready()功能类似,前者需要所有资源加载完毕,且不能同时编写多个:后者加载完DOM结构即执 ...