CSS是web標(biāo)準(zhǔn)中的表現(xiàn)標(biāo)準(zhǔn)梨撞，主要用來對網(wǎng)頁中的內(nèi)容設(shè)置布局和樣式
通過：
選擇器{屬性名1：屬性值1残家；屬性名2：屬性值2...}
的方式來進(jìn)行設(shè)置
選擇器是想要設(shè)置樣式的標(biāo)簽
選擇器分為：
元素選擇器(標(biāo)簽選擇器)
id選擇器
class選擇器(類選擇器)
*通配符
群組選擇器
層級選擇器(后代選擇器)
選擇器的權(quán)重：
通配符：0001(1)
元素選擇器：0001(1)
class選擇器：0010(2)
id選擇器：0100(4)
群組選擇器：分開看每個(gè)選擇器的權(quán)重
后代選擇器：用空格分開的所有選擇器的權(quán)重之和
01 什么是CSS
1.什么是CSS(層疊樣式表腔呜，簡稱樣式表)
CSS是web標(biāo)準(zhǔn)中的表現(xiàn)標(biāo)準(zhǔn)害晦，主要用來設(shè)置網(wǎng)頁中內(nèi)容的布局和樣式
2.怎么寫CSS(語法)
a.語法
選擇器{屬性名1：屬性值1设拟；屬性名2：屬性值2...}
b.說明
選擇器 - 選中想要設(shè)置樣式的標(biāo)簽
{} - 固定寫法
屬性 - 屬性名和屬性值用冒號連接蛮瞄，多個(gè)屬性之間用分號隔開(如果沒有分號置济，會(huì)導(dǎo)致后面的樣式都無效)
屬性名必須是CSS提供的屬性(大概兩百多個(gè))
屬性值：表示大小的數(shù)值必須加單位解恰，px - 像素，em - 空格數(shù)浙于；也可以使用百分百(相對父標(biāo)簽)护盈，100%，20%
c.常用屬性
color - 字體顏色
background-color - 背景顏色
font-size - 字體大小
width - 寬度
height - 高度
3.CSS寫在哪兒
a.內(nèi)聯(lián)樣式表：將樣式表寫在標(biāo)簽的style屬性中羞酗；注意腐宋，這種樣式表不需要寫"選擇器{}"，直接給屬性賦值
b.內(nèi)部樣式表：將樣式表寫在style標(biāo)簽中(這個(gè)標(biāo)簽可以放在head中檀轨，也可以放在body中)
c.外部樣式表：將樣式表寫在一個(gè)CSS文件中胸竞，然后在head中通過link導(dǎo)入
內(nèi)聯(lián)樣式表不管在什么情況下，優(yōu)先級都是最高的
內(nèi)部樣式和外部樣式参萄，誰后寫卫枝，誰的優(yōu)先級高
4.CSS中的值
顏色：顏色的英文單詞，#16進(jìn)制顏色值讹挎，rgb(255,255,255)校赤，rgba(紅吆玖，綠，藍(lán)马篮，透明度)沾乘；透明度的范圍：0-1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--3.外部樣式表
link標(biāo)簽 - 導(dǎo)入外部文件
rel屬性 - 導(dǎo)入的文件的作用，stylesheet->樣式表积蔚，icon->設(shè)置網(wǎng)頁圖標(biāo)
type屬性 - 導(dǎo)入的文件的類型說明意鲸，類型/文件后綴
text/css - 導(dǎo)入一個(gè)文本文件烦周，文件后綴是css
href屬性 - 文件路徑
-->
<!--導(dǎo)入一個(gè)外部樣式表-->
<link rel="stylesheet" type="text/css" href="css/css基礎(chǔ).css"/>
<!--設(shè)置網(wǎng)頁圖標(biāo)-->
<link rel="icon" type="img/ico" href="img/aaa.ico"/>
<!--2.內(nèi)部樣式表-->
<style type="text/css">
/*在這兒寫CSS代碼*/
div{
background-color: darkgray;
}
/*一個(gè)style標(biāo)簽中可以寫多個(gè)樣式表*/
p{
color: cornflowerblue;
}
</style>
</head>
<body>
<!--1.內(nèi)聯(lián)樣式表-->
<div style="color: rgba(0,255,0,1);font-size: 40px;background-color: lightcyan;">
我是div1
div1
</div>
<p>我是段落</p>
<div id="">
我是div2
</div>
<h1>我是標(biāo)題</h1>
</body>
</html>
02 選擇器
選擇器(選中標(biāo)簽)
1.元素選擇器(標(biāo)簽選擇器)
直接將標(biāo)簽名作為選擇器尽爆，選中所有指定標(biāo)簽
例如：div{},p{},a{}...
2.id選擇器
將標(biāo)簽的id屬性值前面加#作為選擇器，選中id屬性值是指定的值的標(biāo)簽
注意：一個(gè)頁面中id值要唯一(不同標(biāo)簽的id值不一樣)
例如：#p2{}
3.class選擇器(類選擇器)
將標(biāo)簽的class屬性值前面加.作為選擇器鸣皂，選中所有class屬性值是指定的值的標(biāo)簽
4.*(通配符)
直接將*作為選擇器导俘，選中當(dāng)前頁面中所有的標(biāo)簽
例如：*{}
5.群組選擇器
將多個(gè)選擇器用逗號隔開作為一個(gè)選擇器易迹，選中每個(gè)單獨(dú)的選擇器選中的所有標(biāo)簽
例如：a,p{} - 選中所有的a標(biāo)簽和p標(biāo)簽
#p1,div{} - 選中id值是p1的標(biāo)簽和所有的div標(biāo)簽
.C1,#p1,a{} - 選中所有class值是C1和id值是p1和所有a標(biāo)簽
6.層級選擇器(后代選擇器)
將多個(gè)選擇器用空格隔開作為一個(gè)選擇器，按層級選中最后一個(gè)選擇器選中的標(biāo)簽
例如：div .c1{} - 選中所有在div標(biāo)簽中的class是c1的標(biāo)簽
.c .c2 #d1{} - 選中在class是c1中class是c2中id是d1的標(biāo)簽
7.選擇器的權(quán)重
不同的選擇器的權(quán)重值不一樣幅狮，權(quán)重值越大，優(yōu)先級越高株灸。在權(quán)重相同的時(shí)候崇摄，誰后寫誰優(yōu)先級高。
不管什么情況慌烧，內(nèi)聯(lián)樣式優(yōu)先級最高
通配符：0001(1)
元素選擇器：0001(1)
class選擇器：0010(2)
id選擇器：0100(4)
群組選擇器：分開看每個(gè)選擇器的權(quán)重
后代選擇器：用空格分開的所有選擇器的權(quán)重之和
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*通配符*/
*{
width: 300px;
height: 100px;
}
/*元素選擇器*/
p{
color: firebrick;
}
div{
background-color: aquamarine;
}
/*id選擇器*/
#p2{
color: deeppink;
}
/*class選擇器*/
.C1{
color: mediumblue;
font-size: 30px;
}
.C2{
background-color: deepskyblue;
}
.C1,.C2{
background-color: yellowgreen;
}
</style>
</head>
<body>
<h1 class="C1">標(biāo)題1</h1>
<div id="">
<div id="">
<p class="C2">段落1</p>
</div>
<!--一個(gè)標(biāo)簽可以擁有多個(gè)class值逐抑，多個(gè)class值用空格隔開-->
<h2 class="C1 C2">標(biāo)題2</h2>
</div>
<div id="">
<p id="p2">段落2</p>
</div>
</body>
</html>
03 偽類選擇器
普通選擇器是選中某一個(gè)標(biāo)簽，偽類選擇器是選中標(biāo)簽?zāi)撤N狀態(tài)
1.語法：
普通選擇器:狀態(tài){}
2.常見狀態(tài)
a.link - 初始狀態(tài)(對于a標(biāo)簽來說屹蚊，初始狀態(tài)指的是標(biāo)簽對應(yīng)的地址沒有成功訪問過的時(shí)候)
b.visited - 訪問后的狀態(tài)(一般針對a標(biāo)簽有效)
c.hover - 鼠標(biāo)懸停在標(biāo)簽上的時(shí)候?qū)?yīng)的狀態(tài)
d.active - 鼠標(biāo)按住標(biāo)簽不放的時(shí)候?qū)?yīng)的狀態(tài)
注意：1.狀態(tài)前不是只能寫元素選擇器厕氨，更不是只能寫a標(biāo)簽
2.需要遵守'愛恨'原則，'LoVeHAte'
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*設(shè)置a標(biāo)簽所有狀態(tài)的樣式*/
/*a{
color: red;
}*/
a:link{
color: green;
}
a:visited{
color: dodgerblue;
}
a:hover{
color: seagreen;
background-color: gainsboro;
font-size: 20px;
}
a:active{
color: darkorchid;
}
font:hover{
color: chocolate;
font-size:20px;
}
font:active{
background-color:aliceblue;
}
</style>
</head>
<body>
<a href="04css基礎(chǔ).html">百度一哈</a>
<font>我是段落</font>
</body>
</html>
