如何写出专业的CSS样式表代码?

html-css08

如何写出专业的CSS样式表代码?,第1张

但是CSS还可以更好吗?虽然webjx.com介绍了多种这方面的技巧,得开始用这五个方面改进你的CSS,会让你显得更加专业,也能使代码有好!一、重置首先,很认真的告诉你,总是要重置某些分类。无论你是使用 Eric Meyer Reset、YUI Reset,或者你自己编写的重置代码,只要使用就对了。它能很简单的移除所有元素的填充(padding)和边距(margin):html,body,div,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dt,dd,p,blockquote,pre,form,fieldset,table,th,td{margin:0padding:0}Eric Meyer Reset和YUI Reset都是非常强大的,但是对于我而言,它们走的太远了。我觉得你最终需要重置一切,然后重新定义所有元素的属性。这就是为什么Eric Meyer推荐更有效的使用(重置样式表),而你不要只是使用他的重置样式表,将它拖放到你的项目中。调整它(的重置样式表),建立属于自己的重置样式表。div#headerh1{2z-index:1013color:#0004position:relative5line-height:24px6margin-right:48px7border-bottom:1pxsolid#dedede8font-size:18px9}Example#2div#headerh1{border-bottom:1pxsolid#dededecolor:#000font-size:18pxline-height:24pxmargin-right:48pxposition:relativez-index:101}你不能告诉我Example#2不能更快的找到右边距属性。根据字母排序你的元素属性。一致的创建你的CSS,将帮助你节省花费在寻找一个特殊属性的时间。我知道一些人用这样的方法去组织代码,其他人又用另一种方法去组织,但是在我的公司,我们协商一致做出决定,所有的代码都将按照字母排序来组织。通过这样组织代码与其他人协同工作一定是有帮助的。当我碰到属性没有按照字母排序的层叠样式表我每一次都会退缩。/*****Reset*****/移除元素的填充(padding)和边距(margin)。/*****Basic Elements*****/定义基本元素的样式: body, h1-h6, ul, ol, a, p, 等./*****Generic Classes*****/定义简单的风格,好像浮动的某一侧, 移除元素的下边距, 等当然,它们大部分都与我们希望的语义不相关,但是它们是高效处理代码所必须的。/*****Basic Layout*****/定义基本的模板: header, footer等. 帮助定义网页布局的基本元素/*****Header*****/定义所有Hearder元素/*****Content*****/定义所有内容框内的元素/*****Footer*****/定义所有Footer的元素/*****Etc*****/定义其他的选择器。通过注解和归类相似元素的分组,将更快的找到你想要的。就我个人而言,我将使用两者结合的方式。如果一个选择器超过了3个属性,我将截断它采用多行的方式编写。1div#header{float:leftwidth:100%}2div#headerdiv.column{3border-right:1pxsolid#ccc4float:rightright5margin-right:50px6padding:10px7width:300px8}9div#headerh1{float:leftposition:relativewidth:250px}10所以找到你喜欢的工作方式然后保持一致。五、从正确的地方开始在完成标记语言之前不要去尝试靠近你的样式表。当我准备分割一张网页的时候,创建CSS文件之前,我需要预览并且标记body开标签到body的闭合标签之间的所有文档。我不会增加额外的DIV ,ID,或者类选择器。我将会添加一些一般的DIV,就好像hearder、content、footer.因为我知道这些东西是现实存在的。通过先标记文档,你将不会碰到本已注定的divities1和classitis2麻烦!/*You only need to add in that stuff once you have begun to write the CSS and realize that you are going to need another hook to accomplish what you are trying to achieve.*/(原文未译)。利用CSS子选择器指定子元素;不要只是机械的给元素添加类或者ID选择器。记住:没有一个良好的格式化文档(或者标记结构)CSS是无价值的。

感觉你应该在A标签上用onmouseover事件来调用这个SCRIPT脚本才能签到这个效果,看了你JS的代码,感觉name应该是你A标签的ID,而A标签外面的LI也应该有个ID,类似于con_a_1,con_a_2,con_a_3,con_a_4,con_a_5...这样子的吧,所以我想,你的下面HTML代码或许应该是这个样子的:

<LI id="con_a_1"><A id="a1" class=menu href="content.asp?id=1" target="" onmouseover="setTab("a",1,8)">关于我们</A></LI>

<LI id="con_a_2"><A id="a2" class=menu href="content.asp?id=2" target="" onmouseover="setTab("a",2,8)">发展历程</A></LI>

<LI id="con_a_3"><A id="a3" class=menu href="content.asp?id=3" target="" onmouseover="setTab("a",3,8)">组织架构</A></LI>

<LI id="con_a_4"><A id="a4" class=menu href="content.asp?id=4" target="" onmouseover="setTab("a",4,8)">荣誉资质</A></LI>

<LI id="con_a_5"><A id="a5" class=menu href="content.asp?id=5" target="" onmouseover="setTab("a",5,8)">企业理念</A></LI>

<LI id="con_a_6"><A id="a6" class=menu href="content.asp?id=6" target="" onmouseover="setTab("a",6,8)">文化活动</A></LI>

<LI id="con_a_7"><A id="a7" class=menu href="content.asp?id=7" target="" onmouseover="setTab("a",7,8)">合作公司</A></LI>

<LI id="con_a_8"><A id="a8" class=menu href="content.asp?id=8" target="" onmouseover="setTab("a",8,8)">分支机构</A></LI>

具体的你自己试试看吧,我也没试过。