zoukankan      html  css  js  c++  java
  • CSS选择器

    一,CSS:

    1)在标签上设置style属性:key-value的格式,之间用分号分割

    2)在head里面写上style标签,在style标签中编写样式。

        -id选择器

        #i1{background-color:#2459a2;

          height:48px;}

     -class选择器

      .名称{................}

      <标签 class='名称'></标签>

    3) 标签选择器

            div {    }

    4) 层级选择器 .c1 .c2 div{   }

    5) CSS里面的注释方法:/*         */

    1. 根据RGB颜色对照表,自己写背景色

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div style="background-color:#2459a2;">ff</div>
    </body>
    </html>
    

     2.在head里面写style, id 选择器。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #i1{
                background-color:#2459a2;
                height:48px;
            }
        </style>
    </head>
    <body>
        <div id="i1">ff</div>
    </body>
    </html>
    

     3.在head里面写class,这样样式就可以重复使用了。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #i1{
                background-color:#2459a2;
                height:48px;
            }
            .c1{
                background-color:red;
                height:48px;
            }
        </style>
    </head>
    <body>
        <div id="i1">ff</div>
        <div class="c1">ff</div>
        <div class="c1">ff</div>
        <div class="c1">ff</div>
    </body>
    </html>
    

     运行结果:

    4.在head里面写div,这样div 都会使用这个样式

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div{background-color:black;color:white;}
        </style>
    </head>
    <body>
        <div>123</div>
        <span>345
            <div>womenwomen</div>
        </span>
        <div>890</div>
    
    </body>
    </html>
    

     运行结果:

    5.只想让span下面的div 使用标签

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            span div{background-color:black;color:white;}
        </style>
    </head>
    <body>
        <div>123</div>
        <span>345
            <div>womenwomen</div>
        </span>
        <div>890</div>
    
    </body>
    </html>
    

     运行结果:

    6. 用 #i1,#i2,#i3 去实现

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            <!--span div{background-color:black;color:white;}-->
            #i1,#i2{background-color:blue;color:white;}
        </style>
    </head>
    <body>
        <div id="i1">123</div>
        <span>345
            <div>womenwomen</div>
        </span>
        <div id="i2">890</div>
    
    </body>
    </html>
    

     运行结果:

    7. 属性选择器:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
        input[type='text']{100px;height:200px;}
        </style>
    </head>
    <body>
        <input type="text"/>
        <input type="password"/>
    </body>
    </html>
    

     运行结果:

    8.

  • 相关阅读:
    积累学习
    华为手机 android8.0APP更新时出现安装包解析异常的提示及安装闪退(无反应)问题
    新建Application 报错android.app.Application cannot be cast
    Android Studio Gradle无法获取pom文件
    取消设置透明状态栏,使 ContentView 内容不再覆盖状态栏
    Android欢迎页短暂白屏
    android Toast提示异常:java.lang.RuntimeException: Can't create handler inside thread that has not called
    ransformResourcesWithMergeJavaResForDebug问题
    android studio toolbar遮挡住下面控件内容
    Android VideoView无法播放网络视频
  • 原文地址:https://www.cnblogs.com/momo8238/p/7406995.html
Copyright © 2011-2022 走看看