整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
成 | 語(yǔ)言 | 描述 |
結(jié)構(gòu) | HTML | 網(wǎng)頁(yè)元素和內(nèi)容 |
表現(xiàn) | CSS | 網(wǎng)頁(yè)元素頁(yè)面樣式） |
行為 | JavaScript | 網(wǎng)頁(yè)交互 |
CSS，層疊樣式表（Cascading Style Sheet），給網(wǎng)頁(yè)中的HTML標(biāo)簽設(shè)置樣式
CSS寫在一個(gè)單獨(dú)的.css文件中，通過(guò)link標(biāo)簽在網(wǎng)頁(yè)中引入
<link rel="stylesheet" href="文件路徑">CSS寫在網(wǎng)頁(yè)的head標(biāo)簽中，用style標(biāo)簽包裹
<style>
/* 寫在style標(biāo)簽中的樣式 */
</style>CSS寫在標(biāo)簽的style屬性中
<標(biāo)簽名 style="行內(nèi)樣式寫在這"></標(biāo)簽名>三種CSS樣式引入方式的區(qū)別
引入方式 | 書(shū)寫位置 | 作用范圍 | 使用場(chǎng)景 |
外部樣式 | CSS寫在單獨(dú)的css文件中，通過(guò)link標(biāo)簽引入 | 多個(gè)頁(yè)面 | 項(xiàng)目中 |
內(nèi)部樣式 | CSS寫在head頭部style標(biāo)簽中 | 當(dāng)前頁(yè)面 | 案例演示中 |
行內(nèi)樣式 | CSS寫在標(biāo)簽的style屬性中 | 當(dāng)前標(biāo)簽 | 配合js使用 |
選擇器，就是選取（查找）需要設(shè)置樣式元素的方式
選擇器 {
屬性名: 屬性值;
}屬性名和屬性值合稱為css屬性
通過(guò)元素名稱，選取（查找）相同元素，然后對(duì)相同元素設(shè)置CSS樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>我愛(ài)中國(guó)</p>
<p>我愛(ài)人民</p>
<div>我愛(ài)家鄉(xiāng)</div>
</body>
</html>小結(jié)：
1、無(wú)論嵌套多少層，只要元素名稱相同都會(huì)被找到
通過(guò)類名稱，找到頁(yè)面中所有帶這個(gè)類名稱的元素，然后對(duì)其設(shè)置CSS樣式
類選擇器，也有人叫class選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.color-style {
color: red;
}
</style>
</head>
<body>
<p class="color-style">我愛(ài)中國(guó)</p>
<p>我愛(ài)人民</p>
<div class="color-style">我愛(ài)家鄉(xiāng)</div>
</body>
</html>小結(jié)：
1、所有元素都有class屬性，class屬性的屬性值叫類名
2、類名由數(shù)字、字母、下劃線、中劃線組成，不能以數(shù)字、中劃線開(kāi)頭
3、一個(gè)元素可以有多個(gè)類名，類名之間用空格隔開(kāi)
通過(guò)元素id屬性的屬性值，找到頁(yè)面中帶這個(gè)id屬性值的元素，然后對(duì)其設(shè)置CSS樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#one {
color: red;
}
</style>
</head>
<body>
<p id="one">我愛(ài)中國(guó)</p>
<p id="two">我愛(ài)人民</p>
<div>我愛(ài)家鄉(xiāng)</div>
</body>
</html>小結(jié)：
1、所有元素都有id屬性
2、id屬性值在一個(gè)頁(yè)面中是唯一的
3、一個(gè)元素只能有一個(gè)id屬性值
查找頁(yè)面中所有的元素，然后對(duì)其設(shè)置CSS樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
* {
color: red;
}
</style>
</head>
<body>
<p id="one">我愛(ài)中國(guó)</p>
<p id="two">我愛(ài)人民</p>
<div>我愛(ài)家鄉(xiāng)</div>
</body>
</html>小結(jié)：
1、通常用于網(wǎng)頁(yè)重置樣式，不常用
根據(jù)選擇器查找符合條件的元素，再根據(jù)后代選擇器查找符合條件的元素，然后對(duì)其設(shè)置CSS樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#one p {
color: red;
}
</style>
</head>
<body>
<div id="one">
<p>我愛(ài)中國(guó)</p>
<p>我愛(ài)人民</p>
<div>我愛(ài)家鄉(xiāng)</div>
<div>
<p>我愛(ài)中國(guó)</p>
<p>我愛(ài)人民</p>
</div>
</div>
<div id="two">
<p>我愛(ài)中國(guó)</p>
<p>我愛(ài)人民</p>
<div>我愛(ài)家鄉(xiāng)</div>
<div>
<p>我愛(ài)中國(guó)</p>
<p>我愛(ài)人民</p>
</div>
</div>
</body>
</html>根據(jù)多個(gè)選擇器各自查找符合條件的元素，然后對(duì)其設(shè)置CSS樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p,h3 {
color: red;
}
</style>
</head>
<body>
<p>我愛(ài)中國(guó)</p>
<h3>我愛(ài)人民</h3>
<div>我愛(ài)家鄉(xiāng)</div>
</body>
</html>字體樣式，針對(duì)文字本身樣式
字體相關(guān)的CSS屬性
屬性 | 說(shuō)明 |
font-family | 字體類型 |
font-size | 字體大小 |
font-weight | 字體粗細(xì) |
font-style | 字體風(fēng)格 |
color | 字體顏色 |
語(yǔ)法：
font-family: 字體1,字體2,字體3...;說(shuō)明：
1、font-family屬性可是設(shè)置多個(gè)屬性值，用英文逗號(hào)隔開(kāi)，生效順序是從左到右。瀏覽器默認(rèn)字體類型一般是"宋體"
2、字體類型只有一個(gè)英文單詞，則不需要加上引號(hào)；字體類型是多個(gè)英文單詞或中文的，則需要加上雙引號(hào)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
font-family: Arial;
}
h3 {
font-family: monospace;
}
div {
font-family: "新宋體";
}
</style>
</head>
<body>
<p>我愛(ài)中國(guó)</p>
<h3>我愛(ài)人民</h3>
<div>我愛(ài)家鄉(xiāng)</div>
</body>
</html>語(yǔ)法：
font-size: 數(shù)字 + px說(shuō)明：
1、px是像素單位，單位需要設(shè)置，否則無(wú)效
2、谷歌瀏覽器默認(rèn)文字大小是16px
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
font-size: 18px;
}
div {
font-size: 36px;
}
</style>
</head>
<body>
<p>我愛(ài)中國(guó)</p>
<div>我愛(ài)家鄉(xiāng)</div>
</body>
</html>語(yǔ)法：
font-weight: normal/bold/100~900說(shuō)明：
屬性值 | 說(shuō)明 |
normal | 正常（默認(rèn)值） |
bold | 較粗 |
100~900 | 取100~900九種數(shù)值 |
實(shí)際開(kāi)發(fā)一般會(huì)設(shè)置bold，不設(shè)置默認(rèn)是normal
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
font-weight: normal;
}
div {
font-weight: bold;
}
</style>
</head>
<body>
<p>我愛(ài)中國(guó)</p>
<div>我愛(ài)家鄉(xiāng)</div>
</body>
</html>語(yǔ)法：
font-style: 取值說(shuō)明：
屬性值 | 說(shuō)明 |
normal | 正常（默認(rèn)值） |
italic | 斜體 |
oblique | 斜體 |
不是所有字體都有italic屬性值，如果沒(méi)有italic的，則用oblique
font連寫
語(yǔ)法：
font: style weight size family;說(shuō)明：
1、可以省略前兩項(xiàng)，省略了相當(dāng)于設(shè)置了默認(rèn)值
不常用，作為了解
語(yǔ)法：
color: 顏色值說(shuō)明：
color屬性取值常用有兩種，一種是關(guān)鍵字（比如red、green、blue），另外一種是16進(jìn)制RGB值（#000000，#FFFFFF）
問(wèn)題一：給同一個(gè)元素設(shè)置了相同的屬性樣式，哪個(gè)生效？
答：樣式會(huì)層疊（覆蓋），寫在最后面的會(huì)生效。
問(wèn)題二：html里面有注釋，css有沒(méi)有注釋，如何寫？
<style>
/* 采用元素選擇器給p元素設(shè)置css樣式 */
p {
color: #000000; /* p元素字體顏色為黑色 */
}
</style>文本樣式，針對(duì)段落的排版效果
文本相關(guān)CSS屬性
屬性 | 說(shuō)明 |
text-indent | 首行縮進(jìn) |
text-align | 水平對(duì)齊 |
text-decoration | 文本修繕 |
text-transform | 大小寫轉(zhuǎn)換 |
line-height | 行高 |
letter-spacing | 字母間距 |
word-spacing | 詞間距 |
語(yǔ)法：
text-indent: 像素值說(shuō)明：
縮進(jìn)大小和字體大小是有關(guān)的，縮進(jìn)1個(gè)字的空間等同于1個(gè)字的字體大小。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
font-size: 14px;
text-indent: 28px;
}
</style>
</head>
<body>
<p>舜發(fā)于畎畝之中，傅說(shuō)舉于版筑之間，膠鬲舉于魚(yú)鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動(dòng)心忍性，曾益其所不能。</p>
</body>
</html>語(yǔ)法：
text-align: 取值說(shuō)明：
text-align屬性取值
屬性值 | 說(shuō)明 |
left | 左對(duì)齊（默認(rèn)值） |
center | 居中對(duì)齊 |
right | 右對(duì)齊 |
<!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">生于憂患死于安樂(lè)</p>
<p class="two">生于憂患死于安樂(lè)</p>
<p class="three">生于憂患死于安樂(lè)</p>
</body>
</html>語(yǔ)法：
text-decoration: 取值說(shuō)明：
text-decoration屬性值
屬性值 | 說(shuō)明 |
none | 去除所有的劃線效果（默認(rèn)值） |
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">生于憂患死于安樂(lè)</p>
<p class="two">生于憂患死于安樂(lè)</p>
<p class="three">生于憂患死于安樂(lè)</p>
<p class="four">生于憂患死于安樂(lè)</p>
</body>
</html>語(yǔ)法：
text-transform: 取值說(shuō)明：
text-transform屬性取值
屬性值 | 說(shuō)明 |
none | 無(wú)轉(zhuǎn)換（默認(rèn)值） |
uppercase | 轉(zhuǎn)換為大寫 |
lowercase | 轉(zhuǎn)換為小寫 |
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>語(yǔ)法：
line-height: 取值;說(shuō)明：
1、取值可以是一個(gè)固定的數(shù)值（比如24px），也可以是一個(gè)百分?jǐn)?shù)（比如150%）
line-height: 150%;2、使用font-size屬性和line-height屬性的組合，可以讓行高與字體大小之間保持一定的比例
font-size: 16px;
line-height: 1.53、使用line-height屬性的繼承值。如果父元素的line-height屬性有值，那么子元素及后代元素會(huì)繼承父元素的行高
body {
line-height: 1.5;
}
p {
font-size: 16px;
}行高的設(shè)置要大于字體大小的設(shè)置，才會(huì)顯得好看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
p {
font-size: 16px;
line-height: 24px;
}
</style>
</head>
<body>
<p>舜發(fā)于畎畝之中，傅說(shuō)舉于版筑之間，膠鬲舉于魚(yú)鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動(dòng)心忍性，曾益其所不能</p>
</body>
</html>字間距
語(yǔ)法：
letter-spacing: 像素值說(shuō)明：
letter-spacing屬性用來(lái)設(shè)置兩個(gè)字之間的距離，一個(gè)英文字母或漢字都是當(dāng)做一個(gè)字來(lái)處理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
p {
letter-spacing: 10px;
}
</style>
</head>
<p>are you ok.你好嗎？</p>
<body>
</body>
</html>詞間距
語(yǔ)法：
word-spacing: 像素值;說(shuō)明：
word-spacing屬性用來(lái)設(shè)置英文單詞之間的距離
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
p {
word-spacing: 10px;
}
</style>
</head>
<p>are you ok.你好嗎？</p>
<body>
</body>
</html>元素基本可以定義邊框，邊框樣式由邊框?qū)挾取⑦吙蛲庥^和邊框顏色三個(gè)屬性組成。
屬性 | 說(shuō)明 |
border-width | 邊框的寬度 |
border-style | 邊框的外觀 |
border-color | 邊框的顏色 |
語(yǔ)法：
border-width: 像素值;說(shuō)明：
邊框border-width屬性值是一個(gè)像素值
語(yǔ)法：
border-style: 取值;說(shuō)明：
border-style取值有三個(gè)
屬性值 | 說(shuō)明 |
none | 無(wú)樣式 |
dashed | 虛線 |
solid | 實(shí)線 |
語(yǔ)法：
border-color: 顏色關(guān)鍵字/16進(jìn)制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>語(yǔ)法：
border: border-width border-style border-color;案例：
div {
border: 1px solid red;
}元素都是盒子模型，都是有四條邊的，分別是上、下、左、右。所以又可以為元素某一邊邊設(shè)置邊框樣式
<!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>定義列表項(xiàng)符號(hào)
在HTML中，無(wú)序列表和有序列表是通過(guò)標(biāo)簽ul、ol的type屬性來(lái)定義的
<ol type="a">
<li>my</li>
<li>your</li>
</ol>
<ul type="disc">
<li>my</li>
<li>your</li>
</ul>接觸了css后，得改成list-style-type屬性來(lái)定義。HTML專心負(fù)責(zé)結(jié)構(gòu)，CSS專心負(fù)責(zé)樣式。
語(yǔ)法：
list-style-type: 取值;說(shuō)明：
ol元素的list-style-type屬性值
屬性值 | 說(shuō)明 |
decimal | 阿拉伯?dāng)?shù)字：1、2、3…（默認(rèn)值） |
lower-roman | 小寫羅馬數(shù)字：i、ii、iii… |
upper-roman | 大寫羅馬數(shù)字：I、II、III… |
lower-alpha | 小寫英文字母：a、b、c… |
upper-alpha | 大寫英文字母：A、B、C… |
ul元素的list-style-type屬性值
屬性值 | 說(shuō)明 |
disc | 實(shí)心圓●（默認(rèn)值） |
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>去除列表項(xiàng)符號(hào)
隨著技術(shù)和審美不斷的提高，實(shí)際開(kāi)發(fā)中都是直接去除列表項(xiàng)符號(hào)
<!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>有序列表或無(wú)序列表設(shè)置了list-style-type: none后，樣式都一樣了。
語(yǔ)法：
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不能控制圖片大小，實(shí)際開(kāi)發(fā)中用background來(lái)替代
語(yǔ)法：
caption-side: 取值;說(shuō)明：
caption-side屬性取值
屬性值 | 說(shuō)明 |
top | 標(biāo)題在頂部（默認(rèn)值） |
bottom | 標(biāo)題在底部 |
<!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>學(xué)生成績(jī)</caption>
<tr>
<th>姓名</th>
<th>數(shù)學(xué)</th>
</tr>
<tr>
<td>曹操</td>
<td>85</td>
</tr>
<tr>
<td>劉備</td>
<td>75</td>
</tr>
</table>
</body>
</html>語(yǔ)法：
border-collapse: 取值;說(shuō)明：
border-collapse屬性取值
屬性值 | 說(shuō)明 |
separate | 邊框分開(kāi)，有空隙（默認(rèn)值） |
collapse | 邊框合并，無(wú)空隙 |
<!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>學(xué)生成績(jī)</caption>
<tr>
<th>姓名</th>
<th>數(shù)學(xué)</th>
</tr>
<tr>
<td>曹操</td>
<td>85</td>
</tr>
<tr>
<td>劉備</td>
<td>75</td>
</tr>
</table>
</body>
</html>語(yǔ)法：
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>學(xué)生成績(jī)</caption>
<tr>
<th>姓名</th>
<th>數(shù)學(xué)</th>
</tr>
<tr>
<td>曹操</td>
<td>85</td>
</tr>
<tr>
<td>劉備</td>
<td>75</td>
</tr>
</table>
</body>
</html>語(yǔ)法：
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>語(yǔ)法:
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>水平對(duì)齊
語(yǔ)法：
text-align: 取值;說(shuō)明：
text-align屬性取值
屬性值 | 說(shuō)明 |
left | 左對(duì)齊（默認(rèn)值） |
center | 居中對(duì)齊 |
right | 右對(duì)齊 |
<!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>圖片的水平對(duì)齊屬性設(shè)置是在圖片標(biāo)簽的父標(biāo)簽上實(shí)現(xiàn)的
垂直對(duì)齊
語(yǔ)法：
vertical-align: 取值;說(shuō)明：
vertical-align屬性取值
屬性值 | 說(shuō)明 |
top | 頂部對(duì)齊 |
middle | 中部對(duì)齊 |
baseline | 基線對(duì)齊 |
bottom | 底部對(duì)齊 |
<!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>語(yǔ)法：
float: 取值;說(shuō)明：
float屬性取值
屬性值 | 說(shuō)明 |
left | 元素向左浮動(dòng) |
right | 元素向右浮動(dòng) |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
img {
float: left;
}
</style>
</head>
<body>
<img src="small.png" alt="">
<p>舜發(fā)于畎畝之中，傅說(shuō)舉于版筑之間，膠鬲舉于魚(yú)鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動(dòng)心忍性，曾益其所不能。</p>
</body>
</html>語(yǔ)法：
background-color: 顏色值;說(shuō)明：
顏色值有兩種表示方式，一種是顏色關(guān)鍵字，另外一種是16進(jìn)制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>引入背景圖片
語(yǔ)法:
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>背景圖片重復(fù)
語(yǔ)法：
background-repeat: 取值;說(shuō)明：
background-repeat屬性取值
屬性值 | 說(shuō)明 |
repeat | 在水平方向和垂直方向上同時(shí)平鋪（默認(rèn)值） |
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>背景圖片位置
語(yǔ)法：
background-position: 水平距離 垂直距離通過(guò)像素值定圖片位置
<!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>通過(guò)關(guān)鍵字定位圖片位置
水平方向左left、中center、右right
垂直方向上top、中center、下bottom
通過(guò)水平方向、垂直方向組合出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>背景圖片固定
語(yǔ)法：
background-attachment: 取值;說(shuō)明：
background-attachment屬性取值
屬性值 | 說(shuō)明 |
scroll | 隨元素一起滾動(dòng)（默認(rèn)值） |
fixed | 固定不動(dòng) |
語(yǔ)法：
a {}
a:link {}
a:visited {}
a:hover{}
a:active{}說(shuō)明：
偽類 | 說(shuō)明 |
a:link | a元素未訪問(wèn)時(shí)的樣式 |
a:visited | a元素訪問(wèn)后的樣式 |
a:hover | 鼠標(biāo)經(jīng)過(guò)a元素時(shí)的樣式 |
a:active | 鼠標(biāo)點(diǎn)擊時(shí)的樣式 |
<!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>實(shí)際開(kāi)發(fā)，一般設(shè)置a、a:hover樣式就可以了
每一個(gè)元素都是由內(nèi)容區(qū)、內(nèi)邊距、邊框、外邊距組成
屬性 | 說(shuō)明 |
content | 內(nèi)容區(qū)，可以是文本或圖片 |
padding | 內(nèi)邊距，用于定義內(nèi)容與邊框之間的距離 |
border | 邊框，用于定義元素的邊框 |
margin | 外邊距，用于定義當(dāng)前元素與其他元素之間的距離 |
語(yǔ)法：
width: 像素值;
height: 像素值;
overflow: 取值;說(shuō)明：
overflow屬性值
屬性值 | 說(shuō)明 |
visible | 默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。 |
hidden | 內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見(jiàn)的。 |
scroll | 內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。 |
auto | 如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。 |
inherit | 規(guī)定應(yīng)該從父元素繼承 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>舜發(fā)于畎畝之中，傅說(shuō)舉于版筑之間，膠鬲舉于魚(yú)鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動(dòng)心忍性，曾益其所不能。</p>
</body>
</html>如果要給行內(nèi)元素設(shè)置寬高，則需要給元素設(shè)置display: inline-block屬性
語(yǔ)法：
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>舜發(fā)于畎畝之中，傅說(shuō)舉于版筑之間，膠鬲舉于魚(yú)鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動(dòng)心忍性，曾益其所不能。</p>
</body>
</html>邊框知識(shí)參考2.6
語(yǔ)法：
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>舜發(fā)于畎畝之中，傅說(shuō)舉于版筑之間，膠鬲舉于魚(yú)鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動(dòng)心忍性，曾益其所不能。</p>
<p>舜發(fā)于畎畝之中，傅說(shuō)舉于版筑之間，膠鬲舉于魚(yú)鹽之中，管夷吾舉于士，孫叔敖舉于海，百里奚舉于市。故天將降大任于是人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動(dòng)心忍性，曾益其所不能。</p>
</body>
</html>正常文檔流就是我們沒(méi)有使用浮動(dòng)或者定位去改變的默認(rèn)情況，按照從上到下，從左到右順序的元素布局情況。
語(yǔ)法：
float: 取值說(shuō)明：
屬性值 | 說(shuō)明 |
left | 元素向左浮動(dòng) |
right | 元素向右浮動(dòng) |
<!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>語(yǔ)法：
clear: 取值;說(shuō)明：
clear屬性值
屬性值 | 說(shuō)明 |
left | 清除左浮動(dòng) |
right | 清除右浮動(dòng) |
both | 同時(shí)清除左浮動(dòng)和右浮動(dòng) |
<!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>語(yǔ)法：
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>內(nèi)容區(qū)</p>
......
</div>
</div>
</body>
</html>相對(duì)定位，指的是該元素的位置是相對(duì)于它的原始位置計(jì)算而來(lái)的
語(yǔ)法：
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>把元素定位到任意你想要的位置，完全脫離文檔流
語(yǔ)法：
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>用法：
position: static;說(shuō)明：
元素position屬性的默認(rèn)值是static
、CSS簡(jiǎn)介
1.CSS是什么
CSS，指的是Cascading Style Sheet（層疊樣式表），它是用來(lái)控制網(wǎng)頁(yè)外觀的一門技術(shù)。“HTML控制網(wǎng)頁(yè)的結(jié)構(gòu)，CSS控制網(wǎng)頁(yè)的外觀，JavaScript控制網(wǎng)頁(yè)的行為”
2.CSS引入方式
外部樣式表
內(nèi)部樣式表
行內(nèi)樣式表
3.外部樣式表——指的是把CSS代碼和HTML代碼單獨(dú)放在不同的文件中，然后在HTML文檔中使用link標(biāo)簽來(lái)引用CSS樣式表。
語(yǔ)法< link rel="stylesheet" type="text/css" href="文件路徑" />
說(shuō)明：rel的取值是固定的，即"stylesheet"，表示引入的是一個(gè)樣式表文件（即CSS文件），type屬性的取值也是固定的，即“text/css”，表示這是標(biāo)準(zhǔn)的CSS，href屬性表示CSS文件的路徑
注意：link標(biāo)簽是放在head標(biāo)簽內(nèi)的
4.內(nèi)部樣式表——指的是把HTML代碼和CSS代碼放到同一個(gè)HTML文件中，其中，CSS代碼放在style標(biāo)簽內(nèi)，并且style標(biāo)簽是放在head標(biāo)簽內(nèi)部的
語(yǔ)法
type=“text/css” 是必須添加的，表示這是標(biāo)準(zhǔn)的CSS
5.行內(nèi)樣式表——與內(nèi)部樣式表類似，也是把HTML代碼和CSS代碼放到同一個(gè)HTML文件中。不同的是內(nèi)部樣式表的CSS是在“style標(biāo)簽”內(nèi)定義的，而行內(nèi)樣式表的CSS是在“標(biāo)簽的style屬性”中定義的
兩段代碼的實(shí)現(xiàn)效果是一樣的，都是定義三個(gè)div元素的顏色為紅色。
如果使用內(nèi)部樣式表，樣式只需要寫一遍；但是如果使用行內(nèi)樣式表，每個(gè)元素則必須單獨(dú)寫一遍
行內(nèi)樣式表的缺點(diǎn)：代碼冗余
二、CSS選擇器
1.選擇器是什么——用一種方式把你想要的那個(gè)元素選中
只有把它選中了，你才可以為這個(gè)元素添加CSS樣式
2.最實(shí)用的五種選擇器
CSS選擇器的格式：
3.元素選擇器——選擇指定的相同的元素，而不會(huì)選擇其他元素，然后給相同的元素定義同一個(gè)CSS樣式
語(yǔ)法div { width:100px; height:100px; }
上面例子中的p元素和span元素沒(méi)有被選中
4.id選擇器——為元素設(shè)置一個(gè)id屬性，然后針對(duì)設(shè)置了這個(gè)id的元素定義CSS樣式。注意：在同一個(gè)頁(yè)面中，不允許出現(xiàn)兩個(gè)相同的id。
說(shuō)明：對(duì)于id選擇器，id名前面必須要加上前綴#，否則該選擇器無(wú)法生效
5.class選擇器——也就是“類選擇器”，可以對(duì)相同或者不同的元素定義相同的class屬性，然后針對(duì)擁有同一個(gè)class的元素進(jìn)行CSS樣式操作
語(yǔ)法.box { width:100px; height:100px; }
class名前面必須要加上前綴.（英文點(diǎn)號(hào)），否則該選擇器無(wú)法生效
上面的例子是為不同的元素定義相同的class，從而可以同時(shí)操作它們的CSS樣式
6.后代選擇器——選擇元素內(nèi)部中所有的某一元素，包括子元素和其他后代元素（如孫元素）
語(yǔ)法h3 p {width:100px; height:100px;}
說(shuō)明：父元素和后代元素必須要用空格隔開(kāi)，從而表示選中某個(gè)元素內(nèi)部的后代元素
7.群組選擇器——同時(shí)對(duì)幾個(gè)選擇器進(jìn)行相同的操作（效率高）
語(yǔ)法h3,p {width:100px; height:100px;
說(shuō)明：對(duì)于群組選擇器，兩個(gè)選擇器之間必須要用英文逗號(hào)（,）隔開(kāi)，不然群組選擇器就無(wú)法生效
三、字體樣式
1.字體樣式
類似于Word軟件中對(duì)于字體樣式的設(shè)置，我們可以知道CSS字體樣式的屬性有以下五種：
font-family——字體類型
font-size——字體大小
font-weight——字體粗細(xì)
font-style——字體風(fēng)格
color——字體顏色
2.字體類型（font-family）
語(yǔ)法：font-family：字體1，字體2，...，字體N；
說(shuō)明：font-family可以指定多種字體。使用多種字體時(shí)，將按從左到右的順序排列，并且以英文逗號(hào)（,）隔開(kāi)。瀏覽器默認(rèn)的字體類型一般是“宋體”
舉例：設(shè)置一種字體
舉例：設(shè)置多種字體
為元素設(shè)置多種字體的原因是：在有些字體沒(méi)有安裝的情況下，可以使用下一個(gè)字體，優(yōu)先使用左邊的字體。
3.字體大小（font-size）——采用px為單位
語(yǔ)法font-size：像素值；
說(shuō)明：實(shí)際上，font-size屬性取值有兩種，一種是“關(guān)鍵字”，如small，medium，large等。另外一種是“像素值”，如10px、16px、21px等。不過(guò)在實(shí)際開(kāi)發(fā)中，關(guān)鍵字這種方式基本不會(huì)用
4.字體粗細(xì)（font-weight）
語(yǔ)法font-weight：取值;
font-weight屬性取值有兩種：一種是100~900的“數(shù)值”；另外一種是“關(guān)鍵字”。
其中關(guān)鍵字取值有：normal（正常）、lighter（較細(xì)）、bold（較粗）、bolder（很粗）。對(duì)于實(shí)際開(kāi)發(fā)來(lái)說(shuō)，一般我們只會(huì)用到bold這一個(gè)屬性值，其他的幾乎用不上。
在實(shí)際開(kāi)發(fā)中，不建議使用數(shù)值作為font-weight的屬性取值，一般使用關(guān)鍵字的bold屬性值
5.字體風(fēng)格（font-style）
語(yǔ)法font-style：取值；
font-style屬性取值有：normal（正常）、italic（斜體）、oblique（斜體）
從預(yù)覽效果可以看出，font-style屬性值為italic或oblique時(shí)，頁(yè)面效果是一樣的
但其實(shí)它們的區(qū)別在于：italic是字體的一個(gè)屬性，但并非所有的字體都有這個(gè)屬性。因此對(duì)于有italic屬性的字體，我們使用font-style：italic來(lái)實(shí)現(xiàn)斜體效果；對(duì)于沒(méi)有italic屬性的字體，我們使用font-style：oblique來(lái)實(shí)現(xiàn)。
6.字體顏色（color）
語(yǔ)法color：顏色值;
color屬性取值有兩種：關(guān)鍵字 & 16進(jìn)制RGB值
關(guān)鍵字 如red、green、blue等
16進(jìn)制RGB值——類似于#FBF9D0形式的值
單純靠“關(guān)鍵字”，滿足不了實(shí)際開(kāi)發(fā)的需求。因此引入了“16進(jìn)制RGB值”
記：#000000是黑色，#FFFFFF是白色
7.CSS注釋
語(yǔ)法/* 注釋的內(nèi)容*/
注意：
小技巧：瀏覽器解析CSS是有一定順序的，后面樣式的會(huì)覆蓋前面的樣式。
四、文本樣式
文本樣式和字體樣式的區(qū)別：字體樣式針對(duì)的是“文字本身”的型體效果，而文本樣式針對(duì)的是“整個(gè)段落”的排版效果。字體樣式注重個(gè)體，文本樣式注重整體。
文本樣式屬性
text-indent ——首行縮進(jìn)
text-align ——水平對(duì)齊
text-decoration ——文本修飾
text-transform ——大小寫
line-height ——行高
letter-spacing、word-spacing ——字母間距、詞間距
1.首行縮進(jìn)（text-indent）
p元素的首行是不會(huì)自動(dòng)縮進(jìn)的，在HTML中我們常常使用空格代碼 來(lái)實(shí)現(xiàn)首行縮進(jìn)，但是這種方式冗余代碼很多；在CSS中，我們可以使用text-indent屬性來(lái)定義p元素的首行縮進(jìn)。
語(yǔ)法text-indent：像素值；
說(shuō)明：初學(xué)CSS，建議使用像素（px）作為單位。
中文段落首行一般需要縮進(jìn)兩個(gè)字符，設(shè)置首行縮進(jìn)的像素值是字體大小的兩倍即可
2.水平對(duì)齊（text-align）——控制文本在水平方向上的對(duì)齊方式
語(yǔ)法 text-align：取值；
text-align屬性取值有：
left——左對(duì)齊（默認(rèn)值）
center——居中對(duì)齊
right——右對(duì)齊。
在實(shí)際開(kāi)發(fā)中，我們只會(huì)用到center這一個(gè)，其他兩個(gè)幾乎用不上。另外，text-align屬性不僅對(duì)文本有效，對(duì)圖片（img元素）也有效
3.文本修飾（text-decoration）——定義文本的修飾效果（下劃線、中劃線、頂劃線）
語(yǔ)法text-decoration：取值；
text-decoration屬性取值：
none——去除所有的劃線效果（默認(rèn)值）
underline——下劃線（一般用于強(qiáng)調(diào)文章中的重點(diǎn)）
line-through——中劃線（一般用于促銷）
overline——頂劃線（極少用）
超鏈接（a元素）默認(rèn)樣式有下劃線，可以使用text-decoration:none去除a元素的下劃線
4.大小寫（text-transform）——針對(duì)英文而言，中文不存在大小寫之分
語(yǔ)法 text-transform：取值；
text-transform屬性取值
none——無(wú)轉(zhuǎn)換（默認(rèn)值）
uppercase——轉(zhuǎn)換為大寫
lowercase——轉(zhuǎn)換為小寫
capitalize——將每個(gè)英文單詞首字母轉(zhuǎn)換為大寫
5.行高（line-height）——控制每行文本的高度，與“行間距”是完全不一樣的概念
語(yǔ)法line-height：像素值；
6.間距（letter-spacing & word-spacing）
字間距（letter-spacing）——調(diào)整兩個(gè)字之間的距離
語(yǔ)法letter-spacing：像素值；
注意：每個(gè)中文漢字都被當(dāng)成一個(gè)“字”，而每個(gè)英文字母也當(dāng)做一個(gè)“字”
詞間距（word-spacing）——定義兩個(gè)單詞之間的距離（只針對(duì)英文單詞而言）
語(yǔ)法word-spacing：像素值；
在實(shí)際開(kāi)發(fā)中，我們很少去定義中文網(wǎng)頁(yè)中的字間距以及詞間距，letter-spacing和word-spacing只會(huì)用于英文網(wǎng)頁(yè)。這兩個(gè)我們平時(shí)幾乎用不上
五、邊框樣式
1.邊框樣式屬性
邊框?qū)挾龋╞order-width）：取值是一個(gè)像素值
邊框外觀（border-style）：none（無(wú)樣式）、dashed（虛線）、solid（實(shí)線）
邊框顏色（border-color）：關(guān)鍵字、16進(jìn)制RGB值
想要為一個(gè)元素定義邊框樣式，必須要同時(shí)設(shè)置這三個(gè)屬性才會(huì)有效果
簡(jiǎn)寫形式：border：2px solid red；
2.局部樣式
一個(gè)邊框元素其實(shí)有四條邊（上、下、左、右）前面我們學(xué)習(xí)的是四條邊的整體樣式，現(xiàn)在來(lái)學(xué)習(xí)對(duì)某一條邊進(jìn)行單獨(dú)設(shè)置。
上邊框（border-top）
border-top-width: 2px;
border-top-style: solid;
border-top-color: red;
下邊框（border-bottom）
border-bottom-width: 2px;
border-buttomstyle: solid;
border-buttom-color: red;
左邊框（border-left）
border-left-width: 2px;
border-left-style: solid;
border-left-color: red;
右邊框（border-right）
border-right-width: 2px;
border-right-style: solid;
border-right-color: red;
簡(jiǎn)寫形式：border-right：2px solid red;
去除下邊框：（以下三個(gè)是等價(jià)的）
六、列表樣式
1.列表項(xiàng)符號(hào)（list-style-type）
在HTML中，我們使用type屬性來(lái)定義有序列表和無(wú)序列表的列表項(xiàng)符號(hào)，但是我們說(shuō)過(guò)，結(jié)構(gòu)和樣式應(yīng)該是分離的，所以在CSS中，我們將使用list-style-type屬性來(lái)定義列表項(xiàng)符號(hào)
語(yǔ)法list-style-type：取值；
說(shuō)明：list-style-type屬性是針對(duì)ol或者ul元素的，而不是li元素。
list-style-type屬性取值（有序列表）
decimal——阿拉伯?dāng)?shù)字：1，2，3…（默認(rèn)值）
lower-roman——小寫羅馬數(shù)字：i、ii、iii…
upper-roman——大寫羅馬數(shù)字：I、II、III…
lower-alpha——小寫英文字母：a、b、c…
upper-alpha——大寫英文字母：A、B、C…
list-style-type屬性取值（無(wú)序列表）
disc——實(shí)心圓●（默認(rèn)值）
circle——空心圓○
square——正方形■
去除列表項(xiàng)符號(hào)
語(yǔ)法list-style-type：none；
2.列表項(xiàng)圖片（list-style-image）——使用圖片來(lái)代替列表項(xiàng)符號(hào)
語(yǔ)法list-style-image：url（圖片路徑）；
在實(shí)際開(kāi)發(fā)中，我們會(huì)使用更為高級(jí)的字體圖標(biāo)（iconfont）技術(shù)來(lái)實(shí)現(xiàn)列表項(xiàng)圖片
七、表格樣式
1.表格標(biāo)題位置（caption-side）
語(yǔ)法caption-side：取值；
caption-side屬性取值：
top——標(biāo)題在頂部（默認(rèn)）
bottom——標(biāo)題在底部
如果想要定義表格標(biāo)題的位置，在table或caption這兩個(gè)元素的CSS中定義caption-side屬性
2.表格邊框合并（border-collapse）——去除表格加入邊框后單元格之間的空隙
語(yǔ)法border-collapse：取值；
border-collapse屬性取值：
separate——邊框分開(kāi)，有空隙（默認(rèn)值）
collapse——邊框合并，無(wú)空隙
border-collapse屬性也是在table元素中定義的table{border-collapse: collapse;}
3.表格邊框間距（border-spacing）
語(yǔ)法border-spacing：像素值；
border-spacing屬性也是在table元素中定義的table{border-spacing：8px;}
八、圖片樣式
1.圖片大小——使用width和height這兩個(gè)屬性來(lái)定義圖片的大小
語(yǔ)法
在實(shí)際開(kāi)發(fā)中，需要使用多大的圖片，就用Photoshop制作多大的圖片。不建議使用一張大圖片，然后再借助width和weight來(lái)改變大小。
2.圖片邊框
語(yǔ)法border：1px solid red；
在“邊框樣式”中我們已經(jīng)詳細(xì)介紹了border屬性
3.圖片對(duì)齊
水平對(duì)齊
語(yǔ)法text-align：取值（left、center、right）；
注意：圖片的水平對(duì)齊不是在img元素中定義的，是在父元素中進(jìn)行水平對(duì)齊的
text-align屬性一般只用于兩個(gè)地方：文本水平對(duì)齊和圖片水平對(duì)齊
垂直對(duì)齊
語(yǔ)法vertical-align：取值；
vertical-align屬性取值
top（頂部對(duì)齊）
middle（中部對(duì)齊）
baseline（基線對(duì)齊）
bottom（底部對(duì)齊）
4.文字環(huán)繞——初識(shí)float
圖文混排，指的是文字環(huán)繞著圖片進(jìn)行布局
語(yǔ)法img{float：取值；}
float屬性取值
left——元素向左浮動(dòng)
right——元素向右浮動(dòng)
九、背景樣式
1.背景顏色（background-color）
語(yǔ)法background-color：顏色值（關(guān)鍵字、16進(jìn)制RGB值）；
兩種顏色取值
color&background-color的區(qū)別：
color屬性用于定義“文本顏色”，而background-color屬性用于定義“背景顏色”
2.背景圖片（background-image）
語(yǔ)法background-image：url（圖片路徑）；
說(shuō)明：跟引入圖片（即image標(biāo)簽）一樣，引入背景圖片也需要給出圖片路徑才可以顯示
注意：我們需要為div元素添加width和height，背景圖片才會(huì)顯示出來(lái)
3.背景圖片重復(fù)（background-repeat）
語(yǔ)法background-repeat：取值；
background-repeat屬性取值：
repeat——在水平方向和垂直方向同時(shí)平鋪（默認(rèn)值）
repeat-x——只在水平方向（x軸）上平鋪
repeat-y——只在垂直方向（y軸）上平鋪
no-repeat——不平鋪
注意：元素的寬度和高度必須大于背景圖片的寬度和高度，才會(huì)有重復(fù)效果
4.背景圖片的位置（background-position）
語(yǔ)法background-position：像素值/關(guān)鍵字；
像素值——要設(shè)置水平方向和垂直方向的值（像素值）
例如background-position：12px 24px;表示背景圖片與該元素左上角的水平方向距離為12px，垂直方向距離為24px。水平距離和垂直距離這兩個(gè)數(shù)值之間要用空格隔開(kāi)
關(guān)鍵字——也要同時(shí)設(shè)置水平方向和垂直方向的值（關(guān)鍵字）
語(yǔ)法background-position：水平距離 垂直距離；
關(guān)鍵字取值
top left——左上
top center——靠上居中
top right——右上
left center——靠左居中
center center——正中
right center——靠右居中
bottom left——左下
bottom center——靠下居中
bottom right——右下
5.背景圖片固定（background-attachment）——定義背景圖片是隨元素一起滾動(dòng)還是固定不動(dòng)
語(yǔ)法background-attachment：取值；
scroll——隨元素一起滾動(dòng)（默認(rèn)值）
fixed——固定不動(dòng)
十、超鏈接樣式
1.超鏈接偽類
默認(rèn)情況下：字體為藍(lán)色，帶有下劃線。
鼠標(biāo)點(diǎn)擊時(shí)：字體為紅色，帶有下劃線。
鼠標(biāo)點(diǎn)擊后：字體為紫色，帶有下劃線。
在CSS中，我們可以使用“超鏈接偽類”來(lái)定義超鏈接在鼠標(biāo)點(diǎn)擊的不同時(shí)期的樣式。
語(yǔ)法
注意：定義這四個(gè)偽類，必須按上面的順序進(jìn)行，否則瀏覽器無(wú)法正常顯示這四種樣式
link樣式表示的是a元素從未被訪問(wèn)過(guò)。
2.深入了解超鏈接偽類
我們沒(méi)有必要定義四種狀態(tài)下的樣式，在實(shí)際開(kāi)發(fā)中，我們只會(huì)用到兩種狀態(tài)：未訪問(wèn)時(shí)狀態(tài)和鼠標(biāo)經(jīng)過(guò)狀態(tài)。而對(duì)于未訪問(wèn)狀態(tài)，我們可以直接對(duì)a元素定義，沒(méi)必要使用a:link。
語(yǔ)法
事實(shí)上，對(duì)于超鏈接偽類來(lái)說(shuō)，我們只需要記住a:hover這一個(gè)就夠了，因?yàn)樵趯?shí)際開(kāi)發(fā)中也只會(huì)用到這一個(gè)。
3.深入了解：hover
hover偽類不只限用于a元素，hover偽類可以定義任何一個(gè)元素在鼠標(biāo)經(jīng)過(guò)時(shí)的樣式！
語(yǔ)法元素：hover{...}
4.鼠標(biāo)樣式
瀏覽器鼠標(biāo)樣式——cursor（11種）
語(yǔ)法cursor：取值；
cursor屬性取值（常用的三種）
default（默認(rèn)值）——鼠標(biāo)默認(rèn)樣式
pointer——鼠標(biāo)手狀樣式
text——鼠標(biāo)文本樣式
自定義鼠標(biāo)樣式
語(yǔ)法cursor：url（圖片地址），屬性值；
說(shuō)明：這個(gè)“圖片里地址”是鼠標(biāo)圖片地址，其中鼠標(biāo)圖片后綴名一般都是.cur，可以使用Photoshop來(lái)制作。
十一、盒子模型
頁(yè)面中，所有的元素都可以看成一個(gè)盒子
1.盒子模型的組成部分
內(nèi)容區(qū)——CSS盒子模型的中心
內(nèi)邊距——內(nèi)容區(qū)和邊框之間的距離
外邊距——兩個(gè)盒子之間的距離
邊框
2.寬和高（width和height）
元素的寬度和高度是針對(duì)內(nèi)容區(qū)而言的。
只有塊元素才可以設(shè)置width和height，行內(nèi)元素是無(wú)法設(shè)置width和height的
3.邊框（border）
簡(jiǎn)寫形式（寬度、外觀，顏色）
border：1px solid red；
4.內(nèi)邊距（padding）
內(nèi)邊距分為四個(gè)方向：上、右、下、左（順時(shí)針?lè)较颍?/p>
padding-top：像素值；
padding-right：像素值；
padding-bottom：像素值；
padding-left：像素值；
padding簡(jiǎn)寫形式
padding：像素值；表示四個(gè)方向的內(nèi)邊距
padding：像素值1 像素值2；表示上下、左右邊距
padding：像素值1 像素值2 像素值3 像素值4；上、右、下、左（順時(shí)針）
5.外邊距（margin）
外邊距分為四個(gè)方向：上、右、下、左（順時(shí)針?lè)较颍?/p>
margin-top：像素值；
margin-right：像素值；
margin-bottom：像素值；
margin-left：像素值；
外邊距指的是兩個(gè)盒子之間的距離，它可能是子元素與父元素之間的距離，也可能是兄弟元素之間的距離。只有當(dāng)我們加入其它元素當(dāng)參考對(duì)象時(shí)，才能看到效果。
當(dāng)既有父元素，也有兄弟元素時(shí)，則這個(gè)方向的margin就是相對(duì)于兄弟元素而言，如果沒(méi)有兄弟元素，則相對(duì)于父元素而言
margin簡(jiǎn)寫形式與padding一樣
二十二、浮動(dòng)布局
1.正常文檔流&脫離文檔流
正常文檔流——默認(rèn)情況下的HTML文檔結(jié)構(gòu)
脫離文檔流——脫離正常文檔流，使用浮動(dòng)和定位去改變
2.浮動(dòng)——float
float屬性取值
left——元素向左浮動(dòng)
right——元素向右浮動(dòng)
3.清除浮動(dòng)——clear
clear屬性取值
left——清除左浮動(dòng)
right——清除右浮動(dòng)
both——同時(shí)清除左浮動(dòng)和有浮動(dòng)（常用）
二十三、定位布局
浮動(dòng)布局比較靈活，但是不容易控制
定位布局精準(zhǔn)定位頁(yè)面中的元素，但是缺乏靈活性
布局定位的四種方式：
固定定位（fixed）
相對(duì)定位（relative）
絕對(duì)定位（absolute）
靜態(tài)定位（static）——默認(rèn)情況下
這四種方式都是通過(guò)position屬性來(lái)實(shí)現(xiàn)的
1.固定定位：fixed——指的是被固定的元素不會(huì)隨著滾動(dòng)條的拖動(dòng)而改變位置
語(yǔ)法：
position：fixed；
top：像素值；
bottom：像素值；
left：像素值；
right：像素值；
這四個(gè)屬性不一定全部都用到，一般只會(huì)用到其中兩個(gè)，參考對(duì)象是瀏覽器的四條邊
2.相對(duì)定位：relative——指的是該元素的位置是相對(duì)于它的原始位置計(jì)算而來(lái)的
語(yǔ)法：
position：relative；
top：像素值；
bottom：像素值；
left：像素值；
right：像素值；
這四個(gè)屬性不一定全部都用到，一般只會(huì)用到其中兩個(gè)，參考對(duì)象是該元素的原始位置
3.絕對(duì)定位：absolute（使用最廣泛）
語(yǔ)法：
position：absolute；
top：像素值；
bottom：像素值；
left：像素值；
right：像素值；
這四個(gè)屬性不一定全部都用到，一般只會(huì)用到其中兩個(gè)，參考對(duì)象是瀏覽器的四條邊；
一個(gè)元素變成了絕對(duì)定位元素，這個(gè)元素就完全脫離文檔流了，即這個(gè)元素浮于其他元素上面，獨(dú)立出來(lái)
總結(jié)：默認(rèn)情況下，固定定位和絕對(duì)定位的位置是相對(duì)于瀏覽器而言，而相對(duì)定位的位置是相對(duì)原始位置而言。
————————————————
版權(quán)聲明：本文為CSDN博主「MOSIMIN」的原創(chuàng)文章，遵循CC 4.0 by-sa版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
過(guò)CSS文本裝飾可以為文本添加裝飾線、為裝飾線設(shè)置顏色、為裝飾線指定風(fēng)格、為裝飾線設(shè)置厚度等效果。
為文本添加裝飾線通過(guò) text-decoration-line 屬性實(shí)現(xiàn)，可以結(jié)合一個(gè)以上的值，如上劃線和下劃線，來(lái)顯示文本上方和下方的線條。具體的值有三個(gè)：
overline，在文本上方添加線條修飾。
line-through，在文本中間添加線條修飾，實(shí)現(xiàn)了刪除線的效果。
underline，在文本下方添加線條修飾，實(shí)現(xiàn)了下劃線的效果。
我們來(lái)做個(gè)例子。
打開(kāi)編輯器，在 005 文件夾下創(chuàng)建 decoration.html 文件，構(gòu)建好基本代碼。
添加 h1，h2，h3，p 四個(gè)元素。分別填入一些文本。
在 005 文件夾下再創(chuàng)建一個(gè) mystyle-3.css 文件，
定義 h1 選擇器，聲明樣式屬性 text-decoration-line，值為 overline。
定義 h2 選擇器，也聲明樣式屬性 text-decoration-line，值為 line-through。
定義 h3 選擇器，再聲明樣式屬性 text-decoration-line，值為 underline。
回到頁(yè)面，通過(guò) link 元素引入 mystyle-3.css 這個(gè)外部樣式。
在瀏覽器上預(yù)覽效果，我們看：上邊線、刪除線和下劃線就做好了！
實(shí)際上，可以同時(shí)給文本添加多個(gè)線條，實(shí)現(xiàn)方法是給 text-decoration-line
[?dek??re??n】屬性設(shè)置多個(gè)值，每個(gè)值通過(guò)空格分開(kāi)。
在 mystyle-3.css 再定義一個(gè) p 選擇器，聲明樣式屬性 text-decoration-line，值寫為 overline underline （讀作overline 空格 underline ）。
看一下效果，段落被添加了兩條裝飾線。
有的小伙伴還記得，給文本添加鏈接后，瀏覽器會(huì)默認(rèn)給這個(gè)文本添加一個(gè)下劃線。所以，添加了鏈接的文本就不要使用 underline 下劃線裝飾了。
為文本設(shè)置裝飾線的顏色通過(guò) text-decoration-color 屬性實(shí)現(xiàn)，屬性值為任意合法的顏色值。
給 h1 元素設(shè)置 text-decoration-color 屬性，顏色值設(shè)置為 red。再快速的給 h2，h3，p 元素設(shè)置 text-decoration-color 屬性，值分別為 blue，green，purple。
我們看，線條都有了顏色。
為裝飾線指定風(fēng)格通過(guò) text-decoration-style 屬性實(shí)現(xiàn)，屬性值有五個(gè)：
solid，實(shí)線。
double，雙實(shí)線。
dotted，圓點(diǎn)線。
dashed[d??t]，虛線。
wavy[?we?vi]，波浪線。
為了演示方便，在 html 中再添加一個(gè)標(biāo)題 h4，填入一些文本，在 css 中將全部元素的 text-decoration-line 樣式屬性都設(shè)置為 underline。再定義一個(gè) h4 選擇器，聲明樣式 text-decoration-line: underline。
給 h1， h2，h3，h4，p 全部添加 text-decoration-style 屬性，值分別為 solid，double，dotted，dashed[d??t]，wavy。
這樣，各種線條的風(fēng)格就設(shè)置好了！
通過(guò) text-decoration-thickness 屬性為線條設(shè)置厚度，也就是線條的粗細(xì)。屬性值有三種設(shè)置方法：
auto， 默認(rèn)值，這個(gè)值是不確定的，和所修飾的文字大小有關(guān)系。
px，像素大小，是一個(gè)絕對(duì)值。比如 5px。
%，是一個(gè)相對(duì)值，根據(jù)修飾文字的高度計(jì)算出來(lái)。比如 25%。
在 h1 元素上聲明樣式屬性 text-decoration-thickness，值為 auto。在 h2，h3 上也聲明這個(gè)樣式屬性，值分別為 5px，50%。
在瀏覽器里仔細(xì)觀察，h1 上的下劃線厚度是瀏覽器給的默認(rèn)值。h2 上的下劃線厚度是 5px。h3 上的下劃線厚度為文字高度的一半。
回到樣式表代碼，我們分析一下：每個(gè)文本修飾的屬性名，均為三個(gè)單詞連接起來(lái)的，這樣寫起來(lái)比較啰嗦，能不能簡(jiǎn)化一下呢？可以的！
h1 {
/* text-decoration-line: overline; */
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: solid;
text-decoration-thickness: auto;
}
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
