zoukankan      html  css  js  c++  java
  • Html5与CSS3(选择器)

    <!--
    作者:offline
    时间:2018-03-21
    描述:1.全选择器
    *{属性1:属性值2;属性2:属性值2;...;}
    2.元素(标签)选择器
    标签名{属性1:属性值2;属性2:属性值2;...;}
    元素(标签)选择器优先与全选择器
    3.类(class)选择器
    .类名{属性1:属性值2;属性2:属性值2;...;}
    类选择器高于全选择器
    类选择器高于元素选择器
    4.id选择器
    #id名{属性1:属性值2;属性2:属性值2;...;}
    id的优先级高于类选择器,元素选择器,全选选择器
    5.分组(对于标签而言)选择器
    标签名1,标签名2{属性1:属性值2;属性2:属性值2;...;}
    6.子代选择器
    标签名>标签名{属性1:属性值2;属性2:属性值2;...;}
    7.后代选择器
    标签名 标签名{属性1:属性值2;属性2:属性值2;...;}

    -->

     1 <!DOCTYPE html >
     2 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
     3     <head>
     4         <meta  http-equiv="content-type" content="text/html; charset=utf-8"> 
     5         <title></title>
     6         <style type="text/css">
     7             
     8             p,span,h1,h2{
     9                 
    10                font-size: x-large;
    11                 
    12             }
    13             .c1{
    14                 background-color: #7FFF00;
    15             }
    16             p{
    17                 background-color: cadetblue;
    18             }
    19             
    20             
    21             #d1{
    22                 width: 600px;
    23                 height: 500px;
    24                 font-family: "agency fb";
    25                 border: 1px solid yellow;
    26             }
    27             #d2{
    28                 width: 400px;
    29                 height: 300px;
    30                 font-family: "agency fb";
    31                 border: 1px solid goldenrod;
    32             }
    33             
    34             
    35             
    36             #d1>span{
    37                 color: #DAA520;
    38             }
    39             #d1 span,h1,h2{
    40                 color:chartreuse;
    41             }
    42             
    43             
    44         </style>
    45     </head>
    46     <body>
    47         
    48         
    49         <p>段落标签</p>
    50         <span class="c1" >文本标签</span>
    51         <div id="d1">
    52             <span>文本标签</span>
    53             <span></span>
    54             <div id="d2">
    55                 <h1>一级标签</h1>
    56                 <h2>二级标签</h2>
    57             </div>
    58         </div>
    59         
    60         
    61     </body>
    62 </html>
  • 相关阅读:
    钢镚儿冲刺一周期第七天
    代码大全(第二版)阅读笔记01
    组队开发——地铁路线查询
    学习进度——第五周
    学习进度——第四周
    返回一个整数数组中最大子数组的和(文件)
    学习进度——第三周
    返回一个整数数组中最大子数组的和
    自我介绍
    学习进度——第二周
  • 原文地址:https://www.cnblogs.com/yyb6/p/8960743.html
Copyright © 2011-2022 走看看