CSS文本屬性，讓你的段落更加美觀，前端之路更進一步

技術等級】初級

【承接文章】《CSS字體屬性，詳解屬性用法，提升前端小白能力》

本文重點講解CSS技術中有關文本樣式的屬性以及這些屬性的取值。本文屬于前端開發的初級教程，適合于剛剛開始接觸CSS技術的學習者。

所謂文本，就是大段落的文字。當文字多到可以形成段落時，就會涉及到段落的一些樣式調整。例如段落的對齊方式、段落的首行縮進等。

被歸結為段落屬性的CSS樣式包括八個，小海老師將其分為兩組。

第一組有如下五個屬性：

letter-spacing
word-spacing
text-decoration
text-transform
text-indent

第二組有如下三個屬性：

text-align
line-height
vertical-align

本文小海老師先為大家講解第一組的5個屬性，后續的文章會緊接著為大家講解第二組的3個屬性。

一、設置字符間距：

CSS技術利用letter-spacing屬性來設置字符間距

該屬性可以有多種取值：

normal，正常，表示字符間距采用系統定義的默認間距。
帶單位的長度值，指定字符間距的具體數值。

實例：.sty01{letter-spacing:20px;}

上述代碼定義了用戶自定義類sty01，該樣式設置字符間距為20像素。

二、設置單詞間距：

CSS技術利用word-spacing屬性來設置單詞間距

在頁面中，單詞是以空格作為依據的，每個空格之間被認定為一個單詞。所以也可以認為該屬性是用來調整句子中空格的距離的。

該屬性可以有多種取值：

normal，正常，表示單詞間距采用系統定義的默認間距。
帶單位的長度值，指定單詞間距的具體數值。

實例：.sty02{word-spacing:20px;}

上述代碼定義了用戶自定義類sty02，該樣式設置單詞間距為20像素。

三、設置文本修飾：

CSS技術利用text-decoration屬性來設置文本修飾

該屬性可以有多種取值：

none，文本沒有經過任何修飾。
underline，下劃線修飾。
overline，上劃線修飾。
line-through，刪除線修飾。
blink，閃爍修飾（主流瀏覽器不支持該效果）。

讓我們一同來看兩個下例子：

例1：結合虛類設定超級鏈接在鼠標經過時顯示下劃線效果。

a:link{font-size:12px;text-decoration:none;}
a:visited{font-size:12px;text-decoration:none;}
a:hover{font-size:12px;text-decoration:underline;}
a:active{font-size:12px;text-decoration:none;}

例2：結合虛類設定超級鏈接在鼠標經過時放大字號效果。

a:link{font-size:12px; }
a:visited{font-size:12px; }
a:hover{font-size:14px; }
a:active{font-size:12px; }

四、設置段落中西文的大小寫模式：

CSS技術利用text-transform屬性來設置西文的大小寫模式

該屬性可以有多種取值：

none，段落中西文的大小寫模式不受CSS樣式的影響。
uppercase，所有西文均為大寫模式。
lowercase，所有西文均為小寫模式。
capitalize，所有西文均為首字母大寫模式。

五、設置段落的首行縮進：

CSS技術利用text-indent屬性來設置段落的首行縮進

首行縮進是指：段落中的第一行與整個段落左側之間的距離，也就是我們俗稱的“每一段的第一行空兩個格”。

該屬性可以取值為：

帶有單位的長度值，一般首行縮進兩個字符，可設置為字號的2倍。

實例：設置段落的首行縮進為兩個字符的距離。

<p>段落內容……</p>
p{font-size:14px; text-indent:28px;}

文章預告

下一篇文章中，小海老師會為大家從細節上深入剖析text-align屬性以及塊級元素和內聯元素的使用。塊級元素與內聯元素在前端開發中的作用非常重要，我會用整整一篇文章的篇幅，為廣大Web前端愛好者們詳細講解這兩個概念。對于渴望在前端開發道路上前進的你一定不能錯過！

小海教材

如果大家希望得到更加全面的關于HTML和CSS技術講解的內容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發給你，幫助你在前端開發的道路上闊步前行。

小海聲明

在頭條上也已經寫了有七八篇文章了。這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。

希望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統的歸納過的。

關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。

成	語言	描述
結構	HTML	網頁元素和內容
表現	CSS	網頁元素頁面樣式）
行為	JavaScript	網頁交互

CSS，層疊樣式表（Cascading Style Sheet），給網頁中的HTML標簽設置樣式

1 CSS樣式引入方式

1.1 外部樣式

CSS寫在一個單獨的.css文件中，通過link標簽在網頁中引入

<link rel="stylesheet" href="文件路徑">

1.2 內部樣式

CSS寫在網頁的head標簽中，用style標簽包裹

<style>
    /* 寫在style標簽中的樣式 */
</style>

1.3 行內樣式

CSS寫在標簽的style屬性中

<標簽名 style="行內樣式寫在這"></標簽名>

三種CSS樣式引入方式的區別

引入方式	書寫位置	作用范圍	使用場景
外部樣式	CSS寫在單獨的css文件中，通過link標簽引入	多個頁面	項目中
內部樣式	CSS寫在head頭部style標簽中	當前頁面	案例演示中
行內樣式	CSS寫在標簽的style屬性中	當前標簽	配合js使用

2 基礎選擇器

選擇器，就是選取（查找）需要設置樣式元素的方式

