RTY 實踐出真知

CSS margin 屬性

設置外邊距的最簡單的方法就是使用 margin 屬性。

margin 屬性接受任何長度單位，可以是像素、英寸、毫米或 em。

margin 可以設置為 auto。更常見的做法是為外邊距設置長度值。下面的聲明在 h1 元素的各個邊上設置了 1/4 英寸寬的空白：

h1 {margin : 0.25in;}

下面的例子為 h1 元素的四個邊分別定義了不同的外邊距，所使用的長度單位是像素 (px)：

h1 {margin : 10px 0px 15px 5px;}

與內邊距的設置相同，這些值的順序是從上外邊距 (top) 開始圍著元素順時針旋轉的：

margin: top right bottom left

另外，還可以為 margin 設置一個百分比數(shù)值：

p {margin : 10%;}

百分數(shù)是相對于父元素的 width 計算的。上面這個例子為 p 元素設置的外邊距是其父元素的 width 的 10%。

margin 的默認值是 0，所以如果沒有為 margin 聲明一個值，就不會出現(xiàn)外邊距。但是，在實際中，瀏覽器對許多元素已經提供了預定的樣式，外邊距也不例外。例如，在支持 CSS 的瀏覽器中，外邊距會在每個段落元素的上面和下面生成“空行”。因此，如果沒有為 p 元素聲明外邊距，瀏覽器可能會自己應用一個外邊距。當然，只要你特別作了聲明，就會覆蓋默認樣式。

值復制

還記得嗎？我們曾經在前兩節(jié)中提到過值復制。下面我們?yōu)槟v解如何使用值復制。

有時，我們會輸入一些重復的值：

p {margin: 0.5em 1em 0.5em 1em;}

通過值復制，您可以不必重復地鍵入這對數(shù)字。上面的規(guī)則與下面的規(guī)則是等價的：

p {margin: 0.5em 1em;}

這兩個值可以取代前面 4 個值。這是如何做到的呢？CSS 定義了一些規(guī)則，允許為外邊距指定少于 4 個值。規(guī)則如下：

• 如果缺少左外邊距的值，則使用右外邊距的值。
• 如果缺少下外邊距的值，則使用上外邊距的值。
• 如果缺少右外邊距的值，則使用上外邊距的值。

下圖提供了更直觀的方法來了解這一點：

換句話說，如果為外邊距指定了 3 個值，則第 4 個值（即左外邊距）會從第 2 個值（右外邊距）復制得到。如果給定了兩個值，第 4 個值會從第 2 個值復制得到，第 3 個值（下外邊距）會從第 1 個值（上外邊距）復制得到。最后一個情況，如果只給定一個值，那么其他 3 個外邊距都由這個值（上外邊距）復制得到。

利用這個簡單的機制，您只需指定必要的值，而不必全部都應用 4 個值，例如：

h1 {margin: 0.25em 1em 0.5em;}	/* 等價于 0.25em 1em 0.5em 1em */ h2 {margin: 0.5em 1em;}		/* 等價于 0.5em 1em 0.5em 1em */ p {margin: 1px;}			/* 等價于 1px 1px 1px 1px */ 

這種辦法有一個小缺點，您最后肯定會遇到這個問題。假設希望把 p 元素的上外邊距和左外邊距設置為 20 像素，下外邊距和右外邊距設置為 30 像素。在這種情況下，必須寫作：

p {margin: 20px 30px 30px 20px;}

這樣才能得到您想要的結果。遺憾的是，在這種情況下，所需值的個數(shù)沒有辦法更少了。

再來看另外一個例子。如果希望除了左外邊距以外所有其他外邊距都是 auto（左外邊距是 20px）：

p {margin: auto auto auto 20px;}

同樣的，這樣才能得到你想要的效果。問題在于，鍵入這些 auto 有些麻煩。如果您只是希望控制元素單邊上的外邊距，請使用單邊外邊距屬性。

單邊外邊距屬性

