<!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의 클립 属性来创造 多彩文字(다중 색상 텍스트)" />
<meta content="all" name="로봇" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="author" content="forestgan" />
<meta name="copyright" content="forestgan" />
<title>多彩文字(다양한 색상의 텍스트)</title>
<style type="text/css">
본문{
배경: #FFFFFF;
색상: #333333;
글꼴 모음: Arial, Helvetica, sans-serif;
글꼴 크기: 100%;
줄 높이: 140%;
텍스트 정렬: 중앙;
패딩: 0;
여백: 0;
}
피{
여백: 0;
}
주소{
글꼴 크기: 75%;
}
본문,html{
높이: 100%;
}
* html, * html 본문{
오버플로: 숨김;
}
#맨 위{
최소 높이: 90%;
오버플로: 자동;
}
* html #top{
높이: 90%;
}
#보행인{
높이: 10%;
배경: #CC0000;
색상: #FFFFFF;
}
주소{
패딩 탑: 1em;
글꼴 스타일: 일반;
}
에이{
텍스트 장식: 없음;
}
.textBottom {
색상: #333333;
위치: 절대;
왼쪽: 3em;
상단: 1em;
글꼴: 26px "세기 고딕", Arial, Helvetica, sans-serif;
클립: 각형(18px 자동 자동 자동);
}
.textTop {
색상: #CC0000;
위치: 절대;
왼쪽: 3em;
상단: 1em;
글꼴: 26px "세기 고딕", Arial, Helvetica, sans-serif;
클립: 각형(0 자동 18px 0);
}
.컨테이너 {
폭: 28em;
높이: 5em;
마진: 1em 자동;
위치: 상대;
배경: #F6F6F6;
}
.textTop:hover {
색상: #808080;
}
.textBottom:hover {
색상: #FF4646;
}
</style>
</head>
<body lang="en">
<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> </a> div>
<p>이중 문자 통합</p>
</div>
<div id="바닥글">
<주소>
디자인: <a href=" http://www.forest53.com">forestgan</a > 本演示采用<a href=" http://www.creativecommons.cn/ ">创작품共用授权</a> --署 Name 와 Non 商业 途。
</주소>
</div>
</body>
</html>