<!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="ja" lang="ja">
<頭>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="キーワード" content="多彩文字,多色のテキスト" />
<meta http-equiv="Description" content="CSS を利用したクリップ プロパティ来创造 多様文字(Multi Colored Text)" />
<meta content="all" name="ロボット" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="著者" content="フォレストガン" />
<meta name="copyright" content="フォレストガン" />
<title>多彩文字(Multi Colored Text)</title>
<style type="text/css">
本文{
背景: #FFFFFF;
色: #333333;
フォントファミリー: Arial、Helvetica、サンセリフ;
フォントサイズ: 100%;
行の高さ: 140%;
テキスト整列: 中央;
パディング: 0;
マージン: 0;
}
p{
マージン: 0;
}
住所{
フォントサイズ: 75%;
}
本文、html{
高さ: 100%;
}
* html、* html 本文{
オーバーフロー: 非表示;
}
#トップ{
最小高さ: 90%;
オーバーフロー: 自動;
}
* html #top{
高さ: 90%;
}
#フッター{
高さ: 10%;
背景: #CC0000;
色: #FFFFFF;
}
住所{
パディングトップ: 1em;
フォントスタイル: 通常;
}
あ{
テキスト装飾: なし。
.textBottom
{
色: #333333;
位置: 絶対;
左: 3em;
上: 1em;
フォント: 26px "Century Gothic"、Arial、Helvetica、サンセリフ;
クリップ：rect(18px auto auto auto);
.textTop
{
色: #CC0000;
位置: 絶対;
左: 3em;
上: 1em;
フォント: 26px "Century Gothic"、Arial、Helvetica、サンセリフ;
クリップ：rect(0 auto 18px 0);
}
。容器 {
幅: 28em;
高さ: 5em;
マージン: 1em 自動;
位置: 相対的;
背景: #F6F6F6;
.textTop
:ホバー {
色: #808080;
.textBottom
:hover {
色: #FF4646;
}
</スタイル>
</head>
<body lang="ja">
<div id="トップ">
<div class="container"> <a href="#" class="textTop">カスケード スタイル シート </a> </div>
<p>文字の上半分</p>
<div class="container"> <a href="#" class="textBottom">カスケード スタイル シート </a> </div>
<p>文字の下半分</p>
<div class="container"> <a href="#" class="textTop">カスケード スタイル シート </a> <a href="#" class="textBottom">カスケード スタイル シート </a> </ディビジョン>
<p>二組文字重ねの効果</p>
</div>
<div id="フッター">
<アドレス>
<a href=" http://www.forest53.com">forestgan</a>によるデザイン > 本演示用<a href=" http://www.creativecommons.cn/ ">创作共用授权</a> -- 表現および非商業的使用。
</アドレス>
</div>
</body>
</html>