控制器解釋
/*
css語法：
選擇器{
聲明1；
聲明2；
。。。
}
聲明由屬性和值組成
css的引用方式
1.行內式
<p style="color: red;font-size: 50px;text-align: center">行內式</p>
關鍵字：style,直接在行內進行顯示效果調整
2.嵌入式
<head>
<style>
p {
color: red;
font-size: 50px;
text-align: center
}
</style>
</head>
在html文件中，head模塊中定義，關鍵字style
3.外部樣式表之鏈接式
在css文件中寫選擇器，然後點文件名直接拖到html中你要放def位置：
<head>
<link rel="stylesheet" href="css/mystyle.css">
</head>
_______________________________________________________
id 選擇器:
根據對象的標簽設置屬性
id名稱 {
屬性：值；
}
1、在企業開發中如果僅僅只是為了設置樣式，通常不會使用id
2、每個標簽都可以設置唯一一個id，id就相當於人/標簽的身份證，因此在同一界面內id絕不能重復
3、引用id一定要加#
4、id的命名只能由字符、數字、下劃線組成，且不能以數字開頭，更不能是html關鍵字如p，a，img等
例 :
#li{
color:red;
}
<p id="li">例，因為用的color屬性，調整的是紅色，這條語句也就變成紅色</p>
_______________________________________________________
類選擇器:
根據類名設置屬性
.類名{
屬性：值；
}
1、類名就是專門用來給某個特定的標簽設置樣式的
2、每個標簽都可以設置一個或多個class（空格分隔），class就相當於人/標簽的名稱，因此同一界面內class可以重復
3、引用class一定要加點.
4、類名的命名規則與id的命名規則相同
.li{
color:red;
}
<p class="li">例，因為用的color屬性，調整的是紅色，這條語句也就變成紅色</p>
_______________________________________________________
標簽選擇器:
根據指定的標簽名稱，設置索引
標簽名稱 {
屬性：值;
}
1、只要是HTML的標簽都能當做標簽選擇器
2、標簽選擇器選中的是當前界面中的所有標簽,而不能單獨選中某一標簽
3、標簽選擇器，無論嵌套多少層都能選中
p{
color:red;
}
<p >例，因為用的color屬性，調整的是紅色，這條語句也就變成紅色</p>
_______________________________________________________
通配符選擇器：
選擇所有標簽
* {
屬性：值；
}
1、在企業開發中一般不會使用通配符選擇器
理由是：
由於通配符選擇器是設置界面上所有的標簽的屬性，
所以在設置之前會遍歷所有的標簽
如果當前界面上的標簽比較多，那麽性能就會比較差
*{
color:red;
}
<p >例，因為用的color屬性，調整的是紅色，這條語句也就變成紅色</p>
<a >例，因為用的color屬性，調整的是紅色，這條語句也就變成紅色</a>
_______________________________________________________
標簽名/類名等等空格標簽名/類名等等空格。。。 {
屬性：值;
}
1、後代選擇器必須用空格隔開
2、後代不僅僅是兒子，也包括孫子、重孫子
3、後代選擇器不僅僅可以使用標簽名稱，還可以使用其他選擇器比如id或class
4、後代選擇器可以通過空格一直延續下去
#id1 li p {
color: red;
}
<ul id=‘id1‘>
<li >
<p >例，因為用的color屬性，調整的是紅色，這條語句也就變成紅色</p>
</li>
</ul>
_______________________________________________________
子元素選擇器
找到制定標簽的所有特點的直接子元素，然後設置屬性
標簽名/類名等等>標簽名/類名等等>。。。 {
屬性：值;
}
#id1>li>p {
color: red;
}
1、子元素選擇器之間需要用>符號鏈接，並且不能有空格
比如div >p會找div標簽的所有後代標簽，標簽名為">p"
2、子元素選擇器只會查找兒子，不會查找其他嵌套的標簽
3、子元素選擇器不僅可以用標簽名稱，還可以使用其他選擇器,比如id或class
4、子元素選擇器可以通過>符號一直延續下去
<ul id=‘id1‘>
<li >
<p >例，因為用的color屬性，調整的是紅色，這條語句也就變成紅色</p>
</li>
</ul>
<p >不是子節點，所以不改變顏色</p>
_______________________________________________________
相鄰選擇器
給指定選擇器後面緊跟的那個選擇器選中的標簽設置屬性
選擇器1+選擇器2 {
屬性：值;
}
1、相鄰兄弟選擇器必須通過+號鏈接
2、相鄰兄弟選擇器只能選中你緊跟其後的那個標簽，不能選中被隔開的標簽
p+a {
color: red;
}
<p >啦啦啦德瑪西亞</p>
<a >例，因為用的color屬性，調整的是紅色，這條語句也就變成紅色</a>
_______________________________________________________
兄弟選擇器
給指定選擇器後面的所有選擇器中的所有標簽設置屬性
選擇器1~選擇器2 {
屬性：值;
}
1、通用兄弟選擇器必須用~來鏈接
2、通用兄弟選擇器選中的是指選擇器後面的某個選擇器選中的所有標簽
無論有沒有被隔開，都可以被選中
p+a {
color: red;
}
<p >啦啦啦德瑪西亞</p>
<a >例，因為用的color屬性，調整的是紅色，這條語句也就變成紅色</a>
<a >例，因為用的color屬性，調整的是紅色，這條語句也就變成紅色</a>
<a >例，因為用的color屬性，調整的是紅色，這條語句也就變成紅色</a>
_______________________________________________________
交集選擇器
給所有選擇器選中的標簽中，相交的那部分標簽設置屬性
選擇器1選擇器2 {
屬性：值;
}
1、選擇器與選擇器之間沒有任何鏈接符號
2、選擇器可以使用標簽名稱、id、class
3、交集選擇器在企業開發中並不多見，了解即可
因為：p.part1 完全可以用.part1取代
p.part1 {
color: red;
}
<p class="part1">例，因為用的color屬性，調整的是紅色，這條語句也就變成紅色</p>
_______________________________________________________
並集選擇器
給所有滿足條件的標簽設置屬性
選擇器1，選擇器2{
屬性：值
}
1、選擇器與選擇器之間必須用逗號來鏈接
2、選擇器可以使用標簽名稱、id、class
p,a{
color:red;
}
<p >例，因為用的color屬性，調整的是紅色，這條語句也就變成紅色</p>
<a >例，因為用的color屬性，調整的是紅色，這條語句也就變成紅色</a>
_______________________________________________________
序列選擇器
標簽:first-child
同級別的第一個
標簽是p的話找同級別的，第一個是p就效果調整
標簽:last-child
同級別的最後一個
標簽是p的話找同級別的，倒數第一個是p就效果調整
標簽:nth-child(n)
同級別第n個
標簽是p的話找同級別的，第n個是p的話就效果調整
標簽:nth-last-child(n)
同級別第n個
標簽是p的話找同級別的，倒數第n個是p的話就效果調整
標簽：:first-of-type
同級別同類別第一個
標簽是p的話找同級別的，然後找出所有的p標簽的，調整第一個p標簽的效果
標簽：:last-of-type
同級別同類最後一個
標簽是p的話找同級別的，然後找出所有的p標簽的，調整倒數第一個p標簽的效果
標簽：:nth-of-type(n)
同級別同類第n個
標簽是p的話找同級別的，然後找出所有的p標簽的，調整第n個p標簽的效果
標簽：:nth-last-of-type(n)
同級別同類型的倒數第n個
標簽是p的話找同級別的，然後找出所有的p標簽的，調整倒數第n個p標簽的效果
標簽：:only-of-type
同類型的唯一一個
標簽是p的話，只有它是p類的唯一一個才會調整他的效果
標簽：:only-child
同級別的唯一一個
標簽是p的話，當前級別只有他一行才調整他的效果
_______________________________________________________
屬性選擇器
該選擇器，最常用於input標簽
[屬性名]
中括號包裹屬性
如果屬性名為id，所有帶id屬性的全部調整
其他選擇器[屬性名]
選擇器後跟中括號，括號中跟屬性
如果選擇器為p，屬性名為id，所有p標簽帶id屬性的全部調整
[屬性名=值]
中括號中，屬性名帶值的
如果屬性名為class，值為1，那所有class=1的顯示都調整
[屬性名^=值]
中括號中，屬性和值中間加^
如果屬性名為class，值為aa,那所有class=的值的開頭帶aa的顯示都調整
[屬性名$=值]
中括號中，屬性和值中間加$
如果屬性名為class，值為aa,那所有class=的值的結尾帶aa的顯示都調整
[屬性名*=值]
中括號中，屬性和值中間加*
如果屬性名為class，值為aa,那所有class=的值中帶aa的顯示都調整
_______________________________________________________
偽類選擇器
沒有訪問的超鏈接a標簽樣式：
標簽:link {
屬性: 值;
}
如果標簽為a，那他沒別訪問時就會根據{}內的屬性和值調整顯示
訪問過的超鏈接a標簽樣式：
標簽:visited {
屬性: 值;
}
如果標簽為a，那它被訪問過再打開時就會根據{}內的屬性和值調整顯示
鼠標懸浮在元素上應用樣式：
沒有訪問的超鏈接a標簽樣式：
標簽:hover {
屬性: 值;
}
如果標簽為a，那當鼠標移到該鏈接上時就會根據{}內的屬性和值調整顯示
鼠標點擊瞬間的樣式：
標簽:active {
屬性: 值;
}
如果標簽為a，那當時鼠標點擊到時就會根據{}內的屬性和值調整顯示
input輸入框獲取焦點時樣式：
標簽:focus {
屬性: 值;
}
如果標簽為a，那當你點擊時輸入框就會根據{}內的屬性和值調整顯示
1 a標簽的偽類選擇器可以單獨出現，也可以一起出現
2 a標簽的偽類選擇器如果一起出現，有嚴格的順序要求，否則失效
link，visited，hover，active
3 hover是所有其他標簽都可以使用的
4 focus只給input標簽使用
_______________________________________________________
偽元素選擇器
首字母調整：
標簽:first-letter {
屬性: 值;
}
如果標簽為p，那p標簽的的首字母做調整顯示
在元素的內容前面插入新內容：
標簽:before {
屬性: 值;
}
如果標簽為p，那p標簽內容前方加入新內容並做調整顯示
在元素的內容後面插入新內容：
標簽:after {
屬性: 值;
}
如果標簽為p，那p標簽內容後方加入新內容並做調整顯示
_______________________________________________________
css三大特性
繼承性
1、定義：給某一個元素設置一些屬性，該元素的後代也可以使用，這個我們就稱之為繼承性
2、註意：
1、只有以color、font-、text-、line-開頭的屬性才可以繼承
2、a標簽的文字顏色和下劃線是不能繼承別人的
3、h標簽的文字大小是不能繼承別人的，會變大，但是會在原來字體大小的基礎上變大
ps:打開瀏覽器審查元素可以看到一些inherited from。。。的屬性
3、應用場景：
通常基於繼承性統一設置網頁的文字顏色，字體，文字大小等樣式
層疊性
1、定義：CSS全稱：Cascading StyleSheet層疊樣式表，層疊性指的就是CSS處理沖突的一種能力，即如果有多個選擇器選中了同一個標簽那麽會有覆蓋效果
2、註意：
1、層疊性只有在多個選擇器選中了同一個標簽，然後設置了相同的屬性，
才會發生層疊性
ps：通過谷歌瀏覽器可以查看到，一些屬性被劃掉了
優先級
1、定義：當多個選擇器選中同一個標簽，並且給同一個標簽設置相同的屬性時，如何層疊就由優先級來確定
2、優先級
整體優先級從高到底：行內樣式>嵌入樣式>外部樣式
在整體優先級的基礎上
1.直接選中 > 間接選中(即繼承而來的)
2、如果都是間接選中，那麽誰離目標標簽比較近，就聽誰的
3、如果都是直接選中，並且都是同類型的選擇器，那麽就是誰寫的在後面就聽誰的
4、如果都是直接選中，並且是不同類型的選擇器，那麽就會按照選擇器的優先級來層疊
id > 類 > 標簽 > 通配符(也算直接選中) > 繼承 > 瀏覽器默認（即沒有設置任何屬性）
優先級之!important
1、作用：還有一種不講道理的!import方式來強制指定的屬性的優先級提升為最高，但是不推薦使用。因為大量使用!import的代碼是無法維護的。
2、註意：
1、!important只能用於直接選中，不能用於間接選中
2、!important只能用於提升被指定的屬性的優先級，其他屬性的優先級不會被提升
3、!important必須寫在屬性值分號的前面
優先級之權重
1、強調
如果都是直接選中，並且混雜了一系列其他的選擇器一起使用時，則需要通過計算機權重來判定優先級
2、計算方式
1、id數多的優先級高
2、id數相同，則判定類數多的優先級高
3、id數、class數均相同，則判定標簽數多的優先級高
4、若id數、class數、標簽數均相同，則無需繼續往下計算了，誰寫在後面誰的優先級高
*/
控制器解釋