网页设计中CSS注意点
1.css 字体简写规则
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana,serif;
事实上你可以简写这些属性：
font: 1em/1.5em bold italic small-caps verdana,serif; 至少要指定font-size和font-family属性，其他的属性将自动使用默认值。
border: 3px solid #000 默认的宽度为中等(相当于3到4像素);默认的颜色为边框里的文字颜色。
2.同时使用两个class
通常我们只为属性指定一个class,但这并不等于你只能指定一个，实际上，你想指定多少就可以指定多少，例如：
<div class="news hot">
内容
</div>
通过同时使用两个class(使用空格而不是逗号分割),这个段落将同时应用两个class中制定的规则。如果两者中有任何规则重叠，那么后一个将获得实际的优先应用。
3.!important的应用（参考文：css中的HACK）
在IE6之前，通常最后指定的规则会获得优先权。IE7对!important支持。对FF来说，任何后面标有!important的语句将获得绝对的优先权，
例如：
margin-top: 3.5em !important; margin-top: 2em
除IE6以外所有浏览器中的顶部边界都是3.5em，而IE6为2em。
这点,让我想起刚学着写DIV+CSS时候,在各种浏览器中兼容的痛苦,具体例子使用可以参考我的zuonline.igg.com第一版.切记margin-top: 3.5em !important; 需写在前面。
4.图片替换的技巧
使用标准的html而不是图片来显示文字通常更为明智，除了加快下载还可以获得更好的可用性。但是如果你决心使用访问者的机器中可能没
有的字体时，你只能选择图片。
举例来说，你想在每一页的顶部使用"Buy widgets"的标题，但你同时又希望这是能被搜索引擎发现的，为了美观你使用了少见的字体那
么你就得用图片来显示了：
这样当然没错，但是有证据显示搜索引擎对真实文本的重视远超过alt文本(因为已经有太多网站使用alt文本充当关键字)，因此，我们得用
另一种方法：
Buy widgets，那你的漂亮字体怎么办呢?下面的css可以帮上忙：
h1 {
background: url(widget-image.gif) no-repeat;
}
h1 span {
position: absolute;
left:-2000px;
}
现在你既用上了漂亮的图片又很好的隐藏了真实文本——借助css，文本被定位于屏幕左侧-2000像素处。
对一些设置浏览器不显示图片的用户，则看不到图片上的重要信息了。
5.css盒模型hack的另一选择（参考文：css中的HACK）
css盒模型hack被用来解决IE6之前的浏览器显示问题，IE6.0之前的版本会把某元素的边框值和填充值包含在宽度之内(而不是加在宽度值上
)。例如，你可能会使用以下css来指定某个容器的尺寸：
#box {
width: 100px;
border: 5px;
padding: 20px;
}
然后在html中应用：
盒的总宽度在几乎所有浏览器中为150像素(100像素宽度+两条5像素的边框+两个20像素的填充)，唯独在IE6之前版本的浏览器中仍然为100
像素(边框值和填充值包含在宽度值中)，盒模型的hack正是为了解决这一问题，但是也会带来麻烦。更简单的办法如下：
css:
#box {
width: 150px;
}
#box div {
border: 5px;
padding: 20px;
}
html:
...
这点,又让我想起做zuonline.igg.com第一版的时候.遇到这个问题,我也是这样解决的.其实就一句话,当你要定义一个DIV时候,不要将width
和padding/margin属性放在一起定义,你永远记不住PADDING是包含在WIDTH中还是不包含,分成2个DIV就OK!
6.将块元素居中（参考文：页面内容居中设置（水平居中与垂直居中） ）
假设你的网站使用了固定宽度的布局，所有的内容置于屏幕中央，可以使用以下的css：
#content {
width: 700px;
margin: 0 auto;
}
你可以把html的body之内任何项目置于中，该项目将自动获得相等的左右边界值从而保证了居中显示。不过，这在IE6之前版本的浏览器中
仍然有问题，将不会居中，因此必须修改如下：
body {
text-align: center;
}
#content {
text-align: left;
width: 700px;
margin: 0 auto;
}
对body的设定将导致主体内容居中，但是连所有的文字也居中了，这恐怕不是你想要的效果，为此#content 的div还要指定一个值：text-align: left
7.使用css实现垂直居中（参考文：页面内容居中设置（水平居中与垂直居中） ）
垂直居中对表格来说是小菜一碟，只需指定单元格为vertical-align: middle即可，但这在css布局中不管用。假设你将一个导航菜单的高
度设为2em，然后在css中指定垂直对齐的规则，文字还是会被排到盒的顶部，根本没有什么区别。
要解决这一问题，只需将盒的行高设为与盒的高度相同即可，以这个例子来说，盒高2em,那么只需在css中再加入一条：line-height: 2em
就可实现垂直居中了! 缺点是要控制内容不要换行.
这点讲的只是内容在块中如何垂直居中,没有讲到所有内容在任何分辨率浏览器下如何垂直居中，可参考文：
页面内容居中设置（水平居中与垂直居中）
8.延伸至屏幕底部的背景色
css的缺点之一是缺乏垂直方向的控制，从而导致了一个表格布局不会遇到的问题。假设你在页面的左侧设定了一列用于放置网站的导航。
页面为白色背景，但你希望导航所在的列为蓝色背景，使用以下css即可：
#navigation {
background: blue;
width: 150px;
}
问题在于导航项不会一直延伸到页面的底部，自然它的背景色也不会延伸到底部。于是左列的蓝色背景在页面上被半路截断，浪费了你的一
番设计。怎么办呢?很不幸我们现在只能用欺骗的办法，即将body的背景指定为与左列同颜色同宽度的图片，css如下：
body {
background: url(blue-image.gif) 0 0 repeat-y;
}
背景图应为宽150像素的蓝色图片。这一办法的缺点是没法使用em来指定左列的宽度，当用户改变文字的大小导致内容的宽度扩张时，背景色的宽度不会随之改变。
到写这篇文章为止这是对这类问题的唯一解决办法，因此你只能为左列使用像素值来获得能够自动延伸的不同的背景色
这点的处理方式根本不能称之为要点,这种问题具体内容具体解决,这不是最好的方法.另外我还看到一篇文，关于如何给列表<li></li>设置换行换背景色，也是用背景图片的方式，可惜那样就固定死了行的高度。不好用。
9. 网站越大，CSS样式越多，开始做前，请做好充分的准备和策划
包括命名规则，页面区块划分，内部样式分类等。
10. ID与CLASS的区别
一.web标准中是不容许重复ID的,比如 div id="aa" 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义
便可以使用他.
二.属性的优先级问题 ID 的优先级要高于class。
三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.
11. 如果一组要嵌套的标签之间需要些间距的话，那就留给位于里面的标签的margin属性吧，而不要去定义位于外面的标签的padding
12. li标签前面的图标推荐使用background-image，而不是list-style-image.
13. 在给你的标签疯狂加选择符的时候，别忘了在CSS里给选择符加上注释。
等你以后修改你的CSS的时候就知道为什么要这么做了。另外提醒您，不要太疯狂了。(参考文：CSS样式表中的选择符)
14. 如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。
因为图片丢失了，也可以保持文字的可读性。
15. 超链接访问过后hover样式就不出现的问题
定义链接的四种状态要注意先后顺序： Link Visited Hover Active L-V-H-A
16. 与内容无关的图片请使用background.时刻记住表现与内容分离。
17. DOCTYPE 影响 CSS 处理
18. margin加倍的问题。
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;
例如：<#div id=\"imfloat\">
相应的css为
#IamFloat{
float:left;
margin:5px;
display:inline;}
19. margin取负值（不理解中 参考文：三列中间宽度自适应模型）
margin取负值可以在标签使用绝对定位的时候起到相对定位的作用，在页面居中显示时，使用绝对定位的层不适合使用left：XXpx这个属性。把这个层放到一个要相对定位的标签旁，然后使用margin的负值是个好方法。这与top，left等属性相对与窗口边缘的定位不同。绝对定位的优势在于可以让其它元素忽略它的存在。
20. 在IE中可能由于注释带来的文字重复问题时可以把注释改为：<！–[if ！IE]>Put your commentary in here…<！[endif]–>
21. 如何用CSS调用外部字体语法：
font-face{font-family：name；src：url（url）；sRules}
取值：name：字体名称。任何可能的 font-family 属性的值 url（url）：使用绝对或相对 url 地址指定OpenType字体文件 sRules：样式表定义
22.为什么web标准中IE无法设置滚动条颜色了
解决办法是将body换成html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
-->
</style>
23. 怎么样才能让层显示在FLASH之上呢
解决的办法是给FLASH设置透明
<param name="wmode" value="transparent" />
24. 链接(a标签)的边框与背景
a链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
25. CSS用于文档打印
许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。
也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：
<link type="text/css" rel="stylesheet" href="/blog/stylesheet.css" media="screen" /> <link type="text/css"
rel="stylesheet" href="printstyle.css" media="print" />
第1行就是显示，第2行是打印，注意其中的media属性。
但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看"打印差异"这一篇。
