<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml " xml:lang="en" lang="en">
<Kopf>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="多彩文字,Mehrfarbiger Text" />
<meta http-equiv="Description" content="利用CSS 的 Clip 属性来创造 多彩文字(Mehrfarbiger Text)" />
<meta content="all" name="robots" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="author" content="forestgan" />
<meta name="copyright" content="forestgan" />
<title>多彩文字(Mehrfarbiger Text)</title>
<style type="text/css">
Körper{
Hintergrund: #FFFFFF;
Farbe: #333333;
Schriftfamilie: Arial, Helvetica, serifenlos;
Schriftgröße: 100 %;
Zeilenhöhe: 140 %;
Textausrichtung: Mitte;
Polsterung: 0;
Rand: 0;
}
P{
Rand: 0;
}
Adresse{
Schriftgröße: 75 %;
}
body,html{
Höhe: 100 %;
}
* html, * html body{
Überlauf: versteckt;
}
#Spitze{
Mindesthöhe: 90 %;
Überlauf: automatisch;
}
* html #top{
Höhe: 90 %;
}
#Fußzeile{
Höhe: 10 %;
Hintergrund: #CC0000;
Farbe: #FFFFFF;
}
Adresse{
Polsterung oben: 1em;
Schriftstil: normal;
}
A{
Textdekoration: keine;
}
.textBottom {
Farbe: #333333;
Position: absolut;
links: 3em;
oben: 1em;
Schriftart: 26px „Century Gothic“, Arial, Helvetica, serifenlos;
Clip: rect(18px auto auto auto);
}
.textTop {
Farbe: #CC0000;
Position: absolut;
links: 3em;
oben: 1em;
Schriftart: 26px „Century Gothic“, Arial, Helvetica, serifenlos;
Clip: rect(0 auto 18px 0);
}
.container {
Breite: 28em;
Höhe: 5em;
Rand: 1em auto;
Position: relativ;
Hintergrund: #F6F6F6;
}
.textTop:hover {
Farbe: #808080;
}
.textBottom:hover {
Farbe: #FF4646;
}
</style>
</head>
<body lang="en">
<div id="top">
<div class="container"> <a href="#" class="textTop">Cascading Style Sheet </a> </div>
<p>文字的上半部分</p>
<div class="container"> <a href="#" class="textBottom">Cascading Style Sheet </a> </div>
<p>文字的下半部分</p>
<div class="container"> <a href="#" class="textTop">Cascading Style Sheet </a> <a href="#" class="textBottom">Cascading Style Sheet </a> </ div>
<p>二组文字重合的效果</p>
</div>
<div id="footer">
<Adresse>
Design von <a href=" http://www.forest53.com">forestgan</a > 本演示采用<a href=" http://www.creativecommons.cn/ ">创作共用授权</a> --署名和非商业用途.
</address>
</div>
</body>
</html>