css（層疊樣式表）快速入門
1.網(wǎng)頁的組成
?html(網(wǎng)頁的結(jié)構(gòu))+css(網(wǎng)頁的外觀)+javascript(驅(qū)動網(wǎng)頁的腳本)
2.css引入方法
??（1）行內(nèi)樣式
<p style="color:red">新年，我要紅</p>
??效果圖如下:
行內(nèi).png
??（2）內(nèi)嵌樣式
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.big{
font-size: 48px;
color: #FF0000;
}
</style>
</head>
<body>
<p class="big">樣式的內(nèi)容寫在style標(biāo)簽內(nèi)</p>
</body>
</html>
??效果圖如下:
內(nèi)鏈.png
??（3）外鏈樣式
<!-- html文件 -->
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<p id="myp">我要又大又紅</p>
</body>
</html>
<!-- css文件 -->
#myp{
color: red;
font-size: 48px;
}
??效果圖如下:
外鏈.png
??（4）導(dǎo)入（.css文件/style標(biāo)簽）
<!-- html文件 -->
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
@import url("./sheet.css");
</style>
</head>
<body>
<p id="orange">活力橙</p>
</body>
</html>
/* sheet.css文件 */
#orange{
color: orange;
}
??效果圖如下:
導(dǎo)入.png
??(注意：行內(nèi)樣式使用范圍當(dāng)前元素；內(nèi)嵌樣式使用范圍為當(dāng)前的html文件懂版；外鏈樣式，使用范圍為引用他的html文件)
3.css層疊樣式
??（1）當(dāng)屬性一致時
???后面的覆蓋前面的（從上自下排布穿扳，靠近標(biāo)簽的屬性生效）
???行內(nèi)樣式優(yōu)先級最高
<html>
<head>
<meta charset="utf-8">
<title>css優(yōu)先級</title>
<style>
.red{
color: red
font-size: 48px;
color: gold;
}
</style>
<link rel="stylesheet" type="text/css" href="style2.css"/>
</head>
<body>
<p class="red" style="color: pink;">北國風(fēng)光，千里冰封国旷，萬里雪飄</p>
</body>
</html>
??效果圖如下:
層疊樣式.png
??（1）當(dāng)屬性不一致（相加）
<html>
<head>
<meta charset="utf-8">
<title>css優(yōu)先級</title>
<style>
.color{
color: gold;
font-size: 48px;
}
</style>
</head>
<body>
<p class="color" style="color: pink;">北國風(fēng)光矛物，千里冰封，萬里雪飄</p>
</body>
</html>
??效果圖如下:
不一致.png
??（3）跪但！important 權(quán)限最高聲明最重要履羞，不可覆蓋
<html>
<head>
<meta charset="utf-8">
<title>css優(yōu)先級</title>
<style>
.color{
color: gold !important;
font-size: 48px;
}
</style>
</head>
<body>
<p class="color" style="color: pink;">北國風(fēng)光，千里冰封，萬里雪飄</p>
</body>
</html>
??效果圖如下:
忆首！important.png
4. css選擇器
??（1）css組成
???選擇器+屬性名 （color）+屬性值 （red）
??（2）通配符選擇器* {color:red}
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 通配符選擇器爱榔，代表是頁面中的任意元素 */
*{
color: red;
}
</style>
</head>
<body>
<h1>css 選擇器</h1>
<p>選擇到html元素 應(yīng)用css樣式</p>
<ul>
<li>包含的先擇器</li>
<li >id選擇器</li>
<li>class選擇器</li>
<li>類型 選擇器</li>
<li>通配符選擇器</li>
</ul>
</body>
</html>
??效果圖如下:
css選擇器.png
??（3）id 選擇器 #myid{color:red}
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 通配符選擇器，代表是頁面中的任意元素 */
*{
color: red;
}
#myli{
background-color: blue;
}
</style>
</head>
<body>
<h1>css 選擇器</h1>
<p>選擇到html元素 應(yīng)用css樣式</p>
<ul>
<li>包含的先擇器</li>
<li id="myli">id選擇器</li>
<li>class選擇器</li>
<li>類型 選擇器</li>
<li>通配符選擇器</li>
</ul>
</body>
</html>
??效果圖如下:
id選擇器.png
??（4）class 選擇器.myc{color:red}
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 通配符選擇器糙及，代表是頁面中的任意元素 */
*{
color: red;
}
/* 通過標(biāo)簽名作為選擇器详幽，選擇到一個類型的元素 */
.odd{
background-color: orange;
}
</style>
</head>
<body>
<h1>css 選擇器</h1>
<p>選擇到html元素 應(yīng)用css樣式</p>
<ul>
<li class="odd">包含的先擇器</li>
<li>id選擇器</li>
<li>class選擇器</li>
<li>類型 選擇器</li>
<li>通配符選擇器</li>
</ul>
</body>
</html>
??效果圖如下:
css選擇器.png
??（5）類型 標(biāo)簽名 p{color:red}
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 通配符選擇器，代表是頁面中的任意元素 */
*{
color: red;
}
/* 通過標(biāo)簽名作為選擇器浸锨，選擇到一個類型的元素 */
p{
color: green;
}
</style>
</head>
<body>
<h1>css 選擇器</h1>
<p>選擇到html元素 應(yīng)用css樣式</p>
<ul>
<li>包含的先擇器</li>
<li>id選擇器</li>
<li>class選擇器</li>
<li>類型 選擇器</li>
<li>通配符選擇器</li>
</ul>
</body>
</html>
??效果圖如下:
標(biāo)簽.png
??（6）包含選擇器 .myc p{color:red}
???選擇器1 選擇器2{}
???選擇器2必須是選擇器1的后代
<html>
<head>
<meta charset="utf-8">
<title>包含選擇器</title>
<style type="text/css">
/* 選擇的li標(biāo)簽是ul的后代 */
ul li{background-color: gold;}
/* .gold li{background-color: green;} */
/* 盡量在包含選擇器中唇聘，父輩用類名，或者id */
/* 一般選擇器層級不超過3層 */
.gold li span{background-color: red;}
</style>
</head>
<body>
<h1>包含選擇器</h1>
<p>通常用來縮小選擇范圍</p>
<ul class="gold">
<li>ul <span>中的</span>li1</li>
<li>ul中的li2</li>
<li>ul中的li3</li>
</ul>
<ol>
<li>ol中的li1</li>
<li>ol<span>中的</span>li2</li>
<li>ol中的li3</li>
</ol>
<span>hahahh</span>
</body>
</html>
??效果圖如下:
包含選擇器.png
5.選擇器的優(yōu)先級
??* 0.5;類型 1;class 10;id 100;包含 權(quán)限相加
<html>
<head>
<meta charset="utf-8">
<title>選擇器的優(yōu)先級</title>
<style type="text/css">
*{
color: red;
}
/* 0.5 */
p{
color: green;
}
/* 1 */
.myp{
color: gold;
}
/* 10 */
#myid{
color: deeppink;
}
/* 100 */
.parent #myid{
color: orange;
}
</style>
</head>
<body>
<div clss="parent">
<p class="myp" id="myid">你好我是一個p標(biāo)簽</p>
</div>
</body>
</html>
??效果圖如下:
優(yōu)先級.png
??(ps:讀者將代碼復(fù)制柱搜，將部分代碼注釋進行試驗)
