posts - 262,  comments - 221,  trackbacks - 0
一、CSS伪类:

CSS伪类用于为某些元素添加特别的效果。

二、CSS伪类的语法:

selector:pseudo-class {property: value}
selector.class:pseudo-class {property: value}

注意:CSS伪类和类的不同在于:

①伪类以:开头,类以.开头
②伪类不能用在HTML元素的class属性定义中,而类可以

三、Anchor伪类:

a:link {color: #FF0000}     /* unvisited link */
a:visited 
{color: #00FF00}  /* visited link */
a:hover 
{color: #FF00FF}   /* mouse over link */
a:active 
{color: #0000FF}   /* selected link */

注意:a:hover必须在a:link和a:visited之后,而a:active必须在a:hover之后

四、CSS伪类总结:

CSS的类和伪类合用的情况,一般发生在需要对同一个HTML元素在不同行为或环境下设置不同的样式时使用。此时CSS的类可以设置该HTML元素的基本属性,而用伪类设置不同行为下的属性。

因为CSS的类只能定义静态的属性,对于需要根据HTML元素不同行为表现进行不同设置的情况,就只能用伪类了。在使用伪类后,我们可以在HTML元素定义中只指明class,而不需要指明伪类,因为浏览器会自动地识别并应用。

例:
<style type="text/css">
  a:link { color: #FF0000 }
  a:visited { color: #00FF00 }
  a:hover { color: #FF00FF }
  a:active { color: #0000FF }
</style>

<a href="default.asp" target="_blank">This is a link</a>

五、CSS伪元素:

CSS伪元素和伪类一样,都是为了给某些元素添加特别的效果。

六、CSS伪元素语法:

selector:pseudo-element {property: value}

selector.class:pseudo-element {property: value}

七、CSS伪元素-first-line和first-letter:

"first-line"伪元素用于为某个选择器的第一行文本添加特殊效果。例如:

p:first-line {color:#0000ff;font-variant:small-caps}

<p>Some text that ends up on two or more lines</p>

则显示的效果如下:

SOME TEXT THAT ENDS
up on two or more lines

"first-letter"伪元素用于伪选择器的第一个字符文本添加特殊效果。例如:

p:first-letter {color:#ff0000;font-size:xx-large}

<p>The first words of an article</p>

则显示的效果如下:

The first words of an article...

和伪类一样,伪元素也可以和CSS的类搭配
p.article:first-letter {color:#ff0000}

<p class="article">A paragraph in an article</p>


我们还可以将多个伪元素结合起来一起使用。例如:

p:first-letter {color:#ff0000;font-size:xx-large}

p:first-line 
{color:#0000ff}
<p>The first words of an article</p>


-------------------------------------------------------------
生活就像打牌,不是要抓一手好牌,而是要尽力打好一手烂牌。
posted on 2008-08-01 21:26 Paul Lin 阅读(240) 评论(0)  编辑  收藏 所属分类: Web基础

只有注册用户登录后才能发表评论。


网站导航:
 
<2008年8月>
272829303112
3456789
10111213141516
17181920212223
24252627282930
31123456

常用链接

留言簿(19)

随笔分类

随笔档案

BlogJava热点博客

好友博客

搜索

  •  

最新评论

阅读排行榜

评论排行榜