css架構樣式)

 

序號	中文說明	標記文法
1	邊界留白	{margin:margin-top margin-right margin-bottom margin-left}
2	補　　白	{padding:padding-top padding-right padding-bottom padding-left}
3	邊框寬度	{border-width:border-top-width border-right-width border-bottom-width border-left-width}　　 寬度值： thin|medium|thick|數值
4	邊框顏色	{border-color:數值 數值 數值 數值}　　數值：分別代表top、right、bottom、left顏色值
5	邊框風格	{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
6	邊　　框	{border:border-width border-style color}
	上 邊 框	{border-top:border-top-width border-style color}
	右 邊 框	{border-right:border-right-width border-style color}
	下 邊 框	{border-bottom:border-bottom-width border-style color}
	左 邊 框	{border-left:border-left-width border-style color}
7	寬　　度	{width:長度|百分比| auto}
8	高　　度	{height:數值|auto}
9	漂　　浮	{float:left|right|none}
10	清　　除	{clear:none|left|right|both}

樣式表規定了一個容器BOX，它將要儲存一個對象的所有可操作的樣式。包括了對象本身、邊框空白、對象邊框、對象間隙四個方面。
為了大家更好地理解這些屬性的意義，以及互相之間的關係，請看下面這個圖示：

1．邊界留白：margin

文法：{margin:margin-top margin-right margin-bottom margin-left}
說明：，位於BOX模型的最外層，包括四項屬性。
格式：
·margin-top：頂部空白距離
·margin-right：右邊空白距離
·margin-bottom：底部空白距離
·margin-left：左邊空白距離
例子：
body { margin: 5em } /* 所有邊界設為5em */
p { margin: 2em 4em } /* 上和下邊界為2em，左和右邊界為4em */
div { margin: 1em 2em 3em 4em } /* 上邊界為1em，右邊界為2em，下邊界為3em，左邊界為4em */
body { margin-top: 0 } /*消除檔案的上邊界*/
P.narrow { margin-right: 50% }
DT { margin-bottom: 3em }
如果邊界在垂直方向鄰接(重疊)了，會改用其中最大的那個邊界值。而水平方向則不會。
注意：margin的簡化方式，可以在其後連續加上四個帶長度單位的數字，來分別表示margin-top、margin-right、margin-bottom、margin-left，每個數字中間要用空格分隔。

2．補　白：padding

文法：{padding:padding-top padding-right padding-bottom padding-left}
作用：是個簡寫屬性，用於設定上、右、下、左方向邊框和內容元素的間距
說明：
·padding-top 頂部補白
·padding-right 右邊補白
·padding-bottom 底部補白
·padding-left 左邊補白
例子：
bc { padding: 1em 2em 3em 4em } /* 上、右、下、左分別為 */
bc { padding: 2em 4em 5em } /* 上補白2，右補白4em，下補白5em，左補白4em */
bc { padding: 2em 4em } /* 上下為2em，左右為4em */
bc { padding: 2em} /* 上、右、下、左均為2em */
注意：用單一值可以讓毎邊等距填充；如果用兩個值，則第一個值用於上下填充，第二個值用於左右填充；如果用三個值，則賦於上邊填充，左右填充和下邊填充；如果用四個值，則分別用於上，右，下，左填充。可以混合數實值型別。注意：和MARGIN類似，paddingG也可以一次性設定所有的對象間隙，格式也和margin相似。

3. 邊框寬度：border-width

文法：{border-width:border-top-width border-right-width border-bottom-width border-left-width}
寬值：thin|medium|thick|數值

4. 邊框顏色：border-color

文法：{border-color:數值 數值 數值 數值}　　
說明：數值分別代表top、right、bottom、left顏色值

5. 邊框風格：border-style

文法：{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
說明：
·none 無邊框
·hidden 隱藏邊框
·inherit 繼承父邊框
·dashed 邊框為長短線
·dotted 邊框為點線
·solid 邊框為實線
·double 邊框為雙線
·inset 根據color屬性顯示不同效果的3D邊框
·outset 根據color屬性顯示不同效果的3D邊框
·ridge 根據color屬性顯示不同效果的3D邊框
·groove 根據color屬性顯示不同效果的3D邊框
注意：可以作用1至4的值，使用一個值代表四個邊框，兩個代表上下和左右。

6．邊框：border

文法：{border:border-width border-style color}
作用：，位於邊框空白和對象空隙之間，包括了七項屬性。
說明：
·border-top 上邊框寬度|邊框式樣|color
·border-right 右邊框寬度|邊框式樣|color
·border-bottom 下邊框寬度|邊框式樣|color
·border-left 左邊框寬度|邊框式樣|color
·border-width 所有邊框寬度
　thin細線| medium 中等線|thick 粗線

·border-color：邊框顏色
·border-style：邊框樣式參數
注意：其中border-width可以設定所有邊框寬度，border-color同時設定四面邊框的顏色時，可以連續寫上四種顏色，並用空格分隔。邊框是按border-top、border-right、border-bottom、border-left的順序設定。

7. 寬度：width

文法：{width:數值|百分比|auto}
作用：設定元素寬度，瀏覽器按照這個寬度調整圖形
例子：input.button { width: 10em }

8. 高度：height

文法：{height:數值|auto}
作用：與寬度屬性一樣，高度可以應用於設定圖象的比例
例子：IMG.foo { width: 40px; height: 40px }

9. 漂浮：float

文法：{float:left|right|none}
作用：用於在普通元素流布置規則以外放上元素
說明：
·none 無改動。
·left 將其它元素內容放到浮動元素右邊。
·right 將其它元素內容放到浮動元素左邊。
注意： 漂浮屬性允許網頁製作者將文本環繞在一個元素的周圍. 這同HTML 3.2中IMG元素的ALIGN=left和ALIGN=right一樣，但CSS1允許所有對象“漂浮”，而不像HTML 3.2那樣僅僅允許圖象和表格。

10. 清除：clear

文法：{clear:none|left|right|both}
作用：用於允許或禁止指定元素旁邊放置其它元素(通常是線形)
說明：
·left 將元素放在左邊浮動元素下面
·right 將元素放在右邊浮動元素下面
·both 元素兩邊都不允許放置浮動元素
注意：清除屬性指定一個元素是否允許有元素漂浮在它的旁邊。值left移動元素到在其左邊的漂浮的元素的下面；同樣的值right移動到其右邊的漂浮的元素下面。其他的還有預設的none值，和移動元素到其兩邊的漂浮的元素的下面的none值。這個屬性類似於HTML 3.2的函數<BR CLEAR=left|right|all|none>，但它能應用於所有元素。