您可以使用單邊外邊距屬性為元素單邊上的外邊距設置值。假設您希望把 p 元素的左外邊距設置為 20px。不必使用 margin（需要鍵入很多 auto），而是可以采用以下方法：

p {margin-left: 20px;}

您可以使用下列任何一個屬性來只設置相應上的外邊距，而不會直接影響所有其他外邊距：

• margin-top
• margin-right
• margin-bottom
• margin-left

一個規(guī)則中可以使用多個這種單邊屬性，例如：

h2 {   margin-top: 20px;   margin-right: 30px;   margin-bottom: 30px;   margin-left: 20px;   } 

當然，對于這種情況，使用 margin 可能更容易一些：

p {margin: 20px 30px 30px 20px;}

不論使用單邊屬性還是使用 margin，得到的結果都一樣。一般來說，如果希望為多個邊設置外邊距，使用 margin 會更容易一些。不過，從文檔顯示的角度看，實際上使用哪種方法都不重要，所以應該選擇對自己來說更容易的一種方法。

提示和注釋

提示：Netscape 和 IE 對 body 標簽定義的默認邊距（margin）值是 8px。而 Opera 不是這樣。相反地，Opera 將內部填充（padding）的默認值定義為 8px，因此如果希望對整個網站的邊緣部分進行調整，并將之正確顯示于 Opera 中，那么必須對 body 的 padding 進行自定義。

CSS 外邊距實例：

設置文本的左外邊距

本例演示如何設置文本的左外邊距。

設置文本的右外邊距

本例演示如何設置文本的右外邊距。

設置文本的上外邊距

本例演示如何設置文本的上外邊距。

設置文本的下外邊距

本例演示如何設置文本的下外邊距。

所有的外邊距屬性在一個聲明中。

本例演示如何將所有的外邊距屬性設置于一個聲明中。

CSS 外邊距屬性

CSS padding 屬性

CSS padding 屬性定義元素的內邊距。padding 屬性接受長度值或百分比值，但不允許使用負值。

例如，如果您希望所有 h1 元素的各邊都有 10 像素的內邊距，只需要這樣：

h1 {padding: 10px;}

您還可以按照上、右、下、左的順序分別設置各邊的內邊距，各邊均可以使用不同的單位或百分比值：

h1 {padding: 10px 0.25em 2ex 20%;}

單邊內邊距屬性

也通過使用下面四個單獨的屬性，分別設置上、右、下、左內邊距：

• padding-top
• padding-right
• padding-bottom
• padding-left

您也許已經想到了，下面的規(guī)則實現(xiàn)的效果與上面的簡寫規(guī)則是完全相同的：

h1 {   padding-top: 10px;   padding-right: 0.25em;   padding-bottom: 2ex;   padding-left: 20%;   } 

內邊距的百分比數(shù)值

前面提到過，可以為元素的內邊距設置百分數(shù)值。百分數(shù)值是相對于其父元素的 width 計算的，這一點與外邊距一樣。所以，如果父元素的 width 改變，它們也會改變。

下面這條規(guī)則把段落的內邊距設置為父元素 width 的 10%：

p {padding: 10%;}

例如：如果一個段落的父元素是 div 元素，那么它的內邊距要根據 div 的 width 計算。

<div style="width: 200px;"> <p>This paragragh is contained within a DIV that has a width of 200 pixels.</p> </div>  

注意：上下內邊距與左右內邊距一致；即上下內邊距的百分數(shù)會相對于父元素寬度設置，而不是相對于高度。

CSS 內邊距實例：

所有內邊距屬性在一個聲明中

本例演示使用簡寫屬性將所有的內邊距屬性設置于一個聲明中，可以有一到四個值。

設置下內邊距 1

本例演示如何使用厘米值來設置單元格的下內邊距。

設置下內邊距 2

本例演示如何使用百分比值來設置單元格的下內邊距。

設置左內邊距 1

本例演示如何使用厘米值來設置單元格的左內邊距。

