扎实基础 9则CSS网页制作技巧 |
|
一. 使用css缩写
使用缩写 可以协助削减你CSS文件的大小，更加方便阅读 。css缩写的重要 规定请参看《css 根本语法》 。
二.明确定义单位，除非值为0
淡忘定义尺寸的单位是CSS新手 广泛的 舛误 。在HTML中你 可以只写;100，然而在CSS中，你必须给一个精确的单位， 比方：" width:100em 。惟独两个例外状况 可以不定义单位：行高和0值 。除此以外， 其余值都必须紧跟单位， 留神，不要在数值和单位中间加空格 。
三. 划分大小写
当在XHTML中 使用CSS，CSS里定义的元素名称是 划分大小写的 。为了幸免这种 舛误，我 提议全部的定义名称都采纳小写 。
class和id的值在HTML和XHTML中也是 划分大小写的，假如你 定然要大小写混合写，请 细心确认你在CSS的定义和XHTML里的标签是 统一的 。
四. 取缔class和id前的元素限定
当你写给一个元素定义class或者id，你 可以省略前面的元素限定，由于ID在一个页面里是唯一的，鸩las s 可以在页面中 频繁 使用 。你限定某个元素毫无 意思 。例如：
div#content { /* declarations */ }
fieldset.details { /* declarations */ }
可以写成
#content { /* declarations */ }
.details { /* declarations */ }
这样 可以 节俭一些字节 。
五.默许值
通常padding的默许值为0，background-color的默许值是transparent 。然而在不同的阅读器默许值可能不同 。假如怕有 摩擦， 可以在 款式表一开始就先定义全部元素的margin和padding值都为0，象这样：
* {
margin:0;
padding:0;
}
六.不需求 反复定义可继承的值
CSS中，子元素自动继承父元素的属性值，象 色彩、字体等，已经在父元素中定义过的，在子元素中 可以直接继承，不需求 反复定义 。然而要 留神，阅读器可能用一些默许值 遮蔽你的定义 。
七.近期优先 准则
假如对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码
Update: Lorem ipsum dolor set
在CSS文件中，你已经定义了元素p，又定义了一个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》 了解更多 。
一个标签 可以同时定义多个class 。例如：我们先定义两个 款式，第一个 款式背景为#666；第二个 款式有10 px的边框 。
.one{;background:#666;}
.two{border:10px solid #F00;}
在页面代码中，我们 可以这样调用
＜div class="one" two＞＜/div＞
这样最后的显示 动机是这个div既有#666的背景，也有10px的边框 。是的，这样做是 可以的，你 可以尝试一下 。
九. 使用子 取舍器(descendant selectors)
CSS初学者不晓得 使用子 取舍器是影响他们效率的缘由之一 。子 取舍器 可以协助你节约大量的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＞
＜/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更加简洁、更加方便阅读 。 |
