[前端筆記］ html/CSS觀念記錄

上完code school的javascript課後，回頭再複習前端的基礎-html和CSS
對一個網頁來說，html控制文章架構、CSS則決定樣式
以下記錄一些觀念:

HTML

1. ul是指unordered list，顯示bullet項目
2. ol是指ordered list，顯示編號項目
3. 在head中加入CSS的檔案，需使用<link style type="text/css" rel="stylesheet" href="css file"> 
    4. 續上，link和img都是empty tag。它們不用加上closing tag 

The box model

html的文字採用box model，包含4個項目:

  1. content area內文
2. padding 內文四個方向的留白
3. border 內文四個方向的框線
4. margin 是border外的留白區域

圖示如下：

當我們需要調整段落間的距離或文字間留白，可調整margin或padding;如果要加框線，則使用border

CSS Selector

如果我們要微調某部分的html style，可使用html class和CSS selector
以下例子是將ul內的項目左邊padding 15pixel：

<ul class="nav">
	...
</ul>

.nav {
	padding-left: 15px
}

要注意的是CSS的selector與其它樣式的順序會影響結果，以下這個例子會把nav class設定的padding-left覆寫：

.nav {
	padding-left: 15px
}
ul {
	padding-left: 10px
}