高质量的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,修复方法百度一下。





相关文章
|
6月前
|
前端开发 搜索推荐
|
前端开发
|
2月前
|
前端开发
CSS枫叶纷飞
CSS枫叶纷飞
46 1
|
2月前
|
移动开发 前端开发 容器
CSS之我不会
CSS之我不会
|
6月前
|
前端开发
CSS知识文章
CSS知识文章
|
6月前
|
XML 前端开发 数据格式
什么是CSS?
什么是CSS?
|
存储 前端开发 安全
CSS
什么是 CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一个
134 0
|
6月前
|
前端开发
CSS总结干货
行内样式表(行内式) 行内样式表(内联样式表)是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式. ​ 语法:
|
XML 前端开发 数据格式
下一篇
无影云桌面