CSS编程实践指南

1、有疑问，先验证
格式不正确的XHTML/CSS会导致许多错误。
（遵从标准的浏览器是Mozilla/Firefox, Safari, Opera）

2、确保你期望的效果确实存在
 
3、如果有浮动，就要适时使用clear
clear 属性设置一个元素的侧面是否允许其他的浮动元素
可取的值：left|right|both|none

4、边距的合并

如果使用了margin，边距的合并将会出现问题。避免将padding/border和固定宽度同时应用到同一元素。当子元素固定时，为父元素指定padding。

5、避免IE下未指定样式内容的闪烁。

如果仅使用@import来输入外部样式表，早晚会发现IE有闪烁的毛病。应用css之前，未经格式化的HTML文本会短暂的出现。

6、可怜的min-width
min-width 属性设置元素的最小宽度。
IE不支持它，但是它将 width 当作 min-width。

7、如果使用了锚点，在应用超链接样式时要特别小心。

如果您在代码中使用了传统的锚点(<a name="anchor">)，您会注意到 :hover 和 :active伪类也会作用于它。要避免这种情形，你可以使用 id。

8、“LoVe/HAte”（爱/恨）链接规则

要以下面的顺序指定超链接伪类：Link, Visited, Hover, Acitve。任何其他顺序都不妥当。假如用了 :focus，次序应为 LVHFA

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和a:visited之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
提示：伪类名称对大小写不敏感。

9、请记住“顺时针”边框。
边框(border)、边距(margin)和补白(padding)的简写次序为：顺时针方向从上开始，即Top,Right,Bottom,Left。比如margin:0 1px 3px 5px ; 表示上边距为零， 右边距为1px，依此类推。

10、非零值要指明单位。
在用CSS指定字体、边距或大小时，必须指明所用的单位。某些浏览器对未指明单位的处理方法不足为凭。零就是零，不管是px还是em还是其他单位，它不需要单位。例如： padding: 0 2px 0 1em;

11、测试不同的字体大小。

像Mozilla和Opera这样的高级浏览器允许对字体进行缩放，不管你用的是什么单位。某些用户的默认字体大小肯定和您的不同，尽最大努力去满足他们。
用嵌入式测试，发布时改为输入。

12、将样式表嵌入在你的HTML源代码中，在测试时可以消除许多缓存引起的错误，尤其是某些Mac下的浏览器。但在发布前，一定要记住将样式表移到外部文件，用@import 或 <link>引入。

13、加上明显的边框有利于布局调试。
像 div {border: solid 1px #f00;} 之类的全局规则可以暂时为你查出布局问题。为特定的元素加上边框可帮您找到难以发觉的交错或空白问题。

14、好好组织您的CSS文件

恰当地成块注释CSS，将相似的CSS选择符编为一组，养成一致的命名习惯和空白格式（为跨平台考虑，建议用空白字符而不是tab）以及适当的次序。

15、以功能（而不是外观）为类和ID命名

假如您创建了一个.smallblue类，后来打算将文字改大，颜色变为红色，这个类名就不再有任何意义了。相反，您可以用更有描述性的名字如 .copyright 和 .pullquote。

16、组合选择符

保持CSS短小对减少下载时间非常重要。请尽量为选择符分组、 利用继承(inheritance)以及使用简写(shorthand)来减少冗余。

17、使用图片替换技术时要考虑亲和力

已经发现传统的FIR在屏幕阅读器，以及关闭图片显示的浏览器中会出问题。 对此有其他解决办法，要根据具体情况，慎重使用。

18、样式表中导入样式表需在顶端 覆盖规则为本身样式覆盖导入样式。

19、CSS样式表细分化：颜色、布局、风格、表单、均可分离，这样对以后的修改和风格设计更方便。

20、盒模型：内→外

以下是引用片段：
content←width height(补充：height只有在父元素定义了绝对高度时其%才有意义)
border 
padding（内补丁）-“填充” 
background-image 
background-color 
margin(外补丁)-“空白边”透明 可为负值
      记住:在css中 width是指内容区域的宽度

      IE/WIN与盒模型：

      IE5.5/IE6怪异模式下： 元素框总宽度=content.width+margin.width

      FireFox/Opera/..   :  元素框总宽度=content.width+padding.width+border.width+margin.width

      差异在于：IE5.5/IE6怪异模式下 width=有效content.width+padding.width+border.width 内补丁和边框被算在内容宽度里面

      #select{width:750px;padding:10px;border:5px} IE怪异模式:总宽度：750px FF/OP：780px

      IE怪异模式:有效内容宽度：750-20-10 FF/OP：750

      IE6正常模式下：同于FF/OP

      处理方法：在父元素或子元素中使用padding 本身不使用

      空白边叠加：当两个空白边叠加时 顶或底边将会叠加 实际空白边高度=空白边大的值

      例：

<div id="top" style="margin:0 0 10px 0;"></div><div id="bottom" style="margin:20px 0 0 0；"></div> 

 

空白边高度为20px

      但是如果这个时候你添加边框或则填充，将不再叠加。

21、float浮动
记住：“在标准浏览器中 浮动元素脱离了文档流 不占据外围容器空间” 明白了这点 你就会明白为什么IE和FIREFOX下表现的不同了。IE5.5、IE6浮动元素依然占据外围容器空间

例如：怎么在IE下feeter正常 在firefox下就跑上去了呢？

      IE下 当float和text-align定义的方向一样时 出现双倍错误：

select{float:left;text-align:left;margin:0 10px;}

   实际左边margin-left：20px；FF/OP：10px 解决：加上display：inline；

22、背景图像的定位
只谈百分比 background:url(image-url.gif)no-repeat 20% 30% 20%：将图像X轴20%处与父元素X轴20%处重合 Y同理 top=0% bottom=100% left=0% right=100% center=50%

23、滑动门
 左右两个DIV 背景分别定义 一般左背景图像比较长; 左背景定位：left center 右背景定位：right center

      外部控制容器宽度一般小于等于两个背景和 这样当内容动态变化时候 右背景图像便感觉像在左背景图像上滑动，故名。

      这样也可以实现：<div id="nav"><ul><li><a href="index.html"><span>首页</span></a></li></ul></div>

#nav a{float:left;background:url("../images/navLeft.gif") no-repeat left top;padding:0;text-decoration:none; cursor:hand;} 
#nav a span {float:left;display:block;background:url("../images/navRight.gif") no-repeat right top;padding:5px 36px 5px 40px;color:#ffffff} 

 

24、完美的居中布局

     body{text-align：center；mini-width：760px；} 
      div#wrapper{margin：0 auto；text-align：left；width：750px；} 

 mini-width IE并不认识 这是为老浏览器准备的，只是这个值比你需要的实际页面大就OK

 

 

 

分享到：

DIV+CSS命名规范 | CSS高级技巧之图片替换

• 2008-12-02 21:18
• 浏览 1322
• 评论(0)
• 查看更多