近期分享樣式的人愈來愈多,但是在語法排置上,可能初學者沒辦法作到那麼好。
今天看到有人寫了一篇「10 CSS 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
本站採用

2008-05-09 at 14:19:11 | 巢狀回覆該留言
第六點很奇怪,那應該對 CSS 的易讀性沒幫助才是...我想,他的意思是說,在設計樣式前,先在區塊裡填些文字會比較好
從原文網頁看來,他是建議填 lorem ipsum...這是做設計時會用到的東西,是一堆填充版面的專用文字,因為內文沒有意義,所以不會影響到觀者的感受,但又可以呈現文字的外觀 ^^
我剛好知道一個中文版的 lorem ipsum 製造機:http://www.richyli.com/tool/loremipsum/
PS. 那個留言區放最新文章的功能真特別啊...對了,順帶一提,我找你的搜尋框找了非常久 囧 最後才發現左上角那個原來是搜尋框 0rz
風痕影的網誌最新文章:Zoundry Raven Beta 0.9.284
2008-05-09 at 14:22:52 | 巢狀回覆該留言
仔細想想,好像也算半對...畢竟用 content 特性也可以達到填充文字的效果啦 XD
風痕影的網誌最新文章:Zoundry Raven Beta 0.9.284
2008-05-09 at 21:03:40 |
原來還有lorem ipsum 這種東西XD~我倒是聽都沒聽過 噗...等等來看看這個中文製造機=ˇ=
放新文章的插件我個人頗喜歡的~在plugins可以看到,而且現在有支援中文編碼(開心)
我的search本來是放在下面的,可是不知道為什麼就是沒辦法使用wp預設的search,只好再旁邊又放一個google的search XD