<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Estricto//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml " xml:lang="es" lang="es">
<cabeza>
<meta http-equiv="Tipo de contenido" content="text/html; charset=utf-8" />
<meta name="Palabras clave" content="多彩文字, texto multicolor" />
<meta http-equiv="Descripción" content="利用CSS 的 Clip 属性来创造 多彩文字(Texto multicolor)" />
<meta contenido="todos" nombre="robots" />
<meta http-equiv="pragma" content="sin caché" />
<meta nombre="autor" contenido="forestgan" />
<meta nombre="copyright" content="forestgan" />
<title>多彩文字(Texto multicolor)</title>
<tipo de estilo="texto/css">
cuerpo{
fondo: #FFFFFF;
color: #333333;
familia de fuentes: Arial, Helvetica, sans-serif;
tamaño de fuente: 100%;
altura de línea: 140%;
alineación de texto: centro;
relleno: 0;
margen: 0;
}
pags{
margen: 0;
}
DIRECCIÓN{
tamaño de fuente: 75%;
}
cuerpo,html{
altura: 100%;
}
* html, * cuerpo html{
desbordamiento: oculto;
}
#arriba{
altura mínima: 90%;
desbordamiento: automático;
}
* html #arriba{
altura: 90%;
}
#pie de página{
altura: 10%;
antecedentes: #CC0000;
color: #FFFFFF;
}
DIRECCIÓN{
acolchado superior: 1em;
estilo de fuente: normal;
}
a{
decoración de texto: ninguna;
}
.textAbajo {
color: #333333;
posición: absoluta;
izquierda: 3em;
arriba: 1em;
fuente: 26px "Century Gothic", Arial, Helvética, sans-serif;
clip: rect(18px auto auto auto);
}
.textTop {
color: #CC0000;
posición: absoluta;
izquierda: 3em;
arriba: 1em;
fuente: 26px "Century Gothic", Arial, Helvética, sans-serif;
clip: rect(0 auto 18px 0);
}
.contenedor {
ancho: 28 cm;
altura: 5em;
margen: 1em automático;
posición: relativa;
fondo: #F6F6F6;
}
.textTop: flotar {
color: #808080;
}
.textBottom: flotar {
color: #FF4646;
}
</estilo>
</cabeza>
<cuerpo lang="es">
<div id="arriba">
<div class="container"> <a href="#" class="textTop">Hoja de estilos en cascada </a> </div>
<p>文字的上半部分</p>
<div class="container"> <a href="#" class="textBottom">Hoja de estilos en cascada </a> </div>
<p>文字的下半部分</p>
<div class="container"> <a href="#" class="textTop">Hoja de estilos en cascada </a> <a href="#" class="textBottom">Hoja de estilos en cascada </a> </ div>
<p>二组文字重合的效果</p>
</div>
<div id="pie de página">
<dirección>
Diseño de <a href=" http://www.forest53.com">forestgan</a > 本演示采用<a href=" http://www.creativecommons.cn/ ">创作共用授权</a> --署名和非商业用途.
</dirección>
</div>
</cuerpo>
</html>