CSS
常用窍门技巧放送——使用缩写可以帮助减少你CSS文件大小
更加容易阅读
css缩写主要规则请参看
常用css缩写语法整理总结
这里就不展开描述
.使用css缩写使用缩写可以帮助减少你CSS文件
大小更加容易阅读css缩写主要规则请参看常用css缩写语法整理总结这里就不展开描述2.明确定义单位
除非值为0忘记定义尺寸
单位是CSS新手普遍
在HTML中你可以只写width=100但是在CSS中你必须给个准确单位比如:width: 100px width:100em只有两个例外情况可以不定义单位:行高和0值除此以外其他值都必须紧跟单位注意不要在数值和单位的间加空格3.区分大小写
当在XHTML中使用CSS
CSS里定义元素名称是区分大小写为了避免这种我建议所有定义名称都采用小写
和id值在HTML和XHTML中也是区分大小写如果你定要大小写混合写请仔细确认你在CSS定义和XHTML里标签是致4.取消
和id前元素限定当你写给
个元素定义或者id你可以省略前面元素限定
ID在个页面里是唯鴆las s可以在页面中多次使用你限定某个元素毫无意义例如:div#content { /* declarations */ }
field
.details { /* declarations */ }可以写成
#content { /* declarations */ }
.details { /* declarations */ }
这样可以节省
些字节5.默认值
通常padding
默认值为0background-color默认值是transparent但是在区别浏览器默认值可能区别如果怕有冲突可以在样式表开始就先定义所有元素margin和padding值都为0象这样:* {
margin:0;
padding:0;
}
6.不需要重复定义可继承
值CSS中
子元素自动继承父元素属性值象颜色、字体等已经在父元素中定义过在子元素中可以直接继承不需要重复定义但是要注意浏览器可能用些默认值覆盖你定义7.最近优先原则
如果对同
个元素定义有多种以最接近(最小级)定义为最优先例如有这么段代码Update: Lorem ipsum dolor
在CSS文件中
你已经定义了元素p又定义了个updatep {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}
这两个定义中
=update将被使用比p更近你可以查阅W3C Calculating a selector’s spec
icity 了解更多8.多重
定义个标签可以同时定义多个例如:我们先定义两个样式第个样式背景为#666；第 2个样式有10 px边框.one{width:200px;background:#666;}
.two{border:10px solid #F00;}
在页面代码中
我们可以这样
<div
=one two></div>这样最终
显示效果是这个div既有#666背景也有10px边框是这样做是可以你可以尝试下9.使用子选择器(descendant selectors)
CSS初学者不知道使用子选择器是影响他们效率
原因的子选择器可以帮助你节约大量定义我们来看下面这段代码:<div id=subnav>
<ul>
<li
=subnavitem> <a href=# =subnavitem>Item 1</a></li>><li
=subnavitemselected> <a href=# =subnavitemselected> Item 1</a> </li><li
=subnavitem> <a href=# =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
=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更加简洁、更加容易阅读
最新评论