标签：
CSS构造块的样式：
1. h1{color:red;background-color:yellow}
其中：h1是选择器，花括号内是声明部分。多个声明之间用分号隔开。
2.为样式规则添加注释：/*...*/。注意不能将一个注释嵌套在另一注释中。如：/*这样做/*是不对的*/因为嵌套在外层注释内*/。注释可以放在样式规则内部。如：img{border:4px solid red;/*margin-right:12px;*/} ，浏览器会显示的只有border样式，因为margin-right 被注释掉。
3.继承：当你为某个元素应用CSS属性时，这些属性不仅会影响该元素还会影响其下的分支元素。如<body><h1>...</h1><p>...</p></body> 当你对body应用CSS属性时h1与p就会继承该属性。
4.应用样式有三种方法：(1)从一个或多个外部文件导入（推荐）；（2）插入到HTML文档的顶部；（3）直接用于代码中特定的HTML元素上。
5.CSS用层叠的原则来考虑特殊性、顺序和重要性。特殊性规则指定选择器的具体程度。顺序规定了晚出现的优先级高。如果以上原则都无法判断有冲突时该优先哪一个就使用重要性规则，如：{color:red !important;}末尾加上!impotant说明这条规则比其他所有规则高。
6.每个CSS属性对于它可以接受哪些值都有不同的规定。对于任何属性如果希望它显示地指出该属性的值与对应元素的父元素对该属性设定的值相同就使用inherit。如：p{border:inherit;}边框通常不会被继承但是这条规则可以让这条段落获得相同样式的边框。大多数CSS都有一些预设值。CSS属性的值很多是长度。所有长度都必须包含数字和单位。单位有：em、px甚至可以写百分数。极少数CSS属性接受纯数字。
7.当一批网页需要以同样样式呈现的时候重复写CSS会显得浪费时间，因此有三种方法可以将CSS应用到多个网页中：外部样式表（首选）、嵌入样式和内联样式（最不可取的方法）。当要加载操作样式表到HTML中时，需要链接样式表。在每个希望使用样式表的HTML的head部分输入<link rel="stylesheet" href="url.css"/> 其中url.css是样式表的位置和名称。对外部样式表进行修改所有引用它的网页都会自动更新。外部样式表里的URL是相对于服务器上该样式表文件的位置而不是相对于HTML页面位置。嵌入样式表是在head部分创建style元素，其中包含样式表。内联样式是在html代码中加入CSS样式，在希望进行格式化的html元素的开始标签中输入style=" "。这种方法将html与css混合在一起难于阅读，而且只能限制了CSS样式只能用于一种元素。需要注意的是内联样式的优先级高于其他样式，除非其他样式标记了!important。
8.为什么晚出现的样式优先级越高？因为link元素在html代码中出现的早就会被晚出现的样式覆盖。外部样式表要么是通过链接引入的要么是通过@import导入。不推荐后一种方法因为当引入的样式与后面有与之冲突的样式，则后出现的样式会覆盖这些引入的样式。
9.指定与媒体相关的样式表的步骤：在link或style元素的开始标签中添加media="output"，其中output可以是print、screen、all等，多个值之间用逗号分隔。
定义选择器：
选择器可以定义五个不同标准来选择要进行的格式化的元素：
（1）元素的类型或名称，如：h1{color:red;}使用这个选择器会对页面中的h1元素应用样式。
（2）元素所在的上下文，如：h1 em{color:red;} 使用这个选择器只会对h1中em元素应用样式。
（3）元素的类或ID，如：.error{color:red‘}类选择器选择所有属于error泪的元素。#gaudi{color:red;}ID选择器选择ID为gaudi的那个元素。通过在class或id选择器前面添加目标元素的名称，可以增强选择器的特殊性。如，strong.error{color:red;}。
（4）元素的伪类或伪元素，如：a:link{color:red;}选择器选择属于link伪类的a元素。
（5）元素是否有某属性和值，如：a[title]{color:red;}该选择器选择了所有具有title属性的a元素。a[href="www.baidu.com"]{color:red;}选择器选择了指向百度页面的a元素。
注意：通配符*匹配代码中任何元素的名称。可以在一个选择器中使用一组元素名称，名称之间用逗号分隔。类名可以不唯一，但ID名必需唯一。如果要定位的元素有多个类名，可以在选择器中将它们连在一起，类名之间没有空格。
10.上下文选择元素的几种类型：
（1）.architect p{color:red;}表示这个选择器会寻找任何作为architect类元素的后代。
（2）.architect > p{color:red;}这个选择器仅选择architect类元素的直接子元素。
（3）. architect p+p{color:red;}选择器选择直接跟在同胞p元素之后的元素。
11.选择第一个或最后一个子元素：first-child和last-child。可以只修改第一个或最后一个元素的样式。如：首字母大写格式就可以写成：p:first-letter{font-size:1.4em;}。
12.按状态选择链接元素：
a:link{color:red;}新的、未访问的链接显示为红色。
a:visited{color:orange;}访问过的链接变为橙色。
a:focus{color:purple;}链接获得焦点（如通过tab键）时显示为紫色。
a:hover{color:green;}当访问者将鼠标指针停留在链接上时显示绿色。
a:active{color:blue;}当访问者激活链接时，变成蓝色。
也可以对其他类型的元素使用:active、:hover伪类。如：设置p:hover{color:red;}以后，鼠标停留在任何段落上都会显示为红色。
13.由于链接可能同时处于多种状态，且最晚出现的规则会覆盖前面出现的规则所以一定要按顺序定义规则：LVFHA、LVHFA。
14.属性选择器参考表：
[attribute]:匹配指定属性，不论具体值是什么。
[attribute="value"]:完全匹配指定属性值。
[attribute~="value"]:属性值是以空格分隔的多个单词，其中有一个完全匹配指定值。
[attribute|="value"]:属性值以value-开头。
[attribute^="value"]:属性值以value开头，value为完整的单词或单词的一部分。
[attribute$="value"]:属性值以value结尾，value为完整的单词或单词的一部分。
[attribute*="value"]:属性值为指定值的子字符串。
15.指定元素组：
h1,h2{color:red;}可以让h1与h2显示红色。为多个元素指定同一种样式时只需要用逗号分隔它们。
16.组合使用选择器：如：.project h2[lang|="es"]+p em{color:red;} 表明：仅选择em元素，它们包含在p元素中，这样的p元素是lang属性值以es开头的h2元素的直接相邻同胞元素。
标签：
原文地址：http://www.cnblogs.com/koto/p/5005806.html
