CSS是什麼：解碼CSS的敘述
我們這次將CSS是什麼：HTML原始碼的優化方案中的CSS原始碼，用中文寫出來，讓大家了解CSS的寫法：
table_box的CSS原始碼：
原文：
--------------------
.table_box {
padding: 1px;
height: 300px;
width: 300px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.table_box div {
margin: 1px;
padding: 0px;
float: left;
height: 96px;
width: 96px;
text-align: center;
vertical-align: middle;
line-height: 96px;
}
div {
border: 1px solid #999999;
}
中文化解釋：
----------------
class代號為table_box的標籤{
內距：1像素;
高度：300像素;
寬度：300像素;
外距-上：0像素;
外距-右：自動;
外距-下：0像素;
外距-左：自動;
}
class代號為table_box的標籤下的div標籤{
外距：1像素;
內距：0像素;
區塊浮動：靠左;
高度：96像素;
寬度：96像素;
文字水平對齊：居中;
文字垂直對齊：居中;
行高：96像素;
}
div標籤{
邊框設定：邊框厚1像素 實線 像素#999999;
}
詳細解釋
每個標籤都可以有自己的空間
CSS可以允許所有的HTML標籤可以擁有自己的空間區塊，因此，每個標籤都具有外框(margin)、邊框(border)、與內距(padding)屬性。在上面的原始碼當中，我們善用了外框屬性，來把table_box的大div，與被包圍在table_box裡的小div之間的間隔給區分開來，模擬出表格的外距。
從上面的原始碼還可以得知：不管是外框、邊框、還是內距屬性，都可以個別以「上、下、左、右」設定其厚度大小，也可以統一設定屬性，這是傳統表格標籤中做不到的。
利用樹狀結構來重覆定義
HTML原始碼的構成是一種類似樹狀的排列方式，如下：<html> <title></title> <head></head> <body></body> </html>html的標籤中，包含了title標題屬性、head預先宣告屬性、body本文屬性。因此，html就是title、head與body的父層結構。 感覺上跟你用wondows檔案總管時，介面左邊的樹狀表非常像。你可以想像：一個名為html的資料夾當中，放有title、head與body的資料夾。這就是我說得樹狀結構 同理，我們再回來看，範例中div的原始碼：
<div class="table_box"> <div>1-1</div> <div>1-2</div> <div>1-3</div> <div>2-1</div> <div>2-2</div> <div>2-3</div> <div>3-1</div> <div>3-2</div> <div>3-3</div> </div>一個class屬性為table_box的div中含有9個小div，因此他就是這9個小div的父層結構。我們就利用了這個特性來定義CSS
.table_box div {......} class代號為table_box的標籤下的div標籤{......}同理，我們也可以針對body以下所有的標籤定義CSS
div {......} div標籤{......}
|