CSS笔记

css:      层叠样式表
      1.什么是css？        美化html的        不能脱离html而单独存在

html:                            link                                                    
      2.语法        1.            key:value;            key1:value1;
            选择器{                key:value;                key1:value1;            }        2.注释            /**/        3.速记写法            border            border-image            padding            margin            backgorund            list-style：                list-style-image                list-style-type                list-style-position     3.html中引入css        1.行内样式            style属性
        2.内联样式            style标签中        3.外部引入            建议：link标签            @import url()
     优先级：        行内样式》内联样式=外部引入

4.选择器        标签选择器        id            #one        class:            .one
        普遍选择器：            *        后代选择器：            >            空格        兄弟选择器：            +            ~        多选择器：            逗号            div,#one,.two{
            }        组合选择器            div#one            div.one        属性选择器：            [class]            [class=‘one’]            [class*=‘one’]            [class^=‘one’]            [class$=‘one’]            [class~=‘one’]        伪类：            :伪类名称
            div:first-child            :last-child            :nth-child(number/odd/even)
            :first-of-type
            :hover            :active            :link            :visited
        link->visited->hover->active
        伪元素：            ::伪元素名称            

hello

            div::first-letter{
            }
            ::first-letter            ::first-line            ::seclection            ::before            ::after                content:’’/url()
                div::after{                    content:‘world’                }
    5.选择器优先级        特性值：            style属性：1000            id：100            class/伪类/属性：10            元素/伪元素：1
        特性值越大，优先级越高；特性值相同时，越靠下的优先级越高
        !important:不计入特性值的计算
    6.文本样式        color        font-size        font-weight        font-family        text-        word-        …
        网络字体：            1.下载网络字体            2.声明字体                @font-face{                    font-family:’’                }            3.使用字体                div{                    font-family:’’                }
        字体图标库：            fontawesome：                             iconfont                iconfont.css:                    xxx{}                    xxx{}                

html：                i                span
    7.列表样式        list-style:        line-height    8.表格样式:        caption-side:        border-collapse
        width        height        color
    9.盒子样式:        content+padding+border+margin
        box-sizing:content-box/border-box    盒子宽度=content+padding+border        标准盒子：            height            width–>content
        边框盒子：            width–>盒子宽度
    背景：        background:            -color            -image            -size            -repeat            -clip            -origin            -position            -attachment

边框：        border:
        border-image: