雞西網站建設制作優化設計[SEO]
本頁定位
在線咨詢

CSS你必須要懂得的經驗

假裝紳士??1年前 (2018-09-04)1802A+A-

學習CSS不得不知的技巧小結

雞西網從日常網站制作中總結的經驗,如果能很好的運用這些css技巧,讓css充分發揮效率,對于網頁設計來說又進了一大步。下面是總結的一些css使用技巧以及一些兼容方案和縮寫方法,希望高手能得以補充。

1.使用css縮寫

要習慣使用css縮寫,這樣不僅減少css文件的大小,還有利于閱讀以及維護,讓服務器加載起來也快速。

2.一定要定義單位,除非是0

忘記定義單位是CSS新手普遍發生的錯誤。在用table的過程中你可以只寫width=”100″,但是在CSS中,你必須給一 個準確的單位,比如:width:100px width:100em。只有兩個例外情況可以不定義單位:行高和0值。除此以 外,其他值都必須緊跟單位,注意,不要在數值和單位之間加空格。

3.要注意區分大小寫

當在XHTML中使用CSS,CSS里定義的元素名稱是區分大小寫的。為了避免這種錯誤,我建議所有的定義名稱 都采用小寫。
class和id的值在HTML和XHTML中也是區分大小寫的,如果你一定要大小寫混合寫,請仔細確認你在CSS的定 義和XHTML里的標簽是一致的。

4.一定要使用Reset

不同瀏覽器默認值不同,因此一定要使用reset,統一下,你可以使用Eric Meyer Reset、YUI Reset 等,或者你自己定制的reset.哪怕簡單的把marginpadding的值去掉,都歸0.最好不要使用一下這種方式。
* {margin:0;padding:0;}

5.不需要重復定義可繼承的值

CSS中,子元素自動繼承父元素的屬性值,象顏色、字體等,已經在父元素中定義過的,在子元素中可以直 接繼承,不需要重復定義。但是要注意,瀏覽器可能用一些默認值覆蓋你的定義。

6.按字母順序

很多人都有自己的組織方式,我是按照字母順序組織的,或許你可以嘗試一下。

7.用正確的順序指定連接的樣式

當你用CSS來定義鏈接的多個狀態樣式時,要注意它們書寫的順序,正確的順序是::link :visited :hover :active。抽取第一個字母是”LVHA”,你可以記憶成”LoVe HAte”(喜歡討厭)。為什么這么定義,可以參考Eric Meyer的《Link Specificity》。
如果你的用戶需要用鍵盤來控制,需要知道當前鏈接的焦點,你還可以定義:focus屬性。:focus屬性的效 果也取決與你書寫的位置,如果你希望聚焦元素顯示:hover效果,你就把:focus寫在:hover前面;如果你希望 聚焦效果替代:hover效果,你就把:focus放在:hover后面。

常用css縮寫語法總結

使用縮寫可以幫助減少你CSS文件的大小,更加容易閱讀。css縮寫的主要規則如下:

顏色

16進制的色彩值,如果每兩位的值相同,可以縮寫一半,例如:
#000000可以縮寫為#000;#336699可以縮寫為#369;

盒尺寸

通常有下面四種書寫方法:

  1. property:value1; 表示所有邊都是一個值value1;
  2. property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
  3. property:value1 value2 value3; 表示top的值是value1,right和left的值是value2,bottom的值是value3
  4. property:value1 value2 value3 value4; 四個值依次表示top,right,bottom,left

方便的記憶方法是順時針,上右下左。具體應用在margin和padding的例子如下:
margin:1em 0 2em 0.5em;

邊框(border)

邊框的屬性如下:

  1. border-width:1px;
  2. border-style:solid;
  3. border-color:#000;

可以縮寫為一句:border:1px solid #000;
語法是border:width style color;

背景(Backgrounds)

背景的屬性如下:

  1. background-color:#f00;
  2. background-image:url(background.gif);
  3. background-repeat:no-repeat;
  4. background-attachment:fixed;
  5. background-position:0 0;

可以縮寫為一句:background:#f00 url(background.gif) no-repeat fixed 0 0;
語法是background:color image repeat attachment position;
你可以省略其中一個或多個屬性值,如果省略,該屬性值將用瀏覽器默認值,默認值為:

  1. color: transparent
  2. image: none
  3. repeat: repeat
  4. attachment: scroll
  5. position: 0% 0%

字體(fonts)

字體的屬性如下:

  1. font-style:italic;
  2. font-variant:small-caps;
  3. font-weight:bold;
  4. font-size:1em;
  5. line-height:140%;
  6. font-family:”Lucida Grande”,sans-serif;

可以縮寫為一句:font:italic small-caps bold 1em/140% “Lucida Grande”,sans-serif;
注意,如果你縮寫字體定義,至少要定義font-size和font-family兩個值。

列表(lists)

取消默認的圓點和序號可以這樣寫list-style:none;,
list的屬性如下:

  1. list-style-type:square;
  2. list-style-position:inside;
  3. list-style-image:url(image.gif);

可以縮寫為一句:list-style:square inside url(image.gif);

全部評論: 1
  • letian 贊(0)  沙發

    我先來這里逛,評論字數要十個

登錄沒有賬號 切換注冊

忘記密碼 ?

注冊已有賬號 切換登錄

15选5走势图开奖