CSS相關

互聯網前端分爲三層

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

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

css的引入方式

行內樣式

<div>
    <p style="color: green">我是一個段落</p>
</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的選擇器

基本選擇器

標籤選擇器

能夠選中全部的標籤元素，好比div，ul，li ，p等等，無論標籤藏的多深，都能選中，選中的是全部的，而不是某一個，因此說 "共性" 而不是 」特性「

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

id選擇器

#選中id

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

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

#s2{
    font-size: 30px;
}

類選擇器

任何的標籤均可以加類，可是類是能夠重複,屬於歸類的概念。同一個標籤中能夠攜帶多個類，用空格隔開

必定要有」公共類「的概念

.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>

高級選擇器

後代選擇器

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

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

子代選擇器

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

.container>p{
    color: yellowgreen;
 }

並集選擇器

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

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

好比豆瓣的首頁使用並集選擇器

body, div, dl, dt, dd, ul, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, blockquote {
    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;
}

它表示二者選中以後元素共有的特性

屬性選擇器

根據標籤中的屬性，選中當前的標籤

語法：

/*根據屬性查找*/
            /*[for]{
                color: red;
            }*/
            
            /*找到for屬性的等於username的元素 字體顏色設爲紅色*/
            /*[for='username']{
                color: yellow;
            }*/
            
            /*以....開頭  ^*/ 
            /*[for^='user']{
                color: #008000;
            }*/
            
            /*以....結尾   $*/
            /*[for$='vvip']{
                color: red;
            }*/
            
            /*包含某元素的標籤*/
            /*[for*="vip"]{
                color: #00BFFF;
            }*/
            
            /**/
            
            /*指定單詞的屬性*/
            label[for~='user1']{
                color: red;
            }
            
            input[type='text']{
                background: red;
            }

僞類選擇器

通常用在超連接a標籤中

/*沒有被訪問的a標籤的樣式*/
        .box ul li.item1 a:link{
            
            color: #666;
        }
        /*訪問事後的a標籤的樣式*/
        .box ul li.item2 a:visited{
            
            color: yellow;
        }
        /*鼠標懸停時a標籤的樣式*/
        .box ul li.item3 a:hover{
            
            color: green;
        }
        /*鼠標摁住的時候a標籤的樣式*/
        .box ul li.item4 a:active{
            
            color: yellowgreen;
        }

僞元素選擇器

/*設置第一個首字母的樣式*/
        p:first-letter{
            color: red;
            font-size: 30px;

        }
        
/* 在....以前 添加內容   這個屬性使用不是很頻繁 瞭解  使用此僞元素選擇器必定要結合content屬性*/
        p:before{
            content:'alex';
        }
        
        
/*在....以後 添加內容，使用很是頻繁 一般與我們後面要講到佈局 有很大的關聯（清除浮動）*/
        p:after{
            content:'&';
            color: red;
            font-size: 40px;
        }　　

使用a標籤的僞類選擇器，咱們必定要遵循"愛恨準則"  LoVe HAte

css的兩大特性

繼承性

面嚮對象語言都會存在繼承的概念，在面嚮對象語言中，繼承的特色：繼承了父類的屬性和方法。那麼咱們如今主要研究css，css就是在設置屬性的。不會牽扯到方法的層面。

繼承：給父級設置一些屬性，子級繼承了父級的該屬性，這就是咱們的css中的繼承。

記住：有一些屬性是能夠繼承下來 ： color 、 font-*、 text-*、line-* 。主要是文本級的標籤元素

可是像一些盒子元素屬性，定位的元素（浮動，絕對定位，固定定位）不能繼承

層疊性

權重的標籤覆蓋掉了權重小的標籤，說白了 ，就是被幹掉了
權重： 誰的權重大，瀏覽器就會顯示誰的屬性

誰的權重大？ 很是簡單就是小學的數數。

數：id的數量 class的數量 標籤的數量，順序不能亂

/*1  0  0 */顯示紅色
#box{


    color: red; 
}
/*0  1  0*/
.container{
    color: yellow;
}
/*0  0  1*/
p{
    color: purple;
}
/*依次按順序數,若同位的大,後面的就不用比較了,這個是第一個權重大 */

權重同樣時,之後來設置的屬性爲準，前提必須權重同樣 ,‘後來者居上 ’

#box2 .wrap3 p{
            color: yellow;
        }
        
        #box1 .wrap2 p{
            color: red;
        }

/* 之後來的屬性爲準,因此是紅色的*/

若第一條css設置的屬性值,是經過繼承性設置成的顏色,那麼繼承來的屬性，它的權重爲0。它沒有資格跟咱們下面選中的標籤對比

#box1 #box2 .wrap3{
    color: red;
}
        
#box2 .wrap3 p{
    color: green;
}

/* 繼承的紅色,權重爲0,因此按下面的,它是綠色*/

權重都是0,那麼就是"就近原則" ： 誰描述的近，就顯示誰的屬性。所謂描述的近，就是選中到最內層的距離越近

總結：

1. 先看標籤元素有沒有被選中，若是選中了，就數數 （id,class,標籤的數量） 誰的權重大 就顯示誰的屬性。權重同樣大，後來者居上
2. 若是沒有被選中標籤元素，權重爲0。
3. 若是屬性都是被繼承下來的 權重都是0 。權重都是0:"就近原則" ： 誰描述的近，就顯示誰的屬性

層疊性權重的相同處理

1. 當權重相同時，之後來設置的屬性爲準，前提必定要權重相同

#box2 .wrap3 p{
    color: yellow;
}
        
#box1 .wrap2 p{
    color: red;
}
/*此時顯示的是紅色的*/

2.  第一個選擇器沒有選中內層標籤，那麼它是經過繼承來設置的屬性，那麼它的權重爲0。第二個選擇器選中了內層標籤，有權重

因此 繼承來的元素 權重爲0。跟選中的元素沒有可比性

#box1 #box2 .wrap3{
    color: red;
}
#box2 .wrap3 p{
    color: green;
}
/*此時顯示的是綠色的*/

3. 若是都是繼承來的屬性，誰描述的近，顯示誰的屬性。'就近原則'

#box1 #box2 .wrap3{
    color: red;
}
 .wrap1 #box2{
    color: green;
}

/*此時顯示的是紅色*/

!important 的使用

• !important:設置權重爲無限大 
• !important 不影響繼承來的權重，隻影響選中的元素。不要隨便使用!important,由於使用它會影響頁面的佈局