<em>和<strong>

em標(biāo)簽用于表示一段內(nèi)容中的著重點(diǎn)。

strong標(biāo)簽用于表示一個(gè)內(nèi)容的重要性。這兩個(gè)標(biāo)簽可以單獨(dú)使用，也可以一起使用。

通常em顯示為斜體，而strong顯示為粗體。

<i>和<b>

i標(biāo)簽會(huì)使文字變成斜體。

b標(biāo)簽會(huì)使文字變成粗體。

這兩個(gè)標(biāo)簽和em和strong類(lèi)似，但是這兩 個(gè)標(biāo)簽沒(méi)有語(yǔ)義。

所以根據(jù)html5標(biāo)準(zhǔn)，當(dāng)我們只想設(shè)置文本 特殊顯示，而不需要強(qiáng)調(diào)內(nèi)容時(shí)就可以使 用i和b標(biāo)簽。

small

small標(biāo)簽表示細(xì)則一類(lèi)的旁注，通常包括 免責(zé)聲明、注意事項(xiàng)、法律限制、版權(quán)信 息等。瀏覽器在顯示small標(biāo)簽時(shí)會(huì)顯示一個(gè)比父 元素小的字號(hào)。

cite

使用cite標(biāo)簽可以指明對(duì)某內(nèi)容的引用或參 考。例如，戲劇、文章或圖書(shū)的標(biāo)題，歌 曲、電影、照片或雕塑的名稱(chēng)等。

blockquote和q表示標(biāo)記引用的文本。

blockquote用于長(zhǎng)引用，q用于短引用。

在兩個(gè)標(biāo)簽中還可以使用cite屬性來(lái)表示引 用的地址。

sup和sub用于定義上標(biāo)和下標(biāo)。

上標(biāo)主要用于表示類(lèi)似于103中的3。

下標(biāo)則用于表示類(lèi)似余H2O中的2。

ins和del

ins表示插入的內(nèi)容，顯示時(shí)通常會(huì)加上下 劃線(xiàn)。

del表示刪除的內(nèi)容，顯示時(shí)通常會(huì)加上刪 除線(xiàn)。

code和pre

如果你的內(nèi)容包含代碼示例或文件名，就 可以使用code元素。

pre元素表示的是預(yù)格式化文本，可以使用pre包住code來(lái)表示一段代碼。

有序列表（序號(hào)）

使用ol和li來(lái)創(chuàng)建一個(gè)有序列表。

無(wú)序列表（無(wú)序號(hào)）

使用ul和li來(lái)創(chuàng)建一個(gè)無(wú)序列表。

定義列表

使用dl、dd、dt來(lái)創(chuàng)建一個(gè)定義列表。

單位

px

如果我們將一個(gè)圖片放大的話(huà)，我們會(huì)發(fā)現(xiàn)一個(gè)圖片 是有一個(gè)一個(gè)的小色塊構(gòu)成的，這一個(gè)小色塊就是一 個(gè)像素，也就是1px，對(duì)于不同的顯示器來(lái)說(shuō)一個(gè)像素 的大小是不同的。

百分比

也可以使用一個(gè)百分?jǐn)?shù)來(lái)表示一個(gè)大小，百分比是相 對(duì)于父元素來(lái)說(shuō)的，如果父元素使用的大小是16px，? 則100%就是16px，200%就是32px。

顏色

在CSS中可以直接使用顏色的關(guān)鍵字來(lái)代表 一種顏色。

17種顏色

– aqua、black、blue、fuchsia、gray、green、 lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow。

還有147種svg顏色，這里就不一一列舉了， 但是明顯即使這些顏色變成double，也不 足以描繪我們世界中所有的顏色。

字體

通過(guò)font-family可以同時(shí)指定多個(gè)字體。

例如：

p{font-family:Arial , Helvetica , sans-serif}

如上我實(shí)際上指定了三種字體，那么到底 使用的是哪個(gè)呢？瀏覽器會(huì)優(yōu)先使用第一 個(gè)，如果沒(méi)有找到則使用第二個(gè)，以此類(lèi) 推。

這里面sans-serif并不是指的具體某一個(gè)字 體。而是一類(lèi)字體。

字體分類(lèi)

serif（襯線(xiàn)字體）

sans-serif（非襯線(xiàn)字體）

monospace （等寬字體）

cursive （草書(shū)字體）

fantasy （虛幻字體）

以上這些分類(lèi)都是一些大的分類(lèi)，并沒(méi)有 涉及具體的類(lèi)型，如果將字體指定為這些 格式，瀏覽器會(huì)自己選擇指定類(lèi)型的字體。

斜體和粗體

font-style用來(lái)指定文本的斜體。

指定斜體：font-style:italic

指定非斜體：font-style:normal

font-weight用來(lái)指定文本的粗體。

指定粗體：font-weight:bold

指定非粗體：font-weight:normal

小型大寫(xiě)字母

font-variant屬性可以將字母類(lèi)型設(shè)置為小 型大寫(xiě)。在該樣式中，字母看起來(lái)像是稍 微縮小了尺寸的大寫(xiě)字母。

– font-variant:small-caps

字體屬性的簡(jiǎn)寫(xiě)

font可以一次性同時(shí)設(shè)置多個(gè)字體的樣式。

語(yǔ)法：

– font:加粗 斜體 小型大寫(xiě) 大小/行高 字體

