css网页页面制做好用技能9则

2021-03-16 12:16 jianzhan

本篇总结了1些css常见技能,为网站重构打下基本,希望您能学到1点有效的物品。
1.应用css缩写
应用缩写能够协助降低你CSS文档的尺寸,更为非常容易阅读文章。css缩写的关键标准请参看《css基础英语的语法》。
2.确立界定企业,除非值为0
忘掉界定规格的企业是CSS初学者广泛的不正确。在HTML中你能够只写;100,可是在CSS中,你务必给1个精确的企业,例如:" width:100em。仅有两个列外状况能够不确定义企业:行高和0值。除此之外,别的值都务必紧跟企业,留意,不必在标值和企业之间加空格。
3.区别尺寸写
当在XHTML中应用CSS,CSS里界定的元素名字是区别尺寸写的。以便防止这类不正确,我提议全部的界定名字都选用小写。
class和id的值在HTML和XHTML中也是区别尺寸写的,假如你1定要尺寸写混和写,请细心确定你在CSS的界定和XHTML里的标识是1致的。
4.撤销class和id前的元素限制
当你写给1个元素界定class或id,你能够省略前面的元素限制,由于ID在1个网页页面里是唯1的,鴆las s能够在网页页面中数次应用。你限制某个元素没什么实际意义。比如:
div#content { /* declarations */ }
fieldset.details { /* declarations */ }
能够写成
#content { /* declarations */ }
.details { /* declarations */ }
这样能够节约1些字节。
5.默认设置值
一般padding的默认设置值为0,background-color的默认设置值是transparent。可是在不一样的访问器默认设置值将会不一样。假如怕有矛盾,能够在款式表1刚开始就先界定全部元素的margin和padding值都为0,象这样:
* {
margin:0;
padding:0;
}
6.不必须反复界定可承继的值
CSS中,子元素全自动承继父元素的特性值,象色调、字体样式等,早已在父元素中界定过的,在子元素中能够立即承继,不必须反复界定。可是要留意,访问器将会用1些默认设置值遮盖你的界定。
7.近期优先选择标准
假如对同1个元素的界定有多种多样,以最贴近(最少1级)的界定为最佳先,比如有这么1段编码
Update: Lorem ipsum dolor set
在CSS文档中,你早已界定了元素p,又界定了1个classupdate
p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}
这两个界定中,class="update将被应用,由于class比p更近。你能够查阅W3C的《" Calculating a selector’s specificity》 掌握更多。
8.多种class界定
1个标识能够另外界定好几个class。比如:大家先界定两个款式,第1个款式情况为#666;第2个款式有10 px的边框。
.one{;background:#666;}
.two{border:10px solid #F00;}
在网页页面编码中,大家能够这样启用
<div class="one" two></div>
这样最后的显示信息实际效果是这个div既有#666的情况,也是有10px的边框。是的,这样做是能够的,你能够尝试1下。
9.应用子挑选器(descendant selectors)
CSS初学者不知道道应用子挑选器是危害她们高效率的缘故之1。子挑选器能够协助你节省很多的class界定。大家看来下面这段编码:
<div id="subnav>"
<ul>
<li class="subnavitem>" <a href=# class="subnavitem>"Item 1</a></li>>
<li class="subnavitemselected>" <a href=# class="subnavitemselected>" Item 1</a> </li>
<li class="subnavitem>" <a href=# class="subnavitem>" Item 1</a> </li>
</ul>
</div>
这段编码的CSS界定是:
div#subnav ul { /* Some styling */ }
div#subnav ul li.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitemselected { /* Some styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }
你能够用下面的方式取代上面的编码
<ul id="subnav>"
<li> <a href=#> Item 1</a> </li>
<li class="sel>" <a href=#> Item 1</a> </li>
<li> <a href=#> Item 1</a> </li>
</ul>
款式界定是:
#subnav { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling */ }
#subnav .sel a { /* Some styling */ }
用子挑选器可使你的编码和CSS更为简约、更为非常容易阅读文章。