CSS学习笔记二

浏览数：35 / 时间：2015年06月09日

我们浏览网站的时候,会点击一些链接,这些链接在点之前,点之后有不同的效果,这些效果就是用伪元素选择器做的

伪元素选择器:

就是在httml中预先定义好一些选择器,成为伪元素

格式:标签名:伪元素:类名 标签名.类名:伪元素

超链接的状态:

a :link : 超链接未点击状态

a :visited 被访问后状态

a :hover 光标移到超链接上的状态(未点击)->鼠标悬停

a :active 点击超链接时的状态

使用顺序:L - V - H - A,点击前和点击后是一个状态

最好用IE浏览器测验,有的浏览器可能看不到效果

 <style type="text/css">
        /*未访问*/
       a:link{ 
           background-color: #06F;  color: #FFF; 
           text-decoration: none; font-size: 15px;
       }
        /*鼠标悬停*/
        a:hover{ 
            background-color: #FFF; color: #F00;
            font-size: 20px;
        }
        /*点击效果*/
        a:active{
            background-color: #000; color: #FFF;
            font-size: 25px;
        }
        /*点击后效果*/
        a:visited{
            background-color: #FF9; color: #000;
            text-decoration: line-through;
        }
    </style>

段落标签也有如上的效果

p:first-line : 段落的第一行文本

p:first-letter :段落中的第一个字母

:focus :具有焦点元素 (ps:IE6不支持,FIrefox,google可以看到效果)

    <style type="text/css">
      
        div:hover{   /*类似于悬停效果 一样可以加在div上*/
            background-color: #F00;
            color: #FFF;
        }
        input :focus{
            background-color: #F0F;
        }
    </style>
</head>
<body>
<hr/>
<a href="http://www.sina.com.cn" target="_blank">伪元素选择器演示</a>
<input type="text" />
<input type="text" />
<hr/>

CSS样式的结合应用:

css可以和html中众多的标签结合使用

<head lang="en">
    <meta charset="UTF-8">
    <style type="text/css">
    ul{
        list-style-type:none;
        list-style-image: url(imgs/1.png);
    }
        table{
            border-bottom: #0C0 double 3px;
            border-left:#F00 solid 3px;/*solid 实线*/
            border-right:#FC0 dashed 3px;/*dashed 虚*/
            border-top:#000 groove 3px;
            width: 600px;
        }
        table td{
            border: #0CF dotted 2px;
            padding: 20px;
        }
        div{
            border: #0F0 dashed 2px;
            height: 50px; width: 300px;
        }
        input{
            border: none;
            border-bottom: #0CF 1px solid;
        }
        .Per{
            border: none;
        }
    </style>
    <title>asd</title>
</head>
<body>
        姓名:<input type="text" />
        年龄:<input type="text" />
        <hr/>
        <div> div区域 </div>
        <hr/>
        <table ><!--html里<table border:.....>,与css结合后,在style设置即可-->
            <tr>
                <td><input type="text" class="Per"> </td> <td>  单元格二  </td>
            </tr>
            <tr>
                <td>  单元格三  </td> <td>  单元格四  </td>
            </tr>
        </table>
        <hr/>
      <ul>
          <li>你好</li>
          <li>你好</li>
          <li>你好</li>
          <li>你好</li>
      </ul>
</body>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

CSS学习笔记二