的問題。然后，瀏覽器會將水平滾動條添加到頁面。

在這種情況下，使用 max-width 能夠改善瀏覽器對小窗口的處理。

提示：將瀏覽器窗口拖動到小于500px的寬度，以查看兩個 div 之間的區別！

此元素的高度為 100 像素，最大寬度為 500 像素。

此元素的高度為 100 像素，最大寬度為 500 像素。

注釋：max-width 屬性的值將覆蓋 width（寬度）。

實例

這個

元素的高度為 100 像素網頁添加css樣式表的方式，最大寬度為 500 像素：

?div {
? ?max-width: 500px;
? ?height: 100px;
? ?background-color: powderblue;
?}

盒模型

==css將頁面中的所有元素都設置為一個個矩形

實例

演示框模型：

?div {
? ?width: 300px;
? ?border: 15px solid green;
? ?padding: 50px;
? ?margin: 20px;
?}
?
?
?
?
?
?
??
?
演示
??
?
CSS 盒模型（框模型）實質上是一個包裝每個 HTML 元素的盒子。它包括：邊框、內邊距（填充）、外邊距以及實際的內容。
??
?
此文本是盒子里的內容。我們添加了 50px 的內邊距，20px 的外邊距和 15px 的綠色邊框。此文本是盒子里的內容。此文本是盒子里的內容。此文本是盒子里的內容。此文本是盒子里的內容。此文本是盒子里的內容。此文本是盒子里的內容。此文本是盒子里的內容。此文本是盒子里的內容。此文本是盒子里的內容。此文本是盒子里的內容。此文本是盒子里的內容。此文本是盒子里的內容。此文本是盒子里的內容。此文本是盒子里的內容。此文本是盒子里的內容。此文本是盒子里的內容。此文本是盒子里的內容。此文本是盒子里的內容。此文本是盒子里的內容。此文本是盒子里的內容。此文本是盒子里的內容。
??
?
?

??

.默認值，子元素會從父元素中溢出

。溢出內容將會被裁剪不會顯示

。生成兩個滾動條，通過滾動條來查看完整內容

auto。根據需要生成滾動條

元素的寬度和高度

為了在所有瀏覽器中正確設置元素的寬度和高度，您需要了解框模型如何工作。

重要提示：使用 CSS 設置元素的 width 和 屬性時，只需設置內容區域的寬度和高度。要計算元素的完整大小，還必須把內邊距、邊框和外邊距加起來。

計算如下：

?320px(寬度)
?+ 20px（左+右內邊距）
?+ 10px（左+右邊框）
?+ 0px（左+右外邊距）
?= 350px

元素的總寬度應該這樣計算：

元素總寬度 = 寬度 + 左內邊距 + 右內邊距 + 左邊框 + 右邊框 + 左外邊距 + 右外邊距

元素的總高度應該這樣計算：

元素總高度 = 高度 + 上內邊距 + 下內邊距 + 上邊框 + 下邊框 + 上外邊距 + 下外邊距

css輪廓

輪廓是在元素周圍繪制的一條線，在邊框之外，以凸顯元素。

CSS 擁有如下輪廓屬性：

注意：輪廓與邊框不同！不同之處在于：輪廓是在元素邊框之外繪制的，并且可能與其他內容重疊。同樣，輪廓也不是元素尺寸的一部分；元素的總寬度和高度不受輪廓線寬度的影響。

CSS 輪廓樣式

-style 屬性指定輪廓的樣式，并可設置如下值：

下例展示了不同的 -style 值：

實例

演示不同的輪廓樣式：

?p.dotted {outline-style: dotted;}
?p.dashed {outline-style: dashed;}
?p.solid {outline-style: solid;}
?p.double {outline-style: double;}
?p.groove {outline-style: groove;}
?p.ridge {outline-style: ridge;}
?p.inset {outline-style: inset;}
?p.outset {outline-style: outset;}

注意：除非設置了 -style 屬性，否則其他輪廓屬性（在下一章中將詳細介紹）都不會有任何作用！

css輪廓寬度

-width 屬性指定輪廓的寬度，并可設置如下值之一：

實例

?p.ex1 {
? ?border: 1px solid black;
? ?outline-style: solid;
? ?outline-color: red;
? ?outline-width: thin;
?}
??
?p.ex2 {
? ?border: 1px solid black;

? ?outline-style: solid;
? ?outline-color: red;
? ?outline-width: medium;
?}
??
?p.ex3 {
? ?border: 1px solid black;
? ?outline-style: solid;
? ?outline-color: red;
? ?outline-width: thick;
?}
??
?p.ex4 {
? ?border: 1px solid black;
? ?outline-style: solid;
? ?outline-color: red;
? ?outline-width: 4px;
?}

CSS 輪廓顏色

-color 屬性用于設置輪廓的顏色。

可以通過以下方式設置顏色：

