深層布局，逐級進去，指向某一個標簽，叫：關聯選擇器 - 設置嵌套標簽的樣式 div p {}

day02

昨天內容回顧
    1、html的操作思想
        ** 使用標簽把要操作的數據包起來，通過修改標簽的屬性值來實現標簽內數據樣式的變化
        *** <font size="5"></font>
    
    2、圖像標簽
        <img src="圖片的路徑"/>
        ** 通過html訪問本地圖片，使用絕對路徑，目前有問題
    
    3、超鏈接標簽
        <a href="" target="_blank"></a>

    4、表格標簽
        ** 技巧：數裏面有多少行，每行裏面有多少個單元格
        ** <table></table>
            <tr>  <td>  <th>

    5、表單標簽
        ** <form></form>
            - action  method  enctype
            - method: get post

        ** 輸入項
            *** 有name屬性
            * 普通輸入項 type="text"
            * 密碼： password
            * 單選：radio    
                - name值相同
                - value值
            * 復選框：checkbox
                - name值相同
                - value值
            
            * 下拉框 select option
            * 文本域 textarea
            * 隱藏項：type="hidden"
            * 文件： type="file"

            * 提交按鈕 type="submit"
            * 重置 ： reset
            * 使用圖片提交： <input type="image" src=""/>
            * 普通按鈕 type="button"

    6、div和span
        * div: 自動換行
        * span：在一行顯示


CSS

1、css的簡介
    * css： 層疊樣式表
        ** 層疊：一層一層的

        ** 樣式表：
            很多的屬性和屬性值
    * 是頁面顯示效果更加好
    * CSS將網頁內容和顯示樣式進行分離，提高了顯示功能。

2、css和html的結合方式（四種結合方式）
    （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:blue;
                color: red;
            }        
         </style>

    （3）在style標簽裏面 使用語句（在某些瀏覽器下不起作用）
        @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文件的路徑" />
    
    *** 第三種結合方式，缺點：在某些瀏覽器下不起作用，一般使用第四種方式

    *** 優先級（一般情況）
        由上到下，由外到內。優先級由低到高。
        *** 後加載的優先級高

    *** 格式  選擇器名稱 
 
{ 屬性名：屬性值；屬性名：屬性值；…….}

3、css的基本選擇器（三種）
    ** 要對哪個標簽裏面的數據進行操作
    
    （1）標簽選擇器
        * 使用標簽名作為選擇器的名稱 
            div {
    
                background-color:gray;
                
                color:white;
            }

    （2）class選擇器
        * 每個html標簽都有一個屬性 class 
        - <div class="haha">aaaaaaa</div>
        - .haha 
 
{
            background-color: orange;
         }
    
    （3）id選擇器
        * 每個html標簽上面有一個屬性 id
        - <div id="hehe">bbbbb</div>
        - #hehe {
            background-color: #333300;
        }
    *** 優先級
        style > id選擇器 > class選擇器 > 標簽選擇器

4、css的擴展選擇器
    （1）關聯選擇器
        * <div><p>wwwwwwww</p></div>
        * 設置div標簽裏面p標簽的樣式，嵌套標簽裏面的樣式
        * div p {    
            background-color: green;
        }
    
    （2）組合選擇器
        * <div>1111</div>
          <p>22222</p>
        * 把div和p標簽設置成相同的樣式，把不同的標簽設置成相同的樣式
        * div,p {
            background-color: orange;
        }
    
    （3）偽元素選擇器(了解，瀏覽器的兼容性比較差)
        * css裏面提供了一些定義好的樣式，可以拿過來使用
        * 比如超鏈接 
            ** 超鏈接的狀態
            原始狀態   鼠標放上去狀態  點擊           點擊之後
             :link         :hover        :active        :visited

             ** 記憶的方法
                lv  ha

5、css的盒子模型
    ** 在進行布局前需要把數據封裝到一塊一塊的區域內（div）
    （1）邊框
        border: 2px solid blue;
        border：統一設置
        上 border-top
        下 border-bottom
        左 border-left
        右 border-right

    （2）內邊距
        padding:20px;
        使用padding統一設置
        也可以分別設置
        上下左右四個內邊距

    （3）外邊距
        margin: 20px;
        可以使用margin統一設置
        也可以分別設置
        上下左右四個外邊距

6、css的布局的漂浮(了解)
    float： 
        ** 屬性值 
        left  :　 文本流向對象的右邊 
        right  :　 文本流向對象的左邊

7、css的布局的定位（了解）
    position：
        ** 屬性值
            - absolute ：
                 *** 將對象從文檔流中拖出
                 *** 可以是top、bottom等屬性進行定位
            - relative ：
                *** 不會把對象從文檔流中拖出
                *** 可以使用top、bottom等屬性進行定位

8、案例 圖文混排案例
    ** 圖片和文字在一起顯示

9、案例 圖像簽名
    ** 在圖片上面顯示文字

10、上午內容總結
    1、css和html的四種結合方式（****）

    2、css的基本選擇器（****）
        * 標簽選擇器 使用標簽名
        * class選擇器 .名稱
        * id選擇器  #名稱

        ** 優先級
            style > id > class > 標簽
    
    3、css的擴展選擇器(了解)
        * 關聯選擇器
            - 設置嵌套標簽的樣式  div p {}
        * 組合選擇器
            - 不同的標簽具有相同的樣式 div,p{}
        * 偽元素選擇器
            * 超鏈接的狀態
                - 原始 :link
                - 懸停 :hover
                - 點擊 :active
                - 點擊之後 :visited

    4、盒子模型(了解)
        * 邊框 border:2px solid red;
        上下左右  border-top  border-bottom  border-left  border-right

        * 內邊距 padding:20px
        上下左右

        * 外邊距 margin:20px
        上下左右
        
        * 對數據進行操作，需要把數據放到一個區域裏面（div）
    
    5、布局的漂浮(了解)
        float
            - left: 後面的div到右邊
            - right：後面的div到左邊
    
    6、布局的定位(了解)
        position
            - absolute
                ** 從文檔流中拖出
            - relative
                ** 不會從文檔流中拖出

一般在目錄裏面，標出符號
    （********）：重點，代碼看懂，代碼會寫，代碼理解
        - （****重點中的重點***）
    （了解）：代碼看懂
    （理解）：能夠把原理講清楚

CSS-聯合選擇器