CSS-聯合選取器

標籤：sub   不同的   表格   好的   下拉   ***   關聯   定義   方式   

 

深層布局，逐級進去，指向某一個標籤，叫：關聯選取器 - 設定嵌套標籤的樣式 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：在一行顯示CSS1、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  ha5、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-聯合選取器