网页设计-[常用CSS缩写语法总结、标准的N种死法及网页设计必须注意的几个问题 ]

一、使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下：

颜色

16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：
#000000可以缩写为#000;#336699可以缩写为#369;

盒尺寸

通常有下面四种书写方法:

property:value1; 表示所有边都是一个值value1；

property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2

property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3

property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left

方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：
margin:1em 0 2em 0.5em;

边框(border)

边框的属性如下：

• border-width:1px;
• border-style:solid;
• border-color:#000;

可以缩写为一句：border:1px solid #000;

语法是border:width style color;

背景(Backgrounds)

背景的属性如下：

• background-color:#f00;
• background-image:url(background.gif);
• background-repeat:no-repeat;
• background-attachment:fixed;
• background-position:0 0;

可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0;

语法是background:color image repeat attachment position;

你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：

• color: transparent
• image: none
• repeat: repeat
• attachment: scroll
• position: 0% 0%

字体(fonts)

字体的属性如下：

• font-style:italic;
• font-variant:small-caps;
• font-weight:bold;
• font-size:1em;
• line-height:140%;
• font-family:"Lucida Grande",sans-serif;

可以缩写为一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。

列表(lists)

取消默认的圆点和序号可以这样写list-style:none;,

list的属性如下:

• list-style-type:square;
• list-style-position:inside;
• list-style-image:url(image.gif);

可以缩写为一句：list-style:square inside url(image.gif);

 二、 标准的N种死法

1.　DIV之死

一个网页不管是什么..都可以用DIV来~~最典型的为某某论坛(不敢打出他的名字)
应该用什么元素的就用什么元素。
tbody是个好东西，table也可以一行一行的出来，不过不是在所有的浏览器。

为什么div这样方便呢？因为div虾米都没。不管想怎样，只要加个class或者ID就用，不用考虑层次关系，反正DIV是无语义的东东，爱怎套就怎套~~套成像table都可以。

建议解决方案：多去了解(X)HTML

2.　校验之死

个人认为：网页是通过浏览器给人看的..(嘿嘿,有时是给搜索引荐看滴..)
以前的我常常跑w3c.看看能不能给我发个小图片。可是~那个小图片有什么用？放着好让别人看到我能通过校验。为了通过校验.还有搞一大堆杂七杂八的东东。
w3c的想法是好滴，可是浏览器们不听他的。我会选择浏览器，因为网页用户不必知道w3c~他也没有那样理想的浏览器。我有两个系统+所有能装的浏览器都找不到理想的，就算有，他们也不一定会去用。

建议解决方案:w3c可以照跑..不过不是去看那个图片..而是看图片上面那绿色框框里的建议

3.　浏览器之死

IE是个好东西..没了他,我可上不了招行的网银嘿嘿。
当大家习惯IE时，会发现怎这个浏览器这样怪，我用IE都正常！
Firefox Opera 其实都不错...不过这两个浏览器无论是对CSS还是对JS的解析都或多或少有些不一样。
不能说哪个是绝对是对的，不能当一个使用。如果只能用IE正常浏览的话，太对不起liunx的用户了。
我在win下，.我会选择性选择浏览器去看网页。可是，liunx下呢？那里没IE！
别跟我说liunx哪有人用.我都没见过，只是用户群不同。

建议解决方案：此题无正解。临时解决方式装N个浏览器测试，尽可能少用hack.或用条件注释，保持向后兼容。

4.　!important之死

一两年前，都浏览用!important来区分IE跟Firefox Opera。IE7出了，那种兼容IE5~6+Firefox~Opera 突然在IE7挂了。
网页本来是应该向后兼容..搞得那些table>table>table 反而能正常而..XHTML+CSS反而不正常。

建议解决方案：!important是用来提高优先权的，而不是用来区分浏览器的。

5.　脚本之死

现在都流行无刷新了。可是，有的人网速不一定跟得上。
span加onclick 或者 a的href=javascript:xxxxx JS没下完点击时脚本就可能会出错(某某人关了脚本，跟我说出错。也有用户可能会关了脚本)
这样话，你哪里都去不了。

建议解决方案：用脚本加事件不应该改掉原网页的结构。.我一直用 href=原链接 onclick= return function();或者function(); return false;

6.　懒之死

此死可能会死到自己，用户的不理。
现在的我如果没特别需求，只兼容win上的IE6+ Firefox1.5+ Opera9+ 。如果突然有一天~老总的电脑是用IE5的话.( 一般不会发生). 我就不知道怎样死了。不过我一直使用两层制作，一般不会死得太难看！

建议解决方案：装N+N个浏览器，同时估计老总用什么浏览器，把那个浏览器做得最好。

另外附上我的小站：http://web008.net --呵呵！

   三、网页设计必须注意的几个问题

     1.配色问题
　　一个网页的色彩最好不要超过3种，一面视觉效果混乱，用色柔和，对比度强的色彩不能应用于一般网站，时尚网站使用还可以。一般不好搭配的颜色，用灰度搭配。

　　2.字体问题
　　很重要的一个问题，用标准字标准色，这是一个规范，行距一般控制在20px左右，不要太小，也不要太大，自己大小注意，中文12px，英文11px或者10px。不要用黑色字，可以用灰度或者其它柔和颜色，统一整个网页字体的色彩以及大小，规范整体。

　　3.布局规范
　　布局是非常重要的，考虑客户浏览习惯以及他们想展现的内容，并且优化。一个网页，如果布局不合理的话不但影响浏览，而且非常难看。

　　4.制作习惯
　　必须非常熟悉各种网站的功能，要做得非常全面，比如说一个商城的网站应该有哪些内容必须非常清楚，不要等客户提出之后才补充上去，会显得自己非常不专业。

　　5.不可忽视细节
　　客户对网站的感觉不好，不过又说不出，多半是细节处理问题，细心的处理网页的每一个象素，力求完美。