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;">你好啊 小朋友</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="demo1.css"/>
        语法：
            (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属性}
示例：
< span>hello css!!!< /span >
< style type=”text/css”>
span{color:red;font-size:100px; }
< /style>
(2)id选择器 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: pink;}
< /style>
(3)class选择器
语法：.class的值{css属性}
示例：
< div class=”style1”>div1< /div>
< div class=”style1”>div2< /div>
< div class=”style2”>div3< /div>
< style type=”text/css”>
.style1{background-color: red}
.style2{background-color: pink}
< /style>

    ***选择器的优先级：id>class>元素

2、属性选择器
    语法：基本选择器[属性=‘属性值’]{css属性}
    示例：
        <form action="">
            name:<input type="text" /><br/>
            pass:<input type="password" /><br/>
        </form>
        <style type="text/css">
            input[type='text']{background-color: yellow}
            input[type='password']{background-color: pink}
        </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
        <div>hello css!!!</div>
        <a href="#">click me!!!</a>
        <style type="text/css">
            div{color:red;text-decoration: underline;text-align: right }
            a{text-decoration: none;}
        </style>
3、背景属性
    background-color:背景颜色
    background-image:背景图片
        属性值：url("图片地址");
    background-repeat:平铺方式
        属性值：默认横向纵向平铺
                repeat:横向纵向平铺
                no-repeat:不平铺
                repeat-y：纵向
                repeat-x：横向

    body{
        background-color: black;
        background-image: url("images/dog.gif");
        background-repeat: repeat-y;
    }

4、列表属性
    list-style-type:列表项前的小标志
        属性值：太多了
    list-style-image:列表项前的小图片
        属性值：url("图片地址");

        <ul>
            <li>黑马程序员</li>
            <li>黑马程序员</li>
            <li>黑马程序员</li>
            <li>黑马程序员</li>
        </ul>
        <style type="text/css">
            /* ul{list-style-type: decimal-leading-zero;} */
            ul{list-style-image: url("images/forward.gif");}
        </style>

5、尺寸属性  
    width:宽度
    height:高度
        <div id="d1">div1</div>
        <div id="d2">div2</div>
        <style type="text/css">
            #d1{background-color: red;width: 200px;height: 200px;}
            #d2{background-color: pink;width: 200px;height: 200px;}
        </style>
6、显示属性
    display:
        属性值：none:隐藏
                block:块级显示
                inline：行级显示

        <form action="">
            name:<input id="name" type="text" /><span id="span">对不起 输入不符合要求</span>
            <br>
            pass:<input id="pass" type="password" />
            <br>
            <input id="btn" type="button" value="button" />
        </form>
        <style type="text/css">
            span{color:red;display: none}
        </style>
        <script type="text/javascript">
            document.getElementById("btn").onclick = function(){
                document.getElementById("span").style.display = "inline";
            };
        </script>

7、浮动属性
    float:
        属性值：left  right
                clear:清除浮动 left right both
        缺点： (1)影响相邻元素不能正常显示
                (2)影响父元素不能正常显示

四、css盒子模型
border:
border-width:边框的宽度
border-color:边框的颜色
border-style:边框的线型

    border-top:上边框
    border-bottom:下边框
    border-left:左边框
    border-right:右边框

padding:
    代表边框内壁与内部元素之间的距离
    padding:10px;代表上下左右都是10px
    padding:1px 2px 3px 4px;上右下左
    padding:1px 2px;上下/左右
    padding:1px 2px 3px;
    padding-top:单独设置
margin:
    代表边框外壁与其他元素之间的距离
    margin:10px;代表上下左右都是10px
    margin:1px 2px 3px 4px;上右下左
    margin:1px 2px;上下/左右
    margin:1px 2px 3px;
    margin-top:单独设置