网奇CMS - 成熟易用的.NET网站管理系统
旧版官网 | 客服论坛 | 彩虹服务 | 加入收藏 | TEL:400-600-2788

教你写出更好的CSS代码的5种方法

  

  每个设计人员都可以编写CSS代码,但是你的CSS还可以更好吗?看看下面我总结的5个法宝吧!你会有很大的惊喜!

  1.组织

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

  /*****Reset*****/

  移除元素的填充(pad和边距(margin

  /*****BasicElements*****/

  h1-h6,定义基本元素的样式:body.ul,ol,a,p,等.

  /*****GenerClasses*****/

  好像浮动的某一侧,定义简单的风格。移除元素的下边距,等当然,大部分都与我希望的语义不相关,但是高效处置代码所必须的

  /*****BasicLayout*****/

  footer等.协助定义网页布局的基本元素定义基本的模板:header.

  /*****Header*****/

  定义所有Hearder元素

  /*****Content*****/

  定义所有内容框内的元素

  /*****Footer*****/

  定义所有Footer元素

  /*****Etc*****/

  将更快的找到想要的定义其他选择器。通过注解和归类相似元素的分组。

  2.排序

  一个小的测试

  这个例子就是要让你思考如何更快的找到右边距属性

  Example#1

  div#headh1{

  z-index:101;

  color:#000;

  position:relative;

  line-height:24px;

  margin-right:48px;

  border-bottom:1pxsolid#dedede;

  font-size:18px;

  }

  Example#2

  div#headh1{

  border-bottom:1pxsolid#dedede;

  color:#000;

  font-size:18px;

  line-height:24px;

  margin-right:48px;

  position:relative;

  z-index:101;

  }

  3.从正确的地方开始

  完成标志语言之前不要去尝试靠近你样式表。

  创立CSS文件之前,需要预览并且标记bodi开标签到bodi闭合标签之间的所有文档。不会增加额外的P,当我准备分割一张网页的时候。ID,或者类选择器。将会添加一些一般的P就好像heardercontentfooter.因为我知道这些东西是现实存在

  将不会碰到本已注定的divities1和classitis2麻烦!/*YouonlineedtoaddinthatstuffoncyouhavebeguntowritetheCSSandrealizthatyouargotoneedanothhooktoaccomplishwhatyouartrytoachieve.*/原文未译)通过先标记文档。

  利用CSS子选择器指定子元素;不要只是机械的给元素添加类或者ID选择器。记住:没有一个良好的格式化文档(或者标志结构)CSS无价值的

  4.重置 首先,很认真的告诉你总是要重置某些分类,无论你使用 EricMeyerResetYUIReset或者你自己编写的重置代码,

  能很简单的移除所有元素的填充(pad)和边距(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:0;padding:0;}

  EricMeyerReset和YUIReset都是非常强大的但是。这就是为什么EricMeyer推荐更有效的使用(重置样式表)而你不要只是使用他重置样式表,将它拖放到项目中。调整它重置样式表)建立属于自己的重置样式表。

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

  5.一致性

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

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

  div#head{float:left;width:100%;}

  div#headdiv.column{

  border-right:1pxsolid#ccc;

  float:rightright;

  margin-right:50px;

  padding:10px;

  width:300px;

  }

  div#headh1{float:left;position:relative;width:250px;}

  所以找到喜欢的工作方式然后坚持一致。

  总结

  以上是我总结的五个写出更好的CSS的方法,不知对你起到作用与否。

0 顶一下 打印 阅读:
界面制作中最有帮助的文章