zoukankan      html  css  js  c++  java
  • css中的选择器

    一、css为层叠样式表,是用来控制网页外观的一门技术。

    二css的用法:

        1、内联:在标签中以属性的形式表现,属性名style(不推荐使用,优先级最高)

        2、内嵌:在head标签中以标签的形式表现,标签名style

        3、外部引用:在head标签中以标签形式表现,标签名link用来引入一个css文件,项目中最常用。

    三、选择器

          1、标签选择器:通过标签名找标签(把指定的样式应用到某一个、组、类标签上)

          2、id选择器:通过id属性值找标签,关键符号#id值{样式}

          3、复合选择器:1、并列选择器:关键符号,用法:选择器1,选择器2{样式}

                   2、后代选择器:符号空格,用法:选择器1空格选择器2

                        3、属性选择器:选择器[属性=属性值]{样式}

          4、筛选:用法:选择器class选择器

           选择器的优先级:1、内联

              2、id选择器

              3、class选择器

              4、标签选择器

              5、通用选择器

    例子:

     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>无标题文档</title>
     6 <link rel="stylesheet" href="作业31.css">
     7 </head>
     8 <body class="body1">
     9     
    10         <div><p class="p1">登录博客园-代码改变世界</p></div>
    11         <span class="sp1">登陆用户名</span><span class="sp2">(找回)</span>
    12         <div class="div5"><input type="text"></div>
    13         <span class="sp3">密码</span><span class="sp4">(重置)</span>
    14         <div class="div4">
    15             <input type="text">
    16         </div>
    17         <div class="inp1">
    18             <input type="checkbox">下次自动登录
    19         </div>
    20     
    21         <table class="div3">
    22             <tr>
    23                 <td>
    24                     <form action="作业4.html" method="post"><input type="submit" value="登录" name="登录" style="color: crimson">
    25                     </form>
    26                 </td>
    27                 <td>
    28                     <form action="zuoye5.html" method="post">
    29                         <input type="submit" value="注册" name="注册" style="color: crimson">
    30                     </form>
    31                 </td>
    32             </tr>
    33         </table>
    34     
    35     
    36     
    37         <div class="div1"><a href="#">立即注册</a></div>
    38         <div class="div2"><a href="#">反馈问题</a></div>
    39     
    40     
    41 </body>
    42 </html>
    View Code
    1 /* CSS Document */
    2 .p1{color: crimson}
    3 .sp1{font-size: 13px}
    4 .sp4{color: blue;cursor: pointer;font-size: 13px}
    5 .sp2{color: blue;cursor: pointer;font-size: 13px}
    6 .sp3{font-size: 13px}
    7 .inp1{font-size: 13px}
    8 .div1 a{text-decoration: none;font-size: 13px;}
    9 .div2 a{text-decoration: none;font-size: 13px;}
    View Code
  • 相关阅读:
    在Unity3D中开发的Hologram Shader
    在Unity3D中开发的Toon Shader
    在Unity3D中开发的Dissolve Shader
    2017.2.26
    2017.2.21
    2017.2.20
    2017.2.19
    2017.2.18
    2017.2.17<转>
    2017.2.16 linux
  • 原文地址:https://www.cnblogs.com/chenyang-1/p/8110925.html
Copyright © 2011-2022 走看看