CSS - basic

CSS的功能是選取HTML元素並賦予Style。
id和class這兩個內建屬性的功能是，幫助CSS去準確的選取所要的元素

Add CSS to HTML

在HTML的學習中已經知道要放這些區塊了，問題是，如何指定區塊的大小和位置？

<CodePen> Original HTML

Link to CSS in HTML

新增一個css檔案（例如main.css）。我建議你先在你的資料夾中新增加這幾個資料夾，assets通常用來放檔案例如圖片，css用來放所有的css，js用來放javascript。此時你在Brackets上的資料夾也會相對應改變。並在HTML的<head>中加入CSS連結。我目前把main.css放在css這個子資料夾中，你可以在href中找到相對應的路徑。接下來就要編輯CSS改變這個文檔的Layout。

<link rel="stylesheet" type="text/css" href="css/main.css">

依據class或id編輯CSS

因為你用Brackets編輯器，你可以對著id按右鍵，選「Quick Edit」。

編寫每個<div>的width與height

先想好各個區塊的大小和位置，然後先用最簡單的置放方法。一開始寫先寫width再寫height。CSS在選擇id的時候，前面都會有個前綴#，這就是為什麼我前面都用#nav或#content來指稱某個<div>。如果是class的話，就會有前綴.。

<body>
    <div id="banner">HSIEH HSIEH</div>
    <div id="nav">...</div>
    <div id="content">...</div>
    <div id="supporting">...</div>
    <div id="footer">...</div>
</body>

#nav { width:100px;}
#banner {width:800px;}
#content {width:600px;}
#footer {width:800px;}
#supporting {width:100px;}

再來是設定高度，但你會發現，怎麼出來的結果和你「希望」出現的內容仍然不太一樣。因為事實上你還沒進行排版。這時候我會為<div>加上背景色來幫助我瞭解現在各<div>的位置（先定義背景顏色比較好找，剩下的問題就是怎麼把它們排好。的確是不一樣。

#banner {
    width: 800px;
    height: 100px;
    background-color: coral;
}
#content {
    width: 600px;
    height: 400px;
    background-color:azure;
}
#footer {
    width: 800px;
    height: 50px;
    background-color:darkgoldenrod;
}
#supporting {
    width: 100px;
    height: 150px;
    background-color:aliceblue;
}

#nav {
    width: 100px;
    height: 200px;
    background-color:yellow;
}

<CodePen> CSS Layout I

用float來排<div>

用float:left可以讓<div>的排列就好似word一樣，從上到下，從左至右排。但就會受到<div>在HTML檔案中出現順序的影響。

float常用在編排例如相片頁面，當視窗拉大，每列的相片就變多，視窗拉小，每列就變少（拉動你的視窗試試看）。這些位置的變化都需要拉一拉視窗看看自己的設計在視窗變瘦變胖的時候有沒有差別，像上面這樣的設計就是在視窗拉大時會出問題。這是因為都設為float:left的關係，所以視窗拉很大的時候，就全部靠左並排了。

#banner {
    width: 800px;
    height: 100px;
    background-color: coral;
    float:left;
}
#content {
    width: 600px;
    height: 800px;
    background-color:azure;
    float:left;
}
...

利用Clear避免 float在視窗大小變化上的問題

你可以利用clear:both讓某個<div>左右兩邊都不可以有其他的元素，既然強迫左右兩邊不可以有其他元素，那麼就只有上下才能有元素。這回像個網頁了。

#banner {
    width: 800px;
    height: 100px;
    background-color: coral;
    clear:both;
}
#footer {
    width: 800px;
    height: 50px;
    background-color:darkgoldenrod;
    clear:both;
}

<CodePen> CSS Layout II

Fixed banner

我希望讓banner不管怎麼捲動都不會離開視窗。我可以利用position:fixed希望讓#banner固定。

#banner {
    width: 800px;
    height: 100px;
    background-color: coral;
    clear:both;
    position:fixed;
}

Modifying margin and padding to avoid overlapping

固定是固定住了，但問題來了，其一：捲上去上面有一條透明的區域；其二：文字都捲到#banner背後去了。

會有怪空白是因為<body>預設的margin不為0，所以把<body>的margin設為0。
會捲到背後去是因為position:fixed說明說到「若設為position:fixed會把該<div>移出正常的<div>流」，相當於另外開了一個「圖層」在前景或背景（用z-index控制）；此時，後面的#navigation、#content、#supporting就因此「往上跑了」
解決辦法是，強制#navigation、#content、#support必須距離視窗上緣上面有一段空間，且該空間的高剛好等於#banner的高（100px）。你可以在每一個<div>的CSS中加入margin-top: 100px，但你也可以統一用下面的語法，一次性設定三個<div>的margin-top。

