zoukankan      html  css  js  c++  java
  • 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>

    待完成

  • 相关阅读:
    BZOJ1691: [Usaco2007 Dec]挑剔的美食家
    BZOJ1584: [Usaco2009 Mar]Cleaning Up 打扫卫生
    BZOJ3057: 圣主的考验
    BZOJ1770: [Usaco2009 Nov]lights 燈
    1710: [Usaco2007 Open]Cheappal 廉价回文
    「Poetize7」电话线路
    「Poetize6」Candle
    「Poetize5」水叮当的舞步
    解题:CF983A Finite or not
    解题:POI 2013 Triumphal arch
  • 原文地址:https://www.cnblogs.com/Doaoao/p/10592007.html
Copyright © 2011-2022 走看看