設置左內邊距 2

本例演示如何使用百分比值來設置單元格的左內邊距。

設置右內邊距 1

本例演示如何使用厘米值來設置單元格的右內邊距。

設置右內邊距 2

本例演示如何使用百分比值來設置單元格的右內邊距。

設置上內邊距 1

本例演示如何使用厘米值來設置單元格的上內邊距。

設置上內邊距 2

本例演示如何使用百分比值來設置單元格的上內邊距。

CSS 內邊距屬性

CSS 框模型概述

元素框的最內部分是實際的內容，直接包圍內容的是內邊距。內邊距呈現(xiàn)了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距，外邊距默認是透明的，因此不會遮擋其后的任何元素。

提示：背景應用于由內容和內邊距組成的區(qū)域。

內邊距、邊框和外邊距都是可選的，默認值是零。但是，許多元素將由用戶代理樣式表設置外邊距和內邊距。可以通過將元素的 margin 和 padding 設置為零來覆蓋這些瀏覽器樣式。這可以分別進行，也可以使用通用選擇器對所有元素進行設置：

* {   margin: 0;   padding: 0; } 

在 CSS 中，width 和 height 指的是內容區(qū)域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區(qū)域的尺寸，但是會增加元素框的總尺寸。

假設框的每個邊上有 10 個像素的外邊距和 5 個像素的內邊距。如果希望這個元素框達到 100 個像素，就需要將內容的寬度設置為 70 像素，請看下圖：

#box {   width: 70px;   margin: 10px;   padding: 5px; } 

提示：內邊距、邊框和外邊距可以應用于一個元素的所有邊，也可以應用于單獨的邊。

提示：外邊距可以是負值，而且在很多情況下都要使用負值的外邊距。

瀏覽器兼容性

一旦為頁面設置了恰當?shù)?DTD，大多數(shù)瀏覽器都會按照上面的圖示來呈現(xiàn)內容。然而 IE 5 和 6 的呈現(xiàn)卻是不正確的。根據 W3C 的規(guī)范，元素內容占據的空間是由 width 屬性設置的，而內容周圍的 padding 和 border 值是另外計算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。

雖然有方法解決這個問題。但是目前最好的解決方案是回避這個問題。也就是，不要給元素添加具有指定寬度的內邊距，而是嘗試將內邊距或外邊距添加到元素的父元素和子元素。

術語翻譯

• element : 元素。
• padding : 內邊距，也有資料將其翻譯為填充。
• border : 邊框。
• margin : 外邊距，也有資料將其翻譯為空白或空白邊。

在 w3school，我們把 padding 和 margin 統(tǒng)一地稱為內邊距和外邊距。邊框內的空白是內邊距，邊框外的空白是外邊距，很容易記吧：）

輪廓（Outline） 實例：

在元素周圍畫線

本例演示使用outline屬性在元素周圍畫一條線。

設置輪廓的顏色

本例演示如何設置輪廓的顏色。

設置輪廓的樣式

本例演示如何設置輪廓的樣式。

設置輪廓的寬度

本例演示如何設置輪廓的寬度。

CSS 邊框屬性

"CSS" 列中的數(shù)字指示哪個 CSS 版本定義了該屬性。

表格邊框

如需在 CSS 中設置表格邊框，請使用 border 屬性。

下面的例子為 table、th 以及 td 設置了藍色邊框：

table, th, td   {   border: 1px solid blue;   } 

親自試一試

請注意，上例中的表格具有雙線條邊框。這是由于 table、th 以及 td 元素都有獨立的邊框。

如果需要把表格顯示為單線條邊框，請使用 border-collapse 屬性。

折疊邊框

border-collapse 屬性設置是否將表格邊框折疊為單一邊框：

table   {   border-collapse:collapse;   }  table,th, td   {   border: 1px solid black;   } 

親自試一試

表格寬度和高度

通過 width 和 height 屬性定義表格的寬度和高度。