選擇器 {
    屬性名: 屬性值;
}

屬性名和屬性值合稱為css屬性

2.1 元素選擇器

通過元素名稱，選取（查找）相同元素，然后對相同元素設置CSS樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>我愛中國</p>
    <p>我愛人民</p>
    <div>我愛家鄉</div>
</body>
</html>

小結：

1、無論嵌套多少層，只要元素名稱相同都會被找到

2.2 類選擇器

通過類名稱，找到頁面中所有帶這個類名稱的元素，然后對其設置CSS樣式

類選擇器，也有人叫class選擇器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .color-style {
            color: red;
        }
    </style>
</head>
<body>
    <p class="color-style">我愛中國</p>
    <p>我愛人民</p>
    <div class="color-style">我愛家鄉</div>
</body>
</html>

小結：

1、所有元素都有class屬性，class屬性的屬性值叫類名

2、類名由數字、字母、下劃線、中劃線組成，不能以數字、中劃線開頭

3、一個元素可以有多個類名，類名之間用空格隔開

2.3 id選擇器

通過元素id屬性的屬性值，找到頁面中帶這個id屬性值的元素，然后對其設置CSS樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #one {
            color: red;
        }
    </style>
</head>
<body>
    <p id="one">我愛中國</p>
    <p id="two">我愛人民</p>
    <div>我愛家鄉</div>
</body>
</html>

小結：

1、所有元素都有id屬性

2、id屬性值在一個頁面中是唯一的

3、一個元素只能有一個id屬性值

2.4 通配符選擇器

查找頁面中所有的元素，然后對其設置CSS樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        * {
            color: red;
        }
    </style>
</head>
<body>
    <p id="one">我愛中國</p>
    <p id="two">我愛人民</p>
    <div>我愛家鄉</div>
</body>
</html>

小結：

1、通常用于網頁重置樣式，不常用

2.5 后代選擇器

根據選擇器查找符合條件的元素，再根據后代選擇器查找符合條件的元素，然后對其設置CSS樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #one p {
            color: red;
        }
    </style>
</head>
<body>
    <div id="one">
        <p>我愛中國</p>
        <p>我愛人民</p>
        <div>我愛家鄉</div>
        <div>
            <p>我愛中國</p>
            <p>我愛人民</p>
        </div>
    </div>
    <div id="two">
        <p>我愛中國</p>
        <p>我愛人民</p>
        <div>我愛家鄉</div>
        <div>
            <p>我愛中國</p>
            <p>我愛人民</p>
        </div>
    </div>
</body>
</html>

2.6 群組選擇器

根據多個選擇器各自查找符合條件的元素，然后對其設置CSS樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p,h3 {
            color: red;
        }
    </style>
</head>
<body>
    <p>我愛中國</p>
    <h3>我愛人民</h3>
    <div>我愛家鄉</div>
</body>
</html>

3 字體樣式

字體樣式，針對文字本身樣式

字體相關的CSS屬性

屬性	說明
font-family	字體類型
font-size	字體大小
font-weight	字體粗細
font-style	字體風格
color	字體顏色

3.1 字體類型

語法：

font-family: 字體1,字體2,字體3...;

說明：

1、font-family屬性可是設置多個屬性值，用英文逗號隔開，生效順序是從左到右。瀏覽器默認字體類型一般是"宋體"

2、字體類型只有一個英文單詞，則不需要加上引號；字體類型是多個英文單詞或中文的，則需要加上雙引號

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            font-family: Arial;
        }
        h3 {
            font-family: monospace;
        }
        div {
            font-family: "新宋體";
        }
    </style>
</head>
<body>
    <p>我愛中國</p>
    <h3>我愛人民</h3>
    <div>我愛家鄉</div>
</body>
</html>

3.2 字體大小

語法：

font-size: 數字 + px

說明：

1、px是像素單位，單位需要設置，否則無效

2、谷歌瀏覽器默認文字大小是16px

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            font-size: 18px;
        }
        div {
            font-size: 36px;
        }
    </style>
</head>
<body>
    <p>我愛中國</p>
    <div>我愛家鄉</div>
</body>
</html>

3.3 字體粗細

語法：

font-weight: normal/bold/100~900

說明：

屬性值	說明
normal	正常（默認值）
bold	較粗
100~900	取100~900九種數值

