Day5 CSS基本樣式和C3選擇器

　　　　　　　　　　　　　　　　Day5 CSS基本樣式和C3選擇器

一.背景屬性
 1.背景顏色
            background-color:transparent(默認值，透明);

            顏色的取值：
            1)關鍵字  red，blue，yellow...
            2)十六進制  #ffffff :白色   #000000：黑色  #cccccc  #dddddd  #333333   #666666  #999999:灰色
                         #fff             #000           #ccc     #ddd

            3)rgb(0,0,0)  三原色  0-255

            4)rgba(0,0,0,.5)  a表明透明度 取值0-1  0  徹底透明      1  不透明

            2.背景圖片
            background-image:url(); 默認值none  沒有背景圖
            默認水平垂直平鋪

            3.背景圖片是否平鋪
            background-repeat:repeat| no-repeat|repeat-x|repeat-y;
                              默認值   不平鋪    水平平鋪   垂直平鋪

            4.背景圖片大小
            background-size: px | % | cover | contain ;

•   cover     : 徹底覆蓋背景區域，可是有部分背景圖片沒法徹底顯示
•   contain   :擴展圖片到最大尺寸，可是部分背景區域可能沒法徹底覆蓋

　　　　(設置圖片用寬高,設置背景圖片用size;)

            5.背景定位
            background-position:0 0;
            取值：px  %  left  right  top  bottom center
            當只取一個值時，另一個值默認爲center
            右下爲正值

            6.背景固定
             background-attachment: scroll|fixed;
                                    　　　　  (默認 | 固定)

            7.簡寫background
             當一個屬性有多個屬性值時，空格隔開,不區分前後順序

　　　 若是不設置其中的某個值，也不會出問題，取默認值，好比 background:url('smiley.gif') no-repeat; 也是容許的。


二.字體屬性
除了超連接a,其餘的標籤字體顏色均可以繼承.需給a單獨設置.
1.字體顏色 
            color: 規定文本顏色 ;
        顏色的取值：
            1)關鍵字  red，blue，yellow...
            2)十六進制  #ffffff :白色   #000000：黑色  #cccccc  #dddddd  #333333   #666666  #999999:灰色
                         #fff             #000           #ccc     #ddd
            3)rgb(0,0,0)  三原色  0-255
            4)rgba(0,0,0,.5)  a表明透明度 取值0-1  0  徹底透明      1  不透明

         2.字體樣式
            font-style: 指定文本字體樣式;(正常normal默認值 / 斜體italic )

　　3.字體大小

　　　　font-size:指定文本字體大小 (  通常瀏覽器默認爲16px ,1px=1像素 )

　　　　　　 font-size:20px;

        3.字體是否加粗
            font-weight :normal(默認值) | bold（加粗）;
            100-900
            400=normal
            700=bold

        5.字體
            font-family:定義文本只用某個字體;
            逗號隔開多種字體
            一種字體多個單詞組成，必須加引號

三.文本屬性
1.文本裝飾，下劃線
        text-decoration: none;  默認值，無
        取值：

•   underline  下換線
•   overline  上劃線
•   line-through   刪除線

2.內容水平對齊方式
        text-align: left | right | center;(內容水平居中)

 3.英文大小寫轉換
            text-transform:none;
            text-transform: uppercase;   轉換爲大寫
            text-transform: lowercase;   轉換爲小寫
            text-transform: capitalize;  首字母大寫

　　　　　　　 (text-transform:只對英文生效,)

 4.文本首行縮進
            text-indent:指用來固定指定文本的第一行的縮進;
            取值：px  em
            px  絕對單位
            em   相對單位
            相對於父元素的字體大小  父元素 1em=16px(瀏覽器默認)  2em=32px  父元素10px   2em=20px
            父元素 20px  0.5em=10px                     (首行縮進兩個字符)
    一個字默認16px;兩個字32px;

5.
    1).行高
        一行文字垂直居中
        行高=高
        line-height: normal(默認設置合理行間距) | number | length(設置固定行間距)  ;

　　　　不容許使用負值,能夠取數字  行高=數字*字體大小

       2).去項目符號
        list-style-type: none;

三.關係選擇器
    1）子代選擇器   選擇器1>選擇器2{}
        選中直接子代  (用 大於號 表示)

    eg:
　　　　　　.box>span{
           color: red;　　　　　　
　　　　　　　　}

     

   2）後代選擇器   選擇器1 選擇器2{}
        選中全部後代  (中間用 空格 隔開)

     eg:
　　      　.box span{
           　　color: red;
     　　　　}

      

    3）相鄰兄弟選擇器   選擇器1+選擇器2{}
        平級  挨着的後面那一個(用 加號 表示)

   eg:
　　.two+p{
            font-size: 20px;
            color: gold;
      }

        4）通用兄弟選擇器   選擇器1~選擇器2{}
        平級  後面全部的兄弟(做用於多個元素,用~表示)

  eg:.two~p{
            font-size: 20px;
            color: gold;
        }

 

1.overflow:溢出部分

•       hidden  隱藏  
•       auto      自動
•       scroll  滾動條

overflow: hidden;　　　　　　　　　　　　　　　　　overflow: auto;　　　　　　　　　　　　　　overflow: scroll;
　　　　　　　

　　　　　　　　　　　　　 　　　　　　　　　　

 

 

　(將多餘文本隱藏,圖片同理)　　　　　　　　 (內容溢出顯示滾動條,若是不溢出不顯示滾動條)　　　　　　(顯示滾動條)

2.文字溢出省略號顯示  (三者缺一不可)
        1)文字在同一行顯示    white-space: nowrap;

        2)溢出部分隱藏     overflow: hidden;

        3)文字溢出省略號顯示    text-overflow: ellipsis|clip(裁剪);

　　　　　　white-space: nowrap;
            /*溢出部分隱藏*/
            overflow: hidden;
            /*文字溢出省略號顯示*/
            text-overflow: ellipsis;　　　　　　

　　　　　　　　

3.設置字符之間的距離 : letter-spacing: 1px;

 letter-spacing: 1px　　　　

　　　　(字符之間間距1px)