下面的例子將表格寬度設置為 100%，同時將 th 元素的高度設置為 50px：

table   {   width:100%;   }  th   {   height:50px;   } 

親自試一試

表格文本對齊

text-align 和 vertical-align 屬性設置表格中文本的對齊方式。

text-align 屬性設置水平對齊方式，比如左對齊、右對齊或者居中：

td   {   text-align:right;   } 

親自試一試

vertical-align 屬性設置垂直對齊方式，比如頂部對齊、底部對齊或居中對齊：

td   {   height:50px;   vertical-align:bottom;   } 

親自試一試

表格內邊距

如需控制表格中內容與邊框的距離，請為 td 和 th 元素設置 padding 屬性：

td   {   padding:15px;   } 

親自試一試

表格顏色

下面的例子設置邊框的顏色，以及 th 元素的文本和背景顏色：

table, td, th   {   border:1px solid green;   }  th   {   background-color:green;   color:white;   } 

親自試一試

CSS Table 屬性

親自試一試 - 更多實例

制作一個漂亮的表格

本例演示如何創(chuàng)造一個漂亮的表格。

顯示表格中的空單元

本例演示是否顯示表格中的空單元。

設置表格邊框之間的空白

本例演示如何設置單元格邊框之間的距離。

設置表格標題的位置

本例演示如何定位表格的標題。

CSS 列表

從某種意義上講，不是描述性的文本的任何內容都可以認為是列表。人口普查、太陽系、家譜、參觀菜單，甚至你的所有朋友都可以表示為一個列表或者是列表的列表。

由于列表如此多樣，這使得列表相當重要，所以說，CSS 中列表樣式不太豐富確實是一大憾事。

列表類型

要影響列表的樣式，最簡單（同時支持最充分）的辦法就是改變其標志類型。

例如，在一個無序列表中，列表項的標志 (marker) 是出現(xiàn)在各列表項旁邊的圓點。在有序列表中，標志可能是字母、數(shù)字或另外某種計數(shù)體系中的一個符號。

要修改用于列表項的標志類型，可以使用屬性 list-style-type：

ul {list-style-type : square}

上面的聲明把無序列表中的列表項標志設置為方塊。

列表項圖像

有時，常規(guī)的標志是不夠的。你可能想對各標志使用一個圖像，這可以利用 list-style-image 屬性做到：

ul li {list-style-image : url(xxx.gif)}

只需要簡單地使用一個 url() 值，就可以使用圖像作為標志。

列表標志位置

CSS2.1 可以確定標志出現(xiàn)在列表項內容之外還是內容內部。這是利用 list-style-position 完成的。

簡寫列表樣式

為簡單起見，可以將以上 3 個列表樣式屬性合并為一個方便的屬性：list-style，就像這樣：

li {list-style : url(example.gif) square inside}

list-style 的值可以按任何順序列出，而且這些值都可以忽略。只要提供了一個值，其它的就會填入其默認值。

CSS 列表實例：

在無序列表中的不同類型的列表標記

本例演示在CSS中不同類型的列表項標記。

在有序列表中不同類型的列表項標記

本例演示在CSS中不同類型的列表項標記。

所有的列表樣式類型

本例演示在CSS中所有不同類型的列表項標記。

將圖像作為列表項標記

本例演示如何將圖像作為列表項標記。

放置列表標記

本例演示在何處放置列表標記。

在一個聲明中定義所有的列表屬性

本例演示將所有針對列表的屬性設置于一個簡寫屬性。

CSS 列表屬性(list)

CSS 字體系列

在 CSS 中，有兩種不同類型的字體系列名稱：

• 通用字體系列 - 擁有相似外觀的字體系統(tǒng)組合（比如 "Serif" 或 "Monospace"）
• 特定字體系列 - 具體的字體系列（比如 "Times" 或 "Courier"）

除了各種特定的字體系列外，CSS 定義了 5 種通用字體系列：