實例

?p.ex1 {
? ?border: 2px solid black;
? ?outline-style: solid;
? ?outline-color: red;
?}
??
?p.ex2 {
? ?border: 2px solid black;
? ?outline-style: dotted;
? ?outline-color: blue;
?}
??
?p.ex3 {
? ?border: 2px solid black;
? ?outline-style: outset;
? ?outline-color: grey;
?}

反轉顏色

實例

?p.ex1 {
? ?border: 1px solid yellow;
? ?outline-style: solid;
? ?outline-color: invert;
?}

CSS - 簡寫屬性

屬性是用于設置以下各個輪廓屬性的簡寫屬性：

從上面的列表中， 屬性可指定一個、兩個或三個值。值的順序無關緊要。

下例展示了用簡寫的 屬性指定的一些輪廓：

實例

?p.ex1 {outline: dashed;}
?p.ex2 {outline: dotted red;}
?p.ex3 {outline: 5px solid yellow;}
?p.ex4 {outline: thick ridge pink;}

CSS 輪廓偏移

-屬性在元素的輪廓與邊框之間添加空間。元素及其輪廓之間的空間是透明的。

下例指定邊框邊緣外 25px 的輪廓：

實例

?p {
? ?margin: 50px;
? ?border: 1px solid black;
? ?outline: 1px solid red;
? ?outline-offset: 25px;
?}

下例顯示元素與其輪廓之間的空間是透明的：

實例

?p {
? ?margin: 30px;
? ?background: yellow;
? ?border: 1px solid black;
? ?outline: 1px solid red;
? ?outline-offset: 25px;
?}

css文本文本顏色

color 屬性用于設置文本的顏色。顏色由以下值指定：

頁面的默認文本顏色是在 body 選擇器中定義的。

實例

?body {
? ?color: blue;
?}
??
?h1 {
? ?color: green;
?}

提示：對于 W3C CSS：如果您定義了 color 屬性，則還必須定義 -color 屬性。

文本顏色和背景色

在本例中，我們定義了 -color 屬性和 color 屬性：

實例

?body {
? ?background-color: lightgrey;
? ?color: blue;
?}
??

?h1 {
? ?background-color: black;
? ?color: white;
?}

CSS 文本對齊

文本對齊

text-align 屬性用于設置文本的水平對齊方式。

文本可以左對齊或右對齊，或居中對齊。

下例展示了居中對齊以及左右對齊的文本（如果文本方向是從左到右，則默認為左對齊；如果文本方向是從右到左，則默認是右對齊）：

實例

?h1 {
? ?text-align: center;
?}
??
?h2 {
? ?text-align: left;
?}
??
?h3 {
? ?text-align: right;
?}

當 text-align 屬性設置為 "" 后，將拉伸每一行，以使每一行具有相等的寬度，并且左右邊距是直的（就像在雜志和報紙中）：

實例

?div {
? ?text-align: justify;
?}

文本方向

和 -bidi 屬性可用于更改元素的文本方向：

實例

?p {
? ?direction: rtl;
? ?unicode-bidi: bidi-override;
?}

垂直對齊

-align 屬性設置元素的垂直對齊方式。

本例演示如何設置文本中圖像的垂直對齊方式：

實例

?img.top {
? ?vertical-align: top;
?}
??
?img.middle {
? ?vertical-align: middle;
?}
??
?img.bottom {
? ?vertical-align: bottom;
?}

css文字裝飾

文字裝飾

text- 屬性用于設置或刪除文本裝飾。

text-: none; 通常用于從鏈接上刪除下劃線：

實例
?a {
? ?text-decoration: none;
?}
其他 text-decoration 值用于裝飾文本：
實例
?h1 {
? ?text-decoration: overline;
?}
??
?h2 {
? ?text-decoration: line-through;
?}
??
?h3 {
? ?text-decoration: underline;
?}

文本轉換

text- 屬性用于指定文本中的大寫和小寫字母。

它可用于將所有內容轉換為大寫或小寫字母，或將每個單詞的首字母大寫：

實例

?p.uppercase {
? ?text-transform: uppercase;
?}
??
?p.lowercase {
? ?text-transform: lowercase;
?}
??
?p.capitalize {
? ?text-transform: capitalize;
?}
?
?
?
?
?
?
??
?
This is some text.
?
This is some text.
?
This is some text.
??
?
?

?THIS IS SOME TEXT.
??
?this is some text.
??
?This Is Some Text.

css文字間距

文字縮進

text- 屬性用于指定文本第一行的縮進：

