欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

下列是Thinkcss收拾整顿总结的DIV CSS组织中思空见贯辅导,全部从扩充代码为主,以代码规范为主。

一.使用css缩写

使用缩写可以救济削减你CSS文件的大小,更加容易阅读。css缩写的首要划定请参看《经常使用css缩写语法总结》,这里就不睁开描画。

二.明肯界说单位,除非值为0

忘怀界说尺寸的单位是CSS老手普遍的错误。在HTML中你可以只写width=100,然而在CSS中,你必需给一个准确的单位,好比:width:100px width:100em。只有两个破例状况可以不界说单位:行高和0值。除此之外,其他值都必需紧跟单位,当心,不要在数值和单位之间加空格。

三.甄别大小写

当在XHTML中使用CSS,CSS里定义的元素俗称是判袂大大写的。为了抗御这种纰谬,我倡始所有的定义俗称都采取大写。

class和id的值在HTML和XHTML中也是分辨大大写的,要是你未必要大大写夹杂写,请负担负责确认你在CSS的界说与XHTML里的标签是一致的。

四.取消class和id前的元素限定

当你写给一个元素定义class概略id,你可以省略前面的元素制约,由于ID在一个页面里是独一的,class可以在页面中频繁使用。你限制某个元素毫偶尔思。例如:


  1. div#content { /* declarations */ }  
  2. fieldset.details { /* declarations */ } 

可以写成


  1. #content { /* declarations */ }  
  2. .details { /* declarations */ } 

多么可以糜掷一些字节。

五.默许值

