<!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">
<頭>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="多彩文字,多色文字" />
<meta http-equiv="Description" content="利用CSS的Clip屬性來創造多彩文字(Multi Colored Text)" />
<meta content="all" name="機器人" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="author" content="forestgan" />
<meta name="copyright" content="forestgan" />
<title>多彩文字(Multi Colored Text)</title>
<style type="text/css">
正文{
背景：#FFFFFF；
顏色：#333333；
字型系列：Arial、Helvetica、sans-serif；
字體大小：100%；
行高：140%；
文字對齊：居中；
填充：0；
保證金：0；
}
p{
保證金：0；
}
地址{
字體大小：75%；
}
正文，html{
高度：100%；
}
* html, * html 正文{
溢出：隱藏；
}
＃頂部{
最小高度：90%；
溢出：自動；
}
* html #頂部{
身高：90%；
}
#頁尾{
高度：10%；
背景：#CC0000；
顏色：#FFFFFF；
}
位址{
頂部填充：1em；
字體樣式：正常；
}
一個{
文字裝飾：無；
}
.textBottom {
顏色：#333333；
位置：絕對；
左：3em；
頂部：1em；
字體：26px「世紀哥德式」、Arial、Helvetica、無襯線字體；
剪輯：矩形（18px 自動自動）；
}
.textTop {
顏色：#CC0000；
位置：絕對；
左：3em；
頂部：1em；
字體：26px「世紀哥德式」、Arial、Helvetica、無襯線字體；
剪輯：矩形（0 自動 18px 0）；
}
。
寬度：28em；
高度：5em；
保證金：1em 自動；
位置：相對；
背景：#F6F6F6；
}
.textTop：懸停{
顏色：#808080；
}
.textBottom:懸停{
顏色：#FF4646；
}
</風格>
</頭>
<body lang="zh">
<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>
</正文>
</html>