javaweb_CSS

# css引入方式

1：内嵌方式    <div style="color:red;font-size:100px;">JavaWeb</div>    // 不建议使用 不便于后期的维护
2：内部样式，css代码较多时，会影响加载速度
<head>
    <style type="text/css">
        div{
            background:red;
            text:10p;
        }
    </style>
</head>
3：链入外部样式，开发中非常建议使用
创建文件testcss.css
在文件中编写css内容
dic{
    color:green;
    text:10p;
}
在html文件中引入 
<link rel="stylesheet" type="text/css" href="testcss.css"/>
4：import链入外部样式（有些浏览器不支持）不支持javascripty动态修改
<style type="text/css">
    @import url("testcss.css");
</style>

 # css中的选择器

1：元素选择器
    <style type="text/css">
        span{
            text:10p;
        }
    </style>
2：id选择器（不可重复）
    <style type="text/css">
        #id1{
            background:red;
            text:10p;
        }
    </style>    
    <div id="id1">id选择器</div>
3：class选择器（可重复）
    <style type="text/css">
        .c1{
            background:red;
            text:10p;
        }
    </style>    
    <div class="c1">id选择器</div>
4：属性选择器
    <style type="text/css">
        input[type="text"]{
            background:red;
            text:10p;
        }
    </style>    
    <table>
        <tr>
            <th>用户名：</th>
            <th>
                <input type="text">
            </th>
        </tr>
        <tr>
            <th>密码：</th>
            <th>
                <input type="password">
            </th>
        </tr>
    </table>
5：伪元素选择器
    <style type="text/css">
        a:link{clolr:red}             // 静止
        a:hover{clolr:blue}           // 悬浮
        a:active{clolr:green}         // 触发
        a:visited{clolr:yellow}       // 完成
    </style>
6：层级选择器
    <style type="text/css">
        #div1 .d1 span{
            background:red;
            text:10p;
        }
    </style>
　　<div id="div1">
   　　 <div class="d1">
      　　  <span>xxx<span>
    　　</div>
    　　<div class="d2">
      　　  <span>xxx</span>
    　　</div>　　
　　</div>

待完成

 

posted @ 2019-04-08 13:56  一头牛这么多人放  阅读(296)  评论(0)  编辑  收藏  举报