标签：style blog http io ar color 使用 sp strong
我们浏览网站的时候,会点击一些链接,这些链接在点之前,点之后有不同的效果,这些效果就是用伪元素选择器做的
伪元素选择器:
就是在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可以和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>
标签：style blog http io ar color 使用 sp strong
原文地址：http://blog.csdn.net/wjw0130/article/details/41410917
