学习WEb技术当然首先要先学好HTMl和CSS基础知识和使用,但仅仅学习他们的一些基础标签、元素、以及颜色布局是不够的,要学就应该深入的去了解,用这些基础的只是做出更好的效果。
这里讲解一点关于CSS伪类和伪元素的用法
一:CSS伪类用于向某些选择器添加特殊效果。
先看看例子:
<html>
<head>
<style type="text/css">
a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}
a.two:link {color: #ff0000}
a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}
a.three:link {color: #ff0000}
a.three:visited {color: #0000ff}
a.three:hover {background: #66ff66}
a.four:link {color: #ff0000}
a.four:visited {color: #0000ff}
a.four:hover {font-family: monospace}
a.five:link {color: #ff0000; text-decoration: none}
a.five:visited {color: #0000ff; text-decoration: none}
a.five:hover {text-decoration: underline}
</style>
</head>
<body>
<p>请把鼠标移动到这些链接上,以查看效果:</p>
<p><b><a class="one" href="/index.html" target="_blank">这个链接改变颜色</a></b></p>
<p><b><a class="two" href="/index.html" target="_blank">这个链接改变字体大小</a></b></p>
<p><b><a class="three" href="/index.html" target="_blank">这个链接改变背景颜色</a></b></p>
<p><b><a class="four" href="/index.html" target="_blank">这个链接改变字体系列</a></b></p>
<p><b><a class="five" href="/index.html" target="_blank">这个链接改变文本装饰</a></b></p>
</body>
</html>
PS: four中的monospace在IE6上才能看到效果, ...?
伪类的语法:
selector : pseudo-class {property: value}
和CSS一起使用:
selector.class : pseudo-class {property: value}
伪类的种类:
属性 描述 css
:active 向被激活的元素添加样式。 1
:focus 向拥有键盘输入焦点的元素添加样式。 2
:hover 当鼠标悬浮在元素上方时,向元素添加样式。 1
:link 向未被访问的链接添加样式。 1
:visited 向已被访问的链接添加样式。 1
:first-child 向元素的第一个子元素添加样式。 2
:lang 向带有指定 lang 属性的元素添加样式 。 2
以上均可用于IE8.0以上及其他主流支持CSS3.0的浏览器,ie6.0好像只能看到css1的伪类效果;
第一个例子中有 :link :visited :hover 的使用
下面来看看在CSS2中出现的 :first-child :lang
:first-child 伪类向元素的第一个子元素添加样式。
<div>
<p>These are the necessary steps:</p>
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>
在上面的例子中,作为第一个元素的元素包括第一个 p、第一个 li 和 strong 和 em 元素。
设定:
p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}
则第一个p元素样式为黑体 第一个子元素li为大写 同理可设其他的;
:lang 伪类向带有指定 lang 属性的元素添加样式。
:lang 伪类允许您为不同的语言定义特殊的规则。在下面的例子中,:lang 类为带有值为 "no" 的 lang 属性的 q 元素定义引号的类型:
<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "@@@@" "****"
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
PS: 所有主流浏览器支持:lang IE为8.0以上~
PS: 以上为伪类的基本用法,详情参见W3School
下面讲一些伪类的灵活运用的实例:
:hover 简单的放大效果:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.larger {
width:100px;
padding:40px;
overflow:auto;
}
.larger a img {
width:20px;
height:20px;
border:none;
}
.larger a:hover img {
width:80px;
height:80px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>放大效果</title>
</head>
<body>
<h3>简单的放大效果:</h3>
<div class="larger">
<a href="#9"><img src="4.jpg" alt="放大" title="放大" /></a>
</div>
</body>
</html>
这样的使用可以减少使用js代码,也便于操作;
用css3伪类target制作tab选项卡效果:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>选项卡</title>
<style type="text/css">
.tab_box {
clear:both;
height:40px;
}
.tab_box li {
float:left;
border:1px solid #CCC;
margin:0 5px 0 0;
list-style:none;
padding:5px;
}
.tab_content {
clear:both;
border:1px solid #CCC;
padding:20px;
margin:40px;
position: absolute;
z-index:-1;
background:#0FF;
width:300px;
height:200px;
}
#tab1:target, #tab2:target, #tab3:target {
z-index: 1;
}
</style>
</head>
<body>
<div class="tab_box">
<ul class="tabs">
<li><a href="#tab1">标签一</a></li>
<li><a href="#tab2">标签二</a></li>
<li><a href="#tab3">标签三</a></li>
</ul>
<div id="tab1" class="tab_content">
第一层内容</div>
<div id="tab2" class="tab_content">
第二层内容</div>
<div id="tab3" class="tab_content">
第三层内容</div>
</div>
</body>
</html>
等等~都是不错的使用!
二:伪元素的使用和方法:
用途同伪类,语法相似:
selector:pseudo-element {property:value;}
和CSS配合使用
selector.class:pseudo-element {property:value;}
CSS3.0前的为元素有4种:
伪元素 作用 IE Firefox W3C
:first-letter 将特殊的样式添加到文本的首字母 5 1 1
:first-line 将特殊的样式添加到文本的首行 5 1 1
:before 在某元素之前插入某些内容 1.5 2
:after 在某元素之后插入某些内容 1.5 2
简单讲解一下:
:first-line 伪元素用于向文本的首行设置特殊样式。
:first-letter 用于文本首字母的特殊样式使用。 PS: 这俩个 伪元素只能用于块级元素。
伪元素和CSS类配合使用:
p.article:first-letter
{
color: #FF0000;
}
<p class="article">This is a paragraph in an article。</p>
多重为元素的使用:
p:first-letter
{
color:#ff0000;
font-size:xx-large;//字体为决定大小
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
:before :after 为在 元素的内容之前和之后插入新内容
下面看一个首字母下沉的特效:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p:first-letter
{
color: #ff0000;
font-size:xx-large
}
</style>
</head>
<body>
<p>
首字母下沉 : first-letter pseudo-element to add a special effect to the first letter of a text!
</p>
</body>
</html>
以上是CSS中的伪类和伪元素的相关知识,如果灵活运用会制作很多不同的效果!!