高质量的CSS

简介:

1.浏览器模式和DTD

我们平常用到的浏览器可能有多个模式,比如标准模式,兼容模式。在标准模式中,浏览器根据规范显示页面。兼容模式为了兼容老版本浏览器下的代码,用了很多非标准的解析方式。
DTD全称Document Type Definition(文档类型定义)。一个DTD包含元素的定义规则、元素间关系的定义规则、元素可使用的属性、可使用的实体或符号规则。
如果漏写了DTD,IE6,IE7,IE8就会触发兼容模式。DTD详细参考 http://www.w3school.com.cn/tags/tag_doctype.asp

2.如何组织CSS代码

《编写高质量代码》一书中推荐base+common+page的层叠结构。

2.1base层

base层力求精简通用,提供CSS reset功能和力度最小的通用类——原子类。该层会被所有页面引用,与具体UI无关。
由于每个浏览器的默认样式都不统一,所以可以在这层通过CSS reset覆盖浏览器的默认样式,统一定义成自己的样式。

2.2common层

common层位于中间,提供组件级的CSS类。代码尽可能封装复用。

2.3page层

page层位于最高层,控制具体页面的精确样式,所以每个页面都可能会有一个page。建议将网站所有page层代码放在一个文件里。分块写上注释,便于维护。

3.面向对象风格的CSS

顾名思义,CSS在书写时的命名规范,结构组织可以参考面向对象编程的一些规范。比如使用驼峰命名来区分单词,.itemList,使用“-”来表示从属关系,itemList-firstList。多用组合,少用继承等。
另外,本书还推荐少用低权重原则。多用class,少用子选择器。这样样式容易被覆盖,易于维护。

4.CSS Sprite

Sprite看起来好用,其实还有一些注意点:
1.它能合并的只能是用于背景的图片,对于<img src="" />设置的图片,是不能合并到CSS Sprite中的,这样会影响可读性。
2.不适用与横向和纵向都平铺的图片。
3.CSS Sprite最大的好处是减少服务器压力。这需要付出“降低开发效率”和“增大维护难度”的代价。如果你的网站流量并不大的话,并不推荐用这种方法。

5.其他问题

5.1 CSS hack

5.1.1 IE条件注释法

	<!--[if IE6]>
		只在IE6下生效
	<![endif]-->
	<!--[if gt IE6]>
		IE6以上都生效
	<![endif]-->
	<!--[if ! IE6]>
		只在IE6下不生效
	<![endif]-->

这是微软官方推荐的hack方式,它是最安全的hack方式。

5.1.2选择符前缀法

在CSS选择符前加一些只有特定浏览器才能识别的符号,从而让某些样式只对特定浏览器生效。例如“*html”只对IE6生效。“*+html”只对IE7生效。

5.1.3样式属性前缀法

在CSS属性名前加一些只有特定浏览器才能识别的符号,从而让某些属性只对特定浏览器生效。例如“_l”只对IE6生效。“*”只对IE6,IE7生效。
.box{
width:60px;
_width:60px;
*width:60px;
}

5.2超链接样式问题

只要遵循love hate原则就没问题:l( link )ov( visited)e h( hover)a( active)te。

5.3 hasLayout

IE奇葩的根源。这个在精通css系列中有讲。触发hasLayout会解决大部分IE下的bug。通过设置“zoom:1”和“posisiton:relative”来触发是最有保障的方式。
hasLayout设计初衷是为了辅助块级元素的盒模型解析的,如果用于行内元素,会有一些特殊的效果。

5.4块级元素和行内元素

常见块级元素:div,p,form,h1,caption,dd,dt,dl,table,ul,ol......
常见行内元素:a,img,strong,span,input,i,br......
区别:
1.块级元素独占一行,默认其宽度填满父元素宽度。行内元素不会独占一行,宽度随元素内容变化,没有width,height属性;
2.块级元素可以设置margin,padding。行内元素可以设置水平方向的margin,padding,竖直方向的不会产生边距效果;
display还有inline-block属性,IE6,IE7下会有bug,修复方法百度一下。





相关文章
|
3月前
|
Web App开发 前端开发 iOS开发
css3
css3
21 4
|
前端开发
|
7月前
|
前端开发 UED
CSS
CSS
43 0
|
7月前
|
前端开发
CSS总结干货
行内样式表(行内式) 行内样式表(内联样式表)是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式. ​ 语法:
|
前端开发 容器
CSS(3)——总结
CSS(3)——总结
114 0
CSS(3)——总结
|
前端开发 JavaScript UED
CSS 20大酷刑(三)
CSS 20大酷刑(三)
|
前端开发
css小技巧
css小技巧
|
前端开发 安全 容器
CSS(2)
在 CSS 中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。 复合选择器可以更准确、更高效的选择目标元素(标签)。 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的。 常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等。
56 1
|
前端开发
初识css
初识css
118 0
|
前端开发
CSS简识
本文主要介绍用于丰富前端界面的语言——CSS,只介绍一些较为常用的知识。
101 0
CSS简识