HTML中引入CSS 3種方式
調(diào)試
選中相應(yīng)元素后，在灰色的element.style｛｝中直接可以新增樣式
新增的樣式如果和舊樣式屬性重復(fù)，則舊樣式會(huì)自動(dòng)顯示刪除線(xiàn)。
CSS通過(guò)什么作用到HTML元素？
選擇器
五大類(lèi)選擇器
id選擇器特點(diǎn)：
全局唯一
類(lèi)選擇器特點(diǎn)：
*{} .className{} #idName{} element{} 這四種都是基本類(lèi)型選擇器
關(guān)系型 選擇器也是4種
- ~波浪號(hào)能夠選擇其后（不緊跟也是可以的，+ 選擇器號(hào)必須緊跟）的所有指定兄弟元素，中間可以有其它兄弟隔開(kāi)
- +加號(hào)只能選擇緊跟其后的一個(gè)兄弟元素，只能選擇一個(gè)
image.png
偽類(lèi)選擇器分兩種
- 鏈接狀態(tài)化偽類(lèi)
- 結(jié)構(gòu)化偽類(lèi)
鏈接狀態(tài)化偽類(lèi)
:link 鏈接未點(diǎn)擊的狀態(tài)
:hover 鼠標(biāo)移入當(dāng)前鏈接元素的狀態(tài)
:active 鼠標(biāo)點(diǎn)擊（但未釋放）：
:visited 鼠標(biāo)點(diǎn)擊后的狀態(tài)
:focus 應(yīng)用于擁有鍵盤(pán)輸入焦點(diǎn)的元素。
下圖正是點(diǎn)擊未釋放的鏈接
結(jié)構(gòu)化偽類(lèi)
CSS屬性中的顏色值
16進(jìn)制換算過(guò)程
currentColor
transparent:設(shè)置顏色值為透明
border三個(gè)屬性
border四個(gè)方向，三種屬性
border屬性對(duì)四個(gè)邊框
其中有些簡(jiǎn)寫(xiě)：
1個(gè)值：此值代表 上右下左 邊框的值
2個(gè)值 第一個(gè)值代表上下 第二個(gè)值代表左右邊框
3個(gè)值 第一個(gè)值代碼上邊框 第二個(gè)值代表左右邊框 第個(gè)值代表下邊框
4個(gè)值 分析對(duì)應(yīng)上右下左
練習(xí)題：
<!DOCTYPE html>
<html>
<style>
.hover-tips .tips-tt {
width: 170px;
background-color: #ccc;
line-height: 36px;
text-align: center;
border-radius: 5px;
border: 10x ;
}
/*
默認(rèn)二維碼隱藏，鼠標(biāo)滑過(guò)顯示
邊框?yàn)椤?px solid #ccc”
圓角為“5px”
*/
.hover-tips .tips-bd {
border: 1px solid #ccc;
border-radius: 5px;
width: 170px;
height: 170px;
background: url(http://coding.imweb.io/img/p2/qr-bg.png) no-repeat;
box-shadow: rgba(0, 0, 0, .3);
display: none;
}
.hover-tips:hover .tips-bd {
display: block;
}
</style>
<head>
<meta charset="UTF-8">
<title>切換元素顯示</title>
</head>
<body>
<div class="hover-tips">
<p class="tips-tt">app 下載</p>
<div class="tips-bd"></div>
</div>
</body>
</html>
效果如下：
background
CSS Sprite：雪碧圖（音譯），精靈圖
示例代碼：http://coding.imweb.io/demo/p2/sprite.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>雪碧圖的應(yīng)用</title>
<style type="text/css">
.sprite {
display:inline-block;
width: 96px;
height: 96px;
background: url("http://coding.imweb.io/img/p2/sprite-base.png") no-repeat; /* 設(shè)置背景 */
}
.happy {
background-position: 0 0; /* 設(shè)置圖標(biāo)位置 */
}
.cry {
background-position: -192px -96px; /* 設(shè)置圖標(biāo)位置 */
}
</style>
</head>
<body>
<h1>雪碧圖的應(yīng)用</h1>
<h2>開(kāi)心表情</h2>
<div class="sprite happy"></div>
<h2>哭泣表情</h2>
<div class="sprite cry"></div>
</body>
</html>
雪比圖的操作就像我們用放大鏡去看物體，只不過(guò)css是通過(guò)操作css的background-position屬性來(lái)實(shí)現(xiàn)，圖片要左移，所以一般都是負(fù)值才能實(shí)現(xiàn)。
