CSS 实用实例

来源：网络维他命作者：Linyupark 出处：巧巧读书 2008-02-11 进入讨论组

关键词：
groove
perl
word
html
asp

Pseudo-classes 伪类

给超级链接加上不同的颜色

运行代码框
<html> <head> <style type="text/css"> a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF} </style> </head> <body> <p><b><a href="default.asp" target="_blank">This is a link</a></b></p> <p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!</p> <p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective!!</p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

给超级链接增加其他样式

运行代码框
<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>Mouse over the links to see them change layout.</p> <p><b><a class="one" href="default.asp" target="_blank">This link changes color</a></b></p> <p><b><a class="two" href="default.asp" target="_blank">This link changes font-size</a></b></p> <p><b><a class="three" href="default.asp" target="_blank">This link changes background-color</a></b></p> <p><b><a class="four" href="default.asp" target="_blank">This link changes font-family</a></b></p> <p><b><a class="five" href="default.asp" target="_blank">This link changes text-decoration</a></b></p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

使用:first-child伪类

运行代码框
<html> <head> <style type="text/css"> a:first-child { text-decoration:none } </style> </head> <body> <p>The :first-child pseudo-class is used to define a special style for an element that is the first child of another element.</p> <p>Visit <a href="http://www.w3schools.com">W3Schools</a> and learn CSS! Visit <a href="http://www.w3schools.com">W3Schools</a> and learn HTML!</p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

使用:lang伪类

运行代码框
<html> <head> <style type="text/css"> q:lang(no) { quotes: "~" "~" } </style> </head> <body> <p>The :lang pseudo-class allows you to define special rules for different languages. In the example below, the :lang class defines the type of quotation marks for q elements with a lang attribute with a value of "no":</p> <p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

Pseudo-elements 伪元素

让文字的第一个字母特殊化

运行代码框
<html> <head> <style type="text/css"> p:first-letter { color: #ff0000; font-size:xx-large } </style> </head> <body> <p> You can use the :first-letter pseudo-element to add a special effect to the first letter of a text! </p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

让文字的第一行特殊化

运行代码框
<html> <head> <style type="text/css"> p:first-line { color: #ff0000; font-variant: small-caps } </style> </head> <body> <p> You can use the :first-line pseudo-element to add a special effect to the first line of a text! </p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

本文：http://www.qqread.com/css/p396806.html进入讨论组讨论。

【深度阅读】相关文章

上一页 1 2 3 4 5 6 7 8 9

【收藏此文】【大中小】【打印】【关闭】

较早的文章：CSS 菜单举一反三

较新的文章：CSS+JS构建的图片查看器

CSS 实用实例

相关专题

讨论组问题推荐

站内各频道最新更新文档

形形色色的台湾特产

怀念“黛玉”妹妹

站内最新制作专题

阳春三月境内境外赏花忙

运动促前第二次发育

热门关键字导读

站内频道文章精选

新闻资讯

操作系统

桌面开发

数据库

电脑技巧

常用软件

网络程序开发

图像处理

CSS 实用实例

相关专题

讨论组问题推荐

站内各频道最新更新文档

形形色色的台湾特产

怀念“黛玉”妹妹

站内最新制作专题

阳春三月 境内境外赏花忙

运动促前第二次发育

热门关键字导读

站内频道文章精选

新闻资讯

操作系统

桌面开发

数据库

电脑技巧

常用软件

网络程序开发

图像处理

阳春三月境内境外赏花忙