首页 > 代码库 > web标准解决方案_2

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设计

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

 

web标准解决方案_2