引入css方式（重點掌握）

1. 行內樣式

2. 內接樣式

3. 外接樣式

　　　　　3.1 鏈接式

　　　　　3.1 導入式

css介紹

現在的互聯網前端分三層：

• HTML：超文本標記語言。從語義的角度描述頁面結構。
• CSS：層疊樣式表。從審美的角度負責頁面樣式。
• JS：JavaScript 。從交互的角度描述頁面行為

CSS：Cascading Style Sheet，層疊樣式表。CSS的作用就是給HTML頁面標簽添加各種樣式，定義網頁的顯示效果。簡單一句話：CSS將網頁內容和顯示樣式進行分離，提高了顯示功能。

css的最新版本是css3，我們目前學習的是css2.1

接下來我們要講一下為什麽要使用CSS。

HTML的缺陷：

1. 不能夠適應多種設備
2. 要求瀏覽器必須智能化足夠龐大
3. 數據和顯示沒有分開
4. 功能不夠強大

CSS 優點：

1. 使數據和顯示分開
2. 降低網絡流量
3. 使整個網站視覺效果一致
4. 使開發效率提高了（耦合性降低，一個人負責寫html，一個人負責寫css）

比如說，有一個樣式需要在一百個頁面上顯示，如果是html來實現，那要寫一百遍，現在有了css，只要寫一遍。現在，html只提供數據和一些控件，完全交給css提供各種各樣的樣式。

行內樣式

1 <div>
2     <p style="color: green">我是一個段落</p>
3 </div>

內接樣式

<style type="text/css">
    /*寫我們的css代碼*/
        
    span{
    color: yellow;
    }

</style>

外接樣式-鏈接式

<link rel="stylesheet" href="./index.css">

外接樣式-導入式

<style type="text/css">
        @import url(‘./index.css‘);
</style>

css的選擇器：

1 .基本選擇器包含：

1.標簽選擇器
標簽選擇器可以選中所有的標簽元素，比如div，ul，li ，p等等，不管標簽藏的多深，都能選中，選中的是所有的，而不是某一個，所以說 "共性" 而不是 ”特性“

body{
    color:gray;
    font-size: 12px;
}
/*標簽選擇器*/
p{
    color: red;
font-size: 20px;
}
span{
    color: yellow;
}

2.id選擇器
# 選中id

同一個頁面中id不能重復。
任何的標簽都可以設置id
id命名規範 要以字母 可以有數字 下劃線 - 大小寫嚴格區分 aa和AA是兩個不一樣的屬性值

#box{
    background:green;
}
            
#s1{
    color: red;
}

#s2{
    font-size: 30px;
}

3.類選擇器

所謂類：就是class . class與id非常相似 任何的標簽都可以加類，但是類是可以重復,屬於歸類的概念。同一個標簽中可以攜帶多個類，用空格隔開

類的使用，能夠決定前端工程師的css水平到底有多牛逼？

玩類了，一定要有”公共類“的概念。

 .lv{
     color: green;
 
 }
 .big{
     font-size: 40px;
 }
 .line{
    text-decoration: underline;

  }

 <!-- 公共類    共有的屬性 -->
     <div>
         <p class="lv big">段落1</p>
         <p class="lv line">段落2</p>
         <p class="line big">段落3</p>
     </div>
     

總結：

• 不要去試圖用一個類將我們的頁面寫完。這個標簽要攜帶多個類，共同設置樣式

• 每個類要盡可能的小，有公共的概念，能夠讓更多的標簽使用

到底使用id還是用class？

答案：盡可能的用class。除非一些特殊情況可以用id

原因：id一般是用在js的。也就是說 js是通過id來獲取到標簽

2. 高級選擇器分為：

• 後代選擇器

• 子代選擇器

• 並集選擇器

• 交集選擇器

後代選擇器：

使用空格表示後代選擇器。顧名思義，父元素的後代（包括兒子，孫子，重孫子）

.container p{
    color: red;        
}
.container .item p{
    color: yellow;
}

子代選擇器：

使用>表示子代選擇器。比如div>p,僅僅表示的是當前div元素選中的子代(不包含孫子....)元素p。

1 .container>p{
2     color: yellowgreen;
3 }

並集選擇器：

多個選擇器之間使用逗號隔開。表示選中的頁面中的多個標簽。一些共性的元素，可以使用並集選擇器

/*並集選擇器*/
h3,a{
    color: #008000;
    text-decoration: none;
                
}

比如像百度首頁使用並集選擇器。

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
      margin: 0;
      padding: 0
   }
/*使用此並集選擇器選中頁面中所有的標簽，頁面布局的時候會使用*/

交集選擇器：

使用.表示交集選擇器。第一個標簽必須是標簽選擇器，第二個標簽必須是類選擇器 語法：div.active

比如有一個<h4 class=‘active‘></h4>這樣的標簽。

那麽

h4{
    width: 100px;
    font-size: 14px;
}
.active{
    color: red;
    text-decoration: underline;
}
/* 交集選擇器 */
h4.active{
    background: #00BFFF;
}

它表示兩者選中之後元素共有的特性。

前端css -- 引入方式和選擇器