HTML的學習（6）
表頭的樣式
雖然表格已經初具雛形，但是樣式單一，我們已經添加了一些樣式表，以使它有點更容易閱讀。這個就是收尾工作。可以隨意的去加入任何的style屬性，你會在CSS課程期間學到更多關於這些東西。如果你想新增多個樣式，你只需要用;分號分隔開就行。
<th style="font-size:12px; color:red"></th>說明
- 設定“著名怪物”，“出生年份”標籤為斜體。
- 設定怪物出生年月標題為紅色。
練習題：
<html> <head> <title>表格</title> </head> <body> <table style="border-collapse:collapse;"> <thead> <tr> <th colspan="2" style="color:red">著名怪物出生年月</th> </tr> <tr style="border-bottom:1px solid black;"> <th style="padding:5px;">著名怪物</th> <th style="padding:5px;border-left:1px solid black;"><em>出生年月</em></th> </tr> </thead> <tbody> <tr> <td style="padding:5px;">金剛</td> <td style="padding:5px;border-left:1px solid black;">1933</td> </tr> <tr> <td style="padding:5px;">德古拉</td> <td style="padding:5px;border-left:1px solid black;">1897</td> </tr> <tr> <td style="padding:5px;">科學怪人的新娘</td> <td style="padding:5px;border-left:1px solid black;">1944</td> </tr> </tbody> </table> </body> </html>
結果：
小結
我們已經學習了很多知識，可以做些什麼呢？
- 建立一個HTML網頁。
- 建立一個列表包含有序和無序。
- 可以把文字變成斜體和粗體。
- 改變顏色，大小，文字校準模式等style屬性。
- 建立HTML表格。
練習題：
<html> <head> <title>Table Time</title> </head> <body> <table style="border-collapse:collapse;"> <thead> <tr> <th colspan="2">怪物出生年月</th> </tr> <tr style="border-bottom:1px solid black;"> <th style="padding:5px;">怪物名稱</th> <th style="padding:5px;border-left:1px solid black;">出生年月</th> </tr> </thead> <tbody> <tr> <td style="padding:5px;">King Kong</td> <td style="padding:5px;border-left:1px solid black;">1933</td> </tr> <tr> <td style="padding:5px;">Dracula</td> <td style="padding:5px;border-left:1px solid black;">1897</td> </tr> <tr> <td style="padding:5px;">Bride of Frankenstein</td> <td style="padding:5px;border-left:1px solid black;">1944</td> </tr> </tbody> </table> </body> </html>
結果：
div層
<div>是提供給你使用的結構標籤之一。簡稱區塊，<div>允許你將你的頁面新增到容器中。當你開始在下一單元中學習css的時候：你可以分別設計你的網站的不同部分！
看預覽圖的時候，你應該看到三個區塊：一個紅色，一個藍色和一個綠色的。每個人都是自己的<div>容器。
說明：
在第10行，建立你自己的<div>，並設定其背景顏色：黃色，使用預設的寬度和高度。
<!DOCTYPE html> <html> <head> <title>Result</title> </head> <body> <div style="width:50px;height:50px;background-color:red"></div> <div style="width:50px;height:50px;background-color:blue"></div> <div style="width:50px;height:50px;background-color:green"></div> <div style="width:50px;height:50px;backgroung-color:yellow"></div> </body> </html>
結果：
連結
使用<div>後最終將允許您建立想工具條，選單和更加直觀的HTML物件。
就像圖片，您可以通過點選包裹在<div></div>裡面的<a></a>的標籤。
說明：
將黃色的<div>連結到你最喜歡的網站！
<!DOCTYPE html>
<html>
<head>
<title>結果</title>
</head>
<body>
<div style="width:50px; height:50px; background-color:red"></div>
<div style="width:50px; height:50px; background-color:blue"></div>
<div style="width:50px; height:50px; background-color:green"></div>
<a href="http://www.baidu.com"><div style="width:50px; height:50px; background-color:yellow"></div></a>
</body>
</html>Span塊
雖然<div>可以使你的網頁變成單獨樣式的塊，<span>允許你就像控制文字樣式那樣控制你的網頁中更小的部分。例如，如果你總是希望你的段落的第一個字是紅色的，你可以用每一個字中的<span></span>標籤和使用CSS讓它們變紅。
說明：
現在，我們將繼續使用style屬性來進行顏色的改變，給<span>標籤設定style="color:red"。請注意只有<span></span>標籤之間的文字可以改變顏色！
練習題：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<span style="color:red"><p>這段文字是黑色的，把它變成紅色的。</p></span>
</body>
</html>結果：
讓改變更大一些
這個標籤是有一點棘手，雖然如此，可以通過例子對其進行學習。顏色只是其中的一個屬性，可以選擇性的與<span>標記改變，你也可以更改字型大小，字型，以及任何你所能想到的其他樣式與屬性。
說明：用<span>標籤替換Impact，不能包含感嘆號。
小結
除了已經學會的，還知道如下的知識：
1.劃分網頁可以使用<div>標籤；
2.選擇文字塊，並使用<span>標記來改變它們的屬性。
問題：
在接下來的過程之中，我們將看到如何採取多種樣式，比如控制字型、字型顏色，和文字型別的定位，並把它放在它自己單獨的檔案。通過這樣做，我們可以使用標籤<div>和<span>，在我們的頁面不用每次都要寫style="color:red"。
練習題：
<!DOCTYPE html>
<html>
<head>
<title>講故事</title>
<style type='text/css'>
p{
font-family:Garamond;
font-size:16px;
}
h3{
font-family:cursive;
color:#36648b;
text-align:center;
}
span{
color:#cc0000;
font-size:24px;
}
</style>
</head>
<body>
<h3>一個故事</h3>
<p><span>A</span>很久很久以前，有一個勇敢的年輕學生想要學習CSS... </p>
</body>
</html>結果：
