css样式+css选择器

css样式

css样式有三种

               外部样式  
                        <link rel="stylesheet" href="路径">
                        @import url("路径")
              
             不同点   1 link导入的css文件在加载网页的时候和html同时加载 而@import加载网页的时候先加载html结构
                      2  link  是 html标签的一种  而@import 是css提供的一种方法
                      3   link 的兼容性较好
                       4  link 导入的css文件 可以通过js DOM样式更改动画效果 @import 则不行


             内部样式  
                     <style>
                         选择符{属性：属性值；}
                     </style>
             

             内联样式
                    <标签 style="属性：属性值；"></标签>

            css的权重
              
                   当三种样式同时出现时 内联样式的权重大 则优先
                   当外部样式和内部样式同时出现时  按照书写顺序  后面的会覆盖前面的样式   （层叠样式）
                   如果出现!important  哪里出现哪里权重最大 

css选择器

CSS选择符

            1  类型选择符（也叫标签选择符）
                 语法  ：   选择符{属性:属性值；}
                        常用的类型选择符  有哪些
                            div /  p  / span  / h1-h6 / ... 等等
            

            2  id选择符 
                语法     #名称{属性:属性值；}
                     <div id="名称"></div>

                特点  唯一性 一个id 只能有一个名称  
                用法 用于搭建网页的结构

            3  类选择器（class选择器）

                 语法        .名称{属性:属性值；}
                     <div class="名称"></div>

                特点  一个class可以有多个名字 

            4  群组选择符 
                  语法  选择符，选择符，选择符{属性：属性值；}
                   选择符与选择符之间用逗号隔开
                  
                  用来表示不同标签的相同样式

            5  包含选择符
               
                 语法  父元素 子元素{属性：属性值；}
                  父元素与子元素之间用空格隔开
            6  伪类选择符


                a link:   表示未点击链接的样式
                a visited 表示点击后链接的样式
                a hover   表示鼠标滑过的样式
                a active  表示鼠标点击时的样式
            
            7  通配符 
               *{
                   margin:0;
                   padding:0;
               }
             可以改变整个网页的所有元素的样式

选择符的命名规范

                1   不能使用中文 和 特殊字符
                2   尽量小写字母开头 可以使用 数字 字母 下划线 
                3   命名的名称 要 语义化
                4   不能使用关键字  （标签）

                驼峰式命名
                  news
                newsLeft   newsCenter   newRight
                -式命名
                  warp
                  warp-left  warp-center warp-right
                下划线式命名
                  foot
                  foot_left  foot_center foot_right

伪类选择符的练习