實際開發一般會設置bold，不設置默認是normal

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            font-weight: normal;
        }
        div {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>我愛中國</p>
    <div>我愛家鄉</div>
</body>
</html>

3.4 字體風格

語法：

font-style: 取值

說明：

屬性值	說明
normal	正常（默認值）
italic	斜體
oblique	斜體

不是所有字體都有italic屬性值，如果沒有italic的，則用oblique

font連寫

語法：

font: style weight size family;

說明：

1、可以省略前兩項，省略了相當于設置了默認值

不常用，作為了解

3.5 字體顏色

語法：

color: 顏色值

說明：

color屬性取值常用有兩種，一種是關鍵字（比如red、green、blue），另外一種是16進制RGB值（#000000，#FFFFFF）

問題一：給同一個元素設置了相同的屬性樣式，哪個生效？

答：樣式會層疊（覆蓋），寫在最后面的會生效。

問題二：html里面有注釋，css有沒有注釋，如何寫？

<style>
    /* 采用元素選擇器給p元素設置css樣式 */
    p {
        color: #000000;  /* p元素字體顏色為黑色 */
    }
</style>

4 文本樣式

文本樣式，針對段落的排版效果

文本相關CSS屬性

屬性	說明
text-indent	首行縮進
text-align	水平對齊
text-decoration	文本修繕
text-transform	大小寫轉換
line-height	行高
letter-spacing	字母間距
word-spacing	詞間距

4.1 首行縮進

語法：

text-indent: 像素值

說明：

縮進大小和字體大小是有關的，縮進1個字的空間等同于1個字的字體大小。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    p {
        font-size: 14px;
        text-indent: 28px;
    }
</style>
</head>
<body>
    <p>舜發于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動心忍性，曾益其所不能。</p>
</body>
</html>

4.2 水平對齊

語法：

text-align: 取值

說明：

text-align屬性取值

屬性值	說明
left	左對齊（默認值）
center	居中對齊
right	右對齊

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    .one {
        text-align: left;
    }
    .two {
        text-align: center;
    }
    .three {
        text-align: right;
    }
</style>
</head>
<body>
    <p class="one">生于憂患死于安樂</p>
    <p class="two">生于憂患死于安樂</p>
    <p class="three">生于憂患死于安樂</p>
</body>
</html>

4.3 文本修飾

語法：

text-decoration: 取值

說明：

text-decoration屬性值

屬性值	說明
none	去除所有的劃線效果（默認值）
underline	下劃線
line-throught	中劃線
overline	頂劃線

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    .one {
        text-decoration: none;
    }
    .two {
        text-decoration: underline;
    }
    .three {
        text-decoration: line-through;
    }
    .four {
        text-decoration: overline;
    }
</style>
</head>
<body>
    <p class="one">生于憂患死于安樂</p>
    <p class="two">生于憂患死于安樂</p>
    <p class="three">生于憂患死于安樂</p>
    <p class="four">生于憂患死于安樂</p>
</body>
</html>

4.4 大小寫轉換

語法：

text-transform: 取值

說明：

text-transform屬性取值

屬性值	說明
none	無轉換（默認值）
uppercase	轉換為大寫
lowercase	轉換為小寫
capitalize	單詞首字母大寫

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
    .one {
        text-transform: none;
    }
    .two {
        text-transform: uppercase;
    }
    .three {
        text-transform: lowercase;
    }
    .four {
        text-transform: capitalize;
    }
</style>
</head>
<body>
    <p class="one">Hello World</p>
    <p class="two">Hello World</p>
    <p class="three">Hello World</p>
    <p class="four">hello world</p>
</body>
</html>

4.5 行高

語法：

line-height: 取值;

說明：

1、取值可以是一個固定的數值（比如24px），也可以是一個百分數（比如150%）

line-height: 150%;

2、使用font-size屬性和line-height屬性的組合，可以讓行高與字體大小之間保持一定的比例

font-size: 16px;
line-height: 1.5

3、使用line-height屬性的繼承值。如果父元素的line-height屬性有值，那么子元素及后代元素會繼承父元素的行高

body {
    line-height: 1.5;
}
p {
    font-size: 16px;
}

行高的設置要大于字體大小的設置，才會顯得好看

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        p {
            font-size: 16px;
            line-height: 24px;
        }
    </style>
</head>
<body>
    <p>舜發于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動心忍性，曾益其所不能</p>
</body>
</html>

4.6 間距

字間距

語法：

letter-spacing: 像素值

說明：

letter-spacing屬性用來設置兩個字之間的距離，一個英文字母或漢字都是當做一個字來處理

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        p {
            letter-spacing: 10px;
        }
    </style>
</head>
    <p>are you ok.你好嗎？</p>
<body>
</body>
</html>

詞間距

語法：

word-spacing: 像素值;

說明：

word-spacing屬性用來設置英文單詞之間的距離

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        p {
            word-spacing: 10px;
        }
    </style>
</head>
    <p>are you ok.你好嗎？</p>
<body>
</body>
</html>

5 邊框樣式

元素基本可以定義邊框，邊框樣式由邊框寬度、邊框外觀和邊框顏色三個屬性組成。

屬性	說明
border-width	邊框的寬度
border-style	邊框的外觀
border-color	邊框的顏色

5.1 邊框的寬度

語法：

border-width: 像素值;

說明：

邊框border-width屬性值是一個像素值

5.2 邊框的外觀

語法：

border-style: 取值;

說明：

border-style取值有三個

屬性值	說明
none	無樣式
dashed	虛線
solid	實線

5.3 邊框的顏色

語法：

border-color: 顏色關鍵字/16進制RGB值

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            border-width: 1px;
            border-style: solid;
            border-color: red;
        }
    </style>
</head>
    <div>hello,world</div>
<body>
</body>
</html>

5.4 邊框樣式簡寫

語法：

border: border-width border-style border-color;

案例：

div {
    border: 1px solid red;
}

5.5 邊框局部樣式

元素都是盒子模型，都是有四條邊的，分別是上、下、左、右。所以又可以為元素某一邊邊設置邊框樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            width: 300px;
            height: 200px;
            border-top: 1px dashed darkred;
            border-bottom: 2px solid green;
            border-left: 3px solid grey;
            border-right: 4px dashed lightseagreen;
        }
    </style>
</head>
    <div></div>
<body>
</body>
</html>

6 列表樣式

6.1 列表項符號

定義列表項符號

