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

      1 <!--
      2 css样式选择器
      3     HTML选择器
      4     类选择器
      5     ID选择器
      6     关联选择器
      7     组合选择器
      8     伪元素选择器
      9     
     10 selector{                    /* selector是样式选择器
     11     property:value;          /* color:red;
     12     property:value;          /*  font-size:4cm;
     13     .....
     14     }
     15     
     16 selector当定义一条样式规则时,必须指定受这条样式规则作用的网页元素,在一条规则中定义的网页元素就是selector(选择器),也就是选择该样式规则作用于的网页元素。
     17 
     18 
     19 
     20 
     21 -->
     22 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     23 <html xmlns="http://www.w3.org/1999/xhtml">
     24 <head>
     25 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
     26 <title>css样式选择器</title>
     27 <!--HTML选择器-->
     28 <style>
     29     p{
     30     color:#000000;
     31     font-size:2cm;
     32     }
     33 </style>
     34 
     35 <!--类选择器
     36 同一个选择器能有不同的类,因而允许同一个元素有不同的样式
     37 定义方法
     38     [tag].类名(类名是自定义的,如果不加则代表所有HTML元素)
     39     <tag class="类名1 类名2 类名3">
     40 -->
     41 <style>
     42     p.cl1{
     43     color:#0000CC;
     44     font-size:2cm;
     45     }
     46     p.cl2{
     47     color:#00FF00;
     48     font-size:3cm;
     49     }
     50     .cl3{
     51     color:#FF00FF;
     52     font-size:4cm;
     53     }
     54 </style>
     55 
     56 <!--
     57 ID选择器
     58 在HTMl页面中,ID属性指定了某个单一元素,ID属性就是用来对单一元素定义单独样式
     59 一个HTML页面中。ID属性值要唯一
     60 定义方法
     61     #idname{ }
     62 用:<tag id="idname">
     63 
     64 -->
     65 <style>
     66     #id1{
     67     color:#0000FF;
     68     font-size:2cm;
     69     }
     70 </style>
     71 <!--关联选择器
     72 关联选择器只不过是一个用空格隔开的两个或更多的单一选择器组成的字符串
     73 
     74 必须按关联关系使用,不能有反顺序
     75 
     76 只要能保持关联关系可以,不管是在多少层
     77 
     78 -->
     79 <style>
     80     div #id1 .cl1 p{
     81     color:#0000FF;
     82     font-size:2cm;}
     83 </style>
     84 
     85 <!--组合选择器
     86 为了减少样式表的重复声明,组合是允许的
     87 只要使用英文逗号(,)隔开每个选择符
     88     
     89 -->
     90 <style>
     91     p,d,div{
     92     background-color:#0033FF;
     93     }
     94 </style>
     95 
     96 <!--
     97 伪元素选择器是指对同一个HTML元素在不同的状态下的一种定义状态
     98 目前只有a和p两个HTML元素可以使用
     99 使用时的语法
    100     标签:伪元素
    101     例:a:link            a标签在没有任何运作前的状态
    102         a:hover          光标移动到超链接的状态
    103         a:active          选择超链接的状态
    104         a:visited         访问过超链接的状态
    105         p:first-letter    一个段落中首个字母的状态
    106         p:first-line      一个段落中首行的状态
    107         
    108         
    109 -->
    110 <style>
    111     a.one:link{
    112         color:green;
    113         font-size:1cm;
    114     }
    115     a.one:hover{
    116         color:red;
    117         font-size:2cm;
    118     }
    119     a.one:active{
    120         color:blue;
    121         font-size:3cm;
    122     }
    123     a.one:visited{
    124     color:yelow;
    125     font-size:5cm;
    126     }
    127     
    128     a.two:link{
    129         color:yellow;
    130         font-size:1cm;
    131     }
    132     a.two:hover{
    133         color:green;
    134         font-size:2cm;
    135     }
    136     a.two:active{
    137         color:red;
    138         font-size:3cm;
    139     }
    140     a.two:visited{
    141     color:blue;
    142     font-size:5cm;
    143     }
    144     p:first-letter{
    145     color:red;
    146     font-size:3cm;
    147     }
    148     p:first-line{
    149     color:yellow;
    150     font-size:1cm;
    151     }
    152 </style>
    153 </head>
    154 
    155 <body>
    156     <p>
    157 1111111111111111111111111111111111111111111111111<br />                        1111111111111111111111111111111111111111111111111<br />
    158 1111111111111111111111111111111111111111111111111</p><br />
    159     <b class="cl1">aaaaaaaaaa</b><br />
    160     <b class="cl2">bbbbbbbbbb</b><br />
    161     <b class="cl3">cccccccccc</b><br />
    162     <b class="cl1">dddddddddd</b><br />
    163     <b class="cl2">eeeeeeeeee</b><br />
    164     <b class="cl3">hhhhhhhhhhhhhh</b><br />
    165     <b id="id1">ddddddddddddddd</b><br />
    166     <div>
    167         <div id="id1">
    168             <div class="cl1">
    169                 <p>wwwwwwwwwwww</p>
    170             </div>
    171         </div>
    172     </div>
    173     <a class="one" href="../1/11.html">1.html</a><br />
    174     <a class="two" href="../2/21.html">2.html</a>
    175 </body>
    176 </html>
  • 相关阅读:
    IntelliJ IDEA 2017 注册方法
    WindowsAll下安装与破解IntelliJ IDEA2017
    JPA的一对多映射(双向)关联
    JPA 单向一对多关联关系
    JPA 映射单向多对一的关联关系
    关于数据库主键和外键
    JPA(API)
    X509 文件扩展名
    linux设置支持中文
    wp8安装SSL证书
  • 原文地址:https://www.cnblogs.com/Y-HKL/p/5244879.html
Copyright © 2011-2022 走看看