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.

  • 相关阅读:
    利用window.onerror收集js代码异常
    js 基础题复习
    正则12和\1的理解
    CodeReview 方法 规范
    前端的登陆 几种类型
    http协议相关知识
    javascript中apply、call和bind的区别 详细易懂
    http常见的状态码,400,401,403 前端看
    vue中使用file-saver 下载各类文件
    js下载文件到本地各种方法总结
  • 原文地址:https://www.cnblogs.com/momo8238/p/7406995.html
Copyright © 2011-2022 走看看