這里前邊幾個(gè)加粗、斜體和小型大寫(xiě)的順 序無(wú)所謂，也可以不寫(xiě)，但是大小和字體 必須寫(xiě)且必須寫(xiě)到后兩個(gè)。

行間距

line-height用于設(shè)置行高，行高越大則行 間距越大。

行間距 = line-height – font-size

大寫(xiě)化

text-transform樣式用于將元素中的字母全都變成大寫(xiě)。

大寫(xiě)：text-transform:uppercase

小寫(xiě)：text-tansform:lowercase

首字母大寫(xiě)：text-transform:capitalize

正常：text-transform:none

文本的修飾

text-decoration屬性，用來(lái)給文本添加各 種修飾。通過(guò)它可以為文本的上方、下方 或者中間添加線(xiàn)條。

可選值：

underline

overline

line-through

none

字母間距和單詞間距

letter-spacing用來(lái)設(shè)置字符之間的間距。

word-spacing用來(lái)設(shè)置單詞之間的間距。

這兩個(gè)屬性都可以直接指定一個(gè)長(zhǎng)度或百 分?jǐn)?shù)作為值。正數(shù)代表的是增加距離，而 負(fù)數(shù)代表減少距離。

對(duì)齊文本

text-align用于設(shè)置文本的對(duì)齊方式。

可選值：

left：左對(duì)齊

right：右對(duì)齊

justify：兩邊對(duì)齊

center：居中對(duì)齊

首行縮進(jìn)

text-indent用來(lái)設(shè)置首行縮進(jìn)。

該樣式需要指定一個(gè)長(zhǎng)度，并且只對(duì)第一 行生效。

盒子

CSS處理網(wǎng)頁(yè)時(shí)，它認(rèn)為每個(gè)元素都包含在一 個(gè)不可見(jiàn)的盒子里。

為什么要想象成盒子呢？因?yàn)槿绻阉械脑?素都想象成盒子，那么我們對(duì)網(wǎng)頁(yè)的布局就相 當(dāng)于是擺放盒子。

我們只需要將相應(yīng)的盒子擺放到網(wǎng)頁(yè)中相應(yīng)的 位置即可完成網(wǎng)頁(yè)的布局。

盒子模型

一個(gè)盒子我們會(huì)分成幾個(gè)部分：

內(nèi)容區(qū)(content)

內(nèi)邊距(padding)

邊框(border)

外邊距(margin)

border~width 20px 30px 58px 88px; 從上開(kāi)始 順時(shí)針對(duì)應(yīng)值(上 右 下 左)

盒子模型

內(nèi)容區(qū)

內(nèi)容區(qū)指的是盒子中放置內(nèi)容的區(qū)域，也就是元素 中的文本內(nèi)容，子元素都是存在于內(nèi)容區(qū)中的。

如果沒(méi)有為元素設(shè)置內(nèi)邊距和邊框，則內(nèi)容區(qū)大小 默認(rèn)和盒子大小是一致的。

通過(guò)width和height兩個(gè)屬性可以設(shè)置內(nèi)容區(qū)的大 小。

width和height屬性只適用于塊元素。

內(nèi)邊距

顧名思義，內(nèi)邊距指的就是元素內(nèi)容區(qū)與邊框以?xún)?nèi) 的空間。

默認(rèn)情況下width和height不包含padding的大小。

使用padding屬性來(lái)設(shè)置元素的內(nèi)邊距。

例如：

padding:10px 20px 30px 40px

這樣會(huì)設(shè)置元素的上、右、下、左四個(gè)方向的內(nèi)邊距。

內(nèi)邊距

padding:10px 20px 30px;

分別指定上、左右、下四個(gè)方向的內(nèi)邊距

padding:10px 20px;

分別指定上下、左右四個(gè)方向的內(nèi)邊距

padding:10px;

同時(shí)指定上左右下四個(gè)方向的內(nèi)邊距

同時(shí)在css中還提供了padding-top、padding-right、padding-

right、padding-bottom分別用來(lái)指定四個(gè)方向的內(nèi)邊距。

邊框

可以在元素周?chē)鷦?chuàng)建邊框，邊框是元素可見(jiàn)框的最外部。

可以使用border屬性來(lái)設(shè)置盒子的邊框：

border:1px red solid;

上邊的樣式分別指定了邊框的寬度、顏色和樣式。

可以使用border屬性來(lái)設(shè)置盒子的邊框：

border:1px red solid;

上邊的樣式分別指定了邊框的寬度、顏色和樣式。

也可以使用border-top/left/right/bottom分別指定上右下左 四個(gè)方向的邊框。

和padding一樣，默認(rèn)width和height并包括邊框的寬度。

邊框的樣式

邊框可以設(shè)置多種樣式：

none（沒(méi)有邊框）

dotted（點(diǎn)線(xiàn)）

dashed（虛線(xiàn)）

solid（實(shí)線(xiàn)）

double（雙線(xiàn)）

groove（槽線(xiàn)）

ridge（脊線(xiàn)）

inset（凹邊）

outset（凸邊）

外邊距

外邊距是元素邊框與周?chē)叵嗑嗟目臻g。

使用margin屬性可以設(shè)置外邊距。

用法和padding類(lèi)似，同樣也提供了四個(gè)方向的? margin-top/right/bottom/left。

當(dāng)將左右外邊距設(shè)置為auto時(shí)，瀏覽器會(huì)將左右外 邊距設(shè)置為相等，所以這行代碼margin:0 auto可 以使元素居中。