body {
    margin: 0;
    padding: 0;
}
#content, #nav, #supporting{
    margin-top: 100px;
}

<CodePen> CSS Fixed banner

把整個版面置中

margin: 0 auto; 的意思是，上下margin為0，左右auto，那就置中了。

<body>
    <div id="wrapper">
        ...
    </div>
</body>

#wrapper {
    width: 800px;
    margin: 0 auto;
}

<CodePen> Wrap to center

(Option) Fix #nav

這時我希望也將#nav的<div>區塊固定。#nav固定會使得#content和#supporting往左邊跑，此時就需要把#content的左方margin往右邊挪相當於#navigation寬度的距離（#support會跟著往右跑，所以只要挪#content就好，不過這就意味著，寫網頁牽一髮動全身。右邊的字有點突出邊界，之後處理完選單的視覺化後再處理）。

#content{
    margin-left: 100px;
}

#nav{
    …
    position: fixed;
}

Box model: Margin and Padding

Box model: how content fits to it outer

padding 文字內縮，控制文字要離邊框多遠。
margin 控制這個block要距離別的block多遠。
padding和margin都有top, right, bottom, left的區別
width和height都是指content的width和height

<Practice> 練習用Chrome Dev修改網頁元件的margin與padding

<Practice> 修改<li>的margin與padding

你可以看見#nav左邊有很大的一塊空白，很醜。請運用Google Chrome所提供的box view，把左方的空白拿掉。之後我們會處理怎麼把左邊那個點拿掉。

Padding

Padding: space between content and border 增加內容和框線（border）的間隔。

我覺得之前#nav的鏈結文字和該<div>的邊緣靠得太近，所以我要嘗試在內容區塊與的框線加上間隔，這個框線到內容間的間隔稱為padding。所以我要在每個<div>（包含#navigation、#content、#supporting、#banner）的CSS中新增padding屬性，讓內容距離邊框10px。結果發現#nav怎麼遮到#content了？這是Box model的特性，注意前面那頁下面還有寫一行字，就是width指的是content width。padding新增10px後，#navigation胖了一點點。那要怎麼解決這問題會比較方便？

#content, #nav, #supporting, #banner{
    padding: 10px;
}

Content wrapper for padding

有一個做法就是在裡面再夾一層才放文字，然後在這個內層的不要限制width大小。為什麼這樣是可以達到效果的？因為外層的所包含的內容物padding為0，卻有width限制，所以外層的content與外框width會相同。內層則不限制width（自由擠壓文字），但padding==10，這樣的結果就是內層的文字會內縮。卻不會造成邊界的改變。你會看見我用了一個class，並一次性修改所有.container block的padding，讓所有的.container內的內容都可以內縮10px。不過你應該還是會看到文字突出框框邊界，這是因為你的邊界小於單一文字長度的關係。

CSS選取id的關鍵字是「#」、選取class的關鍵字是「.」

<div id="wrapper">
   <div id="banner">
       <div class="container">..</div>
   </div>
   <div id="nav">
       <div class="container">..</div>
   </div>
...
    </div>

.container {
    padding: 10px;
}

Margin

<Practice> margin

我們經常在網站上面看到下圖的效果，你認為是怎麼做的？特色是，你看上面的#banner、#content、#footer是置中你的視窗的，唯獨#nav的區塊往左邊靠，偏偏他又靠右黏著中間的#content區塊（提示，margin可以是負值）。

Adjust scrolling position for hyperlink

這時候你若把#content division的內容增加多一點，按左方#nav的超鏈結，中間的#content division會隨之捲動到該超鏈結所指的位置。但你會發現，超鏈結打下去後，其所對應到的<div>對齊的位置在視窗的最上方，這是因為我們將#content block強制設定margin-top:100px的緣故，但超鏈結對齊的還是視窗的最上緣。

修正想法是使得每一個.item division的出現位置都距離上緣padding: 100px。但這會在每一個.item division前方新增一個空白段落。
這時候一個取巧的做法就是，強制用負值的margin把每個區塊上拉100px。請注意比較上下的效果。這原因是因為<a>所觸發的捲動是以border為準？

.item{
    padding-top: 100px;
    margin-top: -100px;
}

版面元素<div>要注意同時設定width又設定padding時會容易算錯。
<li>有其預設的padding，若不想padding太大，要重設padding和margin。

PreviousHTML NextCSS - Object Decoration

Last updated 4 years ago

Was this helpful?