• Serif 字體
• Sans-serif 字體
• Monospace 字體
• Cursive 字體
• Fantasy 字體

如果需要了解更多有關字體系列的知識，請閱讀 CSS 字體系列。

指定字體系列

使用 font-family 屬性 定義文本的字體系列。

使用通用字體系列

如果你希望文檔使用一種 sans-serif 字體，但是你并不關心是哪一種字體，以下就是一個合適的聲明：

body {font-family: sans-serif;}

親自試一試

這樣用戶代理就會從 sans-serif 字體系列中選擇一個字體（如 Helvetica），并將其應用到 body 元素。因為有繼承，這種字體選擇還將應用到 body 元素中包含的所有元素，除非有一種更特定的選擇器將其覆蓋。

指定字體系列

除了使用通用的字體系列，您還可以通過 font-family 屬性設置更具體的字體。

下面的例子為所有 h1 元素設置了 Georgia 字體：

h1 {font-family: Georgia;}

親自試一試

這樣的規(guī)則同時會產生另外一個問題，如果用戶代理上沒有安裝 Georgia 字體，就只能使用用戶代理的默認字體來顯示 h1 元素。

我們可以通過結合特定字體名和通用字體系列來解決這個問題：

h1 {font-family: Georgia, serif;}

親自試一試

如果讀者沒有安裝 Georgia，但安裝了 Times 字體（serif 字體系列中的一種字體），用戶代理就可能對 h1 元素使用 Times。盡管 Times 與 Georgia 并不完全匹配，但至少足夠接近。

因此，我們建議在所有 font-family 規(guī)則中都提供一個通用字體系列。這樣就提供了一條后路，在用戶代理無法提供與規(guī)則匹配的特定字體時，就可以選擇一個候選字體。

如果您對字體非常熟悉，也可以為給定的元素指定一系列類似的字體。要做到這一點，需要把這些字體按照優(yōu)先順序排列，然后用逗號進行連接：

p {font-family: Times, TimesNR, 'New Century Schoolbook',      Georgia, 'New York', serif;} 

親自試一試

根據這個列表，用戶代理會按所列的順序查找這些字體。如果列出的所有字體都不可用，就會簡單地選擇一種可用的 serif 字體。

使用引號

您也許已經注意到了，上面的例子中使用了單引號。只有當字體名中有一個或多個空格（比如 New York），或者如果字體名包括 # 或 $ 之類的符號，才需要在 font-family 聲明中加引號。

單引號或雙引號都可以接受。但是，如果把一個 font-family 屬性放在 HTML 的 style 屬性中，則需要使用該屬性本身未使用的那種引號：

<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,  'New York', serif;">...</p> 

親自試一試

字體風格

font-style 屬性最常用于規(guī)定斜體文本。

該屬性有三個值：

• normal - 文本正常顯示
• italic - 文本斜體顯示
• oblique - 文本傾斜顯示

實例

p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;} 

親自試一試

italic 和 oblique 的區(qū)別

font-style 非常簡單：用于在 normal 文本、italic 文本和 oblique 文本之間選擇。唯一有點復雜的是明確 italic 文本和 oblique 文本之間的差別。

斜體（italic）是一種簡單的字體風格，對每個字母的結構有一些小改動，來反映變化的外觀。與此不同，傾斜（oblique）文本則是正常豎直文本的一個傾斜版本。

通常情況下，italic 和 oblique 文本在 web 瀏覽器中看上去完全一樣。

字體變形

font-variant 屬性可以設定小型大寫字母。

小型大寫字母不是一般的大寫字母，也不是小寫字母，這種字母采用不同大小的大寫字母。

實例

p {font-variant:small-caps;}

親自試一試

字體加粗

font-weight 屬性設置文本的粗細。

使用 bold 關鍵字可以將文本設置為粗體。

關鍵字 100 ~ 900 為字體指定了 9 級加粗度。如果一個字體內置了這些加粗級別，那么這些數(shù)字就直接映射到預定義的級別，100 對應最細的字體變形，900 對應最粗的字體變形。數(shù)字 400 等價于 normal，而 700 等價于 bold。