在HTML中，無序列表和有序列表是通過標簽ul、ol的type屬性來定義的

<ol type="a">
    <li>my</li>
    <li>your</li>
</ol>
<ul type="disc">
    <li>my</li>
    <li>your</li>
</ul>

接觸了css后，得改成list-style-type屬性來定義。HTML專心負責結構，CSS專心負責樣式。

語法：

list-style-type: 取值;

說明：

ol元素的list-style-type屬性值

屬性值	說明
decimal	阿拉伯數字：1、2、3…（默認值）
lower-roman	小寫羅馬數字：i、ii、iii…
upper-roman	大寫羅馬數字：I、II、III…
lower-alpha	小寫英文字母：a、b、c…
upper-alpha	大寫英文字母：A、B、C…

ul元素的list-style-type屬性值

屬性值	說明
disc	實心圓●（默認值）
circle	空心圓○
square	正方形■

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        ol {
            list-style-type: lower-alpha;
        }
        ul {
            list-style-type: square;
        }
    </style>
</head>
<body>
    <ol>
        <li>my</li>
        <li>your</li>
    </ol>
    <ul>
        <li>my</li>
        <li>your</li>
    </ul>
</body>
</html>

去除列表項符號

隨著技術和審美不斷的提高，實際開發中都是直接去除列表項符號

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        ol,ul {
            list-style-type: none;
        }
    </style>
</head>
<body>
    <ol>
        <li>my</li>
        <li>your</li>
    </ol>
    <ul>
        <li>my</li>
        <li>your</li>
    </ul>
</body>
</html>

有序列表或無序列表設置了list-style-type: none后，樣式都一樣了。

6.2 列表項圖片

語法：

list-style-image: url(圖片路徑);

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        ul {
            list-style-image: url("small.png");
        }
    </style>
</head>
<body>
    <ul>
        <li>my</li>
        <li>your</li>
    </ul>
</body>
</html>

list-style-image不能控制圖片大小，實際開發中用background來替代

7 表格樣式

7.1 表格標題位置

語法：

caption-side: 取值;

說明：

caption-side屬性取值

屬性值	說明
top	標題在頂部（默認值）
bottom	標題在底部

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        table,tr,th,td {
            border: 1px solid gray;
        }
        table {
            caption-side: bottom;
        }
    </style>
</head>
<body>
    <table>
        <caption>學生成績</caption>
        <tr>
            <th>姓名</th>
            <th>數學</th>
        </tr>
        <tr>
            <td>曹操</td>
            <td>85</td>
        </tr>
        <tr>
            <td>劉備</td>
            <td>75</td>
        </tr>
    </table>
</body>
</html>

7.2 表格邊框合并

語法：

border-collapse: 取值;

說明：

border-collapse屬性取值

