DIVCSS常用优化技巧有哪些

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

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

* {  margin:0;  padding:0;  }

p {  margin:1em 0;  font-size:1em;  color:#333;  }  .update {  font-weight:bold;  color:#600;  }

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

  
   Item 1>    Item 1     Item 1 
  

这段代码的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 */ }

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

  
  Item 1 
    Item 1   
  Item 1 
  

名目界说是：

#subnav { /* Some styling */ }  #subnav li { /* Some styling */ }  #subnav a { /* Some styling */ }  #subnav .sel { /* Some styling */ }  #subnav .sel a { /* Some styling */ }

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

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

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

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

可以写为

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

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

十一.组选择器(Group selectors)

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

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

h2,h3,h4,h5,h6,h7 {  font-family:Lucida Grande,Lucida,Arial,Helvetica,sans-serif;  color:#333;  margin:1em 0;  }

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

h2 { font-size:2em}  h3 { font-size:1.6em}

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

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

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

十三.肃除浮动

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

通常的解决方式是在浮动层前面添加一个分外元素，例如一个div大概一个br，何况界说它的名堂为clear: both。这个门径有一点牵强，幸福的是尚有一个好方式可以贪图。

上面2种方法可以很好妄想浮动高出的问题，然则要是当你真的紧要对层或者层里的对象进行clear的时分怎么办？一种简单的方法等于用overflow属性。

下面那一种clear方法更恰当你，要看具体的环境，这里不再展开叙说。

十四.横向居中(centering)

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

你可以何等定义使它横向居中：

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

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

body {  text-align:center;  }  #wrap {  width:760px; /* 修改成你的层的宽度 */  margin:0 auto;  text-align:left;  }

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

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

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

@import url(main.css);

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

@import main.css;

何等就可以在IE4中也埋伏CSS了，呵呵，还铺张了5个字节呢。

十六.针对IE的优化

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

1.疏解的方法

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

html>body p {  /* 定义模式 */  }

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

* html p {  /* declarations */  }

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

/* */  * html p {  declarations  }  /* */

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

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

十七.调试才略：层有多大？

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

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

十八.CSS代码书写样式

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

selector1,  sele首席技术官r2 {  property:value;  }

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

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

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

空格和换行有助与阅读。

到此，相信大家对“DIV CSS常用优化技巧有哪些”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！