一、css的4種引入方式
#1、内聯式
<p style="color: red;font-size: 50px;text-align: center">Egon是一個非常了不起的人</p>
#2、嵌入式
<head>
<style>
p {
color: red;
font-size: 50px;
text-align: center
}
</style>
</head>
#3、導入式
<head>
<style>
/*形式一：*/
/*@import "css/mystyle.css";*/
/*形式二：*/
@import url("css/mystyle.css");
</style>
</head>
#4、外聯式（企業開發中使用這種方式）
<head>
<link rel="stylesheet" href="css/mystyle.css">
</head> View Code
注意：
導入式會在整個網頁裝載完後再裝載CSS檔案，是以這就導緻了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之後，再出現網頁的樣式。這是導入式固有的一個缺陷。使用連結式時與導入式不同的是它會以網頁檔案主體裝載前裝載CSS檔案，是以顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，然後再顯示有樣式的網頁，這是連結式的優點。
二、css的基本選擇器
1) id 選擇器
#1、作用：
根據指定的id名稱，在目前界面中找到對應的唯一一個的标簽，然後設定屬性
#2、格式
id名稱 {
屬性：值;
}
#3、注意點：
1、在企業開發中如果僅僅隻是為了設定樣式，通常不會使用id，在前端開發中id通常是留給js使用的
2、每個标簽都可以設定唯一一個id，id就相當于人/标簽的身份證，是以在同一界面内id絕不能重複
3、引用id一定要加#
4、id的命名隻能由字元、數字、下劃線組成，且不能以數字開頭，更不能是html關鍵字如p，a，img等 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>id選擇器</title>
<style>
#p1 {
color: red;
}
#p2 {
color: green;
}
#p3 {
color: blue;
}
</style>
</head>
<body>
<p id="p1">大多數人的帥，都是浮在表面的，是外表的帥</p>
<p id="p2">而EGON，不僅具備外表帥，内心更是帥了一逼</p>
<p id="p3">EGON就是我，我就是EGON</p>
</body>
</html> View Code
2、class ，類選擇器
#1、作用：根據指定的類名稱，在目前界面中找到對應的标簽，然後設定屬性
#2、格式：
.類名稱 {
屬性：值;
}
#3、注意點：
1、類名就是專門用來給某個特定的标簽設定樣式的
2、每個标簽都可以設定一個或多個class（空格分隔），class就相當于人/标簽的名稱，是以同一界面内class可以重複
3、引用class一定要加點.
4、類名的命名規則與id的命名規則相同 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>id選擇器</title>
<style>
.p1 {
color: red;
}
.p2 {
color: green;
}
.p3 {
color: blue;
}
</style>
</head>
<body>
<p class="p1">大多數人的帥，都是浮在表面的，是外表的帥</p>
<p class="p2">而EGON，不僅具備外表帥，内心更是帥了一逼</p>
<p class="p3">EGON就是我，我就是EGON</p>
</body>
</html>
#練習
第一行與第三行的顔色都是紅色
第一行與第二行的字型大小都是50px
第二行與第三行内容有個下劃線
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>id選擇器</title>
<style>
.p1 {
color: red;
}
.p2 {
font-size: 50px;
}
.p3 {
text-decoration: underline;
}
</style>
</head>
<body>
<p class="p1 p2">第一行内容</p>
<p class="p2 p3">第二行内容</p>
<p class="p1 p3">第三行内容</p>
</body>
</html>
示例 View Code
style中的class,class.rr的使用
3）标簽選擇器
#1、作用：根據指定的标簽名稱，在目前界面中找到所有該名稱的标簽，然後設定屬性
#2、格式：
标簽名稱 {
屬性：值;
}
#3、注意點：
1、隻要是HTML的标簽都能當做标簽選擇器
2、标簽選擇器選中的是目前界面中的所有标簽,而不能單獨選中某一标簽
3、标簽選擇器，無論嵌套多少層都能選中 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标簽選擇器</title>
<style type="text/css">
p {
color: red;
}
</style>
</head>
<body>
<p>EGON美麗的外表下其實隐藏着一顆騷動的心</p>
<ul>
<li>
<ul>
<li>
<ul>
<li>
<p>這顆心叫做七巧玲珑心，男人吃了會流淚，女人吃了會懷孕</p>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
示例 示例
4）通配符選擇器
#1、作用：選擇所有标簽
#2、格式：
* {
屬性：值；
}
#3、注意點：
1、在企業開發中一般不會使用通配符選擇器。理由是：
由于通配符選擇器是設定界面上所有的标簽的屬性，
是以在設定之前會周遊所有的标簽
如果目前界面上的标簽比較多，那麼性能就會比較差 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通配符選擇器</title>
<style type="text/css">
* {
color: red;
}
</style>
</head>
<body>
<h1 >我是标題</h1>
<p >我是段落</p>
<a href="#">我是超連結</a>
</body>
</html> 示例
三、css的組合選擇器
1、後代選擇器
#1、作用：找到指定标簽的所有後代（兒子，孫子，重孫子、、、）标簽，設定屬性
#2、格式：
标簽名1 xxx {
屬性：值;
}
#3、注意：
1、後代選擇器必須用空格隔開
2、後代不僅僅是兒子，也包括孫子、重孫子
3、後代選擇器不僅僅可以使用标簽名稱，還可以使用其他選擇器比如id或class
4、後代選擇器可以通過空格一直延續下去 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>後代選擇器</title>
<style type="text/css">
div p {
color: red;
}
#id1 li p {
font-size: 50px;
}
div ul li a {
font-size: 100px;
color: green;
}
</style>
</head>
<body>
<p>我是body下的段落1</p>
<!--如果想為div内所有标簽都設定屬性，無論用id還是class都不合理，因為當div内的标簽過多，我們無法加那麼多id或者class-->
<div id="id1" class="part1">
<p>我是div下的段落1</p>
<p>我是div下的段落2</p>
<ul>
<li class="aaa">
<p class="ccc">我是ul>li下的段落1</p>
<p class="ddd">我是ul>li下的段落</p>
<a href="">點我啊1</a>
</li>
<li>
<a href="#">點我啊2</a>
</li>
</ul>
</div>
<p>我是body下的段落2</p>
</body>
</html> 示例
2、style裡面的css，空格 .r1>p。子代選擇器也叫子元素選擇器
#1、作用：找到制定标簽的所有特定的直接子元素，然後設定屬性
#2、格式：
标簽名1>标簽名2 {
屬性：值;
}
先找到名稱叫做"标簽名稱1"的标簽，然後在這個标簽中查找所有直接子元素名稱叫做"标簽名稱2"的元素
#3、注意：
1、子元素選擇器之間需要用>符号連結，并且不能有空格
比如div >p會找div标簽的所有後代标簽，标簽名為">p"
2、子元素選擇器隻會查找兒子，不會查找其他嵌套的标簽
3、子元素選擇器不僅可以用标簽名稱，還可以使用其他選擇器,比如id或class
4、子元素選擇器可以通過>符号一直延續下去 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>後代選擇器</title>
<style type="text/css">
body>p {
color: green;
}
div>p {
color: red;
}
.aaa>a {
font-size: 100px;
}
div>ul>li>.ddd {
color: blue;
}
</style>
</head>
<body>
<p>我是body下的段落1</p>
<!--如果想為div内所有标簽都設定屬性，無論用id還是class都不合理，因為當div内的标簽過多，我們無法加那麼多id或者class-->
<div id="id1" class="part1">
<p>我是div下的段落1</p>
<p>我是div下的段落2</p>
<ul>
<li class="aaa">
<p class="ccc">我是ul>li下的段落1</p>
<p class="ddd">我是ul>li下的段落2</p>
<a href="">點我啊1</a>
</li>
<li>
<a href="#">點我啊2</a>
</li>
</ul>
</div>
<p>我是body下的段落2</p>
</body>
</html> 示例一
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="Refresh" content="2">
6 <title>調整頁</title>
7 <style>
8 .r1>p{
9 font-size: 30px;
10 color: pink;
11 }
12 </style>
13 </head>
14 <body>
15 <div class="r1">hello 1
16 <div class="r2">hello 2
17 <p>hello 3</p>
18 </div>
19 <p>hello4</p>
20 </div>
21 </body>
22 </html> 示例二
子元素選擇器的容錯點，p标簽不能嵌套其他标簽，否則css樣式選擇會出錯
<div class="r1">hello 1
<p class="r2">hello 2
<div>hello 3</div>
</p>
<div>hello4</div>
</div> p>div，錯誤展示
3、style裡面的css，空格 .r2+div。兄弟選擇器，同級選擇器
相鄰兄弟選擇器
#1、作用：標明緊跟其後的那個标簽
#2、格式
選擇器1+選擇器2 {
屬性：值;
}
#3、注意點：
1、毗鄰選擇器必須通過+号連結
2、毗鄰選擇器隻能選中緊跟其後的那個标簽，不能選中被隔開的标簽
--------------------------------------------------------------------
兄弟選擇器
#1、作用：給指定選擇器後面的所有選擇器中的所有标簽設定屬性
#2、格式：
選擇器1~選擇器2 {
屬性：值;
}
#3、注意點：
1、通用兄弟選擇器必須用~來連結
2、通用兄弟選擇器選中的是指選擇器後面的某個選擇器選中的所有标簽
無論有沒有被隔開，都可以被選中 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="Refresh" content="2">
6 <title>調整頁</title>
7 <style>
8 .r2+div{
9 font-size: 30px;
10 color: pink;
11 }
12 </style>
13 </head>
14 <body>
15 <div class="r1">hello 1
16 <div class="r2">hello 2
17 <p>hello 3</p>
18 </div>
19 <div>hello4</div>
20 </div>
21 </body>
22 </html> .r2+div
相鄰兄弟與通用兄弟選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>後代選擇器</title>
<style type="text/css">
/*相鄰兄弟選擇器*/
/*h1+p {*/
/*color: red;*/
/*}*/
/*通用兄弟選擇器*/
h1~p {
color: red;
}
</style>
</head>
<body>
<h1>我是标題1</h1>
<a href="">有了這個标簽，p就不再是緊跟h1标簽了,但通用兄弟選擇器仍然能選中</a>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<h1>我是标題2</h1>
<p>我是段落</p>
</body>
</html> 相鄰兄弟與兄弟選擇器
四、并集選擇器與交集選擇器
1）并集選擇器
#1、作用：給所有滿足條件的标簽設定屬性
#2、格式：
選擇器1,選擇器2 {
屬性：值;
}
#3、注意：
1、選擇器與選擇器之間必須用逗号來連結
2、選擇器可以使用标簽名稱、id、class <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p,a {
color: red;
}
</style>
</head>
<body>
<h1>哈哈啊</h1>
<p class="part1">我是段落1</p>
<p class="part2">我是段落2</p>
<p class="part1">我是段落3</p>
<a href="#" class="part2">a标簽</a>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html> 示例
2）交集選擇器。不常用
#1、作用：給所有選擇器選中的标簽中，相交的那部分标簽設定屬性
#2、格式：
選擇器1選擇器2 {
屬性：值;
}
#3、注意：
1、選擇器與選擇器之間沒有任何連結符号
2、選擇器可以使用标簽名稱、id、class
3、交集選擇器在企業開發中并不多見，了解即可
因為：p.part1 完全可以用.part1取代 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>後代選擇器</title>
<style type="text/css">
p.part1 {
color: red;
}
p#p1{
font-size: 100px;
}
</style>
</head>
<body>
<p class="part1">我是段落</p>
<p id="p1">我是段落</p>
<p class="part1">我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html> View Code
五、序列選擇器
#1、作用：
css3中新推出的選擇器中，最具代表性的的9個，又稱為序列選擇器，過去的選擇器中要選中某個必須加id或class，
#2、格式
#2.1 同級别
:first-child p:first-child 同級别的第一個
:last-child p:last-child 同級别的最後一個
:nth-child(n) 同級别的第n個
:nth-last-child(n) 同級别的倒數第n個
#2.2 同級别同類型
:first-of-type 同級别同類型的第一個
:last-of-type 同級别同類型的最後一個
:nth-of-type(n) 同級别同類型的第n個
:nth-last-of-type(n) 同級别同類型的倒數第n個
#2.3 其他
:only-of-type 同類型的唯一一個
:only-child 同級别的唯一一個 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*p:first-child {*/
/*color: red;*/
/*}*/
/*p:last-child {*/
/*color: red;*/
/*}*/
/*p:nth-child(3) {*/
/*color: red;*/
/*}*/
/*p:nth-last-child(3) {*/
/*color: red;*/
/*}*/
</style>
</head>
<body>
<h1>我是标題1</h1>
<p>我是段落1</p>
<a href="">aaaaa</a>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6</p>
<a href="">我是a标簽</a>
<h1>我是标題2</h1>
</div>
</body>
</html> 同級别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*p:first-of-type {*/
/*color: red;*/
/*}*/
/*p:last-of-type {*/
/*color: red;*/
/*}*/
/*p:nth-of-type(3) {*/
/*color: red;*/
/*}*/
/*p:nth-last-of-type(3) {*/
/*color: red;*/
/*}*/
/*p:only-child {*/
/*color: red;*/
/*}*/
p:only-of-type {
color: red;
}
</style>
</head>
<body>
<!--<h1>我是标題1</h1>-->
<p>我是段落1</p>
<a href="">aaaaa</a>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<a href="">我是a标簽</a>
<p>我是段落6</p>
<p>我是段落7</p>
<p>我是段落8</p>
<h1>我是标題2</h1>
</div>
<div>
<p>我是獨生子</p>
<p>我是獨生子</p>
<a href="">我是二胎</a>
<a href="">我是二胎</a>
</div>
</body>
</html> 同級别同類型的
六、屬性選擇器
1）屬性選擇器的概念
#1、作用：根據指定的屬性名稱找到對應的标簽，然後設定屬性
該選擇器，最常用于input标簽
#2、格式與具體用法：
[屬性名]
其他選擇器[屬性名]
[屬性名=值]
[屬性名^=值]
[屬性名$=值]
[屬性名*=值]
例1：找到所有包含id屬性的标簽
[id]
例2：找到所有包含id屬性的p标簽
p[id]
例3：找到所有class屬性值為part1的p标簽
p[class="part1"]
例4：找到所有href屬性值以https開頭的a标簽
a[href^="https"]
例5：找到所有src屬性值以png結果的img标簽
img[src$="png"]
例6：找到所有class屬性值中包含part2的标簽
[class*="part"] 屬性選擇器的念和用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>後代選擇器</title>
<style type="text/css">
[id] {
color: red;
}
p[id] {
font-size: 30px;
}
p[class="part1"] {
color: green;
}
a[href^="https"] {
font-size: 50px;
}
img[src$="png"] {
width: 100px;
}
[class*="part"] {
text-decoration: line-through;
}
</style>
</head>
<body>
<h1 id="id1">哈哈啊</h1>
<p id="id2">我是段落</p>
<p class="part1">我是段落</p>
<p class="xxx part2 yyy">我是段落</p>
<a href="#">我是我</a>
<a href="http://www.baidu.com">http://www.baidu.com</a>
<a href="https://www.baidu.com">https://www.baidu.com</a>
<img src="1.png" alt="">
<img src="2.jpg" alt="">
<p>我是段落</p>
<p>我是段落</p>
</body>
</html> 示例
2、自定義屬性[]，也可以[user="girl"]
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="Refresh" content="2">
6 <title>調整頁</title>
7 <style>
8 [user]{
9 font-size: 30px;
10 color: pink;
11 }
12 </style>
13 </head>
14 <body>
15 <div user="boy">boy</div>
16 <div user="girl">girl</div>
17 </body>
18 </html> [user]
3、[user~="girl"]。屬性名必須有一個是girl
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Refresh" content="2">
<title>調整頁</title>
<style>
[user~="girl"]{
font-size: 30px;
color: pink;
}
</style>
</head>
<body>
<div user="boy girl">boy</div>
</body>
</html> View Code
4、[user|="boy"]，如果屬性名很長，開頭必須為boy,對應的是boy-xxxx
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Refresh" content="2">
<title>調整頁</title>
<style>
[user|="boy"]{
font-size: 30px;
color: pink;
}
</style>
</head>
<body>
<div user="boy-girl-boygirl">boy</div>
</body>
</html> View Code
5、[user^="bo"]，開頭是bo,不需要有 - 。應用範圍比 | 廣
6、[user$="bo"]，結尾是bo
7、[user*="bo"]，隻要裡面有就可以
8、特殊選取器，before,after.在标簽内容前後加入有屬性的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Refresh" content="2">
<title>調整頁</title>
<style>
p{
background-color: aliceblue;
color: blueviolet;
}
p:before{
content: "開始";
color: red;
}
p:after{
content: "結束";
color: red;
}
</style>
</head>
<body>
<p>hello1</p>
<p>hello2</p>
</body>
</html> View Code
七、僞類選擇器
僞類選擇器： 專用于控制連結的顯示效果，僞類選擇器：
a:link（沒有接觸過的連結）,用于定義了連結的正常狀态。
a:hover（滑鼠放在連結上的狀态）,用于産生視覺效果。
a:visited（通路過的連結）,用于閱讀文章，能清楚的判斷已經通路過的連結。
a:active（在連結上按下滑鼠時的狀态）,用于表現滑鼠按下時的連結狀态。
僞類選擇器 : 僞類指的是标簽的不同狀态:
a ==> 點過狀态 沒有點過的狀态 滑鼠懸浮狀态 激活狀态
a:link {color: #FF0000} /* 未通路的連結 */
a:visited {color: #00FF00} /* 已通路的連結 */
a:hover {color: #FF00FF} /* 滑鼠移動到連結上 */
a:active {color: #0000FF} /* 標明的連結 */ 格式: 标簽:僞類名稱{ css代碼; } #1、作用：常用的幾種僞類選擇器。
#1.1 沒有通路的超連結a标簽樣式：
a:link {
color: blue;
}
#1.2 通路過的超連結a标簽樣式：
a:visited {
color: gray;
}
#1.3 滑鼠懸浮在元素上應用樣式：
a:hover {
background-color: #eee;
}
#1.4 滑鼠點選瞬間的樣式：
a:active {
color: green;
}
#1.5 input輸入框擷取焦點時樣式：
input:focus {
outline: none;
background-color: #eee;
}
#2 注意：
1 a标簽的僞類選擇器可以單獨出現，也可以一起出現
2 a标簽的僞類選擇器如果一起出現，有嚴格的順序要求，否則失效
link，visited，hover，active
3 hover是所有其他标簽都可以使用的
4 focus隻給input标簽使用 僞類選擇器詳細用法
<style type="text/css">
a:link{
color: red;
}
a:visited {
color: blue;
}
a:hover {
color: green;
}
a:active {
color: yellow;
}
</style>
</head>
<body>
<a href="01-hello-world.html">hello-world</a>
</body>
</html> 示例
八、僞元素選擇器
#1、常用的僞元素。
#1.1 first-letter：雜志類文章首字母樣式調整
例如：
p:first-letter {
font-size: 48px;
}
#1.2 before
用于在元素的内容前面插入新内容。
例如：
p:before {
content: "*";
color: red;
}
在所有p标簽的内容前面加上一個紅色的*。
#1.3 after
用于在元素的内容後面插入新内容。
例如：
p:after {
content: "?";
color: red;
}
在所有p标簽的内容後面加上一個藍色的?。 僞元素詳細用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>後代選擇器</title>
<style type="text/css">
p:first-letter {
font-size: 50px;
}
/*兩個冒号與一個是一樣的，老版本用的是一個冒号，考慮到相容性推薦使用一個冒号*/
a::after {
content: "?";
color: red;
}
a:before {
content: "-";
color: green;
}
</style>
</head>
<body>
<p>英雄不問出處，流氓不論歲數</p>
<a href="#" class="help">老男孩是幹什麼的</a>
<a href="#" class="help">老男孩是幹什麼的</a>
<a href="#" class="help">老男孩是幹什麼的</a>
</body>
</html> 示例
九、css的三大特性
1）繼承性
1、定義：給某一個元素設定一些屬性，該元素的後代也可以使用，這個我們就稱之為繼承性
2、注意：
1、隻有以color、font-、text-、line-開頭的屬性才可以繼承
2、a标簽的文字顔色和下劃線是不能繼承别人的
3、h标簽的文字大小是不能繼承别人的，會變大，但是會在原來字型大小的基礎上變大
打開浏覽器審查元素可以看到一些inherited from。。。的屬性
3、應用場景：
通常基于繼承性統一設定網頁的文字顔色，字型，文字大小等樣式 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>後代選擇器</title>
<style type="text/css">
div {
color: red;
font-size: 50px;
}
</style>
</head>
<body>
<div>
<h1>我是标題</h1>
<p><a href="#">偶的博愛</a></p>
<ul>
<li>導航1</li>
<li>導航2</li>
<li>導航2</li>
</ul>
</div>
<div>
<div>
<p>aaaa</p>
</div>
<div>
<p>bbbb</p>
</div>
</div>
</body>
</html> 示例
2）層疊性
1、定義：CSS全稱：Cascading StyleSheet層疊樣式表，層疊性指的就是CSS處理沖突的一種能力，即如果有多個選擇器選中了同一個标簽那麼會有覆寫效果
2、注意：
層疊性隻有在多個選擇器選中了同一個标簽，然後設定了相同的屬性，才會發生層疊性 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>後代選擇器</title>
<style type="text/css">
p {
color: red;
}
.ppp {
color: green;
}
</style>
</head>
<body>
<p class="ppp">我是段落</p>
</body>
</html> 示例
3）優先級
1、定義：當多個選擇器選中同一個标簽，并且給同一個标簽設定相同的屬性時，如何層疊就由優先級來确定
2、優先級
整體優先級從高到底：行内樣式>嵌入樣式>外部樣式
行内樣式并不推薦使用，是以我們以嵌入為例來介紹優先級
1、大前提：直接選中 > 間接選中(即繼承而來的)
2、如果都是間接選中，那麼誰離目标标簽比較近，就聽誰的
3、如果都是直接選中，并且都是同類型的選擇器，那麼就是誰寫的在後面就聽誰的
4、如果都是直接選中，并且是不同類型的選擇器，那麼就會按照選擇器的優先級來層疊
id > 類 > 标簽 > 通配符(也算直接選中) > 繼承 > 浏覽器預設（即沒有設定任何屬性）
5、優先級之!important
作用：還有一種不講道理的!import方式來強制指定的屬性的優先級提升為最高，
但是不推薦使用。因為大量使用!import的代碼是無法維護的
注意：
1、!important隻能用于直接選中，不能用于間接選中
2、!important隻能用于提升被指定的屬性的優先級，其他屬性的優先級不會被提升
3、!important必須寫在屬性值分号的前面
6、優先級之權重計算
1、強調：如果都是直接選中，并且混雜了一系列其他的選擇器一起使用時，則需要通過計算機權重來判定優先級
2、計算方式
1、id數多的優先級高
2、id數相同，則判定類數多的優先級高
3、id數、class數均相同，則判定标簽數多的優先級高
4、若id數、class數、标簽數均相同，則無需繼續往下計算了，誰寫在後面誰的優先級高 6 清單屬性
ul,ol{ list-style: decimal-leading-zero;
list-style: none; list-style: circle;
list-style: upper-alpha;
list-style: disc; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Refresh" content="2">
<title>調整頁</title>
<style>
ul{
list-style: none;
}
p{
background-color: yellow;
display: inline;
}
</style>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<p>user</p>
</body>
</html> View Code
7 dispaly屬性
- none
- block
- inline
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Refresh" content="2">
<title>調整頁</title>
<style>
span{
background-color: aqua;
/*display: block;*/
display: none;
}
</style>
</head>
<body>
<span>hello</span>
</body>
</html> View Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<meta http-equiv="Refresh" content="10000">-->
<title>Title</title>
<style>
ul{
list-style: none;
}
</style>
</head>
<body>
<h1>輪播圖</h1>
<ul>
<li><img src="1.png"></li>
<li><img src="2.jpg"></li>
</ul>
</body>
</html> 輪播圖
8 盒子模型
padding:用于控制内容與邊框之間的距離；
margin: 用于控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到互相隔開的目的。
内邊距會影響盒子的大小，外邊距不會影響盒子的大小,需要設定 練習： 300px*300px的盒子裝着100px*100px的盒子，分别通過margin和padding設定将小盒 子 移到 大盒子的中間
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
background-color: aqua;
width: 300px;
height: 300px;
}
.div2{
background-color: blueviolet;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
<div class="div2"></div>
</div>
</body>
</html> View Code
邊框在預設情況下會定位于浏覽器視窗的左上角，但是并沒有緊貼着浏覽器的視窗的邊框，這是因為body本身也是一個盒子（外層還有html），在預設情況下， body距離html會有若幹像素的margin，具體數值因各個浏覽器不盡相同，是以body中的盒子不會緊貼浏覽器視窗的邊框了，為了驗證這一點
body{
border: 1px solid;
background-color: cadetblue;
}
>>>>解決方法：
body{
margin: 0; View Code
注意2：margin collapse（邊界塌陷或者說邊界重疊）
外邊距的重疊隻産生在普通流文檔的上下外邊距之間，這個看起來有點奇怪的規則，其實有其現實意義。設想，當我們上下排列一系列規則的塊級元素（如段 落P）時，那麼塊元素之間因為外邊距重疊的存在，段落之間就不會産生雙倍的距離。又比如停車場
1兄弟div：上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下兩者margin裡最大值作為顯示值
2父子div
if 父級div中沒有 border，padding，inline content，子級div的margin會一直向上找，直到找到某個标簽包括border，padding，inline content 中的其中一個，然後按此div 進行margin ；
<!DOCTYPE html>
<html lang="en" style="padding: 0px">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0px;
}
.div1{
background-color: aqua;
width: 300px;
height: 300px;
}
.div2{
background-color: blueviolet;
width: 100px;
height: 100px;
margin: 20px;
}
</style>
</head>
<body>
<div style="background-color: cadetblue;width: 300px;height: 300px"></div>
<div class="div1">
<div class="div2"></div>
<div class="div2"></div>
</div>
</body>
</html> View Code
解決方法：
1: border:1px solid transparent
2: padding:1px
3: over-flow:hidden;
自行測試：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Refresh" content="2">
<title>Title</title>
<style>
body{
margin: 0px;
border: solid red 3px;
}
.outer{
width: 200px;
height: 200px;
background-color: antiquewhite;
/*border: 1px solid transparent;*/
/*padding: 100px;*/
/*padding-top: 100px;*/
/*padding-left: 100px;*/
}
.inner{
width: 50px;
height: 50px;
background-color: rebeccapurple;
/*margin-top: 20px;*/
/*margin-left: 100px;*/
margin: 20px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
</div>
</body>
</html> View Code
9、float和position
1）float
首先要知道，div是塊級元素，在頁面中獨占一行，自上而下排列，也就是傳說中的流。
float也就是浮動标簽。div用的是左浮動(float:left;)，可以了解為漂浮起來後靠左排列，右浮動(float:right;)當然就是靠右排列。這裡的靠左、靠右是說頁面的左、右邊緣。
清除浮動可以了解為打破橫向排列。
clear : none | left | right | both
none : 預設值。允許兩邊都可以有浮動對象
left : 不允許左邊有浮動對象
right : 不允許右邊有浮動對象
both : 不允許有浮動對象
2）position
static，預設值 static：無特殊定位，對象遵循正常文檔流。
屬性 position:relative
relative：對象遵循正常文檔流，但将依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。
屬性 position:fixed
在理論上，被設定為fixed的元素會被定位于浏覽器視窗的一個指定坐标，不論視窗是否滾動，它都會固定在這個位置。
fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以視窗為參考點進行定位，當出現滾動條時，對象不會随着滾動。而其層疊通過z-index屬性 定義。 注意點： 一個元素若設定了 position:absolute | fixed; 則該元素就不能設定float。這 是一個常識性的知識點，因為這是兩個不同的流，一個是浮動流， 另 一個是“定位流”。但是 relative 卻可以。因為它原本所占的空間仍然占據文檔流。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="Refresh" content="2">
6 <title>Title</title>
7 <style>
8 .div1{
9 width: 300px;
10 height: 100px;
11 background-color: bisque;
12 /*position: fixed;*/
13
14 position: relative;
15 left: 200px;
16 }
17 .div2{
18 width: 250px;
19 height:150px;
20 background-color: royalblue;
21 float: left;
22 clear: left;
23 }
24 .div3{
25 width: 400px;
26 height: 220px;
27 background-color: blueviolet;
28 float: left;
29 }
30 .div4{
31 width: 300px;
32 height: 2000px;
33 background-color: gold;
34 }
35 </style>
36 </head>
37 <body>
38 <div class="div1"></div>
39 <div class="div2"></div>
40 <div class="div3"></div>
41 <div class="div4"></div>
42 </body>
43 </html> View Code
原文出處：http://www.cnblogs.com/linhaifeng/articles/9005117.html