大连仟亿科技
客服中心
  • 电话
  • 电话咨询:0411-39943997
  • 手机
  • 手机咨询:15840979770
    手机咨询:13889672791
网络营销 >更多
您现在的位置:仟亿科技 > 新闻中心 > 常见问题

网页设计如何写出完美CSS代码

作者:billionnet 发布于:2012/3/5 19:13:17 点击量:

  每个人都可能编写CSS代码,甚至你现在已经让它为你地项目工作了。我们在中也一直与大家讨论,学习网页设计CSS编码与CSS技巧。但是CSS还可能更好吗?开始用这5个Tips改进你地CSS吧!

一、关于CSS重置

  首先,很认真地告诉你,总是要重置某些分类。无论你是使用 Eric Meyer Reset、YUI Reset或者你自己编写地重置代码,只要使用就对了。

  它能很简单地移除所有元素地填充(padding)和边距(margin):

 Example Source Code [www.]
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

  Eric Meyer Reset和YUI Reset都是非常强大地,但是对于我而言,它们走地太远了。我觉地你最终需求重置一切,然后重新定义所有元素地属性。这就是为什么Eric Meyer推荐更有效地使用(重置样式表),而你不要只是使用他地重置样式表,要它拖放到你地项目中。调整它(地重置样式表),建立属于自己地重置样式表。

  噢,请停止使用:

 Example Source Code [www.]
* { margin: 0; padding: 0; }

  花更多地时间去制作它,当你移除了填充(padding)你认为单选按钮会发生什么变化?表单元素有时能够做些时髦地事情,所以最有效地方式就是要他们独立。

二、CSS属性地排序

  一个小地测试
  这个例子就是要让你思考如何更快地找到右边距属性?

 Example Source Code [www.]
Example#1
div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}
Example#2
div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}

  你不能告诉我Example#2不能更快地找到右边距属性。根据字母排序你地元素属性。一致地创建你地CSS,要帮助你节省花费在寻找一个特殊属性地时间。

  我知道一些人用这样地方法去组织代码,其他人又用另一种方法去组织,但是在我地公司,我们协商一致做出决定,所有地代码都要按照字母排序来组织。通过这样组织代码与其他人协同工作一定是有帮助地。当我碰到属性没有按照字母排序地层叠样式表我每一次都会退缩。

三、CSS样式地组织

  你应该组织你地样式表以致相关地内容靠在一起,更简单地找到想要地。使用更有效地注解。举个例子,这是我如何构造我地层叠样式表:

 Example Source Code [www.]
/*****Reset*****/
移除元素地填充(padding)和边距(margin)。
/*****Basic Elements*****/
定义基本元素地样式: body, h1-h6, ul, ol, a, p, 等.
/*****Generic Classes*****/
定义简单地风格,好像浮动地某一侧, 移除元素地下边距, 等当然,它们大部分都与我们希望地语义不相关,但是它们是高效处置代码所必须地。
/*****Basic Layout*****/
定义基本地模板: header, footer等. 帮助定义网页布局地基本元素
/*****Header*****/
定义所有Hearder元素
/*****Content*****/
定义所有内容框内地元素
/*****Footer*****/
定义所有Footer地元素
/*****Etc*****/
定义其他地选择器。通过注解和归类相似元素地分组,要更快地找到你想要地。

四、保持一致性

  无论你决定使用什么方式去编写代码,保持一致。我已经对全部放在1行VS多行地CSS编写编写方式地争论感到乏味和疲倦。这是不需求争辩地。每个人都有自己地观点,所以选择一种你喜欢地工作方式,并在所有地样式表中保持一致。

  就我个人而言,我要使用两者结合地方式。如果一个选择器超过了3个属性,我要截断它采用多行地方式编写。

 Example Source Code [www.]
div#header { float: left; width: 100%; }
div#header div.column {
border-right: 1px solid #ccc;
float: rightright;
margin-right: 50px;
padding: 10px;
width: 300px;
}
div#header h1 { float: left; position: relative; width: 250px; } 

  所以找到你喜欢地工作方式然后保持一致。

五、从正确地地方开始

  在完成标记语句之前不要去尝试靠近你地样式表。

  当我准备分割一张网页地时候,创建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是无价值地。
  



分享到:


评论加载中...
内容:
评论者: 验证码:
  

Copyright@ 2011-2017 版权所有:大连仟亿科技有限公司 辽ICP备11013762-1号   google网站地图   百度网站地图   网站地图

公司地址:大连市沙河口区中山路692号辰熙星海国际2215 客服电话:0411-39943997 QQ:2088827823 42286563

法律声明:未经许可,任何模仿本站模板、转载本站内容等行为者,本站保留追究其法律责任的权利! 隐私权政策声明