李超

cc编程笔记本。
  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
CSS需要注意的事项

(1) 如何实现table的单像素border:
table { border-collapse: collapse }
(2) 假如不加<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">这句dtd声明，ie浏览器的盒模式的width是包括padding和border的宽度的。
只有加上严格w3c标准的dtd声明,ie浏览器才会以正常的盒模式呈现页面，即：width只是内容所占宽度。

(3) li标签前面的图标最好用background-image实现，padding补白控制内容，比list-style-image易于控制
(4) 绝对定位的作用：
绝对定位的优势并不在于 可以控制一个元素 位于 显式指定了position属性的父元素 的 x*y点的偏移位置上。
绝对定位的优势在于 可以使元素脱离文档流  让其他元素忽略它的存在。(float按w3c本意也可脱离文档流，但ie浏览器的表现来看,float的元素没有浮起在文档流之上)
(5) css的缩写与精简：
缩写很容易实现，尽量使用一个font,list-style,margin,padding,background属性而不是一组xx-top,xx-left,xx-image等属性。
精简呢？就是做完html布局后，不要急于写css，先去想一下属性的继承问题，然后想一下那些元素是可以用类选择器的，然后把内外边距等属性相同的一组id选择器，用逗号分隔符统一定义他们的相同属性。
另外可以依靠id选择器的权重比class选择器的权重大的特点，或者一个标签可以应用多个class选择器来精简css代码。
(6) 关于文字的自动换行：
在一个指定了width的容器中，汉字会自动换行，英文单词也会自动换行，并且以单词为换行单位，也就是说要有空格。
但是，连续没空格的英文字母或阿拉伯数字不会被换行，可以使用overflow:hidden;text-overflow:ellipsis来实现带省略符的隐藏
(7) <script>没有language这个属性，应该写成<script type="text/javascript">
(8) 大多数网页使用固定宽度布局而不是流式布局，所以记住几个屏幕参数吧。
800*600分辨率下的：760px（两边有留白），778px（满屏）；
1024*768分辨率下的：1002px（满屏）,955px（两边有留白），998px（两边稍微有一点留白）
(9) 时刻记住表现与内容分离，比如与内容无关的图片全部使用background 

(10) CSS命名规范

Code

 

posted on 2009-07-03 14:45  coderlee  阅读(276)  评论(0)  编辑  收藏  举报