css 书写技巧 CSS 技巧教程简介.docx

css书写技巧CSS技巧教程简介

css书写技巧CSS技巧教程简介nettuts带来的5个css书写技巧，简单翻译一下它的中心思想。1.CSSReset/重置你也许需要先了解什么是css重置。然后怎么样写css重置呢。你可以copyEricMeyerReset,YUIReset或其它cssreset,但你接下来应该根据你的项目改成你自己的reset.不要使用*{margin:0;padding:0;}。我个人很爱用，原作者提到使用这句并不适用一些元素比如单选按钮。不过俺博客里面也没有单选按钮，如果有，又重新给单选按钮重设就好了嘛。2.按字母顺序来排列css不按字母顺序排的div#headerh1{z-index:101;color:#000;position:relative;line-height:24px;margin-right:48px;border-bottom:1pxsolid#dedede;font-size:18px;}按字母顺序排的div#headerh1{border-bottom:1pxsolid#dedede;color:#000;font-size:18px;line-height:24px;margin-right:48px;position:relative;z-index:101;}理由是这样可以更好的找到某个属性。个人觉得还好，差别也不是太大。不过也许会适合你。3.更好的`组织css结构使用css注释来分给css分组，这样结构明了，也有利于协同设计。/*****Reset*****/xxxxxxx{xxxxx}xxxxx{xxxxx}/*****layouts*****/xxxxxxx{xxxxx}xxxxx{xxxxx}4.保持一致性不要无意义的去讨论到底一个选择器的所有属性写在一行，还是每个属性写一行比较好。你自己觉得ok就好。iv#header{float:left;width:100%;}div#headerdiv.column{border-right:1pxsolid#ccc;float:rightright;margin-right:50px;padding:10px;width:300px;}div#headerh1{float:left;position:relative;width:250px;}比如我个人就喜欢写在一行，因为每排写一行会让整个文档感觉太长了，找起来不方便。如果你喜欢写一行，但是发给team的另一个，他却喜欢每排一行，那怎么办？其实很简单，把css拿去w3c验证，它会有一份结果，会自动转换成每排一行。5.先标记后css这个我没有太看懂。大概理解是对html的标记弄好后再写css会比较不容易出错。比如我写一个页面，先写一个最基本的标记结构!<--endfooter--="">然后就是尽量善用子选择器，而不是一要给哪个元素进行样式化，就给它添加个选择器。