分享 | css小技巧



近期分享樣式的人愈來愈多,但是在語法排置上,可能初學者沒辦法作到那麼好。
今天看到有人寫了一篇「10 Tips You Might Not Have Know About」,所以想跟大家分享一下^________^
原文出處(Click),有興趣的人可以去仔細閱讀他的內文
我在這邊只翻譯出他的十個要點。
如果翻譯的不好,也歡迎大家指正修改喔~

1.Use a common naming system
在為所有css類別命名的時候,儘量使用大眾化的英文作命名。
例如 #header(我們都會知道他是頭的部分) #header_logo (是頭那邊logo的部分)..依此類推。

2.Document common colors in the CSS commenting
在css註解的地方,放上所有你使用過的色碼+顏色的標示
例如

/*
Colors:
Dark Red #7762b0
Royal Blue #88jb04
Purple #663300
*/

3.Comment, comment, comment!
隨時隨地都要為你的css加上註解

4.Check for closed element first when debugging
在找css的錯誤之前,請先檢查你的每個元素是否都有寫完整,是否都有用「{」、「}」包好

5.Use CSS shorthand when applicable
儘量把一長串的語法縮短
例如背景的語法可以寫成:
background: #fff url("image.gif") no-repeat top left
這些語法就完全包含了(background-color. background-image. background-repeat. background-position.)

6.If possible get content in place before you style
如果可以的話,在你寫css時,加上content語法,給每一段加個宣告。
如果不知道什麼是content效果
可以試著在你的css裡頭加入下面的語法測試看看喔

.內文標籤:before {
content:"大家好,我是大木XD";
}

7.Always declare margin and padding in block-level elements
只要是大區塊的元素,都請在裡頭優先宣告margin以及padding

8.Avoiding annoying border adjusts
避免太多不必要的border語法互相干擾,要作適當的取捨調整

9.Stuck? Confused? Chances are someone's come across the same thing. Google it
遇到問題卡住了,不知道該從何下手?可能已經有人遇到同樣情況並且也解決了,多去搜尋一下吧!!
(感謝MiLa提供翻譯^^)

10.Get the web dev. tool for FireFox
多使用FireFox的外掛工具:web developer (Click) 這個軟體來編輯css

引用網址:

FACEBOOKs COMMENT():

EVERYBODYs COMMENT:

  • 1
    風痕影 (LV.37) // 2008.05.09 14:19

    第六點很奇怪,那應該對 CSS 的易讀性沒幫助才是...我想,他的意思是說,在設計樣式前,先在區塊裡填些文字會比較好

    從原文網頁看來,他是建議填 lorem ipsum...這是做設計時會用到的東西,是一堆填充版面的專用文字,因為內文沒有意義,所以不會影響到觀者的感受,但又可以呈現文字的外觀 ^^

    我剛好知道一個中文版的 lorem ipsum 製造機:http://www.richyli.com/tool/loremipsum/

    PS. 那個留言區放最新文章的功能真特別啊...對了,順帶一提,我找你的搜尋框找了非常久 囧 最後才發現左上角那個原來是搜尋框 0rz

    風痕影的網誌最新文章:Zoundry Raven Beta 0.9.284

    • 風痕影 (LV.37) // 2008.05.09 14:22

      仔細想想,好像也算半對...畢竟用 content 特性也可以達到填充文字的效果啦 XD

      風痕影的網誌最新文章:Zoundry Raven Beta 0.9.284

    • muki (LV.1145) // 2008.05.09 21:03

      原來還有lorem ipsum 這種東西XD~我倒是聽都沒聽過 噗...等等來看看這個中文製造機=ˇ=
      放新文章的插件我個人頗喜歡的~在plugins可以看到,而且現在有支援中文編碼(開心)
      我的search本來是放在下面的,可是不知道為什麼就是沒辦法使用wp預設的search,只好再旁邊又放一個google的search XD


  • LEAVE YOUR COMMENT:




      :wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!:


     
    字體大小: 小字型 12px大字型 15px
    ▲ back to top