DIV CSS常用优化技巧有哪些

本篇内容主要讲解“DIV CSS常用优化技巧有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“DIV 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可以在页面中频繁使用。你限制某个元素毫偶尔思。例如：

div#content {  }  fieldset.details {  }

可以写成

#content {  }  .details {  }

多么可以糜掷一些字节。

五.默许值

通常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更近。

八.多重class界说

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

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

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

1. <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>  <li class=subnavitem> <a href=# class=subnavitem> Item 1</a> </li></ul>  </div>

这段代码的CSS界说是：

div#subnav ul {  }  div#subnav ul li.subnavitem {  }  div#subnav ul li.subnavitem a.subnavitem {  }  div#subnav ul li.subnavitemselected {  }  div#subnav ul li.subnavitemselected a.subnavitemselected {  }

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

<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 {  }  #subnav li {  }  #subnav a {  }  #subnav .sel {  }  #subnav .sel a {  }

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

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

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

bac公斤round:url(images  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 {    }

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

  * html p {  declarations  }  

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

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

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

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

当调试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常用优化技巧有哪些”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！