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 { /* declarations */ }  fieldset.details { /* declarations */ }

可以写成

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

多么可以糜掷一些字节。

五.默许值

通常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 { /* 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 class=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更为精练、愈加容易阅读。

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

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

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单独定义一些名目，而不影响主名目表的定义。就象这样：

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