标签：
一、css和文档
层叠
css规定了冲突规则，这些规则统称为层叠。这些规则定义了样式发生冲突时以优先级高的为准。
常用的优先级判定：
1. 开发者样式>读者样式>浏览器样式（除非使用!important标记 ）
2. id选择符>（伪）类选择符>元素选择符
3. 权重相同时取后面定义的样式
元素
元素(element)是文档结构的基础。在css中，元素通常分为两种形式：替换元素和非替换元素。
替换元素是指用来替换元素内容的部分并非由文档内容直接表示，如img、input都是由属性来替换元素中的内容。非替换元素内容由用户代理(一般为浏览器)在元素生成的框中显示，如span、 li等标记直接显示文档内容。
此外，css还将元素分成:块级元素和行内元素.
块级元素生成一个元素框，默认会填充其父元素的内容，旁边不能有其它元素，如标记p和div。行内元素在一个文本行内生成元素框，而不会打断这行文本，如标记a、strong和em等。
link标记
允许HTML创作人员将包含link标记的文档与其他文档关联，css使用这个标记来链接样式表和文档，格式：
<link rel=”stylesheet” type=”text/css” href=”test.css” media=”all”>
Rel： 指定文档和被链接文档之间的关系，其中stylesheet表示文档的外部样式表。
type：被链接文档的 MIME 类型
href：被链接文档的位置
media:指定被链接文档显示的设备
style元素和@import指令
可以用style元素包含样式表，实现和link类似的效果。css要求@import指令出现在样式表中的其它规则之前，如果出在其它指令之后，兼容用户代理(IE除外)会将其忽略，考虑到用户需求必须放在其它css规则之前。
<style type=”text/css”><!-- @import url(test.css); /*@import must be first*/ @import url(css/sheet2.css) all; body{color:red;} h1{color:blue;} --></style>
其中url可以使用相对和绝对的地址，在末尾可以指定链接文档显示的设备。为了满足向后可访问性，避免较老的浏览器因为<style>标记无法识别忽略后而将其中内容以文本形式直接显示在页面上，可以在style参数内部添加<!-- //… -->。这样较老的浏览器不仅会忽略style标记，还会忽略声明，因为HTML注释不会显示出来，而理解css的浏览器仍然能正常读取样式表。
小知识点：
css支持通过/*……*/格式来进行注释，但不允许嵌套注释.
单个元素可通过style属性指定样式，而不需要嵌套或外部样式表，这种样式被称为内联样式，除了body外部出现的标记，style属性可以和任何其它HTML标记关联。不过目前不推荐使用内联样式(与font类似)
二、选择器
css规则结构
css能向文档中的一组元素类型应用特定规则。每个规则都有两个基本部分：选择器和声明块，声明块由一个或者多个声明组成，每个声明则是一个属性-值对，每个样式表由一系列规则组成，结构见下图：
其中选择器定义了影响文档中的部分。声明块指定被影响文档的显示效果。如图中指定所有h1元素为黄色背景，红色文本。
文档的元素是最基本的选择器。如 html {color:black;}
声明和关键字
声明块包含一个或者多个声明。声明总有如下格式：”属性:值;”,冒号和分号后面可以有0或者多个空格。其中值要么是关键字，要么是该属性可取关键字的一个列表(包含一个或者多个关键字，如果一个属性取了多个关键字，关键字之间用空格分隔）。如p {font:medium Helvetica;}
如果声明了不正确的属性或者不正确或者属性，整个声明都会被忽略。
选择器分组和声明分组
分组用于多个元素应用同一个样式。为达到这个目的，最容易的做法如下：h2,p {color: gray;} 将h2和p放在声明块的左边,并用逗号来分隔这样就定义了一个规则，其右边的样式就应用于这两个选择器所引用的元素。其中逗号告诉浏览器，规则应用于不同的选择器。
当然也可以将声明分组，实现选择器应用多个样式：
h1,p { font:18px Helvetica; color:purple; background:aqua; }
css2引入一种新的简单选择器，称为通配选择器，显示为一个星号(*)。这个选择器可以和任何元素匹配，就像是一个通配符，如要让一个文档每个元素都是红色：* {color: red;}这个声明等价于列出文档中所有元素的一个分组选择器。
从技术上讲没有必要最后一个声明也以分号结尾，不过添加是一个好的实践方法，所以只要出现规则，就要在声明的最后加一个分号。
类选择器和ID分组
除了指示文档元素(如p, h1)外，还有两种另外的选择器：类选择器(class selector)和ID选择器(ID selector)，当然在使用它们之前，需要修改具体的文档标记，以便其正常工作。
类选择器的实现实例:
<!Doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"><!-- .warning {font-weight: bold;} .urgent{font-style: italic;} p.warning.urgent{background:silver;} span.warning {font-style: italic;} --></style> <title>index.html</title> </head> <body> <p class="warning urgent">When handling.....</p> <p class="warning">care must be taking......</p> <p>With plutonium, <span class="warning"> the possibility.....</span>.This......</p> </body> </html>
应用于全部的类选择器，就可以使用通配符：*.warning {font-weight: bold;}, 当然如果选择所有类名相同的元素，类选择器中通配符可省略。当然我们也可以指定不同文档， 在HTMl中，一个class也有可能含有一个词列表，各个词中间用空格分隔。
标签：
原文地址：http://www.cnblogs.com/zc110747/p/5393894.html
