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

    1.选择器的作用:找到所有指定的标签进行样式化。

    2.选择器的种类

    (1)标签选择器:找到所有指定的标签进行样式化。

    格式:
    标签名{
            样式1,样式2....               
    }
    
    例子:
     div{
          color:#F00;
          font-size:24px;            
    }

    (2)类选择器:使用类选择器首先要给html标签指定对应的class属性值

    格式;
    .class的属性值{
               样式1,样式2...  
    }
    
    例子:
    .two{
            backgrount-color:#0F0;
            color:#F00;
            font-size:24px;
    }

      **类选择器的注意事项:

        A. html元素的class属性值一定不能以数字开头。

        B. 类选择器的样式是要优先于标签选择器的样式。

    (3)ID选择器:使用ID选择器首先要给html元素添加一个id的属性值。

    格式:
    
    #id属性值{
            样式1,样式2...
    }

      **ID选择器注意事项:

        A. ID选择器的样式优先级是最高的,优先于类选择器与标签选择器。

        B. ID的属性值也是不能以数字开头的。

        C. ID的属性值在一个html页面中只能出现一次。

    (4)交集选择器:就是对选择器1中的选择器2里边的数据进行样式化

    选择器1 选择器2{
            样式1,样式2...
    }
    
    例子:
               .two span{
                            background-color:#999;
                            font-size:24px;
                }

    (5)并集选择器:对指定的选择器进行统一的样式化。

    格式:
            选择器1,选择器2..{
                                样式1,样式2..
                        }
    
    例子: span.a
    { border-style:solid; border-color:#F00; {

    (6)通过选择器:

    格式:
    *{
            样式1,样式2...
    }
    
    例子: *
    { text-decoration:line-through; background-color:#CCC; }

    3.伪类选择器:伪类选择器就是对元素处于某种状态下进行样式的

    注意:

      (1) a:hover 必须被置于 a:link和a:visited 之后

      (2) a:active 必须被置于 a;hover 之后。

      a:link{color:#F00} /* 没有被点击过---红色 */
        
        a:visited{color:#0F0} /*  已经被访问过的样式---绿色 */
        
        a:hover{color:#00F;} /* 鼠标经过的状态---蓝 */

        a:active{color:#FF0;}
    伪类选择器的应用:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    <style type="text/css" >
    
        table{
            background-color:#CCC;
            border-collapse:collapse;
            border:3px;
        }
        
        tr:hover{
            background-color:#06F;
        }
    </style>
    <body>
        <table border="1px" width="400px" height="300px" align="center" >
                <tr>
                    <th>姓名</th>
                    <th>成绩</th>
                    <th>人品</th>
                </tr>                        
                <tr>
                    <td>张三</td>
                    <td>98</td>
                    <td>差</td>
                </tr>           
                <tr>
                    <td>李四</td>
                    <td>50</td>
                    <td>极好</td>
                </tr>
                <tr>
                    <td>综合测评</td>
                    <td colspan="2">不错</td>
                </tr>        
        </table>
    </body>
    </html>
  • 相关阅读:
    单例模式
    java笔记 chapter7 抽象类和数组
    java笔记 chapter6 StringBuffer类和String Bulider类,Math类 Date类,Calendar类
    设计上的若干问题
    Java中的二次分发
    关于抽象
    SSI框架下同一个Bean加载了2次问题解决
    Hello 2015
    关于window.location.href is not a function在FF,chrom报错问题
    使用Eclipse的一些小心得!
  • 原文地址:https://www.cnblogs.com/sjxbg/p/5668518.html
Copyright © 2011-2022 走看看