表單控件 css的三中引入方式css選擇器

 

1. 表單控件:

單選框

若是兩個單選的name值同樣，會產生互斥效果

    <p>
            <!--單選框-->
        男<input type="radio" name="sex" value="man" checked="checked">
        女<input type="radio" name="sex" value="woman">
    </p>

　效果以下:

單選框正方形:多選

     <p>
            <!--單選框-->
        抽菸<input type="checkbox" name="fav" value="smoke">
        喝酒<input type="checkbox" name="fav" value="drink">
        湯頭<input type="checkbox" name="fav" value="lifa">

    </p>　　

 效果圖

 

上傳文件使用:

****注意：若是有文件須要提交給服務器，method必須爲POST，enctype必須爲multipart/form-data****

<input type="file">

 效果圖:

button  閉合標籤

submit提交按鈕

reset 重置按鈕

    <p>
        <input type="submit" value="註冊">
        <input type="button" value="登錄">
        <button type="submit">按鈕</button>
        <button type="reset">重置按鈕</button>  
    </p>

效果圖　

textarea　　　　rows行數   cols列數

 

    <p>
        <textarea name="" id="desc" cols="50" rows="20"></textarea>
    </p>　

效果圖: 

 

下拉列表:  　　selected(先選)

        <select name="xuanmei" id="">
            <option value="1">熊姐</option>
            <option value="2" selected = 'selected'>婕哥</option>
            <option value="3">張陽</option>
            <option value="4">五爪</option>
        </select>　　

效果圖:

 

　引入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>

內接樣式　　　　在head標籤中 用style標籤聲明

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

</style>

外接樣式-連接式

在head標籤中,用link連接另外的一個css文件(解耦)

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

外接樣式-導入式

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

總結: 行內樣式的優先級大於內接樣式和外接

 

 

 

 

css的選擇器：1.基本選擇器 2.高級選擇器

 

基本選擇器包含：

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是兩個不同的屬性值

 1 #box{
 2     background:green;
 3 }
 4             
 5 #s1{
 6     color: red;
 7 }
 8 
 9 #s2{
10     font-size: 30px;
11 }

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來獲取到標籤

 

 

 

高級選擇器:

• 後代選擇器

• 子代選擇器

• 並集選擇器

• 交集選擇器

後代選擇器

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

1 .container p{
2     color: red;        
3 }
4 .container .item p{
5     color: yellow;
6 }

　　

子代選擇器

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

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

並集選擇器

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

1 /*並集選擇器*/
2 h3,a{
3     color: #008000;
4     text-decoration: none;
5                 
6 }

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

 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>這樣的標籤。

那麼

 1 h4{
 2     width: 100px;
 3     font-size: 14px;
 4 }
 5 .active{
 6     color: red;
 7     text-decoration: underline;
 8 }
 9 /* 交集選擇器 */
10 h4.active{
11     background: #00BFFF;
12 }

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

 

 

屬性選擇器:

 

屬性選擇器,字面意思就是根據標籤中的屬性, 選中當前的標籤

 

語法：

 

 1 /*根據屬性查找*/
 2             /*[for]{
 3                 color: red;
 4             }*/
 5             
 6             /*找到for屬性的等於username的元素 字體顏色設爲紅色*/
 7             /*[for='username']{
 8                 color: yellow;
 9             }*/
10             
11             /*以....開頭  ^*/ 
12             /*[for^='user']{
13                 color: #008000;
14             }*/
15             
16             /*以....結尾   $*/
17             /*[for$='vvip']{
18                 color: red;
19             }*/
20             
21             /*包含某元素的標籤*/
22             /*[for*="vip"]{
23                 color: #00BFFF;
24             }*/
25             
26             /**/
27             
28             /*指定單詞的屬性*/
29             label[for~='user1']{
30                 color: red;
31             }
32             
33             input[type='text']{
34                 background: red;
35             }

 

 

