一、什么是CSS
1.css是web標準中的表現(xiàn)標準，用來設置網(wǎng)頁上的標簽的樣式(尺寸、大小、顏色、位置等等)
2.css代碼/css文件，我們叫樣式表
3.目前，我們使用的是css3。
二、CSS樣式表分類
1.內(nèi)聯(lián)式：將CCS代碼寫在標簽的style屬性中
2.內(nèi)部式：寫在head標簽中的style標簽的內(nèi)容中
3.外聯(lián)式：寫在一個css文件中，通過link標簽來關聯(lián)
注意：內(nèi)部式和外聯(lián)式?jīng)]有固定的優(yōu)先級，誰在最后就執(zhí)行誰
三、css格式
選擇器 {屬性：屬性值；屬性：屬性值}
- 選擇器：用來選擇需要設置樣式的標簽
- 屬性：css屬性
- 屬性值：如果屬性值是數(shù)字，表示的是大小要在后面加px
注意：每個屬性之間要用分號隔開，否則屬性無效
四、選擇器
1.元素選擇器(標簽選擇器):選中所有標簽名對應的標簽
格式：標簽名{ }
2.id選擇器：每個標簽都有一個id屬性，在HTML中，每個標簽的id是唯一的
格式：#id{ }
3. .class選擇器:每個標簽都有一個class屬性
格式：.class名{ }
4通配符：選中所有標簽
格式：*{ }
5.層級選擇器：對嵌套的標簽進行針對性選擇
格式：選擇器1 選擇器2 選擇器3...
6.群組選擇器:對嵌套的標簽進行全部選擇
格式：選擇器1，選擇器2，選擇器3，...
代碼實現(xiàn)：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*0.元素選擇器*/
a{
background-color: yellow;
}
/*1.id選擇器*/
#a1{
/*color: #FF0000;*/
/*color: rgb(0,255,0);*/
color: rgba(0,0,255,0.4);
}
/*2. .class選擇器*/
.c1{
color: brown;
background-color: bisque
}
/*3.通配符 * */
*{
font-size: 50px;
}
/*4.層級選擇器
* 例子：選擇div中的所有a標簽
*/
#all_a a{
color: pink;
}
div div a{
text-decoration: none;
}
/*5.群組選擇器
* 同時選中所有H標簽和span標簽
*/
h1,span{
background-color: #9ACD32;
}
</style>
</head>
<body>
<h1>我是標題</h1>
<span id="">
我是span
</span>
<div id="">
<div id="">
<p></p>
</div>
<div id="all_a">
<a href="">1</a></a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
</div>
</div>
<a id="a1">我是a</a>
<a href="">我是a2</a>
<p class="c1">我是p</p>
<div id="" class="c1">
<a href="">我是a3</a>
</div>
<a href="">我是a4</a>
</body>
</html>
四、偽類選擇器
作用：改變不同操作下元素的式樣，一般使用于超鏈接
格式：選擇器 : 狀態(tài)
1.link:初始狀態(tài)---一次都沒有訪問成功的狀態(tài)
2.visited:超鏈接訪問后的狀態(tài)---已經(jīng)訪問成功后的狀態(tài)
3.hover:鼠標懸停在標簽上的時候對應的狀態(tài)
4.active:鼠標按住的狀態(tài)
代碼實現(xiàn)：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>偽類選擇器</title>
<style type="text/css">
/*同時設置a標簽的所有狀態(tài)*/
a{
color: black;
}
a:link{
color: green;
}
a:visited{
color: pink;
}
a:hover{
color: red;
font-size: 20px;
}
a:active{
font-size: 30px;
}
</style>
</head>
<body>
<a >百度一下</a>
</body>
</html>
