CSS学习笔记

四种引入方式：

    1，嵌入在标签中

    2.对标签添加样式   

             在style标签中     

    3.链接式          

                 在css文件中编写样式   在head头标签中通过link标签引入

               <link href='文件'     rel='sty;esheet'>

    4.导入式

                    在css文件中编写样式   在head头标签中通过

                    <style>

                            @import '文件'

                    </style>

写样式

    *{}                                       ←  ←  ← 星号+大括号表示匹配所有

    p{}                                       ←  ←  ← 标签+大括号表示匹配所有当前标签（这里是所有P标签）  

    #id{}                                     ←  ←  ← 井号+id+大括号表示匹配当前id对应的标签

    .class{}                                  ←  ←  ← 点+class的值得名称+大括号表示匹配当前class对应的标签

组合

    div.class{}                              ←  ←  ←标签类型+ 点+class的值得名称+大括号表示匹配当前标签类型的class    

（假装自己是个组合）  

   #id，div.class{}                                  ←  ←  ← 两个方式用逗号分隔+大括号表示一起匹配两种

    div1 div{}                                 ←  ←  ← 两个方法用空格分隔+大括号表示一起匹配标签一中的标签二    用于父类与后代嵌套，可以往下找多层

     div1>div{}                                 ←  ←  ← 两个方法用大于号分隔+大括号表示一起匹配标签一中的标签二    用于父子类嵌套，只能往下找一层

     div1+div{}                                 ←  ←  ← 两个方法用加号分隔+大括号表示一起匹配标签一后面紧挨的标签二，必须是紧挨着的，中间不能有别的标签

组合标签可以多次组合       栗子：div1 div2 div3>div4

属性选择器

可以再标签中加入无作用的属性        例如：<div    abc='abc' >       <div    abc='bcd' >         <div    abc='abc    dfg' >  

然后通过自定义的属性匹配css样式

1.     使用[abc]                                        ←  ←  ←使用[ ]中括号中加上属性名的方式匹配拥有当前属性的标签

2.     使用[abc='abc']                              ←  ←  ←使用[ ]中括号中加上属性名等于属性值的方式匹配拥有当前属性值的属性签

3. 使用[abc~='abc']                               ←  ←  ←使用[ ]中括号中加上属性名加上波浪号加上等于加上属性值的方式匹配有                                                                                当前属性值的属性标签（用于当前属性有多个值用空格分开的情况）

4. 使用[abc^='abc']                               ←  ←  ←使用[ ]中括号中加上属性名加上上尖号加上等于加上属性值的方式匹配用                                                                               当前属性值开头的属性标签，可以只用'a'单个字符

5. 使用[abc$='abc']                               ←  ←  ←使用[ ]中括号中加上属性名加上dollar号加上等于加上属性值的方式匹配用                                                                               当前属性值结尾的属性标签，可以只用'c'单个标签

6. 使用[abc*='abc']                               ←  ←  ←使用[ ]中括号中加上属性名加上星号加上等于加上属性值的方式匹配只要                                                                            当前属性值中包含当前值'abc'的属性标签

css  标签状态   

a:link{}                                 标签初始状态

a:visited{}                             标签鼠标悬浮状态

a:hover{}                               标签点击状态

a:active{}                              标签完成后状态

a标签只是举例，其他标签也可以

css优先级

内联      >      id       >   class      >      标签                                     代码后面加上   ！import    无视优先级，最高

↑1000          ↑100        ↑10                 ↑1                                                 继承的优先级最低

（内联标签转换为块级标签）：css样式     display：block

（块级标签转换为内联标签）：css样式     display：inline

（同时具有块级标签和内联标签的特性）：css样式     display：inline-block

滑轮：overflow