CSS基礎知識（五） 表格

這節課講完這個聽上去很好的HTML/CSS課程就蹭完了，まぁ〜免費的課程麼自然不可能説的很多啦~領進門而已。這個領進門還是挺有用的，現在覺得CSS哈有趣=v=

最後一課，如何製作表格。

需要用到的幾個標記：
tr、td、th
tr： table row
td： table data
th： table head

tr代表的意思就是表格的一行，用一組< tr> 來表示中間的內容都是一行中的。
tr表示某一個單元格的內容，用一組< td> < /td>來表示這行中某個單元格的內容。
用tr套td的模式可以顯示一個表格，如：

< tr>
< td class="center">Walla Walla, WA< /td> /*tr、td同樣可以設置標籤*/
< td class="center">June 15th< /td>
< td>75
< td>1,204 ft
< td>29,686
< td class="center">4/5
< /tr>

< tr class = "cellcolor">
< td class="center">Magic City, ID< /td>
< td class="center">June 25th
< td>74
< td>5,312 ft
< td>50
< td class="center">3/5< /td>
< /tr>

th的意思是表格的表頭，默認顯示格式就是粗體+居中。

表格的摘要可以通過< table summary="...">來表示，summary中的內容是摘要，不會被顯示出來，僅僅做註釋用，方便程序員理解。

< caption>< /caption>是< table >的子標記，表示的是這個表格的標題。
這個標題通常顯示在表格的上方，可以在CSS中定義：
caption - side : bottom; 讓標題顯示在表格的下方。

CSS基礎知識（四） 列表

列表分為兩種，無序列表和有序列表。
無序列表即是列表中的內容沒有順序要求，僅僅是列出而已；有序列表是指列表中的內容有相關的順序，列表的前綴使用的是數字。

< ul> 用來表示無序列表
< ol> 用來表示有序列表
< li> 是ul、ol的子標記，用來表示列表中每項的內容，如：
< ul>
< li>cellphone
< li>iPod
< li>digital camera
< li>and a protein bar
< /ul>
在瀏覽器顯示的時候< li>中的每一項前都會出現一個實心?圓點。這個圓點可以通過修改css來改變。
l i {
list - style- type :disc; /*圓點*/
}
其他的type式樣：
circle ： 空心圓；
square ： 方塊；
none ： 什麽都不顯示；
decimal ： 顯示數字，效果同有序列表。
列表標記也可以指定顯示的圖片：
list - style -image : url( );

CSS基礎知識（三）

CSS中有内聯元素和塊元素。
比如< div>就是一個塊元素，< span>則是一個内聯元素。
在兩者的表現上最大的區別就是塊元素會造成換行，即這個元素本身是換行顯示，並且其之後的元素也要換行顯示，等於塊與塊之間的顯示方式為竪著的一個個盒模式。
而内聯元素中間不需要換行，顯示方式可以理解為是一個個?排的盒模式。

塊元素的邊界選擇兩個塊中最大的邊距來顯示；内聯元素則是兩個元素的邊距和。

html是以“流”方式來顯示一個個模塊的，即是把一個個模塊按順序放入網葉中，遇到因爲瀏覽器限制而無法顯示的則換行顯示，這樣會造成有些模塊會因爲顯示器或者分辨率不同顯示混亂。
如果需要將某個模塊從流中抽取出來另外放置的話的話可以在css中用float命令把他抽取出來：
fl o at : right; /*將這個板塊漂移到右邊*/
另外，還有個絕對佈局命令，使某個模塊無論是什麽瀏覽器顯示的時候該模塊都會在固定位置顯示。
posi tion : absolute ;
t o p: 197px; /*此模塊離開頂部的距離*/
ri g ht: 0px; /*此模塊離開最右端的距離*/

CSS基礎知識 （二）

這東西還挺好玩的，又簡單又能馬上看到結果。←我覺得這個“馬上能看到結果”很受用，我就是那種急性子的人，如果代碼寫了半天都不見效果我一定寫不下去的=v=
不過入門知識都很輕鬆，但是真正要弄好就麻煩……

CSS的模式稱為盒模式，就像一個套著一個的盒子（圖不畫了）
最中間的是內容層，包括各種要顯示的文字等；
內容外層的是補白 padding；
補白即是在內容層和邊框之間的部份，邊框：border；
邊框和其他的元素之間的距離為邊界： margin。

補白、邊界的設置可以統一設置：
pad ding: 25px;
mar gin: 25px: /*表示補白邊界都為25像素*/
也可以分別一一設置：
pad ding-left: 25px;
mag rin-bottom: 25px /*左邊補白部份設置為25像素、下邊界設置為25像素*/
還可以一起設置：
pad ding:25px 75px 50px 100px; /*設置的順序是上、右、下、左*/

邊框的式樣有：solid（實線）、double（雙線）、groove（略有浮雕效果？）、dotted（點）、dashed（虛線）等等。
邊框線也能分別設置，如：
borde r- top -style: solid; /*上邊框是實線*/

邊框線的粗細，除了用像素表示，還能用默認的：thick thin meduim（粗、細、中等）來表示。

HTML文件中一個段落用< p>

來表示，但是如果要單獨定義其中一個段落的格式的時候，可以給這個段落加標籤類型，如
< p.tea>
..
.

在這個時候CSS指定的方式就要寫成：
.tea {
} /*應該寫成p.tea，但是這個p可以省略 */

在HTML文件中，id也可以表示一個唯一的類型，如
< p id="tea">
...

這個時候在CSS中指定的話用#tea來表示。

Div：表示一個區塊，本身無顯示方式，用於標記一個邏輯區域，如：
< div id="tea">
< p> ...

< h1>... < /h1>
< /div>

行高設置：
line -height: 1.6em /*em表示倍數，行高同樣可以直接用像素或者百分比來設置*/

背景圖片的設置方法：
background -image: url(具體地址); /*加URL是爲了讓CSS文件能知道後面跟著的是地址*/

背景圖片的重複與否：
background -repeat: no-repeat; /*不重複*/
background -repeat: repeat-x; /*x軸上重複*/
background -repeat: repeat-y; /*y軸上重複*/

文字的對齊方法：
text- align: left /*左*/
text- align: right /*右*/
text- align: center /*居中*/


具體的一個CSS例子：

CSS基礎知識

CSS：級聯樣式表 定義頁面的展示
主要格式為：場所、屬性、樣式。
如修改字體，場所為p{}
屬性為： font-family
用< style >為標記。