CSS快速入门基础知识（一）

CSS基础知识（一）

CSS 简介 : cascading style sheet 层叠样式表

CSS语法

            由选择器和声明组成
                声明由 属性 和 属性值  组成
                    声明可以是一条 也可以是多条 。
    CSS选择器 
        1. 元素选择器 
        2. ID选择器
                # + id名
               注意 ：id 具有唯一性 
                      1.id名只能写一次
                      2.id一般用来搭建网页的外围结构
        3.类选择器 （class 选择器） 
                    . + class名
                 注意： class可以使用多次 。   


        命名方式 ：
                驼峰命名法 （JS 常用）： listOne
                中线 : list-one
                下划线: list_one

伪类选择器：

               元素 + 伪类 （ :link ）
                  伪类 ：  
                        ：link  链接没有被访问之前
                        ：visited 链接被访问之后
                        : hover  鼠标悬停时
                        : active  链接被点击时
                            遵循爱恨原则： （ L - V - H - A ）顺序
                            其他的元素（块级元素） 支持 ：hover  : active
                    一般将 a 的字体颜色重新设置    a{color: #333;}

    通配符 ： *  
        全局匹配
            开发中禁止使用
                *{
                    padding : 0 ;
                    margin : 0 ;
                } 

选择器：

    群组选择器 ：
                多个元素   选择器1 , 选择器2 ，选择器3  ...{}
                                .link,p{
                                        color: turquoise; 
                                }


    包含选择器 ： 
                具有层级关系
                            div p{
                                color: yellow;
                            }
                                
                            选择器（父） 选择器（子） 
                                    中间有空隔

    属性选择器 ：  元素+[属性]
                                .pic[src]{
                                    width: 300px;
                                    height: 300px;
                                }
    伪类选择器： 
            元素 + 伪类 
            伪类 ：  
                    ：link 
                    ：visited
                    : hover
                    :active
                    群组选择器 ：
                多个元素        选择器1 , 选择器2 ，选择器3  ...{}
                                .link,p{
                                        color: turquoise; 
                                }


    包含选择器 ： 
                具有层级关系
                            div p{
                                color: yellow;
                            }
                                
                            选择器（父） 选择器（子） 
                                    中间有空隔

    属性选择器 ：  元素+[属性]
                                .pic[src]{
                                    width: 300px;
                                    height: 300px;
                                }

    伪对象选择符  （伪元素选择器）
            语法 ::{属性：属性值；}  ::selection{}
                                        文本被选中时的样式（仅仅支持 color 和 background-color属性）
                               eg： p::selection{
                                        color: violet;
                                        background-color: turquoise;

css层叠指的是样式的优先级，当产生冲突时以优先级高的为准。

                            1. 开发者样式>读者样式>浏览器样式（除非使用!important标记 ）
                            2. id选择符>（伪）类选择符>元素选择符
                            3. 权重相同时取后面定义的样式

CSS权重

    权重规则：HTML标签(类型选择符)的权重是1，class的权重是10，id的权重是100。

            0，0，0，0 表示
                元素选择器    0001
                class选择器   0010
                id选择器      0100
                属性选择符的权重为  0010
                    p[title]  1+10   [title] 10
                伪类选择符的权重为 0010
                    :link 10  a:link  1+10
                伪元素（对象）选择符的权重为0001
                        ::  (h5 可以省略1个冒号)
                包含选择符的权重：为包含选择符的权重之和

                内联样式的权重为1000
                        !important ： 最高权重（慎用）
                继承样式的权重为0000

                群组集合选择符权重为他本身 
                    注： 如果权重相同时，则执行后写的样式 ；