02 css的学习笔记

css的学习笔记
一、css的简介
    1.什么是css
        层叠样式表，css是对html进行样式修饰的语言
        层叠：就是层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的部分，应用优先级高的，不冲突的部分共同作用。
        样式表：就是css属性样式的集合
    2.css的作用
        （1）修饰html的，使其html样式更加好看
        （2）提高样式代码的复用性
        （3）html的内容与样式相分离，便于后期的维护
    3.css的引入方式和书写规范
        （1）内嵌样式
            内嵌样式是把css的代码嵌入到html标签中
            <div style="color:red;font-size: 100px">hello css</div>
            语法：
                （1）使用style属性将样式嵌入到html标签当中
                （2）属性的写法： 属性：属性值
                （3）多个属性之间使用分号;隔开
            不建议使用
        （2）内部样式
            在head标签中使用style标签进行css的引入
            <style type="text/css">
                div{
                    color:red;font-size: 100px;
                }
            </style>
            语法：
                （1）使用style标签进行css的引入
                <style type="text/css">
                    属性：type：告知游览器使用css解析器去解析
                （2）属性的写法： 属性：属性值
                （3）多个属性之间使用分号;隔开
        （3）外部样式
            将css样式抽取成一个单独的css文件，谁去使用谁引用
            <link rel="stylesheet" type="text/css" href="">
            语法：
                （1）创建css文件，将css属性写在css文件中
                （2）在head中使用link标签进行引入
                        <link rel="stylesheet" type="text/css" href="css文件的地址">
                        rel：代表要引入的文件与html的关系
                        type：告知游览器使用css解析器去解析
                        href：css文件的地址
                （3）属性的写法：属性：属性值
                （4）多个属性之间使用分号;隔开
        （4）@import方式
            <style type="text/css">
                @import url("css的地址");
            </style>
            link与@import方式的区别：
                （1）link所有游览器都支持，import部分低版本的IE不支持
                （2）import方式是等待HTML加载完毕之后再加载
                （3）import方式不支持js的动态修改

二、css的选择器
    1.基本选择器
        （1）元素选择器
            语法：html标签名{css的属性};
            示例：
            <style type="text/css">
                span{
                    color: red;font-size: 100px;
                }
            </style>
        （2）id选择器
            语法：#id的值{css属性}
            示例：
                <div id="div1">hello css1</div>
                <div id="div2">hello css2</div>
                <style type="text/css">
                    #div1{
                        background-color: red;
                    }
                    #div2{
                        background-color: blue;
                    }
                </style>
        （3）class类选择器
            语法：.class的值{css属性}
            示例：
            <div class="style1">hello css1</div>
            <div class="style1">hello css2</div>
            <div class="style2">hello css3</div>
            <style type="text/css">
                .style1{
                    background-color: red;
                }
                .style2{
                    background-color: pink;
                }
            </style>
        （4）选择器的优先级
            id选择器>class类选择器>元素选择器
    2.属性选择器
        语法：基本选择器[属性='属性值']{css属性}
        示例：
        <form action="practice_submit" method="get" accept-charset="utf-8">
            name:<input  type="text" ><br/>
            pass:<input type="password" >
        </form>
        <style type="text/css">
            input[type='text']{background-color: yellow;}
            input[type='password']{background-color: green;}
        </style>
    3.伪元素选择器
        a标签的伪元素选择器
            语法：
                静止状态： a:link{css属性}
                悬浮状态   a:hover{css属性}
                触发状态   a:active{css属性}
                完成状态   a:visited{css属性}
            示例：
            <a href="#">点击我吧！！！</a>
            <style type="text/css">
                a:link{color:blue;}
                a:hover{color:red;}
                a:active{color:yellow;}
                a:visited{color:green;}
            </style>
    4.层级选择器
        语法：父级选择器 子级选择器 ....
        示例：
            <div id="d1">
                <div class="dd1">
                    <span>span1-1</span>
                </div>
                <div class="dd2">
                    <span>span1-2</span>
                </div>
            </div>

            <div id="d2">
                <div class="dd1">
                    <span>span1-1</span>
                </div>
                <div class="dd2">
                    <span>span1-2</span>
                </div>
            </div>
            <style type="text/css">
                #d1 .dd2 span{color:red;}
            </style>
三、css的属性
    1.文字属性
        font-size:大小
        font-family:字体类型
    2.文本属性
        color:颜色
        text-decoration:下划线
            属性值：none  underline
        text-align:对齐方式
            属性值：left center right
    3.背景属性
        background-color: 背景颜色
        background-image：背景图片
            属性值：url("图片地址");
        background-repeat：平铺方式
            属性值：默认横向纵向平铺
                    repeat：横向纵向平铺
                    no-repeat：不平铺
                    repeat-x：横向平铺
                    repeat-y：纵向平铺
        body{
            background-color: black;
            background-image: url("images/dog.gif");
            background-repeat: repeat-y;
        }
    4.列表属性
        list-style-type:列表项前的小标志
        属性值：查资料，很多
        list-style-image:列表前的小图片
            属性值：url(“图片地址”)
    5.尺寸属性
        width：宽度
        height：高度
    6.显示属性
        display：
        属性值：none：隐藏
                block：块级显示
                inline:行级显示
    7.浮动属性
        float：
            属性值：left right
                    clear:清除浮动 left right both
            缺点:（1）影响相邻元素不能正常显示
                 （2）影响父元素不能正常显示
四、css盒子模型
    border:
        border-width:边框的宽度
        border-color:边框的颜色
        border-style:边框的线型
        border-top:上边框
        boder-bottom:下边框
        border-left:左边框
        border-right右边框
    padding:代表边框内壁与内部元素之间的距离
        padding:10px;代表上下左右都是10px
        padding：1px 2px 3px 4px;上右下左
    margin: