1、css的三種引入方式：
1.1、行内引入
<div style="color:red;">魔降風雲變</div> <html>
<head>
<meta charset="UTF-8"></head>
<body>
<div style="color:red;">魔降風雲變</div>
</body>
</html> 
用的是行内的
<html>
<head>
<meta charset="UTF-8"></head>
<style>
#box{
color:gold;
}
</style>
<body>
<div id="box" style="color:red;">魔降風雲變</div>
</body>
</html> 沒有找到它的樣式
1.2内嵌式：
head中寫
<style>
#box{
background-color: gold;
}
</style> <head>
<meta charset="UTF-8"></head>
<style>
#box{
background-color: gold;
}
</style>
<body>
<div id="box" style="color:red;">魔降風雲變</div>
</body> 換了就有了，不能覆寫，優先級沒它高
1.3外接式：
外接式是定義在head标簽中，并且不在style中。
<link href="css/index.css" rel="stylesheet" > index.css檔案
#box{
background-color: black;
} <html>
<head>
<meta charset="UTF-8"></head>
<style>
#box{
background-color: gold;
}
</style>
<link rel="stylesheet" href="css/index.css">
<body>
<div id="box" style="color:red;">魔降風雲變</div>
</body>
</html> 1.4、三種樣式的優先級
行内樣式>内嵌式和外接式
内嵌式和外接要看誰在後面，在後面的優先級高，會覆寫前面的。
2、基礎選擇器
2.1、id選擇器
唯一的
#xxx id選擇器就是在标簽裡面加個id,可以和class同名 #id名字{css}
<html>
<head>
<meta charset="UTF-8"></head>
<style>
.box{
width: 200px;
height: 200px;
background-color: yellow;
}
.active{
border-radius: 4px;
}
#box{
color:blue;
}
</style>
<body>
<div class="box active" id="box">小馬過河</div>
<hr>
<div class="box"></div>
<hr>
<div class="box"></div>
</body>
</html> 2.2、類選擇器
可以重複，歸類，類也可以設定多個
.xxx <html>
<head>
<meta charset="UTF-8"></head>
<style>
.box{
width: 200px;
height: 200px;
background-color: yellow;
}
.active{
border-radius: 200px;
}
</style>
<body>
<div class="box active"></div>
<div class="box"></div>
<hr>
<div class="box"></div>
</body>
</html> border-radius邊框圓角，似乎當邊框圓角和正方形div的寬高一緻的時候就會成圓形 .active{
border-radius: 40px; #将200改為40
} 2.3标簽選擇器
标簽{css}
div{} p{} 作用于多個相同标簽
<html>
<head>
<meta charset="UTF-8"></head>
<style>
.box{
width: 200px;
height: 200px;
background-color: yellow;
}
.active{
border-radius: 4px;
}
#box{
color:blue;
}
div{
border: 1px solid #000;
}
</style>
<body>
<div class="box active" id="box">小馬過河</div>
<hr>
<div class="box"></div>
<hr>
<div class="box"></div>
</body>
</html> 使用場景一（a标簽）：
取消所有a标簽的預設下劃線
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
a{
text-decoration: none;
}
</style>
</head>
<body>
<a href="www.baidu.com">百度</a>
<a href="www.baidu.com">百度</a>
<a href="www.baidu.com">百度</a>
<a href="www.baidu.com">百度</a>
<a href="www.baidu.com">百度</a>
</body>
</html> 使用場景二（重新設定邊框）：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
使用者名：<input type="text">
</body>
</html> 添加标簽選擇器，取消邊框
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
input{
border: none;
}
</style>
</head>
<body>
使用者名：<input type="text">
</body>
</html> 滑鼠放到那個位置點選一下，又出現藍色框，這個被叫做外線：
去掉外線，這樣預設的線都沒了，可以重新設定邊框：
input{
border: none;
outline: none;
} 重新設定邊框：
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
input{
border: none;
outline: none;
}
#mcw{
border:9px solid #0000cc ;
}
</style>
</head>
<body>
使用者名：<input id="mcw" type="text">
</body>
</html> #mcw{
border:9px solid #0000cc ;
height: 60px;
}
給邊框加個高度，字型的高度還是沒有變化
将字型設定大點：
#mcw{
border:9px solid #0000cc ;
height: 60px;
font-size: 30px;
} 和别人的框比起來，别人的框文字在左右不能到邊，下面設定一下
#mcw{
border:9px solid #0000cc ;
height: 60px;
font-size: 30px;
padding: 0 100px; #第一個表示上下，第二個表示左右，内部填充，邊框長度也加了，
} 3、盒模型
3.1、
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#box{
width: 200px;
height:200px;
background-color: red;
</style>
</head>
<body>
<div id="box" class="box" >魔降風雲變</div>
</body>
</html> 盒模型200*200
3.2、pading設定一個值，上下左右。
<style>
#box{
width: 200px;
height:200px;
background-color: red;
padding: 50px;
}
</style> pading設定上下左右各50px内邊距，一個值。盒子大小變成300*300
如果我在div中加些字，如果不設定pading。預設内部子元素都在左上角開始顯示，。是以通過pading可以調整内部子元素的位置。一個元素也叫一個标簽。
再添加一個邊界 border ，盒子加鎖邊框大小變成了308*308
<style>
#box{
width: 200px;
height:200px;
background-color: red;
padding: 50px;
border: 4px solid #000;
}
</style> 如果我想保持盒子大小，那麼我要調整pading，border，和盒子高度寬度的大小。
302*302
#box{
width: 200px;
height:200px;
background-color: red;
padding: 50px;
border: 1px solid #000;
} 3.3pading兩個值，表示上下和左右
#box{
width: 200px;
height:200px;
background-color: red;
padding: 0 20px; #上下0，左右20.0px可以省略px
border: 1px solid #000;
} 3.4、pading三個值，表示上 左右 下
#box{
width: 200px;
height:200px;
background-color: red;
padding: 0 20px 30px; /* 0上 20左右 30下
border: 1px solid #000;
} 3.5、pading四個值，表示 上 右 下 左 ，
#box{
width: 200px;
height:200px;
background-color: red;
padding: 10px 20px 30px 40px; /*上 右 下 左 順時針*/
border: 1px solid #000;
} 3.6、pading單獨設定一個方向
#box{
width: 200px;
height:200px;
background-color: red;
padding-top: 20px;
border: 1px solid #000;
} 單獨設定pading-top ,文字在盒子裡往下擠了。單獨左邊增加，文字往右走； 此外還有其他
pading
pading-top
pading-bottom
pading-left
pading-right
3.7盒子設定magin
#box{
width: 200px;
height:200px;
background-color: red;
padding-top: 20px;
margin-left: 30px;
border: 1px solid #000;
} 左邊加個30的margin，盒子邊框整體右移。
盒子body本身還有8px的大小
4、标簽嵌套關系
4.1标簽的嵌套關系之塊級标簽
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box{
width: 200px;
height:200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box" ></div>
</body>
</html> 塊級标簽特點：獨占一行，可以設定寬高，如果不設定寬，預設是父标簽的100%寬度。
塊級标簽屬性：display
p标簽的使用這個樣式，p标簽上下還有16的margin。
body 上下左右浏覽器預設設定8px的margin
塊級标簽，比如div。塊級标簽display的屬性值預設是block，浏覽器内置的，預設給div設定的。
塊級标簽可以将display修改掉，将它修改為inline。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box{
width: 200px;
height:200px;
background-color: yellow;
display: inline;
}
</style>
</head>
<body>
<div class="box" ></div>
<p class="box"></p>
</body>
</html> 沒有顯示東西：
因為麼有添加内容呢
<body>
<div class="box" >魔降風雲變</div>
<p class="box">小馬過河</p>
</body> 就像将它們變成了span标簽一樣，不好使
4.2、标簽的嵌套關系之行内标簽
行内标簽特點：1、在一行内顯示 2、不可以設定寬高，如果不設定寬高，預設是字型大小
<style>
.box{
width: 200px;
height:200px;
background-color: yellow;
display: inline;
}
</style>
</head>
<body>
<div class="box" >魔降風雲變</div>
<p class="box">小馬過河</p>
<a href="www.baidu.com">百度一下</a>
<span>小郭吹雪</span>
</body> 如果div标簽，p标簽都和 a标簽和span标簽都在一行内顯示，證明塊标簽轉行内标簽是沒有問題的。這裡塊轉行内标簽了。塊轉行内用的不多，但是行内轉塊用的比較多。
如果我給行内标簽加個寬度和高度，沒有生效的。
<style>
a{
width: 100px;
height: 40px;
background-color: red;
}
</style>
</head>
<body>
<a href="www.baidu.com">百度一下</a>
<span>小郭吹雪</span>
</body> 行内标簽不能設定寬高
如果我想要設定行内标簽的寬度和高度，那麼把行内标簽改成塊标簽
a{
width: 100px;
height: 40px;
background-color: red;
display: block;
} 再給a标簽設定一下
a{
width: 100px;
height: 40px;
background-color: red;
display: block; /*顯示方式 block 顯示塊 inline 顯示行内 inline-block 行内塊*/
text-align: center; /*水準文本排列方式 ：左中右顯示*/
line-height: 40px; /*行高：一行的高度。當行高=盒子模型高度的時候，實作垂直居中*/
text-decoration: none; /*文本修飾： none 無修飾 underline 下劃線 line-through 有點像删除線 */
color: #333333;
} 給a标簽水準居中，垂直居中，去下劃線，設定顔色
修改一下測試text-decoration: line-through; 有點像删除線
放大點看
用标簽del實作删除線效果：
<body>
<!--<div class="box" >魔降風雲變</div>-->
<!--<p class="box">小馬過河</p>-->
<a href="www.baidu.com">百度一下</a>
<del>小馬過河</del>
<span >小郭吹雪</span>
</body> 4.3行内标簽之行内塊标簽
行内塊标簽特點：1、在一行内顯示 2、可以設定寬高
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<span >小郭吹雪</span>
<input type="text">
<input type="text">
</body>
</html> input{
width: 40px;
height: 60px;
}
</style> 給input添加寬和高之後，也可以變高，變寬，因為它是行内塊，這樣看來行内塊也是可以設定寬度和高度的。
行内塊使用示範
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<span id="s1">小郭吹雪</span>
<span id="s2">小馬過河</span>
</body>
</html> 兩個行内标簽span結果：
</style>
#s1{height: 40px;display: block;background-color: #d33333;} </style> 如上設定為塊則會換行
如果設定為行内塊則同行顯示。當同行中某部分要設定寬度、高度且不換行的時候可以設定為行内塊
#s1{height: 40px;display: inline-block;background-color: #d33333;} #s1{width: 60px;height: 40px;display: inline-block;background-color: #d33333;} 當再添加寬度的時候，寬度不夠，這個是換行了嗎？但是其它内容還是跟它在同行，
問題：行内标簽能包裹一個塊麼？比如 a标簽不能設定寬高，包一個塊标簽能撐起來麼？是撐不起來的。行内标簽不能放塊，有個别例外的。也可以把塊變成行内塊，行内塊是放到行内的。塊裡面可以包行内。div裡面可以包div，可以包a标簽。a裡面可以包image，因為image是行内塊，是行内的，可以先把a标簽轉成塊的。
比如如下栗子：
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#tu{
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<a href="">
<img src="dongwu.jpg" alt="" id="tu">
</a>
</body>
</html> 行内标簽a包行内塊image，可以包着，但是難以撐起來。但是點選圖檔任一部位還是可以跳轉的。
可以給a标簽變成塊
a{
width: 200px;
height: 100px;
display: block;
} 4.4嵌套關系總結：
塊級标簽可以嵌套塊級标簽、行内标簽和行内塊
p标簽不要嵌套div，也不要嵌套p，
p裡可以放 a img 表單控件
行内标簽盡量不要嵌套塊級标簽
比如例外的p标簽
<body>
<p>
小馬過河
<div>魔降風雲變</div>
</p>
</body> 浏覽器修改掉了：
所有不要p包div，可以用div去包p。
網頁大多是圖檔和文字，是以一般最内層的标簽大都是a标簽和span這些标簽
5、進階選擇器
5.1、後代選擇器
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#box p{color: red}
</style>
</head>
<body>
<div id="box">
<div>
<div>
<div>
<p>
魔降風雲變
</p>
</div>
</div>
</div>
</div>
</body>
</html> 後代選擇器和單獨用p标簽的差別：後代選擇器限定了選擇區間，哪個div下的哪個标簽。限定了獨立的邏輯區 。
一般嵌套也不能嵌套太多層，一般是不超過8層，超過8層寫代碼都費勁。
如果我修改一下#box p{color: red} 為#box p a{color: red} ，p下的a标簽也可以的
p内包一個a标簽
<p>
<a href="">魔降風雲變</a>
</p>
#box p a{color: red} 5.2、子代選擇器
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#box>p{color: red} /*子代選擇器*/
</style>
</head>
<body>
<div id="box">
<div>
<div>
<div>
<p>
魔降風雲變
</p>
</div>
</div>
</div>
<p>
小馬過河
</p>
</div>
</body>
</html> 子代選擇器隻能作用于它本身下的那一層。魔降風雲變不是子代，是以子代選擇器不能作用于魔降風雲變。
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#box>p>a{color: red}
</style>
</head>
<body>
<div id="box">
<div>
<div>
<div>
<p>
<a href="">魔降風雲變</a>
</p>
</div>
</div>
</div>
<p>
<a href="">小馬過河</a>
</p>
</div>
</body>
</html> 子代選擇器也可以連續>，但是不宜太多
5.3組合選擇器
很多标簽都有margin。
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#box{color: red}
</style>
</head>
<body>
<div id="box">
<p>
<a href="">小馬過河</a>
</p>
<ul>
<li>鋤禾</li>
<li>當午</li>
<li>千門萬戶曈曈日</li>
</ul>
</div>
</body>
</html> ul标簽有margin和pading，ol也有。body有8pxmargin，p标簽也有margin。
很多标簽都有margin，你不确定它是多少呀，這樣的話布局不好計算，那就把它們都去掉。
我添加個組合選擇器，我們已經這些p,ul,ol,body都有margin，那就都選中，讓這些标簽組合起來共用一套樣式。把這幾個設定為0然後後面重新設定被叫做重置樣式
<style>
p,ul,ol,body{
margin: 0;
padding: 0;
}
</style> 去掉之後都定格寫了
可以重置樣式的有：也可以把a标簽的下劃線重置樣式。
p,ul,ol,body{
margin: 0;
padding: 0;
}
input,textarea{
border: none;
outline: 0;
} 重置樣式，去掉所有的margin和padding。然後在畫布上按照自己的想法去畫。常用。
比如小米的網站重置margin
5.4、交集選擇器
兩個選擇器作用于同樣的内容
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
span{color: #d33333}
.active{font-size: 20px}
</style>
</head>
<body>
<p>正常字型</p>
<span class="active">小馬過河</span>
</body>
</html> <html lang="en">
<head>
<meta charset="UTF-8">
<style>
span{color: #d33333}
.active{font-size: 20px}
span.active{
background-color: gold;}
</style>
</head>
<body>
<p>正常字型</p>
<span class="active">小馬過河</span>
<span class="active">小馬過河2</span>
<span >魔降風雲變1</span>
<a href="" class="active">魔降風雲變2</a>
</body>
</html> 交集span.active{}，既是span标簽，又有類active的可以被選中。中間不要隔開，隔開就不生效了
6、css的繼承
6.1繼承執行個體示範
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
p{color: red}
</style>
</head>
<body>
<div id="box">
<p class="active">魔降風雲變</p>
</div>
</body>
</html> 這樣字型肯定是紅色的
但是如果裝飾的是父的呢？字型也是紅的麼？同樣是紅的。#box{}作用的是div，但是p标簽也變紅了。
<style>
#box{color: red}
</style>
<div id="box">
<p class="active">魔降風雲變</p>
</div> 看開發工具可看見p标簽的繼承來自哪裡：
那麼還有沒有其他的可以被繼承的屬性呢
#box{
color: red;
height: 40px;
text-align: center;
} 可以看到height是淺紅色，沒有繼承過來。高是盒子模型的屬性，不能繼承
行高不是盒子屬性，那麼行高可以被繼承麼？
#box{
color: red;
height: 40px;
text-align: center;
line-height: 80px;
} 可以繼承行高
繼承性：在css有某些屬性是可以繼承下來，color,text-xxx,line-height,font-xxx是可以繼承下來
如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#box{
color: red;
height: 40px;
text-align: center;
line-height: 30px;
background-color: yellow;
font-size: 26px;
}
p{
background-color: red;
color: greenyellow;
}
</style>
</head>
<body>
<div id="box">
<p class="active">魔降風雲變</p>
</div>
</body>
</html> 繼承來的字型是26px。bgc不能被繼承過來，自己設定了紅色背景，給p标簽。p标簽繼承來的行高30，div的高是40，是以黃色漏出10px高度。
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body{font-size: 14px}
#box{
color: red;
height: 40px;
text-align: center;
line-height: 30px;
background-color: yellow;
font-size: 26px;
}
p{
background-color: red;
color: greenyellow;
}
</style>
</head>
<body>
<div id="box">
<p class="active">魔降風雲變</p>
</div>
<a href="">小馬過河</a>
</body>
</html> body14，box26,繼承了box的26.
用的p标簽自己的，沒用
沒用那幾個繼承的，用的p标簽自己的。
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body{font-size: 14px}
#box{
color: red;
height: 40px;
text-align: center;
line-height: 30px;
background-color: yellow;
font-size: 26px;
}
#box p{
background-color: red;
color: greenyellow;
font-size: 20px;
}
</style>
</head>
<body>
<div id="box">
<p class="active">魔降風雲變</p>
</div>
<a href="">小馬過河</a>
</body>
</html> 由下圖可知，用的#box p{}裝飾的。這裡盡量用#box p{}指定哪裡p标簽。而不是其它div下的p标簽。body和box可以繼承過來，但是我需要單獨給它寫，就選中它單獨為它指派，覆寫掉父的屬性。這裡用的是後代選擇器。因為有繼承關系，那麼我們就應該給body設定一個樣式作為預設樣式。當某一部分需要單獨設定，那麼選中這一部分單獨設定。于是，就出現了一個問題，就是繼承的順序是什麼？
6.2繼承順序問題
下面程式，看看結果是繼承哪個的呢？
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
</style>
</head>
<body>
<div id="box1" class="wrap1">
<div id="box2" class="wrap2">
<div id="box3" class="wrap3">
<p id="active" class="active" >魔降風雲變</p>
</div>
</div>
</div>
</body>
</html> 首先是：<p class="active">魔降風雲變</p> ，style 直接寫在行内的優先級最高，那麼這裡隻研究内嵌中的繼承順序。
樣式如下的時候結果是紅色：
<style>
p{color: red}
</style> 樣式有了重疊性。當标簽選擇器和類選擇器同時在的時候，類選擇器覆寫了标簽選擇器的：
<style>
p{color: red}
.active{color: yellow}
</style> 是類選擇器和标簽選擇器放的位置先後導緻的麼？那麼我調換順序試試：
<style>
.active{color: yellow}
p{color: red}
</style> 結果還是現實類選擇器的。由上可知，内嵌樣式中，繼承的順序是類選擇器優先于标簽選擇器，實際類選擇器權重10，标簽選擇器權重1
當标簽選擇器，類選擇器，id選擇器都在時，顯示的是id選擇器裡的。 #id選擇器的權重實際上是100，權重更大些。在行内寫的style是1000
<style>
#active{color: blue}
.active{color: yellow}
p{color: red}
</style> 上面三個裡id選擇器權重最大，優先級高，那我用它再來做比較：
<style>
#active{color: blue}
#box1 p{color: yellowgreen} /*#box1下的 p标簽*/
</style>
結果是下面那個優先。類選擇器#active{}是100, #box1 p{}類選擇器是100+1=101的權重，優先于單獨的類選擇器。
再看下面的優先級：
<style>
#active{color: blue}
#box1 p{color: yellowgreen} /*#box1下的 p标簽*/
#box1 .wrap2 .wrap3 p{color: gold}
</style> 先比id,之前id選擇器沒有的把它去除掉了；然後再看id選擇器後面的選項，結果是下面那個優先
再看下面的：
<style>
#active{color: blue}
#box1 p{color: yellowgreen} /*#box1下的 p标簽*/
#box1 .wrap2 .wrap3 p{color: gold}
#box1 #box2 {color: green}
</style> 結果還是gold。gold和green對比：它們都有id選擇器。繼承來的權重為0#box1 #box2 {color: green}，如果選中p标簽了的，就按這個規則來，如果沒有選中，那就看繼承不繼承，跟繼承沒關系那就忽略掉。繼承的權值為0，那麼如果是同時繼承來的怎麼辦呢？
看下面這個
<style>
#box1 #box2 {color: green}
#box1 #box2 .wrap3{color: brown}
</style> 越接近的權值越大
6.3繼承總結
綜上
權重比較規則：
繼承來的屬性權重為0
前提是選中了标簽權重比較；
1.數選擇器數量： id 類 标簽 誰大它的優先級越高，如果一樣大，後面的會覆寫掉前面的屬
2.選中的标簽的屬性優先級用于大于繼承來的屬性，它們是沒有可比性
3.同是繼承來的屬性
3.1 誰描述的近，誰的優先級越高
3.1 描述的一樣近，這個時候才回歸到數選擇器的數量
6.4其它繼承栗子
1）
<style>
#box1 .wrap2 .wrap3 p{color: gold} #100 10 10 1
#box1 #box2 .wrap3{color: brown} #100 100 10 權值大，如何解釋？？？
</style> 2）
<style>
#box1 .wrap2 .wrap3 p{color: gold}
#box1 #box2 .wrap3 p{color: brown} #權值大
</style>
或者 <style> #box1 #box2 .wrap3 p{color: brown} # 100 100 10 1 #權值大 #box1 .wrap2 .wrap3 p{color: gold} #100 10 10 1
</style> 3)
<style>
#box1 .wrap2 #box3 p{color: gold} #100 10 100 1
#box1 #box2 .wrap3 p{color: brown} #100 100 10 1 權值相等，誰在後就是誰麼？
</style> <style>
#box1 #box2 .wrap3 p{color: brown} #100 100 10 1
#box1 .wrap2 #box3 p{color: gold} #100 10 100 1 權值相等麼？
</style> 在這種情況下誰在下面就是誰
4）數選擇器 兩個優先級高的id選擇器
<style>
#box1 .wrap2 .wrap3{color: gold} #調換過順序沒有變
#box1 #box2 .wrap3 {color: brown}
</style> 5）！importent不常用，大多調試
<style>
#box1 .wrap2 .wrap3{color: gold !important;}
#box1 #box2 .wrap3 {color: brown}
</style> 6）即使!important也比不過行内的
<style>
#box1 .wrap2 .wrap3{color: gold !important;}
#box1 #box2 .wrap3 {color: brown}
</style>
<p id="active" class="active" style="color:blueviolet">魔降風雲變</p> 調試的話可以用行内的來調試