屬性值	說明
separate	邊框分開，有空隙（默認值）
collapse	邊框合并，無空隙

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        table,tr,th,td {
            border: 1px solid gray;
        }
        table {
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table>
        <caption>學生成績</caption>
        <tr>
            <th>姓名</th>
            <th>數學</th>
        </tr>
        <tr>
            <td>曹操</td>
            <td>85</td>
        </tr>
        <tr>
            <td>劉備</td>
            <td>75</td>
        </tr>
    </table>
</body>
</html>

7.3 表格邊框間距

語法：

border-spacing: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        table,tr,th,td {
            border: 1px solid gray;
        }
        table {
            border-spacing: 10px;
        }
    </style>
</head>
<body>
    <table>
        <caption>學生成績</caption>
        <tr>
            <th>姓名</th>
            <th>數學</th>
        </tr>
        <tr>
            <td>曹操</td>
            <td>85</td>
        </tr>
        <tr>
            <td>劉備</td>
            <td>75</td>
        </tr>
    </table>
</body>
</html>

8 圖片樣式

8.1 圖片大小

語法：

width: 像素值;
height: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        img {
            width: 40px;
            height: 40px;
        }
    </style>
</head>
<body>
    <img src="small.png" alt="">
</body>
</html>

8.2 圖片邊框

語法:

border: 1px solid red;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        img {
            width: 40px;
            height: 40px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <img src="small.png" alt="">
</body>
</html>

8.3 圖片對齊

水平對齊

語法：

text-align: 取值;

說明：

text-align屬性取值

屬性值	說明
left	左對齊（默認值）
center	居中對齊
right	右對齊

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        .i1 {
            text-align: left;
        }
        .i2 {
            text-align: center;
        }
        .i3 {
            text-align: right;
        }
    </style>
</head>
<body>
    <div class="i1">
        <img src="small.png" alt="">
    </div>
    <div class="i2">
        <img src="small.png" alt="">
    </div>
    <div class="i3">
        <img src="small.png" alt="">
    </div>
</body>
</html>

圖片的水平對齊屬性設置是在圖片標簽的父標簽上實現的

垂直對齊

語法：

vertical-align: 取值;

說明：

vertical-align屬性取值

屬性值	說明
top	頂部對齊
middle	中部對齊
baseline	基線對齊
bottom	底部對齊

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        .i1 {
            vertical-align: top;
        }
        .i2 {
            vertical-align: middle;
        }
        .i3 {
            vertical-align: baseline;
        }
        .i4 {
            vertical-align: bottom;
        }
    </style>
</head>
<body>
    <div>
        <span>hello,world</span>
        <img class="i1" src="small.png" alt="">
        <span>hello,world</span>
        <hr>
    </div>
    <div>
        <span>hello,world</span>
        <img class="i2" src="small.png" alt="">
        <span>hello,world</span>
        <hr>
    </div>
    <div>
        <span>hello,world</span>
        <img class="i3" src="small.png" alt="">
        <span>hello,world</span>
        <hr>
    </div>
    <div>
        <span>hello,world</span>
        <img class="i4" src="small.png" alt="">
        <span>hello,world</span>
        <hr>
    </div>
</body>
</html>

8.4 文字環繞

語法：

float: 取值;

說明：

float屬性取值

屬性值	說明
left	元素向左浮動
right	元素向右浮動

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        img {
            float: left;
        }
    </style>
</head>
<body>
    <img src="small.png" alt="">
    <p>舜發于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動心忍性，曾益其所不能。</p>
</body>
</html>

9 背景樣式

9.1 背景顏色

語法：

background-color: 顏色值;

說明：

顏色值有兩種表示方式，一種是顏色關鍵字，另外一種是16進制RGB值

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            width: 200px;
            height: 100px;
            /* 背景顏色 */
            background-color: burlywood;
        }
    </style>
</head>
<body>
    <div>hello,world</div>
</body>
</html>

9.2 背景圖片

引入背景圖片

語法:

background-image: url(圖片路徑)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            background-image: url("small.png");
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

背景圖片重復

語法：

background-repeat: 取值;

說明：

background-repeat屬性取值

屬性值	說明
repeat	在水平方向和垂直方向上同時平鋪（默認值）
repeat-x	只在水平方向（x軸）上平鋪
repeat-y	只在垂直方向（y軸）上平鋪
no-repeat	不平鋪

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            background-image: url("small.png");
            background-repeat: repeat-x;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

背景圖片位置

語法：

background-position: 水平距離 垂直距離

通過像素值定圖片位置

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            border: 1px solid red;
            background-image: url("small.png");
            background-repeat: no-repeat;
            background-position: 10px 30px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

通過關鍵字定位圖片位置

水平方向左left、中center、右right

垂直方向上top、中center、下bottom

通過水平方向、垂直方向組合出9種方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        div {
            height: 180px;
            width: 180px;
            border: 1px solid red;
            background-image: url("small.png");
            background-repeat: no-repeat;
            background-position: center center;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

背景圖片固定

語法：

background-attachment: 取值;

說明：

background-attachment屬性取值

屬性值	說明
scroll	隨元素一起滾動（默認值）
fixed	固定不動

10 超鏈接樣式

語法：

a {}
a:link {}
a:visited {}
a:hover{}
a:active{}

說明：

偽類	說明
a:link	a元素未訪問時的樣式
a:visited	a元素訪問后的樣式
a:hover	鼠標經過a元素時的樣式
a:active	鼠標點擊時的樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        a {
            text-decoration: none;
        }
        a:hover {
            color: red;
        }
    </style>
</head>
<body>
<a href="#">百度</a>
</body>
</html>

實際開發，一般設置a、a:hover樣式就可以了

11 盒子模型

每一個元素都是由內容區、內邊距、邊框、外邊距組成

屬性	說明
content	內容區，可以是文本或圖片
padding	內邊距，用于定義內容與邊框之間的距離
border	邊框，用于定義元素的邊框
margin	外邊距，用于定義當前元素與其他元素之間的距離

11.1 內容區

語法：

width: 像素值;
height: 像素值;
overflow: 取值;

說明：

overflow屬性值

屬性值	說明
visible	默認值。內容不會被修剪，會呈現在元素框之外。
hidden	內容會被修剪，并且其余內容是不可見的。
scroll	內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
auto	如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
inherit	規定應該從父元素繼承 overflow 屬性的值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        img {
            width: 30px;
            height: 30px;
        }
        p {
            width: 50px;
            height: 50px;
            overflow: hidden;
        }
    </style>
</head>
<body>
<img src="small.png" alt="">
<p>舜發于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動心忍性，曾益其所不能。</p>
</body>
</html>

如果要給行內元素設置寬高，則需要給元素設置display: inline-block屬性

11.2 內邊距

語法：

padding-top: 像素值;
padding-right: 像素值;
padding-bottom: 像素值;
padding-left: 像素值;

padding: 上下左右像素值;
padding: 上下像素值 左右像素值;
padding: 上像素值 右像素值 下像素值 左像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        p {
            border: 1px solid red;
            padding: 10px;
        }
    </style>
</head>
<body>
<p>舜發于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動心忍性，曾益其所不能。</p>
</body>
</html>

11.3 邊框

邊框知識參考2.6

11.4 外邊距

語法：

margin-top: 像素值;
margin-right: 像素值;
margin-bottom: 像素值;
margin-left: 像素值;

margin: 上下左右像素值;
margin: 上下像素值 左右像素值;
margin: 上像素值 右像素值 下像素值 左像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        p {
            border: 1px solid red;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
<p>舜發于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動心忍性，曾益其所不能。</p>
<p>舜發于畎畝之中，傅說舉于版筑之間，膠鬲舉于魚鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動心忍性，曾益其所不能。</p>
</body>
</html>

12 浮動布局

正常文檔流就是我們沒有使用浮動或者定位去改變的默認情況，按照從上到下，從左到右順序的元素布局情況。

12.1 定義浮動

語法：

float: 取值

說明：

屬性值	說明
left	元素向左浮動
right	元素向右浮動

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f {
            background-color: beige;
            padding: 10px;
        }
        #s1 {
            background-color: gray;
            float: left;
        }
        #s2 {
            background-color: aqua;
            float: left;
        }
    </style>
</head>
<body>
    <div id="f">
        <div id="s1">box1</div>
        <div id="s2">box2</div>
    </div>
</body>
</html>

12.2 清除浮動

語法：

clear: 取值;

說明：

clear屬性值

屬性值	說明
left	清除左浮動
right	清除右浮動
both	同時清除左浮動和右浮動

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f {
            background-color: beige;
            padding: 10px;
        }
        #s1 {
            background-color: gray;
            float: left;
        }
        #s2 {
            background-color: aqua;
            float: left;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div id="f">
        <div id="s1">box1</div>
        <div id="s2">box2</div>
        <div class="clear"></div>
    </div>
