常用选择器:
元素选择器
后代选择器
类选择器
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设计
但同步是很麻烦的事,笔者喜欢将常用的样式取出来,成为组合模式