JAVAEE------css層疊樣式表知識點總結

CSS

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

    *** CSS將網頁內容和顯示樣式進行分離，提高了顯示功能

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

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

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

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

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

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

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

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

4、css的擴大選擇器
    （1）關聯選擇器(設置嵌套標簽里面的樣式)
        * <div><p>aaaaa</p></div>
        * <p>bbbbb</p>
        ** 設置div里面的p標簽里面的內容

        * div p {
            background-color:blue;
        }

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

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

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

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

6、css的布局（漂?。?br>     * float屬性:left right

7、案例：實現圖文混排效果

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