</body>
</html>

13 定位布局

13.1 固定定位

語法：

position: fixed;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #s1 {
            position: fixed;
            top: 20px;
            left: 100px;
            color: red;
        }
    </style>
</head>
<body>
    <div id="f">
        <div id="s1">回到頂部</div>
        <div id="s2">
            <p>內容區</p>
            ......
        </div>
    </div>
</body>
</html>

13.2 相對定位

相對定位，指的是該元素的位置是相對于它的原始位置計算而來的

語法：

position: relative;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f div {
            width: 100px;
            height: 50px;
            background-color: burlywood;
            margin: 10px;
        }
        .s2 {
            position: relative;
            top: 5px;
            left: 30px;
        }
    </style>
</head>
<body>
    <div id="f">
        <div class="s1">1</div>
        <div class="s2">2</div>
        <div class="s3">3</div>
    </div>
</body>
</html>

13.3 絕對定位

把元素定位到任意你想要的位置，完全脫離文檔流

語法：

position: absolute;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #f div {
            width: 100px;
            height: 50px;
            background-color: burlywood;
            margin: 10px;
        }
        .s2 {
            position: absolute;
            top: 200px;
            left: 200px;
        }
    </style>
</head>
<body>
    <div id="f">
        <div class="s1">1</div>
        <div class="s2">2</div>
        <div class="s3">3</div>
    </div>
</body>
</html>

13.4 靜態定位

用法：

position: static;

說明：

元素position屬性的默認值是static

TML

基本概念

HTML 是網頁內容的載體。內容就是網頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。
CSS 樣式是表現。比如，標題字體、顏色變化，或為標題加入背景圖片、邊框等，所有這些用來改變內容外觀的東西稱之為表現。
JavaScript 是用來實現網頁上的特效效果。如：鼠標滑過彈出下拉菜單，或鼠標滑過表格的背景顏色改變，還有焦點新聞（新聞圖片）的輪換。有動畫的，有交互的一般都是用 JavaScript 來實現的。

2.常用標簽

強調語氣：<em>是斜體，<strong>是加粗
引用：<q>短文本引用，<blockquote>長文本引用
換行 <br />
水平橫線 <hr />
空格  
表格 <table><tbody>
加上后表格內容全部下載完才會顯示
行 <tr>
列 <td>
表格表頭 <th>
標題 <caption>
超鏈 <a>
例子：<a href="目標網址" title="鼠標滑過顯示的文本">鏈接顯示的文本</a>
新標簽打開：target="_blank"
圖片 <img>，圖像可以是 GIF，PNG，JPEG 格式的圖像文件
例子：<img src="圖片地址" alt="下載失敗時的替換文本" title="提示文本">
表單 <form>
文本域 <textarea>
例子 <textarea rows="行數" cols="列數">文本</textarea>
cols 多行輸入域的列數；rows 多行輸入域的行數。這兩個屬性可用 CSS 樣式的 width 和 height 來代替：col 用 width、row 用 height 來代替
輸入框 <input type="text/password" name="名稱" value="文本" />
當 type=”text” 時，輸入框為文本輸入框
當 type=”password” 時, 輸入框為密碼輸入框
單/復選框 <input type="radio/checkbox" value="值" name="名稱" checked="checked"/>
當 type=”radio” 時，控件為單選框，同一組單選框 name 命名要一致
當 type=”checkbox” 時，控件為復選框
提交按鈕 <input type="submit" value="提交">
重置按鈕 <input type="reset" value="重置">
下拉列表框 ` `
value <option value="提交值">選項</option>
選中 selected="selected"
多選 multiple="multiple"
標簽 <label for="控件id名稱">，標簽的 for 屬性中的值應當與相關控件的 id 屬性 值一定要相同

CSS

基本知識

CSS 樣式由選擇符和聲明組成，而聲明又由屬性和值組成。

選擇符：又稱選擇器，指明網頁中要應用樣式規則的元素。
聲明：在英文大括號{}中的的就是聲明，屬性和值之間用英文冒號{}分隔。當有多條聲明時，中間可以英文分號;分隔。

從CSS 樣式代碼插入的形式來看基本可以分為以下3種：內聯式、嵌入式和外部式三種。優先級遵循就近原則，一般來說，內聯式 > 嵌入式 > 外部式。

內聯式

例子 <p style="color:red;font-size:12px">這里文字是紅色。</p>

嵌入式

外部式

例子：<link href="base.css" rel="stylesheet" type="text/css" />