通常padding的默许值为0,background-color的默认值是transparent。然则在差别的浏览器默认值可能差别。要是怕有辩说,可以在样式表一末尾就先定义所有元素的margin与padding值都为0,象如许:


  1. * {  
  2. margin:0;  
  3. padding:0;  

六.不需求几回再三界说可承继的值

CSS中,子元素积极承袭父元素的属性值,象色彩、字体等,曾经在父元素中定义过的,在子元素中可以直接承袭,不必要几回再三界说。可是要注意,浏览器可能用一些默许值覆盖你的定义。

七.最近优先原则

假定对匹敌个元素的界说有多种,以最濒临(最小一级)的定义为最优先,例若有这么一段代码

Update: Lorem ipsum dolor set

在CSS文件中,你也曾定义了元素p,又定义了一个classupdate


  1. p {  
  2. margin:1em 0;  
  3. font-size:1em;  
  4. color:#333;  
  5. }  
  6. .update {  
  7. font-weight:bold;  
  8. color:#600;  

这两个定义中,class=update将被使用,因为class比p更近。你可以查阅W3C的《 Calculating a sele首席技术官r’s specificity》 了解更多。

八.多重class界说

一个标签可以同时定义多个class。例如:咱们先定义两个格式,第一个格式背景为#666;第二个名堂有10 px的边框。


  1. .one{width:200px;background:#666;} 
  2. .two{border:10px solid #F00;} 

在页面代码中,咱们可以如许调用


  1. <div class="one two"></div>

何等最终的显露造诣是这个div既有#666的靠山,有了10px的边框。是的,如许做是可以的,你可以尝试一下。

九.使用子选择器(descendant selectors)

CSS初学者不知道使用子选择器是影响他们遵从的启事之一。子选择器可以接济你节约少许的class界说。我们来看下面这段代码:


  1. <div id=subnav>  
  2. <ul>  
  3. <li class=subnavitem> <a href=# class=subnavitem>Item 1</a></li>>  
  4. <li class=subnavitemselected> <a href=# class=subnavitemselected> Item 1</a> </li>  
  5. <li class=subnavitem> <a href=# class=subnavitem> Item 1</a> </li>
  6. </ul>  
  7. </div>

这段代码的CSS界说是:


  1. div#subnav ul { /* Some styling */ }  
  2. div#subnav ul li.subnavitem { /* Some styling */ }  
  3. div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }  
  4. div#subnav ul li.subnavitemselected { /* Some styling */ }  
  5. div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ } 

你可以用下面的方法包揽下面的代码


  1. <ul id=subnav>  
  2. <li> <a href=#> Item 1</a> </li>  
  3. <li class=sel> <a href=#> Item 1</a> </li>  
  4. <li> <a href=#> Item 1</a> </li>  
  5. </ul>

名目界说是:


  1. #subnav { /* Some styling */ }  
  2. #subnav li { /* Some styling */ }  
  3. #subnav a { /* Some styling */ }  
  4. #subnav .sel { /* Some styling */ }  
  5. #subnav .sel a { /* Some styling */ } 

用子选择器可以使你的代码与CSS更为精练、愈加容易阅读。

十.不重要给布景图片路子加引号

为了俭约字节,我倡议不要给后台图片阶梯加引号,由于引号不是必须的。例如:


  1. bac公斤round:url(images/***.gif) #333; 

可以写为


  1. background:url(images/***.gif) #333; 

假定你加了引号,反而会惹起一些阅读器的差错。

十一.组选择器(Group selectors)

当一些元素类型、class或许id都有一起的一些属性,你便可使用组选择器来防范多次的一再界说。这可以虚耗不少字节。

例如:界说所有标题问题的字体、色采与margin,你可以多么写:


  1. h1,h2,h3,h4,h5,h6 {  
  2. font-family:Lucida Grande,Lucida,Arial,Helvetica,sans-serif;  
  3. color:#333;  
  4. margin:1em 0;  

若是在使历时,有个别元素需求定义独立名堂,你可以再加之新的界说,可以笼盖老的界说,例如:


  1. h1 { font-size:2em}  
  2. h2 { font-size:1.6em} 

十二.用正确的步调指定链接的花式

当你用CSS来界说链接的多个形状款式时,要留心它们抄录的顺序,正确的程序是::link :visited :hover :active。抽取第一个字母是LVHA,你可以影象成LoVe HAte(LOVE讨厌)。为甚么这么界说,可以参照Eric Meyer的《Link Specificity》。

如果你的用户重要用键盘来管教,需要晓得目前链接的中心,你还可以界说:focus属性。:focus属性的成就也取决与你誊录的地位,若是你指望聚焦元素体现:hover造诣,你就把:focus写在:hover前面;假定你祈望聚焦成果代替:hover功效,你就把:focus放在:hover后头。

十三.肃除浮动

一个非时时见的CSS问题,定位使用浮动的时辰,下面的层被浮动的层所掩盖,概略层里嵌套的子层超出了外层的范围。

通常的解决方式是在浮动层前面添加一个分外元素,例如一个div大概一个br,何况界说它的名堂为clear: both。这个门径有一点牵强,幸福的是尚有一个好方式可以贪图,参看这篇文章《How To Clear Floats Without Structural Markup》(注:本站将尽快翻译此文)。

上面2种方法可以很好妄想浮动高出的问题,然则要是当你真的紧要对层或者层里的对象进行clear的时分怎么办?一种简单的方法等于用overflow属性,这个方法开首的发布在《Simple Clearing of Floats》,又在《Clearance》与《Super simple clearing floats》中被宽泛探讨。

下面那一种clear方法更恰当你,要看具体的环境,这里不再展开叙说。另外关于float的应用,一些优异的文章也曾说得很明晰,推荐你阅读:《Floatutorial》、《Containing Floats》与《Float Layouts》

十四.横向居中(centering)

这是一个容易的才略,但是值得再说一遍,因为我望见太多的内行问题凡是问这个:CSS如何横向居中?你重要界说元素的宽,并且定义横向的margin,若是你的布局包括在一个层(容器)中,就象多么:

<!-- 你的机关这里劈头 --> 你可以何等定义使它横向居中:


  1. #wrap {  
  2. width:760px; /* 修改成你的层的宽度 */  
  3. margin:0 auto;  

然而IE5/Win不克不及正确展示这个定义,咱们采取一个非常有用的才能来管理:用text-align属性。就象这样:


  1. body {  
  2. text-align:center;  
  3. }  
  4. #wrap {  
  5. width:760px; /* 修改成你的层的宽度 */  
  6. margin:0 auto;  
  7. text-align:left;  

第一个body的text-align:center; 规则界说IE5/Win中body的所有元素居中(其他浏览器只不过将笔墨居中) ,第二个text-align:left;是将#warp中的文字居左。

十五.导入(Import)和潜伏CSS

因为老版本涉猎器不赞成CSS,一个通常的做法是使用@import才能来把CSS潜伏起来。例如:


  1. @import url(main.css); 

然而,这个方法对IE4不起浸染,这让我很是头疼了一阵子。其后我用这样的写法:


  1. @import main.css; 

何等就可以在IE4中也埋伏CSS了,呵呵,还铺张了5个字节呢。想了解@import语法的详细注明,可以看这里《centricle’s css filter chart》

十六.针对IE的优化

有些时分,你紧要对IE阅读器的破绽定义一些特其他划定规矩,这里有太多的CSS本领(hacks),我只使用此中的两种方法,不论微软在即将发布的IE7 beta版里是否更好的赞成CSS,这两种方法凡是最安全的。

1.疏解的方法

(a)在IE中潜伏一个CSS界说,你可以使用子选择器(child sele首席技术官r):


  1. html>body p {  
  2. /* 定义模式 */  

(b)下面这个写法只有IE浏览器可以理解(对其他浏览器都暗藏)


  1. * html p {  
  2. /* declarations */  

(c)另有些时候,你但愿IE/Win有效而IE/Mac潜藏,你可使用反斜线手法:


  1. /* */  
  2. * html p {  
  3. declarations  
  4. }  
  5. /* */  

2.前提表达(conditional co妹妹ents)的方法

另外一种方法,我以为比CSS Hacks更为经得起磨练就是采取微软的公有属性前提表明(conditional comments)。用这个方法你可以给IE单独定义一些名目,而不影响主名目表的定义。就象这样:


  1. <!--[if IE]>  
  2. <link rel=stylesheet type=text/css href=ie.css />  
  3. <![endif]-->

十七.调试才略:层有多大?

当调试CSS发生不合错误,你就要象排版工人,逐行综合CSS代码。我通常在出问题的层上定义一个靠山色彩,多么就能很明明看到层攻克多大空间。有些人提倡用 border,通常状况也是可以的,但问题是,有时候border 会增多元素的尺寸,border-top与boeder-bottom会破不好纵向margin的值,以是使用background越发安然些。

另外一个经常出问题的属性是outline。outline看起来象boeder,但不会影响元素的尺寸大约位置。只要大都涉猎器赞成outline属性,我所晓得的只需Safari、OmniWeb、和Opera。

十八.CSS代码书写样式

在写CSS代码的时候,对于缩进、断行、空格,每团体有每集团的书写民俗。在经由不竭实践后,我抉择采用下面何等的抄录款式:


  1. selector1,  
  2. sele首席技术官r2 {  
  3. property:value;  

当使用分散定义时,我通常将每一个选择器单独写一行,如许利便在CSS文件中找到它们。在最后一个选择器与大括号{之间加一个空格,每个界说也零丁写一行,分号直接在属性值后,不要加空格。

我习尚在每个属性值反面都加分号,只管划定规矩上准予着末一个属性值反面可以不写分号,但是要是你要加新格局时容易遗忘补上分号而孕育发生舛讹,以是照旧都加相比好。

结尾,封闭的大括号}零丁写一行。

空格和换行有助与阅读。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/shili/s52732.shtml