Tag: css

開始覺得自己會寫 CSS 也算有一段時間了，常常遇到一些非常實用的技巧不斷地反覆使用，但是有不少是我個人覺得對初學者來說很難從樣式作用上自己發現可以如此的用法。
例如border-radius: 50% 現在已經成了大家隨手都會用來搓圓仔的標準寫法了，但我一開始也是不知道可以這樣直接設百分比從正方形變成圓形。
正好最近在教人學習 CSS ，把這些技巧整理下來分享，也方便自己備忘參考。

在打造網站版面時，有時候為了美觀因素，在網站的主選單會把項目內容分散對齊，讓視覺重心看起來比較平衡。

.__wrapper {
  width: 960px;
  margin: 0 auto;
}

.__hidden {
  display: none;
}

ul.__inline {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul.__inline > li {
  display: inline-block;
}

以上是一個基本的主選單內容，要達成這個目的，以 CSS 一般來說有以下三種作法：

通順一致的CSS編寫原則是翻譯自 Nicolas Gallagher 的 Principles of writing consistent, idiomatic CSS，我已盡力讓譯文淺顯易懂又不失本意，雖然看起來好像有種比起直接看原文更不容易懂了的感覺，安慰一下自己，至少原文真的看不懂的時候還能當作參考吧。
除了 CSS 沒再侈譯成串接樣式表外，diff 與 blame 也以術語形式保留，希望各位不吝指教以期改進。