CSS 選擇器

常見的類選擇器類型有如下幾種：

標簽選擇器，.標簽選擇器名稱{css樣式代碼;}
類選擇器，.類選器名稱{css樣式代碼;}
ID 選擇器，＃類選器名稱{css樣式代碼;}
子選擇器，即大于符號(>),用于選擇指定標簽元素的第一代子元素
包含選擇器，即加入空格 ,用于選擇指定標簽元素下的后輩元素
通用選擇器，匹配html中所有標簽元素，* {css樣式代碼;}類選擇器和ID選擇器都可以應用于任何元素，但 ID 選擇器只能在文檔中使用一次，可以使用類選擇器詞列表方法為一個元素同時設置多個樣式，ID 選擇器是不可以的。

子選擇器和包含選擇器區別：>作用于元素的第一代后代，空格作用于元素的所有后代。

另外還有兩種選擇符：

偽類選擇符，允許給 HTML 不存在的標簽（標簽的某種狀態）設置樣式。常用的有 a:hover{color:red;}
分組選擇符，為 HTML 中多個標簽元素設置同一個樣式時，可以使用分組選擇符,

。例如h1,span{color:red;}

CSS 的繼承、層疊和特殊性

CSS 的某些樣式是具有繼承性的，繼承是一種規則，它允許樣式不僅應用于某個特定 HTML 標簽元素，而且應用于其后代。
特殊性：不同選擇器具有不同權值，標簽的權值為 1，類選擇符的權值為 10，ID選擇符的權值最高為 100。
層疊就是在 HTML 文件中對于同一個元素可以有多個 CSS 樣式存在，當有相同權重的樣式存在時，會根據這些 CSS 樣式的前后順序來決定，處于最后面的 CSS 樣式會被應用。

CSS 格式化排版

文字排版

