css 撰写技能 CSS 技能实例教程

2021-03-14 23:05 jianzhan

nettuts带来的5个css撰写技能,简易汉语翻译1下它的管理中心观念。
1. CSS Reset/重设
你或许必须先掌握甚么是css重设。随后如何写css重设呢。
你能够copy Eric Meyer Reset, YUI Reset或其它css reset, 但你接下来应当依据你的新项目改为你自身的reset.
不必应用* { margin: 0; padding: 0; } 。我本人很爱用,原作者提到应用这句其实不可用1些元素例如单选按钮。但是俺blog里边也沒有单选按钮,假如有,又再次给单选按钮更改就行了嘛。
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. 维持1致性
不必不经意义的去探讨究竟1个挑选器的全部特性写在1行,還是每一个特性写1行较为好。你自身感觉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; }

例如我本人就喜爱写在1行,由于每排写1行会让全部文本文档觉得过长了,找起来不便捷。假如你喜爱写1行,可是发给team的另外一个,他却喜爱每排1行,那如何办?实际上很简易,把css拿去w3c认证,它会有1份結果,会全自动变换成每排1行。
5. 先标识后css
这个我沒有太看懂。大约了解是对html的标识弄好后再写css会较为不可易错误。例如我写1个网页页面,先写1个最基础的标识构造

拷贝编码
编码以下:

<body>
<div id="wrapper">
<div id="header"><!--end #header-->
<div id="container">
<div id="content">
</div><!--end #content-->
<div id="sidebar">
</div><!--end #sidebarr-->
</div><!--end #container-->
<div id="footer">
</div>!<--end #footer-->
</div><!--end #wrapper-->
</body>

随后便是尽可能善用子挑选器,而并不是1要给哪一个元素开展款式化,就给它加上个挑选器。