CSS的十八般技巧.docx
《CSS的十八般技巧.docx》由会员分享,可在线阅读,更多相关《CSS的十八般技巧.docx(25页珍藏版)》请在冰豆网上搜索。
CSS的十八般技巧
2007-05-2315:
13:
56
标签:
CSS样式表 [推送到技术圈]
最近,经常有朋友问我一些工作中遇到的CSS问题。
他们总是不能很好的控制CSS,影响CSS的效率发挥。
我来分析总结一下错误所在,帮助大家更加容易使用CSS。
本文总结了我开始使用CSS布局方法以来所有的技巧和兼容方案,我愿意把这些与你分享,我会重点解释一些新手容易犯的错误(包括我自己也犯过的),如果你已经是CSS高手,这些经验技巧可能已经都知道,如果你有更多的,希望可以帮我补充。
一.使用css缩写
使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。
css缩写的主要规则请参看《常用css缩写语法总结》,这里就不展开描述。
二.明确定义单位,除非值为0
忘记定义尺寸的单位是CSS新手普遍的错误。
在HTML中你可以只写width="100",但是在CSS中,你必须给一个准确的单位,比如:
width:
100pxwidth:
100em。
只有两个例外情况可以不定义单位:
行高和0值。
除此以外,其他值都必须紧跟单位,注意,不要在数值和单位之间加空格。
三.区分大小写
当在XHTML中使用CSS,CSS里定义的元素名称是区分大小写的。
为了避免这种错误,我建议所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的,如果你一定要大小写混合写,请仔细确认你在CSS的定义和XHTML里的标签是一致的。
四.取消class和id前的元素限定
当你写给一个元素定义class或者id,你可以省略前面的元素限定,因为ID在一个页面里是唯一的,而class可以在页面中多次使用。
你限定某个元素毫无意义。
例如:
div#content{/*declarations*/}
fieldset.details{/*declarations*/}
可以写成
#content{/*declarations*/}
.details{/*declarations*/}
这样可以节省一些字节。
五.默认值
通常padding的默认值为0,background-color的默认值是transparent。
但是在不同的浏览器默认值可能不同。
如果怕有冲突,可以在样式表一开始就先定义所有元素的margin和padding值都为0,象这样:
*{
margin:
0;
padding:
}
六.不需要重复定义可继承的值
CSS中,子元素自动继承父元素的属性值,象颜色、字体等,已经在父元素中定义过的,在子元素中可以直接继承,不需要重复定义。
但是要注意,浏览器可能用一些默认值覆盖你的定义。
七.最近优先原则
如果对同一个元素的定义有多种,以最接近(最小一级)的定义为最优先,例如有这么一段代码
Update:
Loremipsumdolorset
在CSS文件中,你已经定义了元素p,又定义了一个class"update"
p{
1em0;
font-size:
1em;
color:
#333;
.update{
font-weight:
bold;
#600;
这两个定义中,class="update"将被使用,因为class比p更近。
你可以查阅W3C的《Calculatingaselector’sspecificity》了解更多。
八.多重class定义
一个标签可以同时定义多个class。
我们先定义两个样式,第一个样式背景为#666;第二个样式有10px的边框。
.one{width:
200px;background:
#666;}
.two{border:
10pxsolid#F00;}
在页面代码中,我们可以这样调用
这样最终的显示效果是这个div既有#666的背景,也有10px的边框。
是的,这样做是可以的,你可以尝试一下。
九.使用子选择器(descendantselectors)
CSS初学者不知道使用子选择器是影响他们效率的原因之一。
子选择器可以帮助你节约大量的class定义。
我们来看下面这段代码:
Item1>
Item1
这段代码的CSS定义是:
div#subnavul{/*Somestyling*/}
div#subnavulli.subnavitem{/*Somestyling*/}
div#subnavulli.subnavitema.subnavitem{/*Somestyling*/}
div#subnavulli.subnavitemselected{/*Somestyling*/}
div#subnavulli.subnavitemselecteda.subnavitemselected{/*Somestyling*/}
你可以用下面的方法替代上面的代码
样式定义是:
#subnav{/*Somestyling*/}
#subnavli{/*Somestyling*/}
#subnava{/*Somestyling*/}
#subnav.sel{/*Somestyling*/}
#subnav.sela{/*Somestyling*/}
用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。
十.不需要给背景图片路径加引号
为了节省字节,我建议不要给背景图片路径加引号,因为引号不是必须的。
background:
url("images/***.gif")#333;
可以写为
url(images/***.gif)#333;
如果你加了引号,反而会引起一些浏览器的错误。
十一.组选择器(Groupselectors)
当一些元素类型、class或者id都有共同的一些属性,你就可以使用组选择器来避免多次的重复定义。
这可以节省不少字节。
定义所有标题的字体、颜色和margin,你可以这样写:
h1,h2,h3,h4,h5,h6{
font-family:
"LucidaGrande",Lucida,Arial,Helvetica,sans-serif;
如果在使用时,有个别元素需要定义独立样式,你可以再加上新的定义,可以覆盖老的定义,例如:
h1{font-size:
2em;}
h2{font-size:
1.6em;}
十二.用正确的顺序指定链接的样式
当你用CSS来定义链接的多个状态样式时,要注意它们书写的顺序,正确的顺序是:
:
link:
visited:
hover:
active。
抽取第一个字母是"LVHA",你可以记忆成"LoVeHAte"(喜欢讨厌)。
为什么这么定义,可以参考EricMeyer的《LinkSpecificity》。
如果你的用户需要用键盘来控制,需要知道当前链接的焦点,你还可以定义:
focus属性。
focus属性的效果也取决与你书写的位置,如果你希望聚焦元素显示:
hover效果,你就把:
focus写在:
hover前面;如果你希望聚焦效果替代:
focus放在:
hover后面。
十三.清除浮动
一个非常常见的CSS问题,定位使用浮动的时候,下面的层被浮动的层所覆盖,或者层里嵌套的子层超出了外层的范围。
通常的解决办法是在浮动层后面添加一个额外元素,例如一个div或者一个br,并且定义它的样式为clear:
both。
这个办法有一点牵强,幸运的是还有一个好办法可以解决,参看这篇文章《HowToClearFloatsWithoutStructuralMarkup》(注:
本站将尽快翻译此文)。
上面2种方法可以很好解决浮动超出的问题,但是如果当你真的需要对层或者层里的对象进行clear的时候怎么办?
一种简单的方法就是用overflow属性,这个方法最初的发表在《SimpleClearingofFloats》,又在《Clearance》和《Supersimpleclearingfloats》中被广泛讨论。
上面那一种clear方法更适合你,要看具体的情况,这里不再展开论述。
另外关于float的应用,一些优秀的文章已经说得很清楚,推荐你阅读:
《Floatutorial》、《ContainingFloats》和《FloatLayouts》
十四.横向居中(centering)
这是一个简单的技巧,但是值得再说一遍,因为我看见太多的新手问题都是问这个:
CSS如何横向居中?
你需要定义元素的宽,并且定义横向的margin,如果你的布局包含在一个层(容器)中,就象这样:
你可以这样定义使它横向居中:
#wrap{
760px;/*修改为你的层的宽度*/
0auto;
但是IE5/Win不能正确显示这个定义,我们采用一个非常有用的技巧来解决:
用text-align属性。
就象这样:
body{
text-align:
center;
left;
第一个body的text-align:
center;规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中),第二个text-align:
left;是将#warp中的文字居左。
十五.导入(Import)和隐藏CSS
因为老版本浏览器不支持CSS,一个通常的做法是使用@import技巧来把CSS隐藏起来。
@importurl("main.css");
然而,这个方法对IE4不起作用,这让我很是头疼了一阵子。
后来我用这样的写法:
@import"main.css";
这样就可以在IE4中也隐藏CSS了,呵呵,还节省了5个字节呢。
想了解@import语法的详细说明,可以看这里《centricle’scssfilterchart》
十六.针对IE的优化
有些时候,你需要对IE浏览器的bug定义一些特别的规则,这里有太多的CSS技巧(hacks),我只使用其中的两种方法,不管微软在即将发布的IE7beta版里是否更好的支持CSS,这两种方法都是最安全的。
∙1.注释的方法
o(a)在IE中隐藏一个CSS定义,你可以使用子选择器(childselector):
html>bodyp{
/*定义内容*/
o(b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)
*htmlp{
/*declarations*/
o(c)还有些时候,你希望IE/Win有效而IE/Mac隐藏,你可以使用"反斜线"技巧:
/*\*/
declarations
/**/
∙2.条件注释(conditionalcomments)的方法
另外一种方法,我认为比CSS Hacks更加经得起考验就是采用微软的私有属性条件注释(conditionalcomments)。
用这个方法你可以给IE单独定义一些样式,而不影响主样式表的定义。
--[ifIE]>
[endif]-->
十七.调试技巧:
层有多大?
当调试CSS发生错误,你就要象排版工人,逐行分析CSS代码。
我通常在出问题的层上定义一个背景颜色,这样就能很明显看到层占据多大空间。
有些人建议用border,一般情况也是可以的,但问题是,有时候border会增加元素的尺寸,border-top和boeder-bottom会破坏纵向margin的值,所以使用background更加安全些。
另外一个经常出问题的属性是outline。
outline看起来象boeder,但不会影响元素的尺寸或者位置。
只有少数浏览器支持outline属性,我所知道的只有Safari、OmniWeb、和Opera。
十八.CSS代码书写样式
在写CSS代码的时候,对于缩进、断行、空格,每个人有每个人的书写习惯。
在经过不断实践后,我决定采用下面这样的书写样式:
selector1,
selector2{
property:
value;
当使用联合定义时,我通常将每个选择器单独写一行,这样方便在CSS文件中找到它们。
在最后一个选择器和大括号{之间加一个空格,每个定义也单独写一行,分号直接在属性值后,不要加空格。
我习惯在每个属性值后面都加分号,虽然规则上允许最后一个属性值后面可以不写分号,但是如果你要加新样式时容易忘记补上分号而产生错误,所以还是都加比较好。
最后,关闭的大括号}单独写一行。
收集几个BUTTONCSS样式
2007-06-0711:
54:
15
CSS [推送到技术圈]
.btn{
BORDER-RIGHT:
#7b9ebd1pxsolid;PADDING-RIGHT:
2px;BORDER-TOP:
#7b9ebd1pxsolid;PADDING-LEFT:
2px;FONT-SIZE:
12px;FILTER:
progid:
DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#cecfde);BORDER-LEFT:
#7b9ebd1pxsolid;CURSOR:
hand;COLOR:
black;PADDING-TOP:
2px;BORDER-BOTTOM:
#7b9ebd1pxsolid
.btn1_mouseout{
#7EBF4F1pxsolid;PADDING-RIGHT:
#7EBF4F1pxsolid;PADDING-LEFT:
DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#B3D997);BORDER-LEFT:
#7EBF4F1pxsolid;CURSOR:
#7EBF4F1pxsolid
.btn1_mouseover{
DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#CAE4B6);BORDER-LEFT:
.btn2{padding:
2404;font-size:
12px;height:
23;background-color:
#ece9d8;border-width:
1;}
.btn3_mouseout{
#2C59AA1pxsolid;PADDING-RIGHT:
#2C59AA1pxsolid;PADDING-LEFT:
DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#C3DAF5);BORDER-LEFT:
#2C59AA1pxsolid;CURSOR:
#2C59AA1pxsolid
.btn3_mouseover{
DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#D7E7FA);BORDER-LEFT:
.btn3_mousedown
{
#FFE4001pxsolid;PADDING-RIGHT:
#FFE4001pxsolid;PADDING-LEFT:
#FFE4001pxsolid;CURSOR:
#FFE4001pxsolid
.btn3_mouseup{
.btn_2k3{
#002D961pxsolid;PADDING-RIGHT:
#002D961pxsolid;PADDING-LEFT:
DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFFFFF,EndColorStr=#9DBCEA);BORDER-LEFT:
#002D961pxsolid;CURSOR:
#002D961pxsolid
CSS样式按钮
class=btn1_mouseoutonmouseover="this.className='btn1_mouseover'"onmouseout="this.className='btn1_mouseout'"title="CSS样式按钮">CSS样式按钮
class=btn1_mouseoutonmouseover="this.className='btn1_mouseover'"
onmouseout="this.className='btn1_mouseout'"
title="CSS样式按钮">CSS样式按钮
class=btn1_mouseoutonmouseover="this.className='btn1_mouseover'"onmouseout="this.className='btn1_mouseout'"DISABLED>CSS样式按钮
onmouseout="this.className='btn1_mouseout'"DISABLED>CSS样式按钮
onmouseout="this.className='btn3_mouseout'"onmousedown="this.className='btn3_mousedown'" onmouseup="this.className='btn3_mouseup'" title="CSS样式按钮">CSS样式按钮CSS样式按钮本文出自51CTO.COM技术博客css命名规范2007-05-2807:53:15 标签:CSS规范 [推送到技术圈]页 展开阅读全文 相关资源 中考语文复习教案全套Word文件下载.docx 微博昵称大全精选600个Word文档下载推荐.docx 高二下学期半期考试语文试题 含答案Word格式.docx 安吉汽车物流的运输方式及线路优化Word文件下载.docx 正统道藏洞神部玉诀类道德真经指归 老子指归汉严遵Word格式.docx 特殊符号大全Word下载.docx 葡萄酒文化6999904896Word文档下载推荐.docx 江阴职业技术学院Word格式文档下载.docx 《食品经营许可证》餐饮服务类延续办理指南Word文档下载推荐.docx 长输管道组装通用施工工艺Word文档下载推荐.docx 猜你喜欢 届河南省天一大联考高三上学期阶段性测试三 地理.docx 酒店监控解决方案.docx 巨化离子膜烧碱管道施工方案.docx 靖江市国有土地上房屋征收评估细则.docx 陕西省吴起高级中学学年高一上学期期中考试能力卷语文试题.docx 京东商城POP移动商铺方案0104.docx 空调系统军团菌的检验分析方法.docx 上班族养生保健漫画.docx 经验分享 交通事故.docx 相关搜索 CSS 十八 技巧 当前位置:首页 > 高等教育 > 艺术
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'"
本文出自51CTO.COM技术博客
css命名规范
2007-05-2807:
53:
CSS规范 [推送到技术圈]
页
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1