字體，body{font-family:"Microsoft Yahei";}
字號、顏色，body{font-size:12px;color:#666}
粗體，body{font-weight:bold;}
斜體，body{font-style:italic;}
下劃線，body{font-style:italic;}
刪除線，body{text-decoration:line-through;}

段落排版

縮進，p{text-indent:2em;}
行間距（行高），p{line-height:1.5em;}
中文字間距、字母間距，letter-spacing:50px;和word-spacing:50px;
對齊，div{text-align:center;}

CSS 盒模型

元素分類

在 CSS 中，HTML 中的標簽元素大體被分為三種不同的類型：塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。

常用的塊狀元素有：

塊級元素特點：

每個塊級元素都從新的一行開始，并且其后的元素也另起一行。
元素的高度、寬度、行高以及頂和底邊距都可設置。
元素寬度在不設置的情況下，是它本身父容器的 100%（和父元素的寬度一致），除非設定一個寬度。

設置 display:block就是將元素顯示為塊級元素，從而使元素具有塊狀元素特點。

注：img 標簽與 div 層之間會有空隙的解決方法是：使用 display:block 就可以消除間隙。

常用的內聯元素有：

內聯元素特點：

和其他元素都在一行上；
元素的高度、寬度及頂部和底部邊距不可設置；
元素的寬度就是它包含的文字或圖片的寬度，不可改變。

塊狀元素也可以通過代碼 display:inline將元素設置為內聯元素。

常用的內聯塊狀元素有：

inline-block 元素特點：

和其他元素都在一行上；
元素的高度、寬度、行高以及頂和底邊距都可設置。

內聯塊狀元素（inline-block）就是同時具備內聯元素、塊狀元素的特點，代碼 display:inline-block就是將元素設置為內聯塊狀元素。

盒模型

邊框

盒子模型的邊框就是圍繞著內容及補白的線，這條線你可以設置它的粗細、樣式和顏色(邊框三個屬性)。

單獨設置下邊框的例子 div{border-bottom:1px solid red;}

寬度和高度

CSS 內定義的寬（width）和高（height），指的是 填充以里的內容范圍。一個元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界。

W3C 的標準 Box Model:

所以有時會設置 box-sizing: border-box;來避免計算內部元素大小

填充(padding)

元素內容與邊框之間是可以設置距離的，稱之為“填充”。填充也可分為上、右、下、左(順時針)。

例子：

邊界(margin)

元素與其它元素之間的距離可以使用邊界（margin）來設置，順序和填充一樣是上，右，下，左。padding 在邊框里，margin 在邊框外。

CSS 布局模型

CSS 包含 3 種基本的布局模型，用英文概括為：Flow、Layer 和 Float。在網頁中，元素有三種布局模型：

流動模型（Flow）
浮動模型 (Float)
層模型（Layer）

流動模型

流動模型，流動（Flow）是默認的網頁布局模式。

流動布局模型具有2個比較典型的特征：

塊狀元素 都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在默認狀態下，塊狀元素的寬度都為 100%。實際上，塊狀元素都會以行的形式占據位置。
在流動模型下，內聯元素 都會在所處的包含元素內從左到右水平分布顯示。

浮動模型

任何元素在默認情況下是不能浮動的，但可以用 CSS 定義為浮動。例子：#div1{float:left;}

層模型

CSS 定義了一組定位（positioning）屬性來支持層布局模型。

層模型有三種形式：

絕對定位(position: absolute)
相對定位(position: relative)
固定定位(position: fixed)

絕對定位(position: absolute)

如果想為元素設置層模型中的絕對定位，需要設置 position:absolute(表示絕對定位)，這條語句的作用將元素從文檔流中拖出來，然后使用 left、right、top、bottom 屬性相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對于 body 元素，即相對于瀏覽器窗口。

相對定位(position: relative)

如果想為元素設置層模型中的相對定位，需要設置 position:relative（表示相對定位），它通過 left、right、top、bottom 屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按 static(float) 方式生成一個元素(并且元素像層一樣浮動了起來)，然后相對于以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。

簡單來說，就是相對元素原來的位置進行移動，元素本身所占的位置會保留。

固定定位(position: fixed)

設置 position:fixed;。fixed：表示固定定位，與 absolute 定位類型類似，但它的相對移動的坐標是視圖（屏幕內的網頁窗口）本身。由于視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變瀏覽器窗口的顯示大小，因此固定定位的元素會始終位于瀏覽器窗口內視圖的某個位置，不會受文檔流動影響，這與 background-attachment:fixed; 屬性功能相同。

Relative 與 Absolute 組合使用,必須遵守下面規范：

參照定位的元素必須是相對定位元素的前輩元素
參照定位的元素必須加入 position:relative;
定位元素加入 position:absolute，便可以使用 top、bottom、left、right 來進行偏移定位了

例子(HTML 和 CSS 代碼分別為)：

顏色和長度

設置顏色的方法也有很多種：

英文命令顏色，p{color:red;}
RGB顏色，p{color:rgb(133,45,200);} 和 p{color:rgb(20%,33%,25%);}
十六進制顏色，這種顏色設置方法是現在比較普遍使用的方法，其原理其實也是 RGB 設置，但是其每一項的值由 0-255 變成了十六進制 00-ff。p{color:#00ffff;}(當你設置的顏色是 16 進制的色彩值時，如果每兩位的值相同，可以縮寫一半，#0ff)RGB 配色表參考 RGB顏色對照表 - 在線工具 - 開源中國或者 RGB 配色表長度單位總結一下，目前比較常用到px（像素）、em、% 百分比，要注意其實這三種單位都是相對單位。
像素
em，就是本元素給定字體的 font-size 值
% 百分比

設置小技巧

水平居中設置

行內元素。如果被設置元素為文本、圖片等行內元素時，水平居中是通過給父元素設置 text-align:center來實現的。
定寬塊狀元素(塊狀元素的寬度 width 為固定值)。滿足定寬和塊狀兩個條件的元素是可以通過設置“左右 margin”值為 auto 來實現居中的。
不定寬塊狀元素。

加入 table 標簽(包括 <tbody>、<tr>、<td>)，為這個 table 設置“左右 margin 居中”
設置 display: inline方法：與第一種類似，顯示類型設為行內元素，然后使用 text-align:center來實現居中效果，進行不定寬元素的屬性設置。
給父元素設置 float 和 position:relative; left:50%，子元素設置 position:relative 和left: -50% 來實現水平居中。

垂直居中設置

父元素高度確定的單行文本。通過設置父元素的 height 和 line-height 高度一致來實現的。(height: 該元素的高度；line-height: 顧名思義，行高（行間距），指在文本中，行與行之間的基線間的距離 )。
父元素高度確定的多行文本。使用插入 table (包括 tbody、tr、td)標簽，同時設置 vertical-align：middle。

另外，為元素設置以下兩個屬性之一會隱形改變 display 類型，元素的display顯示類型就會自動變為以display:inline-block（塊狀元素）的方式顯示，當然就可以設置元素的 width 和 height 了，且默認寬度不占滿父元素。

position: absolute

float: left 或 float:right

在線咨詢

上一篇：前端需要了解的計算機網絡知識，這一篇就夠了！(圖文
下一篇：最新HTML BroadcastChannel AP

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS文本屬性，讓你的段落更加美觀，前端之路更進一步

文章預告

小海教材

小海聲明

1 CSS樣式引入方式

1.1 外部樣式

1.2 內部樣式

1.3 行內樣式

2 基礎選擇器

2.1 元素選擇器

2.2 類選擇器

2.3 id選擇器

2.4 通配符選擇器

2.5 后代選擇器

2.6 群組選擇器

3 字體樣式

3.1 字體類型

3.2 字體大小

3.3 字體粗細

3.4 字體風格

3.5 字體顏色

4 文本樣式

4.1 首行縮進

4.2 水平對齊

4.3 文本修飾

4.4 大小寫轉換

4.5 行高

4.6 間距

5 邊框樣式

5.1 邊框的寬度

5.2 邊框的外觀

5.3 邊框的顏色

5.4 邊框樣式簡寫

5.5 邊框局部樣式

6 列表樣式

6.1 列表項符號

6.2 列表項圖片

7 表格樣式

7.1 表格標題位置

7.2 表格邊框合并

7.3 表格邊框間距

8 圖片樣式

8.1 圖片大小

8.2 圖片邊框

8.3 圖片對齊

8.4 文字環繞

9 背景樣式

9.1 背景顏色

9.2 背景圖片

10 超鏈接樣式

11 盒子模型

11.1 內容區

11.2 內邊距

11.3 邊框

11.4 外邊距

12 浮動布局

12.1 定義浮動

12.2 清除浮動

13 定位布局

13.1 固定定位

13.2 相對定位

13.3 絕對定位

13.4 靜態定位

TML

CSS

您的項目需求