CSS顏色、單位、文本樣式

1、CSS顏色
    關鍵字 red
    16進制的6位 #ffffff
    16進制的3位 #fff
    rgb(0,255,100) 取值範圍：0~255 (r:red、g:green、b:blue)
    rgba(0,255,100,0.5) 最後值a表示爲顏色的透明度 取值範圍：0~1
2、CSS單位：
    px 絕對單位
    em 相對單位  相對於瀏覽器的默認的font-size的大小16px  則1em=16px
            手動修改了body的font-size的大小爲20px  則1em=20px
    rem 相對單位   1rem=16px，與font-size沒有關係

    百分比%  當前元素佔父類元素的百分比
3、CSS中的文本樣式：
    a.font屬性：
        1.字體類型：
            font-family:字體屬性值(宋體、cursive【草書】、微軟雅黑 等)
            字體棧(屬性值前面的不支持則依次向後取值)：
            font-family:cursive,宋體,serif

            若是須要使用網上字體，則相應代碼以下：

            /*網絡字體，寫在須要使用網絡字體的選擇器代碼塊中*/
            font-family:webfont;

            /*聲明字體家族,其不包含在任何選擇器樣式代碼塊裏面*/
            @font-face{
                /*字體家族名字*/
                font-family: 'webfont';
                /*地址*/
                src:url('./font/1.ttf');
            }        

View Code

       

　　 2.字體傾斜：
            font-style:屬性值(normal【正常】、italic【傾斜】、oblique【模擬傾斜】)

        3.字體粗細：
            font-weight:屬性值(normal【正常】、bold【加粗】、lighter【比父元素更細】、bloder【比父元素更粗】、取數值範圍：100~900)

        4.字體變形(大小寫)
            text-transform:屬性值(none、uppercase【全大寫】、lowercase【全小寫】、capitalize【首字母大寫】、full-width【單個字體等寬】)


    b.text屬性：
        1.文本修飾：
            text-decoration:屬性值(none、underline【下劃線】、overline【上劃線】、line-through【刪除線】、)
            文本取值樣式線條對應的屬性：
                a.text-decoration-color:顏色值
                b.text-decoration-style:屬性值(wavy【波浪線】、double【雙實線】)
                c.text-decoration-line:屬性值(line-through【刪除線】)
        
        2.文本陰影：
            text-shadow: 23px 23px 1px #ccc,0px 13px 1px coral;   文本陰影 x方向偏移 y方向偏移 模糊距離(清晰度) 陰影顏色

    c.list屬性：
        1.列表項目編號類型：
            list-style-type:屬性值(none【去除項目編號】、disc【黑圓點】、decimal【數值】等等)

        2.列表圖片編號：
            list-style-image:url(對應圖片路徑)

        3.列表項目編號位置：(默認爲：outside；是否包含在li標籤內)
            list-style-position:屬性值(outside、inside)

        4.列表類型：
            list-style:disc url(圖片路徑) inside;   (list-style:[<type>] [<image>] [<position>];)
            list-style:none;

    d.line-height屬性:
        對設置了寬高的元素
            --使用text-align:center;(內部文本水平居中)
            --使用line-height:元素高度;(內部文本垂直居中)