12 February 2006

Some notes from Head First HTML and web

字型大小控制

  • 使用 keyword 來設定 body 的字型大小。例如 body {font-size: small;}
  • 其他地方全部使用 em 或是 % 來設定,例如 h1 {font-size: 1.5em;}
  • IE 對 px 的支援很爛,所以字型不要再用 px 了,只會自找麻煩。
  • line-height 的設定用純數字指定大小,不要加單位,例如div {line-height:1.2},如此各個子 element 會用自己的字型大小來計算,避免奇怪的繼承問題。
  • IE 處理 code , pre兩個 element 的 font-size與其他 broswer 不同,它不會繼承.... 。建議另行加上去。

layout 的控制

  • 横的 layout 通常需要絕對的大小,所以使用 px 會比較好。例如 p {margin-left: 10px;}
  • 直的 layout,因為常受文字的影響,所以用相對的單位 em 或是 % 較適合,例如 td {height: 120% ;}
  • 如果上述兩者運用得當,那麼使用者自行縮放文字的大小時,也能保持 layout,而且不會有疊字的問題。
  • text-align 只在 inline element 有效。若在裡面的 block element 也生效是因為該 element 繼承了 text-align。
  • liquid layout :指 sidebar 固定大小,而主文區可以隨著 browser 縮放改變大小。作法是一邊設定固定的 width,然後讓它 float,而另一邊則是用 margin 在旁邊空出一塊來放那個 float,另外一般 footer 都會設 clear: left (or right)以免和 float 重疊。
  • flozen layout :跟 liquid layout 很像,但body的第一層會再包一個固字width 的 div (通常是 800px)。因此兩個 column 的 width 會固定,最後產生的頁面會向左靠齊,右邊會留白。
  • jello layout :jello的作法同 flozen,差別在於整個頁面會置中,左右留白。作法是替最外層的 div 加上 {margin-left: auto; margin-right: auto;}

box and border

  • border 大小的 keyword 在各個 browser 上的定義不同。thin 在Firefox 裡是 1px,在 IE 裡是 2px。
  • width 的設定只包括本文區,不包括 padding/border/margin。
  • 除了 img 之外,inline element 的 top/down margin 無意義,而 padding top/down 則是有意義,但是畫面上看不出來 (會重疊)。
  • 所有接觸的 vertical margin 都會合併。(有 border 隔開就不算接觸了)
  • 圓框的 box 可以帶給人年輕,活潑生動,有親合力的感覺 (可以試想 Apple 的產品都是圓圓的沒有菱角,看起來比較年輕活潑)。方框的則給人嚴謹專業的印象。依網頁的主題選擇合適的外框來搭配。

id and class

  • 當 style 只有一個 element 使用時,使用 id,這可以避免 team work 時別人去改到你的 style。
  • 當 style 可讓多個 element 共用時,使用 class
  • 所有 element 的 id 都可以當做 anchor 使用
  • selector 優先順序的計算 (000):一個 id +100,一個 class +10,一個 element +1。數字越大的贏。

table

  • cell (th, td)之間並沒有 margin。只能用border-spacing來控制。而這個大小只能套用在整個 table的 x 或是 y 軸。
  • 要完全去除 border-spacing,要使用border-collapse: collapse,而不是border-spacing: 0px;

回響

可以用 Tag <I>、<B>,程式碼請用 <PRE>