CSS基礎(chǔ)
基本功能：目錄跳轉(zhuǎn)擅腰、代碼查看、結(jié)構(gòu)化知識(shí)點(diǎn)
參看資料:http://www.w3school.com.cn/cssref/css_selectors.asp
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<link rel="stylesheet" type="text/css" href="css/hw.css"/>
</head>
<body>
<div id="" align="center">
<a href="#一、初識(shí)CSS"><h1>一、初識(shí)CSS</h1></a>
<a href="#簡(jiǎn)介css"><h3>簡(jiǎn)介css</h3></a>
<a href="#定位css"><h3>定位css</h3></a>
<a href="#書(shū)寫(xiě)css"><h3>書(shū)寫(xiě)css</h3></a>
<a href="#基本屬性補(bǔ)充"><h3>基本屬性補(bǔ)充</h3></a>
<a href="#二、CSS選擇器"><h1>二纺铭、CSS選擇器</h1></a>
<a href="#元素選擇器"><h3>元素選擇器</h3></a>
<a href="#id選擇器"><h3>id選擇器</h3></a>
<a href="#class選擇器"><h3>class選擇器</h3></a>
<a href="#統(tǒng)配符"><h3>統(tǒng)配符</h3></a>
<a href="#層級(jí)選擇器css"><h3>層級(jí)選擇器css</h3></a>
<a href="#群組選擇器"><h3>群組選擇器</h3></a>
<a href="#顏色屬性補(bǔ)充"><h3>顏色屬性補(bǔ)充</h3></a>
<a href="#三寇钉、偽類(lèi)選擇器"><h1>三刀疙、偽類(lèi)選擇器</h1></a>
<a href="#link"><h3>link</h3></a>
<a href="#visited"><h3>visited</h3></a>
<a href="#hover"><h3>hover</h3></a>
<a href="#active"><h3>active</h3></a>
<a href="#Love Hate"><h3>Love Hate</h3></a>
</div>
<hr />
<a name="一、初識(shí)CSS"><h1>一扫倡、初識(shí)CSS</h1></a>
<a name="簡(jiǎn)介css"><h3>簡(jiǎn)介css</h3></a>
<p>
1谦秧、什么是CSS<br />
CSS是web標(biāo)準(zhǔn)中的表現(xiàn)標(biāo)準(zhǔn)，用設(shè)置網(wǎng)頁(yè)上的標(biāo)簽的樣式（長(zhǎng)什么樣撵溃，在哪）<br />
CSS代碼/文件疚鲤，我們叫樣式表<br />
目前我們使用的是CSS3<br />
</p>
<a name="定位css"></a><h3>定位css</h3></a>
<p>
2、寫(xiě)在哪 <br />
內(nèi)聯(lián)樣式表：將CSS代碼寫(xiě)在標(biāo)簽的style屬性中<br />
內(nèi)部樣式表：寫(xiě)在head標(biāo)簽中的style標(biāo)簽的內(nèi)容<br />
外部樣式表：寫(xiě)在一個(gè)css文件中缘挑，通過(guò)heard中的link標(biāo)簽來(lái)關(guān)聯(lián)<br />
優(yōu)先級(jí)：內(nèi)聯(lián)>內(nèi)部=外部（內(nèi)外無(wú)絕對(duì)集歇，參照位置順序）<br />
</p>
<a name="書(shū)寫(xiě)css"></a><h3>書(shū)寫(xiě)css</h3></a>
<p>
3、怎么寫(xiě)<br />
選擇器（屬性：屬性值语淘；屬性：屬性值）<br />
選擇器： 用來(lái)選中需要設(shè)置樣式的標(biāo)簽<br />
屬性：css屬性（CSS2中大約有兩百多個(gè)）<br />
屬性值：如果屬性值是數(shù)字诲宇，表示的是大小要在后面加px<br />
</p>
<a name="基本屬性補(bǔ)充"></a><h3>基本屬性補(bǔ)充</h3></a>
<p>
補(bǔ)充屬性：color -- 設(shè)置字體顏色际歼，background-color -- 設(shè)置背景顏色，width -- 寬姑蓝，height -- 高
</p>
<xmp>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--關(guān)聯(lián)外部樣式表-->
<link rel="stylesheet" type="text/css" href="css/初識(shí)CSS.css"/>
<!--style標(biāo)簽
專(zhuān)門(mén)用來(lái)設(shè)置樣式的標(biāo)簽
-->
<style type="text/css">
div{
background-color: yellowgreen;
}
</style>
</head>
<body>
<div style="color:aquamarine;">
我是div
</div>
</body>
</html>
</xmp>
<hr />
<a name="二鹅心、CSS選擇器"><h1>二、CSS選擇器</h1></a>
<a name="元素選擇器"><h3>元素選擇器</h3></a>
元素選擇器（標(biāo)簽選擇器）：標(biāo)簽名 <br />
選中所有的標(biāo)簽名對(duì)應(yīng)的標(biāo)簽
<a name="id選擇器"><h3>id選擇器</h3></a>
id選擇器：#id屬性值<br />
每個(gè)標(biāo)簽都有一個(gè)id屬性纺荧，整個(gè)html中旭愧，id的值必須唯一
<a name="class選擇器"><h3>class選擇器</h3></a>
class選擇器：.class屬性值<br />
每個(gè)標(biāo)簽都有一個(gè)class屬性
<a name="統(tǒng)配符"><h3>統(tǒng)配符</h3></a>
通配符：*<br />
選中所有的標(biāo)簽
<a name="層級(jí)選擇器css"><h3>層級(jí)選擇器css</h3></a>
層級(jí)選擇器：選擇器1 選擇器2 ...
<a name="群組選擇器"><h3>群組選擇器</h3></a>
群組選擇器：選擇器1，選擇器...
<a name="顏色屬性補(bǔ)充"><h3>顏色屬性補(bǔ)充</h3></a>
補(bǔ)充：<br />
css中的顏色值：<br />
1宙暇、顏色英語(yǔ)單詞<br />
2输枯、十六進(jìn)制顏色<br />
3、rgb值：rgb(紅占贫，綠用押，藍(lán))rgba(紅，綠靶剑，藍(lán),透明度) - 透明度 0-1
<xmp>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*通配符*/
*{
font-size: 50px;
}
/*class選擇器*/
.c1{
color: beige;
background-color: olive;
}
/*元素選擇器*/
a{
background-color: yellow;
}
/*id選擇器*/
#a1{
color: #ff0000;
}
/*層級(jí)選擇器*/
#all_a a{
color: pink;
}
div div a{
text-decoration: none;
}
/*群組選擇器*/
/*同時(shí)選中所有的h1標(biāo)簽和所有的span標(biāo)簽*/
h1,span{
background-color: pink;
}
</style>
</head>
<body>
<h1>我是h1</h1>
<span id="">
我是span
</span>
<div id="">
<a href="">000</a>
<p></p>
</div>
<div id="all_a">
<a href="">111</a>
<a href="">222</a>
<a href="">333</a>
<a href="">444</a>
<a href="">555</a>
</div>
<a id="a1" href="" >我是a</a>
<a id="a2" href="" >我是a2</a>
<p class="c1">ppp</p>
<div id="" class="c1">
我是div
</div>
</body>
</html>
</xmp>
<hr />
<a name="三蜻拨、偽類(lèi)選擇器"><h1>三、偽類(lèi)選擇器</h1></a>
偽類(lèi)選擇器 ---- 選擇器：狀態(tài)
<a name="link"><h3>link</h3></a>
link:超鏈接的初始狀態(tài) -- 一次都沒(méi)有訪問(wèn)成功的時(shí)候的狀態(tài)
<a name="visited"><h3>visited</h3></a>
visited：超鏈接訪問(wèn)后的狀態(tài) -- 已經(jīng)訪問(wèn)成功之后的狀態(tài)
<a name="hover"><h3>hover</h3></a>
hover:鼠標(biāo)懸停在標(biāo)簽上對(duì)應(yīng)的狀態(tài)
<a name="active"><h3>active</h3></a>
active:鼠標(biāo)按住的狀態(tài)
<a name="Love Hate"><h3>Love Hate</h3></a>
給同一個(gè)標(biāo)簽通過(guò)偽裝類(lèi)選擇器給不同狀態(tài)設(shè)置不同的樣式的時(shí)候桩引，要遵守愛(ài)恨原則
<xmp>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*同時(shí)設(shè)置a標(biāo)簽的所有狀態(tài)*/
a{
color: skyblue;
}
a:link{
color: green;
}
a:visited{
color: pink;
}
a:hover{
color: red;
font-size: 40px;
}
a:active{
color: yellow;
}
#d1{
width: 100px;
height: 50px;
background-color: darkgreen;
}
#d1:hover{
background-color: greenyellow;
}
</style>
</head>
<body>
<a >百度一下</a>
<div id="d1" >
</div>
</body>
</html>
</xmp>
</body>
</html>
首頁(yè)展示
