第二階段-css

一、css四種基本操作

   1. 在每個html標籤上面都有一個屬性style,把css和html結合在一起

       <div style="background-color:red;color:green;">

   2. 使用html的一個標籤實現<style>標籤,寫在head裡面

          <style type="text/css">

                       css程式碼

         </style>

        <style type="text/css">

                div{

                background-color:red;

               color:green;

              }

       </style>

   3. 在sytle標籤裡面使用語句

      @import url(css 檔案的路徑)

     第一步,建立一個css

    <style type="text/css">

     @import url(div.css);

       </style>

   4. 使用頭標籤link，引入外部css檔案

    第一步，建立一個css檔案

    <link rel="stylesheet" type="text/css"href="css檔案的路徑">

   優先順序(一般情況)

   由上到下,由外到內,優先順序由低到高

   後載入的優先順序高

   格式  選擇器名稱{屬性名:屬性值：屬性名：屬性值：}

二、css的基本選擇器(三種)

   (1) 標籤選擇器

         使用標籤名作為選擇的名稱

     div{

             background-color:red;

              color:white;

         }

   (2) class選擇器

     每個html標籤都有一個屬性class

    <div class="hahah">|aaaaa</div>

       .hahah{

              background-color:red;

    }

   (3) id選擇器

   每個html標籤都有一個屬性id

   <div class="hahah">|aaaaa</div>

    #hahah{

          background-color:red;

  } 

   *style>優先順序 id選擇器>class選擇器>標籤選擇器

三、css的擴充套件選擇器

 1.關聯選擇器

 <div><p>aaaaa</p></div>

設定div標籤裡面p標籤的樣式,巢狀標籤裡面的樣式

div p{

         background-color:red

   }

2.組合選擇器

<div>11111</div>

<p>45454</p>

把div和p標籤設定成相同的樣式,把不同發標籤設定相同的樣式

div,p{

      background-color:red;

    }

    3.偽元素選擇器

            css裡面提供一些定義好的樣式,可以拿過來使用

四、css的盒子模型

    1.邊框

    border: 2px solid blue;

    border:統一設定

    上 border-top

    下 border-bottom

    左 border-left

    右 border-right

    2.內邊距

      padding:20

       使用padiing統一配置

       也可以分別設定

      上下左右四個內邊距

    3.外邊距

       margin:20px;

       使用margin統一配置

    也可以分別設定

    上下左右四個內邊距

五、css的佈局的漂浮

   float:

  屬性值

  left:文字流行物件的右邊

  right:文字流行物件的左邊

六、css的佈局的定位

  position:

    屬性值

 absolute:

 將物件從文件流中拖出

 可以是top,bottom等屬性進行定位

 relative：

 不會把物件從文件流中拖出

  可以是top,bottom等屬性進行定位