cascading style sheet? 層疊樣式表
用途:
1.主要控制HTML文檔的版面樣式
2.美化web頁面的外觀
css語法
選擇器{ 聲明語句1;? 聲明語句2; }
屬性名稱: 屬性值
注釋: /* css注釋內(nèi)容 */
css樣式的引入方式
外部樣式——實現(xiàn)了結(jié)構(gòu)和表現(xiàn)的徹底分離
位置:在外部新建css文件婿斥,在HTML文檔的head標簽中通過link標簽將css文件引入
語法: <link rel="stylesheet" href="css文件的路徑">
rel屬性? 當前文檔與被鏈接文檔之間的關(guān)系
stylesheet得到所有瀏覽器的支持像鸡,表示外部文件的類型是css文件
創(chuàng)建步驟:
1.創(chuàng)建一個css文件夾志群,新建后綴名為.css的文件
2.在后綴名為.css文件中,輸入編碼方式:@charset? "utf-8";
3.在HTML文檔中吁脱,head標簽內(nèi)部攻冷,通過link標簽引入css文件
?<head>
...............
?<link rel="stylesheet" href="css/*.css">
...............
</head>
?選擇器
標簽選擇器——權(quán)值1
結(jié)構(gòu)中:<div>box1</div>
樣式中:div{ 聲明語句 }
class選擇器——權(quán)值10
結(jié)構(gòu)中:<div class="box">box2</div>
<p class="box txt2">content2</p>
樣式中:.box{ 聲明語句 }
? ? ? ? ? ? ? .txt2{ 聲明語句 }
?注意:使用標簽選擇器和class選擇器為同一個元素設(shè)置樣式涉兽,class選擇器的優(yōu)先級高
選擇器的優(yōu)先級與權(quán)值相關(guān)虱饿,權(quán)值越大優(yōu)先級越高拥诡;權(quán)值相同触趴,后寫的會覆蓋先寫內(nèi)容
?選擇器的命名規(guī)范:
1.名稱盡量有含義
2. 建議始終用英文字母開頭,可以包含英文字母、數(shù)字仇祭、-、_
3. 除了-和_之外的特殊符號不允許使用
4.不能使用中文漢字、純數(shù)字,不能以數(shù)字開頭
5.名稱區(qū)分大小寫
后代選擇器——權(quán)值是所有選擇器權(quán)值的累加
選擇器1? ? 選擇器2{ 聲明語句 }
?選擇器1范圍內(nèi)的所有的選擇器2都有樣式
群組選擇器
?選擇器1, 選擇器2{ 聲明語句 }
選擇器1和選擇器2都具有相同的樣式
1.小紅明天穿白襯衫
2.小藍明天穿白襯衫
3.小明明天穿白襯衫
小紅, 小藍, 小明{ 明天穿白襯衫 }
偽類選擇器
選擇器:hover{ 鼠標懸停的顯示效果 }
/* 鼠標懸停到.box盒子上潘靖,讓盒子的背景顏色設(shè)置為藍色blue */
box2:hover{background-color: blue; }
/* 鼠標懸停到.wrap盒子上既绕,讓.wrap中的子盒div背景顏色變?yōu)閘ightblue */
.wrap2:hover? div{background-color: lightblue; }