JAVAEE------css層疊樣式表知識點總結(jié)

CSS

1、css概述
    * Cascading Style Sheets：層疊樣式表
    ** 層疊：1層1層（優(yōu)先級，終究以哪一個樣式為準(zhǔn)）
    ** 樣式表：很多的屬性和屬性值
    *** 增強頁面的顯示效果

    *** CSS將網(wǎng)頁內(nèi)容和顯示樣式進(jìn)行分離，提高了顯示功能

    * 要想使用css，必須要和html在1起使用

2、css和html的結(jié)合方式
    （1）每一個html標(biāo)簽都有1個屬性 style，在style里面設(shè)置樣式
        * <div style="background-color:red;color:green;">天之道，損有余而補不足，是故虛勝實，不足勝有余。</div>
        * 格式 style="屬性名1:屬性值1;屬性名2:屬性值2"
    （2）使用html的1個標(biāo)簽 <style type="text/css"> css代碼 </style>
        * 1般style標(biāo)簽寫在頭標(biāo)簽里面
        * div {
            background-color:black;
            color:white;
         }    
        * 利用場景：只是在1個頁面設(shè)置這個樣式，其他頁面設(shè)置其他的樣式

    （3）在style標(biāo)簽里面使用語句
        * 首先創(chuàng)建1個css文件
        * <style type="text/css"> @import url(css文件路徑); </style>
        * <style type="text/css">
            @import url(div.css);
        </style>
        * 注意：在某些閱讀器下不支持

    （4）引入外部的css文件
        * 使用頭標(biāo)簽 link
        * <link rel="stylesheet" type="text/css" href="css_3.css" />
        * 利用場景：比如現(xiàn)在有1萬個頁面，1萬個頁面需要相同的樣式

    ** css優(yōu)先級
        * html代碼加載順序：從上到下加載
        * 1般情況下，后加載的優(yōu)先級高

    ** 格式：屬性名:屬性值 ; 屬性名:屬性值;

3、css的基本選擇器
    * 在哪一個標(biāo)簽上設(shè)置樣式
    （1）標(biāo)簽選擇器
        * 使用標(biāo)簽名作為選擇器
        * p {
            background-color:green;
         }
    （2）class選擇器
        * 每一個html標(biāo)簽都有1個屬性class
        * .haha {
            background-color:red;
            color:green;
        }

    （3）id選擇器
        * 每一個html標(biāo)簽都有1個屬性id
        * #hehe {
            background-color:#990099;
            color:#ccff99;
         }
        * id建議不要相同，后面js獲得值
    
    ** 優(yōu)先級
        style > id > class > 標(biāo)簽選擇器

4、css的擴大選擇器
    （1）關(guān)聯(lián)選擇器(設(shè)置嵌套標(biāo)簽里面的樣式)
        * <div><p>aaaaa</p></div>
        * <p>bbbbb</p>
        ** 設(shè)置div里面的p標(biāo)簽里面的內(nèi)容

        * div p {
            background-color:blue;
        }

    （2）組合選擇器（設(shè)置不同的標(biāo)簽具有相同的樣式）
        * <div>qqqqqq</div>
        * <p>wwwwww</p>
        ** 設(shè)置div和p具有相同的樣式

        * div,p {
            background-color:orange;
        }

    （3）偽類元素選擇器(了解)
        * 實現(xiàn)1些簡單的動態(tài)效果
        * 不是1個真實的選擇器，css里面提供的1些選擇器，可以直接使用
        ** 超鏈接的狀態(tài)
        * 原始狀態(tài)    鼠標(biāo)放上去（懸停）   點擊（瞬間）  點擊以后
           :link        :hover              :active        :visited
        * 如何記憶：
        lv ha

5、CSS的盒子模型
    * 要進(jìn)行布局，首先要把數(shù)據(jù)封裝到1塊區(qū)域里面去（div）
    * 邊框 border : border-width || border-style || border-color
        ** 上下左右 border-top  border-bottom  border-left  border-right
    * 內(nèi)邊距：padding：length
        ** 有上下左右4個內(nèi)邊距
    * 外邊距 ：margin：length
        ** 有上下左右4個外邊距

6、css的布局（漂浮）
    * float屬性:left right

7、案例：實現(xiàn)圖文混排效果

8、css布局（定位）
    * position：absolute  relative
    ** absolute：將對象從文檔流中拖出，使用 left ， right ， top ， bottom  進(jìn)行定位
    ** relative: 不會把對象從文檔流中拖出，使用 left ， right ， top ， bottom  進(jìn)行定位