第二课：Java web之CSS

一.CSS简介

1.什么是css
    层叠样式表，css是对html进行样式修饰语言。
    层叠：就是层层的覆盖叠加
    样式表：就是CSS属性样式的集合
2.css的作用
    修饰html，使其根加好看
    提高样式代码的复用性
    html的内容与样式相分离，便于后期维护
3.css的引入方式和书写规范
    1.内嵌方式
        内嵌样式就是把css代码嵌入到html的标签中（不建议使用）
    2.内部样式
        在head标签中使用style标签进行css的引入
        <style type="text/ss">
            属性：type：告知浏览器使用使用css解析器去解析
            多个属性之间用；隔开
    3.外部样式
        将css样式抽取成一个单独的css文件，谁去使用就去应用；
        使用<link rel="stylesheet" type="text/css" href="地址">调用
        rel:代表要引入的文件与html的关系
        type：告知浏览器使用CSS解析器去解析
        href：CSS文件地址
    4 @import方式
        <style type="text/css">
            @import url("css样式")；
        </style>        
        link与@import区别
            1 link所有浏览器都支持，import部分浏览器不支持
            2 import是等待htm加载完毕之后在加载
            3 import不支持js动态修改

二.CSS选择器

1.基本选择器
    （1）元素选择器
        语法：html标签名{css属性}
    （2）id选择器
        语法：#id{css属性}
    （3）class选择器
        语法：.class的值{css属性}
    ***选择器优先级   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盒子模型