045 月

CSS技巧研究-文章後面的刪節號

最外層的tag設border-bottom，並設相對定位，內層的兩個tag(文章標題、日期)設定顏色及絕對定位蓋住最外層的border，這樣就能做出刪節號的效果，不過這個效果只適用於只有一行的情況，如果是兩行以上或是有其他客製化的需求，則需要在前面加上div的空標籤。

CSS, 刪節號
Posted by admin Posted on 04 5 月 0 Comments

035 月

CSS技巧研究-最小高

最小高的順序一定要像下面列的那樣，第一行是指定給大部份的瀏覽器(Firefox、Opera等支援min-height的瀏覽器)，最小高要有 10px，第二行是讓不支援min-height的瀏覽器能自動撐開，而最後一行則是給IE6看的(同一屬性多次出現在同一樣式裡，IE6只會認得最後一個，而且IE6的height行為等同於最小高)。所以順序一定得要照下面那三行書寫才能做到相容所有瀏覽器的最小高。

CSS, 最小高
Posted by admin Posted on 03 5 月 0 Comments

254 月

CSS Bug

本篇說明css常見的Double Margin、hasLayout 、Firefox浮動Bug、IE6多出3px 等常見問題與解決方法。

CSS, Double Margin, hasLayout, IE6多出3px
Posted by admin Posted on 25 4 月 0 Comments

184 月

CSS Hack

為了符合W3C的規範，我們會儘量避免使用hack，如果有瀏覽器無法統一的情況發生，要先試著找找是不是因為bug產生的原因，如果不是再來做 hack。編寫樣式時應以Firefox為主要優先的瀏覽器，再對IE做hack，並選擇可以通過W3C驗證的hack，原本IE6用的_和IE7用的* 都應該盡量不要使用了，而改以可以通過W3C驗證的為主。底下列出我們所使用的hack。

CSS, hack, IE, W3C
Posted by admin Posted on 18 4 月 0 Comments

114 月

CSS設計規範[7]-CSS屬性書寫順序

書寫順序有規律的話，不僅code能簡單一致，而且也能增進維護性，尤其和簡寫搭配之後能更清楚的條列出樣式在做什麼，當以後有需要修改樣式的時候，也不用看半天才找到你要改的樣式。我們的書寫順序是跟簡寫的順序做搭配，知道如何簡寫就知道書寫的順序，例如font和background的書寫順序就是簡寫的書寫順序。

CSS, order, properties, 書寫順序
Posted by admin Posted on 11 4 月 0 Comments

064 月

CSS設計規範[6]-CSS簡寫（shorthand）

CSS簡寫能夠大大的縮小檔案的size，所以在寫樣式定義的時候，遇到可以簡寫的屬性，一律都用簡寫。簡寫時，有幾點需要特別注意的：margin、padding的值可以是1~4個，順序為：上、右、下、左(順時針的順序) 、font的簡寫一定要有font-size和font-family。

color, CSS, font, margin, padding, shorthand, 簡寫
Posted by admin Posted on 06 4 月 0 Comments

293 月

CSS設計規範[5]-樣式編排十大要點

CSS的撰寫慣例中很少會用到引號的，而且在CSS裡單引號和雙引號的效用是一樣的，不過為了統一風格，我們一律使用雙引號，另外雙引號的使用時間有幾個需要特別注意的地方。 1.字型體系除了字體會有一個空白以上、字體有特殊字元、中文字體，其他一律不加引號。 2.background-image的url不另外使用引號，簡寫的時候也一樣。 3.如果必須使用in-line style的話，就要特別注意in-line style是使用雙引號還是單引號，如果在雙引號內使用雙引號，那麼瀏覽器就會認不出來而變成預設值，或是繼承上面的設定。

!important, CSS, Specificity
Posted by admin Posted on 29 3 月 0 Comments

213 月

CSS設計規範[4]-命名範例

以下列舉幾個常用的名稱。 Layout #wrapper #header #content-wrapper #

CSS
Posted by admin Posted on 21 3 月 0 Comments

163 月

CSS設計規範[2]-區塊命名

在撰寫CSS樣式時，我們會用來當區塊的組件，會給他一個id名作為識別，一方面利用id的unique特性，使我們維護上能更快速的找到這個區塊，一方面是可以增加這個區塊的具體值，讓其他的css不會相互影響到。其他在id區塊裡面的或是分散在各個頁面的，我們就用class來命名，在id區塊裡我們會常用到content、article…等的class；分散在各個頁面的則像是pager等等。

CSS
Posted by admin Posted on 16 3 月 0 Comments

073 月

CSS設計規範[1]-樣式術語與CSS目錄索引

為了能夠迅速的瞭解整個css的結構，我們會在每一支css前面加上Table of Contents，並依照樣式的階層做成樹狀結構的目錄，如果底下還有分支的，就在前方加個”+”，底下沒有分支的，就在前方加個”=”，這樣可以讓整個結構更清楚，也有助於我們搜尋。以下是table of contents的例子。

CSS
Posted by admin Posted on 07 3 月 0 Comments

Tag: CSS