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. PHP运行模式的深入理解

    PHP运行模式有4钟:1)cgi 通用网关接口(Common Gateway Interface))2) fast-cgi 常驻 (long-live) 型的 CGI3) cli  命令行运行   ( ...

  2. 门户网站架构Nginx+Apache+MySQL+PHP+Memcached+Squid

    服务器的大用户量的承载方案 一.前言二.编译安装三. 安装MySQL.memcache四. 安装Apache.PHP.eAccelerator.php-memcache五. 安装Squid六.后记 一 ...

  3. JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结 【转】http://blog.csdn.net/uniqer/article/details/7789104

    1.兼容firefox的 outerHTML,FF中没有outerHtml的方法. 代码如下: if (window.HTMLElement) { HTMLElement.prototype.__de ...

  4. MOSS 2010:Visual Studio 2010开发体验（14）——列表开发之事件接收器

    转:http://boke.25k5.com/kan141919.html 通过前面几篇,我们已经完成了内容类型,列表定义,列表实例g 8h"@的开发.本篇继续讲解列表中的一个重要环节- ...

  5. 一个好用的hibernate泛型dao

    以前从springside2.0上搞下来的很好用的,基本实现dao零编码只要配置xml文件就行了. 先看图: 一共4层,com.demonstration.hibernate.basedao是我加的用 ...

  6. mysql-5.6.15_winX64在win764位系统下的安装操作步骤总结

      mysql 版权声明:本文为博主原创文章,未经博主允许不得转载. 自从换了新电脑win764位,支持的内存从原来的3G(2G机身+1G内存条)变到了现在的8G(机身4G+4G内存条),机子的速度是 ...

  7. Windows 窗体最小化和隐藏的区别及恢复

    应用程序有托盘图标,窗体最小化或者隐藏窗体时,点击托盘图标需要恢复窗体显示,并且恢复之前的现实状体,正常大小或者最大化显示.例如:最大化显示窗体时,点击最小化按钮,窗体最小化,点击托盘图标将最大化显示 ...

  8. 软件测试技术（五）——Software Review

    本周的测试课上进行了一次同行评审的演练,大家讨论的很热烈,不过我也发现了一些不太理解的过程,如如何进行计划活动,走读.技术评审.正规检视是基于什么目的,并应该在何时进行.我做了一下详细的研究. 首先, ...

  9. Tcpcopy简介与实战

    码农博客 即将到期,现将博客中部分文章转载到博客园.本文发表与2012年,基于tcpcopy 0.6版本.转载时略有删减. Tcpcopy简介 TCPCopy是一种请求复制(所有基于tcp的packe ...

  10. 约瑟夫环是一个数学的应用问题：已知n个人（以编号1，2，3...n分别表示）围坐在一张圆桌周围。从编号为k的人开始报数，数到m的那个人出列；他的下一个人又从1开始报数，数到m的那个人又出列；依此规律重复下去，直到圆桌周围的人全部出列。

    以数组的方法: public static void main(String[] args) {        final int n = 10;          final int k = 1;  ...