第四天

标签属性不可以改变，但是标签是可以改变的

            cursor:pointer  设置鼠标为小手模式

            cursor:help       设置鼠标为小问号

            cursor:move     设置鼠标为移动样式

CSS书写位置介绍

            内嵌式写法

            外联式写法

                        新建一个CSS文件

                        使用link标签将外部的css文件引入页面中

        

            行内式写法

                    在标签内部使用style属性设置样式

        

元素显示方式

        块级元素

        行内元素

        行内块元素

块级元素

        代表：div,p,ul,di,ol,li,dd,dt,h1...h6

        特性：块级元素独占一行显示

        块级元素的默认宽度与其父元素的宽度一致

        块级元素可以设置高度和宽度

行内元素

        代表：span,a,font,strong,i

        特点：在一行上显示

                    行内元素不能设置宽度和高度

行内块元素

        代表：img,input...

        特点：元素可以在一行上显示

                    元素可以设置高度和宽度

元素模式转换

        转化为块级元素（以块级元素的 显示方式去显示）

        display:block;

            

            转化为行内块元素

           display:inline-block;

                

            转化成行内元素

            display:inline;

            注意：1.可以把行内元素和块级元素转化为任何一种元素

                      2.行内块元素转化行内元素没有效果

                      3.一般情况下会将行内元素进行转换

CSS特性

        层叠性：在权重相同的同一个标签中样式发生冲突，后面的样式会将前面的样式给覆盖掉。

        样式与定义的顺序有关，与调用的顺序无关

继承性：

        继承性：在默认情况下，如果子元素没有设置样式，那么该子元素会受父元素的样式影响

        注意：  CSS继承性只能发生在标签嵌套结构中

                     宽度和高度不能被继承

        可继承的属性：color,font, 行高（line-height）,text-align

继承性中特殊标签：

        a标签不能直接受父元素中的文字颜色影响

        标题标签不能直接受父元素中的文字大小影响

优先级（权重）

        标签选择器<类选择器<id选择器<行内样式<!important

               10            100            1000        10000        100000   （打比方）

                    继承的权重为0

                    权重可以叠加

        总结：1.如果通过选择器指向的是同一个标签，如果权重不一样，只要考虑优先级的问题

                  2.如果指向的是同一标签并且权重一样，直接考虑层叠性

伪类（以a标签为例）

    a:link{属性：值；}            设置a标签默认的样式

        如果给a标签设置样式，推荐使用标签选择器或其他选择器，不推荐使用a:link{}方式

    a:visited{属性：值；}设置a标签访问过后的样式

         1 a:visited{}该伪类只能设置与颜色相关的属性

         2  该伪类具有缓存特性

    a:hover{属性：值；}    设置鼠标悬停到a标签上的样式

                    

                text-decoration: underline;取消下划线

    a:active{属性：值；}  设置a标签激活下的样式（鼠标点击不放）

总结：

            1.hover{}该伪类可以单独使用

            2.如果以上伪类都要设置需要按照顺序设置

                L　Ｖ　Ｈ　Ａ

    其他伪类介绍

            目标伪类

                ：target｛属性：值;｝

            注意：该伪类要配合锚链接使用

                

        空伪类

                ：empty{属性：值；}

                

        排除伪类

            ：not(选择器){属性：值；}

            只要没有.two标签都会改变

        焦点伪类

           input :focus{属性：值；}

                    

背景

    background-color    设置背景颜色

            默认值：transparent  透明色

    background-image    设置背景图片

    background-repeat

                        repeat默认值

                        no-repeat不平铺     repeat-x横向平铺  repeat纵向平铺

    background-position    设置背景图片位置

                    例如：background-position :bottom  left;

                                background-position :left;

                                background-position：20px  50px;

                注意：当背景颜色图片位置设置一个值的时候，第二个默认值就是center

                           当设置背景图片位置出现具体数字时，第一个字代表水平方向，第二个值代表垂直方向

background属性连写

                background: red  url(2.png)  no-repeat  right  top;

            注意:1.该属性连写中没有个数限制

                    2.该属性中没有顺序限制