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常用優化技巧有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！