web标准解决方案_2

常用选择器：

元素选择器

后代选择器

类选择器

ID选择器

很多程序员过度依赖类选择器和ID选择器

一种简单的方式为结合使用类型、类、ID、后代选择器。你会很吃惊的发现只使用这四种选择器就能选择大多数的元素。当发现文档有很多不必要的类，这就是文档结构不合理的一个警告。这是得分析这些元素的区别，你常常会发现唯一的区别是他们出现在文档中的位置，不要给这些元素指定不同的类，而应将ID或类应用在其祖先上。尽量不要随便改变文档结构。

px vs em

国内字体多用px,国外多用em

px:相对显示屏分辨率

em:相对对象内文字大小（相对祖先）

em特点：

em不是固定的，所有浏览器默认16px，所以给body设置成62.5%,这时1em=10px;

em会继承，#content设成1.2em，里面的字体得设成1em，从而避免1.2*1.2

想通过文档结构之外的条件应用样式，可以用伪类

a:link - unvisited

a:visited

:hover :focus :active

:link 和 :visited只能用于<a>锚

:hove :focus :active理论上可以应用于任何元素

ie6忽略a:focus

ie7忽略:active :focus

可以这么写

a:visited:hover

通用选择器，最强大也最少使用。可以选择某元素所有后代或跳过一级后代

高级选择器-对于站点功能和布局很重要的地方不要使用

子选择器 >

相邻选择器 +

 #nav > li {

background:url(..png) no-repeat left top;

}

ie6不支持

ie7有个小bug,父元素和子元素间不要有注释

ie6/5可以模拟子选择器(想想就知道的)

覆盖背景

background:url(..png) ...

background-image:none;

属性选择器 ie6不支持

acronym[title]:focus{cursor:help;}

a[rel="nofollow"]

某某人为ie6的提供黑白版本，给其他浏览器提供彩色的

#header{...}

[id="header"]{...}/*其实这么写是有错的*/

[lang|="en”] 等于en或以en-开头的元素

~= 单词

*= 包含

^=

$=

特殊性

标有!important的用户样式 > !impotant的作者样式 > 作者样式 > 用户样式 > 浏览器样式

行内 1000

id 100

类、属性 伪类 10

类型选择器、伪元素选择器 1

* 为4个0 : 0 0 0 0 但仍高于继承的权值

伪类: :link :active 等

伪元素：不存在的元素。包括 :after :before :first-line :first-letter

样式表中特殊性：为了避免混乱，减少覆盖，减少重复，让一般的更一般化，特殊的更特殊些。

可以在body元素上添加ID和类，可以在页面范围内覆盖，非常灵活的控制站点的设计和布局

id            class

页面1       类型1

页面2       类型2

继承

人们常将层叠与继承混为一谈，但这两个东西完全不同，前者与权值相关。后者的概念很简单：应用样式的后代会继承样式的某些属性，如颜色、字体。border、margin等就不会继承了。

ie在继承表格字体存在问题，解决办法是单独设置表格字体。

如果在主体上设置了字号，页面上任何标题都没有应用这个样式，实际上标题也继承了，只不过浏览器默认样式设置了字号，直接应用于元素的任何样式总会覆盖继承的样式。

规划、组织和维护样式表

网站越大越复杂，图形越丰富，css就越难管理。可以按逻辑对样式进行分组及通过注释使代码更容易阅读

笔者倾向单一css文件(link较import快)

请求数减少，提高速度，浏览器只能从同一个域同时下载数量有限的文件，老式的是2个，现代浏览器为8个。

注释方法

/* @group general styles

-----------------------------*/

/* @group helper styles

------------------------------*/

设计中可能需要很多颜色，常常去图形应用程序去查，让后在写入文本编辑器，很浪费时间，有人建议使用变量，但这会让非程序员畏惧它，笔者这么做

/* Color Variables

@colordef #434343; dark gray

@colordef #f2f6e4; light green

@colordef #90b11f; dark green

@colordef #369; dark blue

*/

/* :@todo 记得删除... */

/* @workaround: 权宜之计 */

/* @bugfix: 特定浏览器遇到的问题 */

删除注释和优化样式表

注释使CSS文件增大，最原始利用编辑器可以删除

减少文件大小最好启用服务器端压缩

样式指南

把css方面提取出来，方便新员工学习，同一CSS设计

但同步是很麻烦的事，笔者喜欢将常用的样式取出来，成为组合模式