如果將元素的加粗設置為 bolder，瀏覽器會設置比所繼承值更粗的一個字體加粗。與此相反，關鍵詞 lighter 會導致瀏覽器將加粗度下移而不是上移。

實例

p.normal {font-weight:normal;} p.thick {font-weight:bold;} p.thicker {font-weight:900;} 

親自試一試

字體大小

font-size 屬性設置文本的大小。

有能力管理文本的大小在 web 設計領域很重要。但是，您不應當通過調整文本大小使段落看上去像標題，或者使段落看上去像標題。

請始終使用正確的 HTML 標題，比如使用 <h1> - <h6> 來標記標題，使用 <p> 來標記段落。

font-size 值可以是絕對或相對值。

絕對值：

• 將文本設置為指定的大小
• 不允許用戶在所有瀏覽器中改變文本大小（不利于可用性）
• 絕對大小在確定了輸出的物理尺寸時很有用

相對大小：

• 相對于周圍的元素來設置大小
• 允許用戶在瀏覽器改變文本大小

注意：如果您沒有規(guī)定字體大小，普通文本（比如段落）的默認大小是 16 像素 (16px=1em)。

使用像素來設置字體大小

通過像素設置文本大小，可以對文本大小進行完全控制：

實例

h1 {font-size:60px;} h2 {font-size:40px;} p {font-size:14px;} 

親自試一試

在 Firefox, Chrome, and Safari 中，可以重新調整以上例子的文本大小，但是在 Internet Explorer 中不行。

雖然可以通過瀏覽器的縮放工具調整文本大小，但是這實際上是對整個頁面的調整，而不僅限于文本。

使用 em 來設置字體大小

如果要避免在 Internet Explorer 中無法調整文本的問題，許多開發(fā)者使用 em 單位代替 pixels。

W3C 推薦使用 em 尺寸單位。

1em 等于當前的字體尺寸。如果一個元素的 font-size 為 16 像素，那么對于該元素，1em 就等于 16 像素。在設置字體大小時，em 的值會相對于父元素的字體大小改變。

瀏覽器中默認的文本大小是 16 像素。因此 1em 的默認尺寸是 16 像素。

可以使用下面這個公式將像素轉換為 em：pixels/16=em

（注：16 等于父元素的默認字體大小，假設父元素的 font-size 為 20px，那么公式需改為：pixels/20=em）

實例

h1 {font-size:3.75em;} /* 60px/16=3.75em */ h2 {font-size:2.5em;}  /* 40px/16=2.5em */ p {font-size:0.875em;} /* 14px/16=0.875em */ 

親自試一試

在上面的例子中，以 em 為單位的文本大小與前一個例子中以像素計的文本。不過，如果使用 em 單位，則可以在所有瀏覽器中調整文本大小。

不幸的是，在 IE 中仍存在問題。在重設文本大小時，會比正常的尺寸更大或更小。

結合使用百分百和 EM

在所有瀏覽器中均有效的方案是為 body 元素（父元素）以百分比設置默認的 font-size 值：

實例

body {font-size:100%;} h1 {font-size:3.75em;} h2 {font-size:2.5em;} p {font-size:0.875em;} 

親自試一試

我們的代碼非常有效。在所有瀏覽器中，可以顯示相同的文本大小，并允許所有瀏覽器縮放文本的大小。

CSS 字體實例：

設置文本的字體

本例演示如何設置文本字體。

設置字體尺寸

本例演示如何設置字體尺寸。

設置字體風格

本例演示如何設置字體風格。

設置字體的異體

本例演示如何設置字體的異體。

設置字體的粗細

本例演示如何設置字體的粗細。

所有字體屬性在一個聲明之內

本例演示如何使用簡寫屬性將字體屬性設置在一個聲明之內。

CSS 字體屬性