第一章 CSS簡介
CSS (Cascading Style Sheets)是層疊樣式表的縮寫，樣式定義了如何顯示HTML元素。向HTML文檔添加樣式通常有三種方式：外部樣式表、內(nèi)部樣式表、內(nèi)聯(lián)樣式。
（1） 外部樣式表
當(dāng)樣式需要應(yīng)用于很多頁面時(shí)，外部樣式表將是理想的選擇。外部樣式表將樣式定義在.css文件中，在使用外部樣式表的情況下，你可以通過改變一個(gè)文件來改變整個(gè)站點(diǎn)的外觀。每個(gè)頁面使用 <link> 標(biāo)簽鏈接到樣式表。 <link> 標(biāo)簽在（文檔的）頭部，瀏覽器會從文件.css 中讀到樣式聲明，并根據(jù)它來格式文檔。
<head>
<meta charset="UTF-8">
<title>html示例</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
（2） 內(nèi)部樣式表
當(dāng)單個(gè)文檔需要特殊的樣式時(shí)，就應(yīng)該使用內(nèi)部樣式表。你可以使用 <style> 標(biāo)簽在文檔頭部定義內(nèi)部樣式表。
<head>
<meta charset="UTF-8">
<title>html示例</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<style>
body {
background-image:url("images/back40.gif");
}
hr {
color:sienna;
}
p {
margin-left:20px;
}
</style>
</head>
（3） 內(nèi)聯(lián)樣式（慎用）
由于要將表現(xiàn)和內(nèi)容混雜在一起，內(nèi)聯(lián)樣式會損失掉樣式表的許多優(yōu)勢。請慎用這種方法，例如當(dāng)樣式僅需要在一個(gè)元素上應(yīng)用一次時(shí)。
要使用內(nèi)聯(lián)樣式，你需要在相關(guān)的標(biāo)簽內(nèi)使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
第二章 CSS語法
CSS規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明（由鍵值對組成）。
選擇器通常是您需要改變樣式的 HTML元素。每條聲明由一個(gè)屬性和一個(gè)值組成。
屬性（property）是您希望設(shè)置的樣式屬性（style attribute）。每個(gè)屬性有一個(gè)值。屬性和值被冒號分開。
h1 {
font-family: "微軟雅黑";
color: blue;
font-size: 12px;
}
第三章 CSS選擇器
3.1. 元素選擇器
元素選擇器是CSS最常見的選擇器。換句話說，文檔的元素就是最基本的選擇器。
body {
color: blue;
font-size:35px;
display: block;
}
3.2. 分組選擇器
如果多個(gè)元素?fù)碛邢嗤臉邮?，可使用分組選擇器，多個(gè)元素用逗號分隔。
h2, p {
color:gray;
}
說明：如果沒有這個(gè)逗號，那么規(guī)則的含義將完全不同。參見后代選擇器。
3.3. 類選擇器
類選擇器允許以一種獨(dú)立于文檔元素的方式來指定樣式。該選擇器可以單獨(dú)使用，也可以與其他元素結(jié)合使用。
只有適當(dāng)?shù)貥?biāo)記文檔后，才能使用這些選擇器，所以使用這兩種選擇器通常需要先做一些構(gòu)想和計(jì)劃。要應(yīng)用樣式而不考慮具體設(shè)計(jì)的元素，最常用的方法就是使用類選擇器。
（1） 普通類選擇器
語法：類選擇器前面后一個(gè)點(diǎn)（.），后面跟選擇器的名稱。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
.content{
color: black;
}
</style>
</head>
<body>
<div class="content">
This is the first content.
</div>
<p class="content">
This is the second content.
</p>
</body>
</html>
（2） 結(jié)合元素的類選擇器
類選擇器可以結(jié)合元素選擇器來使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
div.content{
color: black;
}
p.content{
color: blue;
}
</style>
</head>
<body>
<div class="content">
This is the first content.
</div>
<p class="content">
This is the second content.
</p>
</body>
</html>
（3） 多類選擇器
在 HTML 中，一個(gè) class 值中可能包含一個(gè)詞列表，各個(gè)詞之間用空格分隔。例如，如果希望將一個(gè)特定的元素同時(shí)標(biāo)記為重要（important）和警告（warning），就可以寫作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
.important {
font-weight:bold;
}
.warning {
font-style:italic;
}
.important.warning {
background:silver;
}
</style>
</head>
<body>
<p class="important warning">
This paragraph is a very important warning.
</p>
</body>
</html>
3.4. id選擇器
id選擇器允許以一種獨(dú)立于文檔元素的方式來指定樣式，使用html元素的id來指定其樣式。
語法：id選擇器以#開頭，后面跟元素的id。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
#content{
color: black;
}
</style>
</head>
<body>
<div id="content">
This is content.
</div>
</body>
</html>
說明：
- id選擇器只能使用一次
- 不能使用詞列表
3.5. 屬性選擇器
屬性選擇器可以根據(jù)元素的屬性及屬性值來選擇元素。
（1） 簡單屬性選擇器
如果希望選擇有某個(gè)屬性的元素，而不論屬性值是什么，可以使用簡單屬性選擇器。
示例1：如果希望把包含標(biāo)題（title）的所有元素字體設(shè)置為藍(lán)色，可以寫作：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
[title] { /*對所有包含title的元素設(shè)置該樣式*/
color: blue;
}
</style>
</head>
<body>
<a title="百度一下">Baidu</a>
<a title="用搜狐，知天下">Sohu</a>
</body>
</html>
示例2：只希望對包含某個(gè)屬性的某類元素設(shè)置對應(yīng)的樣式，可以寫作：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
a[title]{ /*只對a標(biāo)簽包含title的元素設(shè)置該樣式*/
color: blue;
}
</style>
</head>
<body>
<a title="百度一下">Baidu</a>
<span title="用搜狐，知天下" onclick="location.>Sohu</span>
</body>
</html>
示例3：可以根據(jù)多個(gè)屬性進(jìn)行選擇，即同時(shí)具有某些屬性的元素設(shè)置元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
a[href][title]{ /*只對a標(biāo)簽同時(shí)包含href和title屬性的元素設(shè)置該屬性*/
color: orangered;
}
</style>
</head>
<body>
<a title="百度一下">Baidu</a>
<a >Sohu</a>
</body>
</html>
（2） 屬性值選擇器
除了選擇擁有某些屬性的元素，還可以進(jìn)一步縮小選擇范圍，只選擇有特定屬性值的元素。
示例1：希望將指向某個(gè)特定鏈接的標(biāo)簽a變成紅色，可以這樣寫：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
a[]{ /*只對a標(biāo)簽指向http://www.baidu.com的元素設(shè)置該屬性*/
color: orangered;
}
</style>
</head>
<body>
<a title="百度一下">Baidu</a>
<a >Sohu</a>
</body>
</html>
示例2：與簡單屬性選擇器類似，可以把多個(gè)屬性-值選擇器鏈接在一起來選擇一個(gè)標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
a[]{ /*只對a標(biāo)簽指向http://www.baidu.com且title的值為百度一下的元素設(shè)置該屬性*/
color: orangered;
}
</style>
</head>
<body>
<a title="百度一下">Baidu</a>
<a >Sohu</a>
</body>
</html>
（3） 部分屬性值選擇器
如果需要根據(jù)屬性值中的詞列表的某個(gè)詞進(jìn)行選擇，則需要使用波浪號（~）。
示例：假設(shè)想選擇class屬性中包含important的元素，可以用下面這個(gè)選擇器做到這一點(diǎn)：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
p[class~="important"]{ /*將class元素包含important內(nèi)容的p元素設(shè)置該元素*/
color: red;
}
</style>
</head>
<body>
<h3>可以應(yīng)用樣式：</h3>
<p class="important warning">This is a paragraph.</a>
<p class="important">This is a paragraph.</a>
<hr />
<h3>無法應(yīng)用樣式：</h3>
<p class="warning">This is a paragraph.</a>
</body>
</html>
說明：如果忽略了波浪號，則說明需要完成完全值匹配。
部分值屬性選擇器與點(diǎn)號類名記法的區(qū)別：該選擇器等價(jià)于我們在類選擇器中討論過的點(diǎn)號類名記法。也就是說，p.important 和 p[class="important"] 應(yīng)用到HTML文檔時(shí)是等價(jià)的。那么，為什么還要有 "~=" 屬性選擇器呢？因?yàn)樗苡糜谌魏螌傩裕恢皇莄lass。
例如，可以有一個(gè)包含大量圖像的文檔，其中只有一部分是圖片。對此，可以使用一個(gè)基于 title 文檔的部分屬性選擇器，只選擇這些圖片：
img[title~="Figure"] {
border: 1px solid gray;
}
屬性選擇器列表
| 選擇器 | 描述 |
|---|---|
| [attribute] | 用于選取帶有指定屬性的元素。 |
| [attribute=value] | 用于選取帶有指定屬性和值的元素。 |
| [attribute~=value] | 用于選取屬性值中包含指定詞匯的元素。 |
| [attribute^=value] | 匹配屬性值以指定值開頭的每個(gè)元素。 |
| [attribute$=value] | 匹配屬性值以指定值結(jié)尾的每個(gè)元素。 |
| [attribute*=value] | 匹配屬性值中包含指定值的每個(gè)元素。 |
3.6. 后代選擇器
后代選擇器又稱為包含選擇器，可以選擇作為某元素后代的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
h1 strong {
color: red;
}
</style>
</head>
<body>
<h1>百度不會再以<strong>競價(jià)方式</strong>對搜索結(jié)果進(jìn)行排名</h1>
<p>百度不會再以<strong>競價(jià)方式</strong>對搜索結(jié)果進(jìn)行排名.</p>
</body>
</html>
說明：后代選擇器兩個(gè)元素之間的層次間隔可以是無限的。
例如，如果寫作ul em，這個(gè)語法就會選擇從ul元素繼承的所有em元素，而不論em的嵌套層次多深。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
ul em {
color: red;
}
</style>
</head>
<body>
<ul>
<li>List item 1
<ol>
<li>List item 1-1</li>
<li>List item 1-2</li>
<li>List item 1-3
<ol>
<li>List item <em>1-3-1</em></li>
<li>List item <em>1-3-2</em></li>
<li>List item <em>1-3-3</em></li>
</ol>
</li>
<li>List item 1-4</li>
</ol>
</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>
3.7. 子元素選擇器
與后代選擇器相比，子元素選擇器只能選擇作為某元素子元素的元素。如果您不希望選擇任意的后代元素，而是希望縮小范圍，只選擇某個(gè)元素的子元素，請使用子元素選擇器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
h1>strong {
color: red;
}
</style>
</head>
<body>
<div>
<h1>百度推出繼百度百家之后的媒體平臺:<strong>百度發(fā)布平臺</strong></h1>
<h1>百度推出繼百度百家之后的媒體平臺:<em><strong>百度發(fā)布平臺</strong></em></h1>
</div>
</body>
</html>
3.8. 相鄰元素選擇器
相鄰兄弟選擇器可選擇緊接在另一元素后的元素，且二者有相同父元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
div.content > header + p{
color: red;
}
</style>
</head>
<body>
<div class="content">
<header>文章標(biāo)題</header>
<p>
文章內(nèi)容第一段文章內(nèi)容第一段文章內(nèi)容第一段文章內(nèi)容第一段文章內(nèi)容第一段。
</p>
</div>
</body>
</html>
3.9. 偽類
CSS偽類用于向特殊狀態(tài)的選擇器添加特殊效果，
(1) 錨偽類。
a:link 未訪問的鏈接
a:visited 已訪問的鏈接
a:hover 鼠標(biāo)移動(dòng)到鏈接上（此偽類不止限于超鏈接上，其他元素也可使用）
a:active 選定的鏈接
注意：在CSS定義中，a:hover必須被置于a:link和a:visited之后才是有效的；a:active必須被置于a:hover之后才是有效的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
a:link{
color: blue;
}
a:visited{
color: yellowgreen;
}
a:hover{
color: deepskyblue;
}
a:active{
color: red;
}
</style>
</head>
<body>
<a >蘋果官網(wǎng)</a>
<a >小米官網(wǎng)</a>
</body>
</html>
(2) :focus偽類向擁有鍵盤輸入焦點(diǎn)的元素添加樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
input:focus{
background-color: lightyellow;
}
</style>
</head>
<body>
<input type="text" placeholder="請輸入用戶名" id="form-field-userName" />
<input type="password" placeholder="請輸入密碼" id="form-field-password" />
<input type="checkbox" /> 記住我
</body>
</html>
(3) :first-child偽類，匹配其它元素的第一個(gè)子元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
ul > li:first-child{
color: red;
}
</style>
</head>
<body>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</body>
</html>
3.10. 偽元素
CSS偽元素用于向某些選擇器設(shè)置特殊效果。常用的偽元素如下：
(1) :first- line
向文本的首行添加特殊樣式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
p:first-line{
color: red;
}
</style>
</head>
<body>
<p>
第一行內(nèi)容第一行內(nèi)容第一行內(nèi)容第一行內(nèi)容第一行內(nèi)容。<br />
第二行內(nèi)容第二行內(nèi)容第二行內(nèi)容第二行內(nèi)容第二行內(nèi)容。<br />
第三行內(nèi)容第三行內(nèi)容第三行內(nèi)容第三行內(nèi)容第三行內(nèi)容。<br />
</p>
</body>
</html>
(2) :first-line
向文本的首行添加特殊樣式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
p:first-letter {
color: red;
}
</style>
</head>
<body>
<p>ABCD</p>
</body>
</html>
(3) :before
在元素之前添加內(nèi)容。
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
h1:before {
content: url(css/img/logo.png)
}
</style>
</head>
<body>
<h1>上書房</h1>
</body>
</html>
(4) :after
在元素之后添加內(nèi)容。
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
h1:after {
content: url(css/img/logo.png)
}
</style>
</head>
<body>
<h1>上書房</h1>
</body>
</html>
第四章 CSS樣式
4.1. 背景
CSS允許應(yīng)用純色作為背景，也允許使用背景圖像創(chuàng)建相當(dāng)復(fù)雜的效果。
(1) 背景色
使用background-color屬性為元素設(shè)置背景色。這個(gè)屬性接受任何合法的顏色值。
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
.content {
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="content">
<p>文章內(nèi)容</p>
</div>
</body>
</html>
(2) 背景圖
使用background-image屬性為元素設(shè)置背景圖。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
body {
background-image: url(css/img/backgroud.jpg);
}
</style>
</head>
<body>
</body>
</html>
(3) 背景重復(fù)
如果需要在頁面上對背景圖像進(jìn)行平鋪，可以使用background-repeat屬性。屬性值 repeat 導(dǎo)致圖像在水平垂直方向上都平鋪，就像以往背景圖像的通常做法一樣。repeat-x 和 repeat-y 分別導(dǎo)致圖像只在水平或垂直方向上重復(fù)，no-repeat 則不允許圖像在任何方向上平鋪。
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
body {
background-image: url(css/img/backgroud.jpg);
background-repeat: no-repeat; /*repeat-x,repeat-y,no-repeat*/
}
</style>
</head>
<body>
</body>
</html>
(4) 背景定位
可以利用background-position屬性改變圖像在背景中的位置。CSS為background-position屬性提供了3中方式改變圖像在背景中的位置：
- 關(guān)鍵字
可以使用background-position關(guān)鍵字：top、bottom、left、right和center改變圖像在背景中的位置。
<style>
body {
background-image: url(css/img/backgroud.jpg);
background-repeat: no-repeat;
background-position: left; /*top、bottom、left、right、center*/;
}
</style>
- 百分?jǐn)?shù)值
<style>
body {
background-image: url(css/img/backgroud.jpg);
background-repeat: no-repeat;
background-position: 50% 50%;
}
</style>
- 長度值
<style>
body {
background-image: url(css/img/backgroud.jpg);
background-repeat: no-repeat;
background-position: 50px 100px;
}
</style>
(5) 背景關(guān)聯(lián)
如果文檔比較長，那么當(dāng)文檔向下滾動(dòng)時(shí)，背景圖像也會隨之滾動(dòng)。當(dāng)文檔滾動(dòng)到超過圖像的位置時(shí)，圖像就會消失。可以通過background-attachment屬性防止這種滾動(dòng)。通過這個(gè)屬性，可以聲明圖像相對于可視區(qū)是固定的（fixed），因此不會受到滾動(dòng)的影響。
<style>
body {
background-image: url(css/img/backgroud.jpg);
background-repeat: no-repeat;
background-position: 50px 100px;
background-attachment:fixed
}
</style>
關(guān)于背景的所有樣式可聲明在同一個(gè)屬性background中。
<style>
body {
background: orangered url(css/img/backgroud.jpg) no-repeat 50px 100px fixed;
}
</style>
4.2. 文本
CSS文本屬性可定義文本的外觀。通過文本屬性，可以改變文本的顏色、字符間距，對齊文本，裝飾文本，對文本進(jìn)行縮進(jìn)等等。
(1) 縮進(jìn)文本
CSS提供了text-indent屬性實(shí)現(xiàn)對段落文本首行的縮進(jìn)。
<style>
p{
text-indent: 2em;
}
</style>
(2) 水平對齊
使用text-align屬性實(shí)現(xiàn)文本內(nèi)容的對其方式，常用的有4個(gè)值：
left: 文本左對齊
right: 文本右對齊
center: 文本居中對齊
justify: 文本兩端對齊
<style>
p{
text-align: left;
}
</style>
(3) 單詞間隔
使用word-spacing 屬性可以改變單詞之間的標(biāo)準(zhǔn)間隔。其默認(rèn)值normal與設(shè)置值為 0 是一樣的。
p{
word-spacing: 30px;
}
(4) 字母間隔
使用letter-spacing屬性可以改變單詞之間的標(biāo)準(zhǔn)間隔。
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
p.word-spacing {
word-spacing: 5em;
}
p.letter-spacing {
letter-spacing: 5em;
}
</style>
</head>
<body>
<p class="word-spacing">
hello world!
</p>
<p class="letter-spacing">
hello world!
</p>
</body>
</html>
(5) 字符轉(zhuǎn)換
使用text-transform來實(shí)現(xiàn)文本內(nèi)容大小寫的轉(zhuǎn)換。
none: 對文本不做任何修改。
uppercase: 將文本內(nèi)容轉(zhuǎn)換為大寫。
lowercase: 將文本內(nèi)容轉(zhuǎn)換為小寫。
capitalize: 將文本內(nèi)容的每個(gè)單詞第一個(gè)字母轉(zhuǎn)換為大寫。
(6) 文本裝飾
使用text-decoration來實(shí)現(xiàn)文本一些特殊的樣式。
none: 對文本內(nèi)容不追加任何效果。
underline: 對元素內(nèi)容加下劃線。
overline: 對元素內(nèi)容加上劃線。
line-through: 對元素內(nèi)容加刪除線。
(7) 處理空白符
使用white-space處理對源文檔中的空格、換行符和tab字符的處理。
| 值 | 空白符 | 換行符 | 自動(dòng)換行 |
|---|---|---|---|
| pre-line | 合并 | 保留 | 允許 |
| normal | 合并 | 忽略 | 允許 |
| nowrap | 合并 | 忽略 | 不允許 |
| pre | 保留 | 保留 | 不允許 |
| pre-wrap | 保留 | 保留 | 允許 |
4.3. 字體
CSS字體屬性定義文本的字體系列、大小、加粗、風(fēng)格（如斜體）和變形（如小型大寫字母）。
(1) 字體系列
使用font-family屬性定義文本的字體系列。
在CSS中，有兩種不同類型的字體系列名稱：
通用字體系列 - 擁有相似外觀的字體系統(tǒng)組合（比如 "Serif" 或 "Monospace"）
特定字體系列 - 具體的字體系列（比如 "Times" 或 "Courier"）
除了各種特定的字體系列外，CSS 定義了 5 種通用字體系列：
Serif字體
Sans-serif字體
Monospace字體
Cursive字體
Fantasy字體
所有的系統(tǒng)都應(yīng)提供一個(gè)通用字體系列，在用戶代理無法提供與規(guī)則匹配的特定字體時(shí)，就可以選擇一個(gè)候選字體。
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
.font-family1{
font-family: sans-serif;
}
.font-family2{
font-family: "微軟雅黑";
}
.font-family3{
font-family: "宋體"
}
</style>
</head>
<body>
<p class="font-family1">
阿里巴巴
</p>
<p class="font-family2">
阿里巴巴
</p>
<p class="font-family3">
阿里巴巴
</p>
</body>
</html>
(2) 字體風(fēng)格
使用font-style屬性最常用于規(guī)定斜體文本。
該屬性有三個(gè)值：
normal: 文本正常顯示
italic: 文本斜體顯示
oblique: 文本傾斜顯示
(3) 字體加粗
使用font-weight屬性設(shè)置文本的粗細(xì)。使用bold關(guān)鍵字可以將文本設(shè)置為粗體。關(guān)鍵字 100 ~ 900 為字體指定了 9 級加粗度。如果一個(gè)字體內(nèi)置了這些加粗級別，那么這些數(shù)字就直接映射到預(yù)定義的級別，100 對應(yīng)最細(xì)的字體變形，900 對應(yīng)最粗的字體變形。數(shù)字 400 等價(jià)于 normal，而 700 等價(jià)于 bold。
(4) 字體大小
使用font-size屬性設(shè)置文本的大小。有font-size可使用3種方式對字體進(jìn)行大小的設(shè)置。
px: 像素（px）是相對于顯示器屏幕分辨率而言的相對長度單位，但對于IE瀏覽器無法調(diào)整使用px作為單位的字體大小。
em: 相對于當(dāng)前對象內(nèi)文本的字體尺寸，也是相對長度單位。em有兩個(gè)特點(diǎn)，其一、em的值并不是固定的；其二、em會繼承父級元素的字體大小。
任意瀏覽器的默認(rèn)字體高都16px。所有未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。為了簡化font-size的換算，我們在寫CSS的時(shí)候，需要注意兩點(diǎn)：
- body選擇器中聲明Font-size=62.5%；
- 將你的原來的px數(shù)值除以10，然后換上em作為單位；
- 重新計(jì)算那些被放大的字體的em數(shù)值。避免字體大小的重復(fù)聲明。也就是避免1.2 * 1.2= 1.44的現(xiàn)象。
比如說你在#content中聲明了字體大小為1.2em，那么在聲明p的字體大小時(shí)就只能是1em，而不是1.2em, 因?yàn)榇薳m非彼em，它因繼承#content的字體高而變?yōu)榱?em=12px。
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
body {
font-family: sans-serif;
font-size: 62.5%;
}
.content {
font-size: 1.2em;
}
.p1 {
font-size: 1.2em;
}
.p2 {
font-size: 1.2em;
}
</style>
</head>
<body>
<div class="content">
<div class="p1">
<p class="p2">
阿里巴巴
</p>
</div>
<p class="p2">
阿里巴巴
</p>
</div>
</body>
</html>
rem（推薦使用）: rem是CSS3新增的一個(gè)相對單位，這個(gè)單位與em的區(qū)別在于，使用rem為元素設(shè)定字體大小時(shí)，仍然是相對大小，但相對的只是HTML根元素。這個(gè)單位可謂集相對大小和絕對大小的優(yōu)點(diǎn)于一身，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。
4.4. 列表
列表分為無序列表（ul）和有序列表（ol）兩種，在一個(gè)無序列表中，列表項(xiàng)的標(biāo)志是出現(xiàn)在各列表項(xiàng)旁邊的圓點(diǎn)。在有序列表中，標(biāo)志可能是字母、數(shù)字或另外某種計(jì)數(shù)體系中的一個(gè)符號。
(1) 修改列表項(xiàng)的標(biāo)志類型
使用list-style-type屬性，修改用于列表項(xiàng)的標(biāo)志類型。
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
ul{
list-style-type: disc;
}
</style>
</head>
<body>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</body>
</html>
list-style-type屬性值
| 值 | 描述 |
|---|---|
| none | 無標(biāo)記。 |
| disc | 默認(rèn)。標(biāo)記是實(shí)心圓。 |
| circle | 標(biāo)記是空心圓。 |
| square | 標(biāo)記是實(shí)心方塊。 |
| decimal | 標(biāo)記是數(shù)字。 |
| decimal-leading-zero | 0開頭的數(shù)字標(biāo)記。(01, 02, 03, 等。) |
| lower-roman | 小寫羅馬數(shù)字(i, ii, iii, iv, v, 等。) |
| upper-roman | 大寫羅馬數(shù)字(I, II, III, IV, V, 等。) |
| lower-alpha | 小寫英文字母The marker is lower-alpha (a, b, c, d, e, 等。) |
| upper-alpha | 大寫英文字母The marker is upper-alpha (A, B, C, D, E, 等。) |
| lower-greek | 小寫希臘字母(alpha, beta, gamma, 等。) |
| lower-latin | 小寫拉丁字母(a, b, c, d, e, 等。) |
| upper-latin | 大寫拉丁字母(A, B, C, D, E, 等。) |
| hebrew | 傳統(tǒng)的希伯來編號方式 |
| armenian | 傳統(tǒng)的亞美尼亞編號方式 |
| georgian | 傳統(tǒng)的喬治亞編號方式(an, ban, gan, 等。) |
| cjk-ideographic | 簡單的表意數(shù)字 |
| hiragana | 標(biāo)記是：a, i, u, e, o, ka, ki, 等。（日文片假名） |
| katakana | 標(biāo)記是：A, I, U, E, O, KA, KI, 等。（日文片假名） |
| hiragana-iroha | 標(biāo)記是：i, ro, ha, ni, ho, he, to, 等。（日文片假名） |
| katakana-iroha | 標(biāo)記是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名） |
(2) 設(shè)置列表圖標(biāo)
如果不想使用標(biāo)志符，可使用list-style-image屬性為列表添加圖標(biāo)。
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
ul li{
list-style-image: url(css/img/diy/3.png);
}
</style>
</head>
<body>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</body>
</html>
(3) 設(shè)置列表標(biāo)志位置（不常用）
使用list-style-position屬性設(shè)置在何處放置列表項(xiàng)標(biāo)記。
| 值 | 描述 |
|---|---|
| inside | 列表項(xiàng)目標(biāo)記放置在文本以內(nèi)，且環(huán)繞文本根據(jù)標(biāo)記對齊。 |
| outside | 默認(rèn)值。保持標(biāo)記位于文本的左側(cè)。列表項(xiàng)目標(biāo)記放置在文本以外，且環(huán)繞文本不根據(jù)標(biāo)記對齊。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 list-style-position 屬性的值。 |
4.5. 表格
使用CSS來設(shè)置表格的樣式可極大的改善表格的外觀。
(1) 表格邊框
使用border屬性來設(shè)置表格的邊框。
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
table, th, td{
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>性別</th>
<th>公司名稱</th>
</tr>
<tr>
<td>李彥宏</td>
<td>男</td>
<td>百度</td>
</tr>
<tr>
<td>馬云</td>
<td>男</td>
<td>阿里巴巴</td>
</tr>
<tr>
<td>雷軍</td>
<td>男</td>
<td>小米科技</td>
</tr>
</table>
</body>
</html>
(2) 折疊邊框
使用border-collapse屬性設(shè)置是否將表格邊框折疊為單一邊框。
table{
border-collapse: collapse;
}
(3) 表格的寬度與高度
使用width和height屬性定義表格的寬度和高度。
table{
border-collapse: collapse;
width: 100%;
}
th, td{
height: 30px;
}
(4) 表格文本對齊
使用text-align和vertical-align屬性設(shè)置表格中文本的水平與垂直方向的對齊方式。
th, td{
height: 30px;
text-align: right;
vertical-align: bottom;
}
(5) 表格內(nèi)邊距
如需控制表格中內(nèi)容與邊框的距離，可為td和th元素設(shè)置padding屬性。
th, td{
padding:15px;
}
第五章 CSS盒子模型
5.1. 盒子模型概述
CSS的盒子模型（Box Model）規(guī)定了元素框處理元素內(nèi)容、內(nèi)邊距、邊框和外邊距的方式。
元素框的最內(nèi)部分是實(shí)際的內(nèi)容，直接包圍內(nèi)容的是內(nèi)邊距。內(nèi)邊距呈現(xiàn)了元素的背景。內(nèi)邊距的邊緣是邊框。邊框以外是外邊距，外邊距默認(rèn)是透明的，因此不會遮擋其后的任何元素。背景應(yīng)用于由內(nèi)容和內(nèi)邊距、邊框組成的區(qū)域。在 CSS 中，width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會影響內(nèi)容區(qū)域的尺寸，但是會增加元素框的總尺寸。
5.2. 內(nèi)邊距
元素的內(nèi)邊距在邊框和內(nèi)容區(qū)之間。控制該區(qū)域最簡單的屬性是padding屬性。padding 屬性定義元素邊框與元素內(nèi)容之間的空白區(qū)域，接受長度值或百分比值，但不允許使用負(fù)值。
如果希望div元素的各邊都有10個(gè)像素的內(nèi)邊距，設(shè)置方式如下：
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
.content{
background-color: lightcoral;
width: 130px;
padding: 20px;
}
</style>
</head>
<body>
<div class="content">
測試內(nèi)邊距演示內(nèi)容
</div>
</body>
</html>
單邊內(nèi)邊距的屬性
可通過使用下面四個(gè)單獨(dú)的屬性，分別設(shè)置上、右、下、左內(nèi)邊距：
- padding-top
- padding-right
- padding-bottom
- padding-left
5.3. 邊框
元素的邊框 (border) 是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線。CSS border屬性允許你規(guī)定元素邊框的樣式、寬度和顏色。
(1) 邊框樣式
邊框樣式是邊框最重要的一個(gè)方面，這不是因?yàn)闃邮娇刂浦吙虻娘@示（當(dāng)然，樣式確實(shí)控制著邊框的顯示），而是因?yàn)槿绻麤]有樣式，將根本沒有邊框。
使用border-style屬性定義邊框的樣式：
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
.content{
border-style: solid;
width: 200px;
padding: 20px;
}
</style>
</head>
<body>
<div class="content">
測試內(nèi)邊距演示內(nèi)容
</div>
</body>
</html>
border-style樣式
| 值 | 描述 |
|---|---|
| none | 定義無邊框。 |
| hidden | 與 "none" 相同。不過應(yīng)用于表時(shí)除外，對于表，hidden 用于解決邊框沖突。 |
| dotted | 定義點(diǎn)狀邊框。在大多數(shù)瀏覽器中呈現(xiàn)為實(shí)線。 |
| dashed | 定義虛線。在大多數(shù)瀏覽器中呈現(xiàn)為實(shí)線。 |
| solid | 定義實(shí)線。 |
| double | 定義雙線。雙線的寬度等于 border-width 的值。 |
| groove | 定義 3D 凹槽邊框。其效果取決于 border-color 的值。 |
| ridge | 定義 3D 壟狀邊框。其效果取決于 border-color 的值。 |
| inset | 定義 3D inset 邊框。其效果取決于 border-color 的值。 |
| outset | 定義 3D outset 邊框。其效果取決于 border-color 的值。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承邊框樣式。 |
定義單邊樣式
如果您希望為元素框的某一個(gè)邊設(shè)置邊框樣式，而不是設(shè)置所有4個(gè)邊的邊框樣式，可以使用下面的單邊邊框樣式屬性：
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
(2) 邊框?qū)挾?br> 通過border-width屬性為邊框指定寬度。
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
.content{
border-style: solid;
border-width: 1px;
width: 200px;
padding: 20px;
}
</style>
</head>
<body>
<div class="content">
測試內(nèi)邊距演示內(nèi)容
</div>
</body>
</html>
通過下列屬性分別設(shè)置邊框各邊的寬度：
- border-top-width
- border-right-width
- border-bottom-width
- border-left-width
(3) 邊框顏色
使用border-color屬性設(shè)置邊框顏色。
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
.content{
border-style: solid;
border-width: 1px;
border-color: red;
width: 200px;
padding: 20px;
}
</style>
</head>
<body>
<div class="content">
測試內(nèi)邊距演示內(nèi)容
</div>
</body>
</html>
定義單邊顏色
還有一些單邊邊框顏色屬性。它們的原理與單邊樣式和寬度屬性相同：
- border-top-color
- border-right-color
- border-bottom-color
- border-left-color
5.4. 外邊距
圍繞在元素邊框的空白區(qū)域是外邊距。設(shè)置外邊距會在元素外創(chuàng)建額外的“空白”。設(shè)置外邊距的最簡單的方法就是使用 margin 屬性，這個(gè)屬性接受任何長度單位、百分?jǐn)?shù)值甚至負(fù)值。
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
.content1{
border-style: solid;
border-width: 1px;
border-color: red;
width: 200px;
padding: 20px;
margin: 10px;
}
.content2{
border-style: solid;
border-width: 1px;
border-color: red;
width: 200px;
padding: 20px;
margin: 10px;
}
</style>
</head>
<body>
<div class="content1">
測試內(nèi)邊距演示內(nèi)容1
</div>
<div class="content2">
測試內(nèi)邊距演示內(nèi)容2
</div>
</body>
</html>
值復(fù)制
p {
margin: 0.5em 1em 0.5em 1em;
}
p {
margin: 0.5em 1em;
}
通過值復(fù)制，您可以不必重復(fù)地鍵入這對數(shù)字，CSS定義了一些規(guī)則，允許為外邊距指定少于4個(gè)值。規(guī)則如下：
- 如果缺少左外邊距的值，則使用右外邊距的值。
- 如果缺少下外邊距的值，則使用上外邊距的值。
- 如果缺少右外邊距的值，則使用上外邊距的值。
使用下列任何一個(gè)屬性來只設(shè)置相應(yīng)上的外邊距，而不會直接影響所有其他外邊距： - margin-top
- margin-right
- margin-bottom
- margin-left
第六章 CSS定位
CSS有三種基本的定位機(jī)制：普通流、浮動(dòng)和絕對定位。除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中元素的位置由元素在HTML中的位置決定。塊級元素從上到下一個(gè)接一個(gè)地排列，塊級元素之間的垂直距離是由塊級元素的垂直外邊距計(jì)算出來。行內(nèi)元素在一行中水平布置?？梢允褂盟絻?nèi)邊距、邊框和外邊距調(diào)整它們的間距。但是，垂直內(nèi)邊距、邊框和外邊距不影響行內(nèi)框的高度。由一行形成的水平元素稱為行框（LineBox），行框的高度總是足以容納它包含的所有行內(nèi)框。
6.1. 相對定位
設(shè)置為相對定位的元素框會以元素的原始位置為起始點(diǎn)，然后通過設(shè)置垂直或水平位置，讓這個(gè)元素“相對于”它的起點(diǎn)進(jìn)行移動(dòng)。
注意，在使用相對定位時(shí)，無論是否進(jìn)行移動(dòng)，元素仍然占據(jù)原來的空間。因此，移動(dòng)元素會導(dǎo)致它覆蓋其它框。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
.content1{
background-color: #B92C28;
padding: 10px;
margin: 10px;
width: 500px;
}
.content2{
position: relative;
left: 10px;
top: 20px;
background-color: #C8E5BC;
padding: 10px;
margin: 10px;
width: 500px;
}
.content3{
background-color: #FBF069;
padding: 10px;
margin: 10px;
width: 500px;
}
</style>
</head>
<body>
<div class="content1">
內(nèi)容1
</div>
<div class="content2">
內(nèi)容2
</div>
<div class="content3">
內(nèi)容3
</div>
</body>
</html>
定位前
定位后
6.2. 絕對定位
設(shè)置為絕對定位的元素框從文檔流完全刪除，并相對于其包含塊定位，包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關(guān)閉，就好像該元素原來不存在一樣。元素定位后生成一個(gè)塊級框，而不論原來它在正常流中生成何種類型的框。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
.content1{
background-color: #B92C28;
padding: 10px;
margin: 10px;
width: 500px;
}
.content2{
position: absolute;
left: 10px;
top: 20px;
background-color: #C8E5BC;
padding: 10px;
margin: 10px;
width: 500px;
}
.content3{
background-color: #FBF069;
padding: 10px;
margin: 10px;
width: 500px;
}
</style>
</head>
<body>
<div class="content1">
內(nèi)容1
</div>
<div class="content2">
內(nèi)容2
</div>
<div class="content3">
內(nèi)容3
</div>
</body>
</html>
6.3. 浮動(dòng)
浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂Ｔ贑SS中，我們通過float屬性實(shí)現(xiàn)元素的浮動(dòng)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS樣式</title>
<style>
.news {
background-color: lightyellow;
border: solid 1px red;
width: 900px;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="news">
<p>文本內(nèi)容文本內(nèi)容文本內(nèi)容文本內(nèi)容文本內(nèi)容文本內(nèi)容文本內(nèi)容文本內(nèi)容文本內(nèi)容</p>
<div class="clear"></div>
</div>
</body>
</html>
說明：在實(shí)際移動(dòng)互聯(lián)網(wǎng)項(xiàng)目中，頁面的布局最常使用的是Bootstrap框架，而不用自己實(shí)現(xiàn)復(fù)雜的布局。
