html 标签之css标签学习 第三更

一. css 简介
什么是css
层叠样式表,css 是对html 进行样式修饰语言
层叠: 就是层层叠加,如果不同的css 对同一个html标签进行修饰,样式有冲突的部分应用优先级高的,不冲突的部分共同作用
样式表: 就是css 属性样式的集合
css 的作用
1.修饰html的 使其html 样式更加好看
2.提高样式代码的复用性
3.html的内容与样式分离 便于后期维护

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"></style>
                            属性:type 告知浏览器使用css解析
                      2.属性的写法: 属性名称:属性值
                      3.多个属性之间用分号隔开
    3. 外部样式
            将css样式抽取成一个单独的css文件,谁使用谁就引用
            <link rel="stylesheet" type="text/css" href="css文件名">
                语法: 
                      1.创建css文件,将css属性写到css文件中
                      2.在hend中使用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. 基本选择器
         -元素选择器
            语法:html 标签名{css属性}
                示例: 
                        <span>hello css!!!</span>
                        <style type="text/css">
                           span{color: red;font-size: 100px}
                        </style>
         - id 选择器 (唯一性)
            语法 #id的值{css属性}
                示例: 
                      <div id="div1">hello css!!!</div>
                      <div id="div2">hello css!!!</div>
                      <style type="text/css">
                        #div{color: red;font-size: 100px}
                        #div{color: red;font-size: 100px}
                      </style>
         -class 选择器
            语法:.class的值{css属性}
                示例:
                      <div class="div1">hello css!!!</div>
                      <div class="div1">hello css!!!</div>
                      <div class="div2">hello css!!!</div>
                      <style type="text/css">
                            .div1{color: red;font-size: 100px}
                            .div2{color: red;font-size: 100px}
                      </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='passwrod']{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-reoeat 不平铺
                        repeat-y 纵向
                        repeat-z 横向
                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 块级显示

                <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

                    缺点: 影响相邻元素不能正常显示
                          影响父元素不能正常显示

四、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:单独设置