易截截图软件、单文件、免安装、纯绿色、仅160KB

5个CSS书写技巧

1. CSS Reset/重置
你也许需要先了解什么是css重置。然后怎么样写css重置呢。
你可以copy Eric Meyer Reset, YUI Reset或其它css reset, 但你接下来应该根据你的项目改成你自己的reset.
不要使用* { margin: 0; padding: 0; } 。我个人很爱用,原作者提到使用这句并不适用一些元素比如单选按钮。不过俺博客里面也没有单选按钮,如果有,又重新给单选按钮重设就好了嘛。
2. 按字母顺序来排列css
不按字母顺序排的
div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}
按字母顺序排的
div#header h1 {
 border-bottom: 1px solid #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#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; }
比如我个人就喜欢写在一行,因为每排写一行会让整个文档感觉太长了,找起来不方便。如果你喜欢写一行,但是发给team的另一个,他却喜欢每排一行,那怎么办?其实很简单,把css拿去w3c验证,它会有一份结果,会自动转换成每排一行。
5. 先标记后css
这个我没有太看懂。大概理解是对html的标记弄好后再写css会比较不容易出错。比如我写一个页面,先写一个最基本的标记结构
<body>
     <div id="wrapper">
          <div id="header"><!--end #header-->
          <div id="container">
 &n


相关文档:

网页中如何换肤?(CSS)

最简单的办法:假设你有两个颜色的CSS文件red.css,green.css,默认为红色的样式
<link rel="stylesheet" style="text/css" link="red.css" id="colorcss">
<input type="button" name="redcss" value='红色' onclick="javascript:document.getElementById('colorcss').href='red.css'">
<input type="butt ......

CSS hack:IE6,IE7,firefox显示不同效果

区别不同浏览器的CSS hack写法:
区别IE6与FF:
       background:orange;*background:blue;
区别IE6与IE7:
       background:green !important;background:blue;
区别IE7与FF:
      &nb ......

常用CSS命名规范

模块:module.css
基本共用:base.css
布局、版面:layout.css
主题:themes.css
专栏:columns.css
文字:font.css
表单:forms.css
补丁:mend.css
打印:print.css
头:header  
内容:content/container  
尾:footer  
导航:nav  
侧栏:sidebar
栏目:column  
页面外围控制整体布局宽度: ......

CSS和JS标签style属性对照表


盒子标签和属性对照
CSS语法(不区分大小写)
JavaScript语法(区分大小写)
border
border
border-bottom
borderBottom
border-bottom-color
borderBottomColor
border-bottom-style
borderBottomStyle
border-bottom-width
borderBottomWidth
border-color
borderColor
border-left
borderLeft
border ......

25本经典CSS电子书


The CSS Anthology 101 Essential Tips Tricks Hacks 3rd Edition

The Ultimate CSS Reference

Teach Yourself Visually Html And CSS

Everything You Know About CSS is Wrong

The CSS Anthology 101 Essential T ......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号