僞類選擇器:　　

僞類選擇器通常會用在超連接a標籤中,使用a標籤的僞類選擇器,咱們必定要遵照"愛恨準則"

LoVe  HAte 　　　　現愛後恨

 1               /*沒有被訪問的a標籤的樣式*/
 2         .box ul li.item1 a:link{
 3             
 4             color: #666;
 5         }
 6         /*訪問事後的a標籤的樣式*/
 7         .box ul li.item2 a:visited{
 8             
 9             color: yellow;
10         }
11         /*鼠標懸停時a標籤的樣式*/
12         .box ul li.item3 a:hover{
13             
14             color: green;
15         }
16         /*鼠標摁住的時候a標籤的樣式*/
17         .box ul li.item4 a:active{
18             
19             color: yellowgreen;
20         }

　　

css3的選擇器nth-child()

              /*選中第一個元素*/
        div ul li:first-child{
            font-size: 20px;
            color: red;
        }
        /*選中最後一個元素*/
        div ul li:last-child{
            font-size: 20px;
            color: yellow;
        }
        
        /*選中當前指定的元素  數值從1開始*/
        div ul li:nth-child(3){
            font-size: 30px;
            color: purple;
        }
        
        /*n表示選中全部,這裏面必須是n, 從0開始的  0的時候表示沒有選中*/
        div ul li:nth-child(n){
            font-size: 40px;
            color: red;
        }
        
        /*偶數*/
        div ul li:nth-child(2n){
            font-size: 50px;
            color: gold;
        }
        /*奇數*/
        div ul li:nth-child(2n-1){
            font-size: 50px;
            color: yellow;
        }
        /*隔幾換色  隔行換色
             隔4換色 就是5n+1,隔3換色就是4n+1
            */
        
        div ul li:nth-child(5n+1){
            font-size: 50px;
            color: red;
        }　

僞元素選擇器

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

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

css的繼承性和層疊性

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;
}

是否是感受明白了呢？好的，再給你們加深點難度。　　

1     <div id='box1' class="wrap1">
2         <div id="box2" class="wrap2">
3             <div id="box3" class="wrap3">
4                 <p>再來猜猜我是什麼顏色？</p>
5             </div>
6         </div>
7     </div>

        #box1 #box2 p{
            color: yellow;
        }
        
        #box2 .wrap3 p{
            color: red;
        }
        
        div div #box3 p{
            color: purple;
        }
        
        
        div.wrap1 div.wrap2 div.wrap3 p{
            color: blue;
        }

好的。那麼上面的這個案例你們是否懂了呢？那麼接下來咱們繼續看案例

仍是上面那個html結構，若是我設置如下css，會顯示什麼顏色呢。

1         #box2 .wrap3 p{
2             color: yellow;
3         }
4         
5         #box1 .wrap2 p{
6             color: red;
7         }

答案是紅色的。結論：當權重同樣的時候 是之後來設置的屬性爲準，前提必須權重同樣 。‘後來者居上 ’。

 

Good,咱們繼續看下面的css，你來猜如下此時字什麼顏色？

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

答案是綠色。哈哈，是否是感受快懵掉了。其實你們只要記住這點特性就能夠。第一條css設置的屬性值，是經過繼承性設置成的紅色，那麼繼承來的屬性，它的權重爲0。它沒有資格跟咱們下面選中的標籤對比。

那你們猜測一下若是都是被繼承來的屬性，那麼字會顯示什麼顏色呢？

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

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

 

小總結一下：

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

 

 

層疊性權重相同處理　　

直接上代碼，看效果！

第一種現象：當權重相同時，之後來設置的屬性爲準，前提必定要權重相同

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

咱們會發現此時顯示的是紅色的。

 

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

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

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

咱們會發現此時顯示的是綠色的。

 

第三種現象：若是都是繼承來的屬性，誰描述的近，顯示誰的屬性。'就近原則'

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

!important 的使用。

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