實例
?p {
? ?text-indent: 50px;
?}
字母間距
letter-spacing 屬性用于指定文本中字符之間的間距。
下例演示如何增加或減少字符之間的間距：
實例
?h1 {
? ?letter-spacing: 3px;
?}
??
?h2 {
? ?letter-spacing: -3px;
?}
行高
line-height 屬性用于指定行之間的間距：
實例
?p.small {
? ?line-height: 0.8;
?}
??
?p.big {
? ?line-height: 1.8;
?}
字間距
word-spacing 屬性用于指定文本中單詞之間的間距。
下例演示如何增加或減少單詞之間的間距：
實例
?h1 {
? ?word-spacing: 10px;
?}
??
?h2 {
? ?word-spacing: -5px;
?}
空白
white-space 屬性指定元素內部空白的處理方式。
此例演示如何禁用元素內的文本換行：
實例
?p {
? ?white-space: nowrap;
?}

css文字陰影

text- 屬性為文本添加陰影。

最簡單的用法是只指定水平陰影（2px）和垂直陰影（2px）：

實例
?h1 {
? ?text-shadow: 2px 2px;

?}
實例
添加紅色：
?h1 {
? ?text-shadow: 2px 2px red;
?}
向陰影添加模糊效果（5px）：
實例
?h1 {
? ?text-shadow: 2px 2px 5px red;
?}

css字體通用字體族

在 CSS 中，有五個通用字體族：

所有不同的字體名稱都屬于這五個通用字體系列之一。

通用字體族字體名稱實例

Serif

Times New Roman

Sans-serif

Arial

New

Brush MT

CSS font- 屬性

在 CSS 中，我們使用 font- 屬性規定文本的字體。

font- 屬性應包含多個字體名稱作為“后備”系統，以確保瀏覽器/操作系統之間的最大兼容性。請以您需要的字體開始，并以通用系列結束（如果沒有其他可用字體，則讓瀏覽器選擇通用系列中的相似字體）。字體名稱應以逗號分隔。

注釋：如果字體名稱不止一個單詞，則必須用引號引起來，例如："Times New Roman"。

實例

為三個段落規定不同的字體：

?.p1 {
? ?font-family: "Times New Roman", Times, serif;
?}
??
?.p2 {
? ?font-family: Arial, Helvetica, sans-serif;
?}
??
?.p3 {
? ?font-family: "Lucida Console", "Courier New", monospace;
?}

css字體樣式字體樣式

font-style 屬性主要用于指定斜體文本。

此屬性可設置三個值：

實例

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

字體粗細

font- 屬性指定字體的粗細：

實例

?
?
?
?
?
?
??
?
This is a paragraph.
?
This is a paragraph.
?
This is a paragraph.
?
This is a paragraph.
??
?

?

字體變體

font- 屬性指定是否以 small-caps 字體（小型大寫字母）顯示文本。

在 small-caps 字體中，所有小寫字母都將轉換為大寫字母。但是，轉換后的大寫字母的字體大小小于文本中原始大寫字母的字體大小。

實例

?
?
?
?
?
?
??
?
My name is Bill Gates.
?
My name is Bill Gates.
??
?
?

字體大小

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

在網頁設計中，能夠管理文本大小很重要。但是，不應使用調整字體大小來使段落看起來像標題，或是使標題看起來像段落。

請始終使用正確的 HTML 標簽，例如 - 用于標題，而

僅用于段落。

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

絕對尺寸：

相對尺寸：

注釋：如果您沒有指定字體大小，則普通文本（如段落）的默認大小為 16px（16px = 1em）。

以像素設置字體大小

使用像素設置文本大小可以完全控制文本大小：

實例

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

用 em 設置字體大小

為了允許用戶調整文本大小（在瀏覽器菜單中），許多開發人員使用 em 而不是像素。

W3C 建議使用 em 尺寸單位。

1em 等于當前字體大小。瀏覽器中的默認文本大小為 16px。因此，默認大小 1em 為 16px。

可以使用這個公式從像素到 em 來計算大小：/16=em。

實例

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

在上例中，em 單位的文本大小與上一個例子中的像素大小相同。但是，若使用 em 尺寸，則可以在所有瀏覽器中調整文本大小。

不幸的是，舊版本的 仍然存在問題。放大文本時它比應該大的尺寸更大，縮小文本時會更小。

使用百分比和 Em 的組合

實例

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

我們的代碼目前運行良好！它在所有瀏覽器中顯示相同的文本大小，并允許所有瀏覽器縮放或調整文本大小！

響應式字體大小

可以使用 vw 單位設置文本大小，它的意思是“視口寬度”（" width"）。

這樣，文本大小將遵循瀏覽器窗口的大小，請調整瀏覽器窗口的大小，以查看字體大小如何縮放：

實例

?
Hello World

視口（）是瀏覽器窗口的大小。 1vw = 視口寬度的 1％。如果視口為 50 厘米寬，則 1vw 為 0.5 厘米。

css簡寫字體屬性

字體屬性

為了縮短代碼網頁添加css樣式表的方式，也可以在一個屬性中指定所有單個字體屬性。

font 屬性是以下屬性的簡寫屬性：

實例