3-1.html
<html>
<head>
<title>文字字體</title>
<style>
<!--
h2{
font-family:黑體, 幼圓;
}
p{
font-family:Arial, Helvetica, sans-serif;
}
p.kaiti{
font-family:楷體_GB2312, "Times New Roman";
}
-->
</style>
</head>
<body>
<h2>立 春</h2>
<p>自秦代以來，我國就一直以立春作爲春季的開始。立春是從天文上來劃分的，而在自然界、在人們的心目中，春是溫暖，鳥語花香；春是生長，耕耘播種。在氣候學中，春季是指候（5天爲一候）平均氣溫10℃至22℃的時段。</p>
<p class="kaiti">作者: isaac</p>
</body>
</html>
<head>
<title>文字字體</title>
<style>
<!--
h2{
font-family:黑體, 幼圓;
}
p{
font-family:Arial, Helvetica, sans-serif;
}
p.kaiti{
font-family:楷體_GB2312, "Times New Roman";
}
-->
</style>
</head>
<body>
<h2>立 春</h2>
<p>自秦代以來，我國就一直以立春作爲春季的開始。立春是從天文上來劃分的，而在自然界、在人們的心目中，春是溫暖，鳥語花香；春是生長，耕耘播種。在氣候學中，春季是指候（5天爲一候）平均氣溫10℃至22℃的時段。</p>
<p class="kaiti">作者: isaac</p>
</body>
</html>
<html>
<head>
<title>文字大小</title>
<style>
<!--
p.inch{ font-size: 0.5in; }
p.cm{ font-size: 0.5cm; }
p.mm{ font-size: 4mm; }
p.pt{ font-size: 12pt; }
p.pc{ font-size: 2pc; }
-->
</style>
</head>
<body>
<p class="inch">文字大小，0.5in</p>
<p class="cm">文字大小，0.5cm</p>
<p class="mm">文字大小，4mm</p>
<p class="pt">文字大小，12pt</p>
<p class="pc">文字大小，2pc</p>
</body>
</html>
<head>
<title>文字大小</title>
<style>
<!--
p.inch{ font-size: 0.5in; }
p.cm{ font-size: 0.5cm; }
p.mm{ font-size: 4mm; }
p.pt{ font-size: 12pt; }
p.pc{ font-size: 2pc; }
-->
</style>
</head>
<body>
<p class="inch">文字大小，0.5in</p>
<p class="cm">文字大小，0.5cm</p>
<p class="mm">文字大小，4mm</p>
<p class="pt">文字大小，12pt</p>
<p class="pc">文字大小，2pc</p>
</body>
</html>
<html>
<head>
<title>文字大小</title>
<style>
<!--
p.one{ font-size:xx-small; }
p.two{ font-size:x-small; }
p.three{ font-size:small; }
p.four{ font-size:medium; }
p.five{ font-size:large; }
p.six{ font-size:x-large; }
p.seven{ font-size:xx-large; }
-->
</style>
</head>
<body>
<p class="one">文字大小，xx-small</p>
<p class="two">文字大小，x-small</p>
<p class="three">文字大小，small</p>
<p class="four">文字大小，medium</p>
<p class="five">文字大小，large</p>
<p class="six">文字大小，x-large</p>
<p class="seven">文字大小，xx-large</p>
</body>
</html>
<head>
<title>文字大小</title>
<style>
<!--
p.one{ font-size:xx-small; }
p.two{ font-size:x-small; }
p.three{ font-size:small; }
p.four{ font-size:medium; }
p.five{ font-size:large; }
p.six{ font-size:x-large; }
p.seven{ font-size:xx-large; }
-->
</style>
</head>
<body>
<p class="one">文字大小，xx-small</p>
<p class="two">文字大小，x-small</p>
<p class="three">文字大小，small</p>
<p class="four">文字大小，medium</p>
<p class="five">文字大小，large</p>
<p class="six">文字大小，x-large</p>
<p class="seven">文字大小，xx-large</p>
</body>
</html>
<html>
<head>
<title>文字大小_相對值</title>
<style>
<!--
p.one{
font-size:15px; /* 象素，因此實際顯示大小與分辨率有關，很常用的方式 */
}
p.one span{
font-size:200%; /* 在父標記的基礎上200% */
}
p.two{
font-size:30px;
}
p.two span{
font-size: 0.5em; /* 在父標記的基礎上×0.5 */
}
-->
</style>
</head>
<body>
<p class="one">文字大小<span>相對值</span>，15px。</p>
<p class="two">文字大小<span>相對值</span>，30px。</p>
</body>
</html>
<head>
<title>文字大小_相對值</title>
<style>
<!--
p.one{
font-size:15px; /* 象素，因此實際顯示大小與分辨率有關，很常用的方式 */
}
p.one span{
font-size:200%; /* 在父標記的基礎上200% */
}
p.two{
font-size:30px;
}
p.two span{
font-size: 0.5em; /* 在父標記的基礎上×0.5 */
}
-->
</style>
</head>
<body>
<p class="one">文字大小<span>相對值</span>，15px。</p>
<p class="two">文字大小<span>相對值</span>，30px。</p>
</body>
</html>
<html>
<head>
<title>文字顏色</title>
<style>
<!--
h2{ color:rgb(0%,0%,80%); }
p{
color:#333333;
font-size:13px;
}
p span{ color:blue; }
-->
</style>
</head>
<body>
<h2>冬至的由來</h2>
<p><span>冬至</span>過節源於漢代，盛於唐宋，相沿至今。《清嘉錄》甚至有“<span>冬至</span>大如年”之說。這表明古人對<span>冬至</span>十分重視。人們認爲<span>冬至</span>是陰陽二氣的自然轉化，是上天賜予的福氣。漢朝以<span>冬至</span>爲“冬節”，官府要舉行祝賀儀式稱爲“賀冬”，例行放假。《後漢書》中有這樣的記載：“<span>冬至</span>前後，君子安身靜體，百官絕事，不聽政，擇吉辰而後省事。”所以這天朝庭上下要放假休息，軍隊待命，邊塞閉關，商旅停業，親朋各以美食相贈，相互拜訪，歡樂地過一個“安身靜體”的節日。</p>
<p>唐、宋時期，<span>冬至</span>是祭天祭祀祖的日子，皇帝在這天要到郊外舉行祭天大典，百姓在這一天要向父母尊長祭拜，現在仍有一些地方在<span>冬至</span>這天過節慶賀。</p>
</body>
</html>
<head>
<title>文字顏色</title>
<style>
<!--
h2{ color:rgb(0%,0%,80%); }
p{
color:#333333;
font-size:13px;
}
p span{ color:blue; }
-->
</style>
</head>
<body>
<h2>冬至的由來</h2>
<p><span>冬至</span>過節源於漢代，盛於唐宋，相沿至今。《清嘉錄》甚至有“<span>冬至</span>大如年”之說。這表明古人對<span>冬至</span>十分重視。人們認爲<span>冬至</span>是陰陽二氣的自然轉化，是上天賜予的福氣。漢朝以<span>冬至</span>爲“冬節”，官府要舉行祝賀儀式稱爲“賀冬”，例行放假。《後漢書》中有這樣的記載：“<span>冬至</span>前後，君子安身靜體，百官絕事，不聽政，擇吉辰而後省事。”所以這天朝庭上下要放假休息，軍隊待命，邊塞閉關，商旅停業，親朋各以美食相贈，相互拜訪，歡樂地過一個“安身靜體”的節日。</p>
<p>唐、宋時期，<span>冬至</span>是祭天祭祀祖的日子，皇帝在這天要到郊外舉行祭天大典，百姓在這一天要向父母尊長祭拜，現在仍有一些地方在<span>冬至</span>這天過節慶賀。</p>
</body>
</html>
<html>
<head>
<title>文字粗體</title>
<style>
<!--
h1 span{ font-weight:lighter;}
span{ font-size:28px; }
span.one{ font-weight:100; }
span.two{ font-weight:200; }
span.three{ font-weight:300; }
span.four{ font-weight:400; }
span.five{ font-weight:500; }
span.six{ font-weight:600; }
span.seven{ font-weight:700; }
span.eight{ font-weight:800; }
span.nine{ font-weight:900; }
span.ten{ font-weight:bold; }
span.eleven{ font-weight:normal; }
-->
</style>
</head>
<body>
<h1>文字<span>粗</span>體</h1>
<span class="one">文字粗細:100</span>
<span class="two">文字粗細:200</span>
<span class="three">文字粗細:300</span>
<span class="four">文字粗細:400</span>
<span class="five">文字粗細:500</span>
<span class="six">文字粗細:600</span>
<span class="seven">文字粗細:700</span>
<span class="eight">文字粗細:800</span>
<span class="nine">文字粗細:900</span>
<span class="ten">文字粗細:bold</span>
<span class="eleven">文字粗細:normal</span>
</body>
</html>
<head>
<title>文字粗體</title>
<style>
<!--
h1 span{ font-weight:lighter;}
span{ font-size:28px; }
span.one{ font-weight:100; }
span.two{ font-weight:200; }
span.three{ font-weight:300; }
span.four{ font-weight:400; }
span.five{ font-weight:500; }
span.six{ font-weight:600; }
span.seven{ font-weight:700; }
span.eight{ font-weight:800; }
span.nine{ font-weight:900; }
span.ten{ font-weight:bold; }
span.eleven{ font-weight:normal; }
-->
</style>
</head>
<body>
<h1>文字<span>粗</span>體</h1>
<span class="one">文字粗細:100</span>
<span class="two">文字粗細:200</span>
<span class="three">文字粗細:300</span>
<span class="four">文字粗細:400</span>
<span class="five">文字粗細:500</span>
<span class="six">文字粗細:600</span>
<span class="seven">文字粗細:700</span>
<span class="eight">文字粗細:800</span>
<span class="nine">文字粗細:900</span>
<span class="ten">文字粗細:bold</span>
<span class="eleven">文字粗細:normal</span>
</body>
</html>
<html>
<head>
<title>文字斜體</title>
<style>
<!--
h1{ font-style:italic; } /* 設置斜體 */
h1 span{ font-style:normal; } /* 設置爲標準風格 */
p{ font-size:18px; }
p.one{ font-style:italic; }
p.two{ font-style:oblique; }
-->
</style>
</head>
<body>
<h1>文字<span>斜</span>體</h1>
<p class="one">文字斜體</p>
<p class="two">文字斜體</p>
</body>
</html>
<head>
<title>文字斜體</title>
<style>
<!--
h1{ font-style:italic; } /* 設置斜體 */
h1 span{ font-style:normal; } /* 設置爲標準風格 */
p{ font-size:18px; }
p.one{ font-style:italic; }
p.two{ font-style:oblique; }
-->
</style>
</head>
<body>
<h1>文字<span>斜</span>體</h1>
<p class="one">文字斜體</p>
<p class="two">文字斜體</p>
</body>
</html>
<html>
<head>
<title>文字下劃線、頂劃線、刪除線</title>
<style>
<!--
p.one{ text-decoration:underline; } /* 下劃線 */
p.two{ text-decoration:overline; } /* 頂劃線 */
p.three{ text-decoration:line-through; } /* 刪除線 */
p.four{ text-decoration:blink; } /* 閃爍 */
-->
</style>
</head>
<body>
<p class="one">下劃線文字，下劃線文字</p>
<p class="two">頂劃線文字，頂劃線文字</p>
<p class="three">刪除線文字，刪除線文字</p>
<p class="four">文字閃爍</p>
<p>正常文字對比</p>
</body>
</html>
<head>
<title>文字下劃線、頂劃線、刪除線</title>
<style>
<!--
p.one{ text-decoration:underline; } /* 下劃線 */
p.two{ text-decoration:overline; } /* 頂劃線 */
p.three{ text-decoration:line-through; } /* 刪除線 */
p.four{ text-decoration:blink; } /* 閃爍 */
-->
</style>
</head>
<body>
<p class="one">下劃線文字，下劃線文字</p>
<p class="two">頂劃線文字，頂劃線文字</p>
<p class="three">刪除線文字，刪除線文字</p>
<p class="four">文字閃爍</p>
<p>正常文字對比</p>
</body>
</html>
<html>
<head>
<title>文字下劃線、頂劃線、刪除線</title>
<style>
<!--
p.one{ text-decoration:underline overline; } /* 下劃線+頂劃線 */
p.two{ text-decoration:underline line-through; } /* 下劃線+刪除線 */
p.three{ text-decoration:overline line-through; } /* 頂劃線+刪除線 */
p.four{ text-decoration:underline overline line-through; } /* 三種同時 */
-->
</style>
</head>
<body>
<p>正常文字對比</p>
<p class="one">下劃線文字，頂劃線文字</p>
<p class="two">下劃線文字，刪除線文字</p>
<p class="three">頂劃線文字，刪除線文字</p>
<p class="four">三種效果同時</p>
</body>
</html>
<head>
<title>文字下劃線、頂劃線、刪除線</title>
<style>
<!--
p.one{ text-decoration:underline overline; } /* 下劃線+頂劃線 */
p.two{ text-decoration:underline line-through; } /* 下劃線+刪除線 */
p.three{ text-decoration:overline line-through; } /* 頂劃線+刪除線 */
p.four{ text-decoration:underline overline line-through; } /* 三種同時 */
-->
</style>
</head>
<body>
<p>正常文字對比</p>
<p class="one">下劃線文字，頂劃線文字</p>
<p class="two">下劃線文字，刪除線文字</p>
<p class="three">頂劃線文字，刪除線文字</p>
<p class="four">三種效果同時</p>
</body>
</html>
<html>
<head>
<title>英文字母大小寫</title>
<style>
<!--
p{ font-size:17px; }
p.one{ text-transform:capitalize; } /* 單詞首字大寫 */
p.two{ text-transform:uppercase; } /* 全部大寫 */
p.three{ text-transform:lowercase; } /* 全部小寫 */
-->
</style>
</head>
<body>
<p class="one">quick brown fox jumps over the lazy dog.</p>
<p class="two">quick brown fox jumps over the lazy dog.</p>
<p class="three">QUICK Brown Fox JUMPS OVER THE LAZY DOG.</p>
</body>
</html>
<head>
<title>英文字母大小寫</title>
<style>
<!--
p{ font-size:17px; }
p.one{ text-transform:capitalize; } /* 單詞首字大寫 */
p.two{ text-transform:uppercase; } /* 全部大寫 */
p.three{ text-transform:lowercase; } /* 全部小寫 */
-->
</style>
</head>
<body>
<p class="one">quick brown fox jumps over the lazy dog.</p>
<p class="two">quick brown fox jumps over the lazy dog.</p>
<p class="three">QUICK Brown Fox JUMPS OVER THE LAZY DOG.</p>
</body>
</html>
<html>
<head>
<title>Google</title>
<style>
<!--
p{
font-size:80px;
letter-spacing:-2px; /* 字母間距 */
font-family:Arial, Helvetica, sans-serif;
}
.g1, .g2{ color:#184dc6; }
.o1, .e{ color:#c61800; }
.o2{ color:#efba00; }
.l{ color:#42c34a; }
-->
</style>
</head>
<body>
<p><span class="g1">G</span><span class="o1">o</span><span class="o2">o</span><span class="g2">g</span><span class="l">l</span><span class="e">e</span></p>
</body>
</html>
<head>
<title>Google</title>
<style>
<!--
p{
font-size:80px;
letter-spacing:-2px; /* 字母間距 */
font-family:Arial, Helvetica, sans-serif;
}
.g1, .g2{ color:#184dc6; }
.o1, .e{ color:#c61800; }
.o2{ color:#efba00; }
.l{ color:#42c34a; }
-->
</style>
</head>
<body>
<p><span class="g1">G</span><span class="o1">o</span><span class="o2">o</span><span class="g2">g</span><span class="l">l</span><span class="e">e</span></p>
</body>
</html>
<html>
<head>
<title>CSS控制Title</title>
<style>
<!--
body{ background-color:#000000; } /* 頁面背景色 */
h1 {
font-family: Arial, sans-serif;
font-size: 28px;
color: #369;
}
h1 img {
background: #f22; /* gif背景色 */
vertical-align: middle;
}
-->
</style>
</head>
<body>
<h1><img src="bg.gif" border="0"> Super Title CSS</h1>
</body>
</html>
<head>
<title>CSS控制Title</title>
<style>
<!--
body{ background-color:#000000; } /* 頁面背景色 */
h1 {
font-family: Arial, sans-serif;
font-size: 28px;
color: #369;
}
h1 img {
background: #f22; /* gif背景色 */
vertical-align: middle;
}
-->
</style>
</head>
<body>
<h1><img src="bg.gif" border="0"> Super Title CSS</h1>
</body>
</html>
<html>
<head>
<title>水平對齊</title>
<style>
<!--
p{ font-size:12px; }
p.left{ text-align:left; } /* 左對齊 */
p.right{ text-align:right; } /* 右對齊 */
p.center{ text-align:center; } /* 居中對齊 */
p.justify{ text-align:justify; } /* 兩端對齊 */
-->
</style>
</head>
<body>
<p class="left">
這個段落採用左對齊的方式，text-align:left，因此文字都採用左對齊。<br>
牀前明月光，疑是地上霜。<br>舉頭望明月，低頭思故鄉。<br>李白
</p>
<p class="right">
這個段落採用右對齊的方式，text-align:right，因此文字都採用右對齊。<br>
牀前明月光，疑是地上霜。<br>舉頭望明月，低頭思故鄉。<br>李白
</p>
<p class="center">
這個段落採用居中對齊的方式，text-align:center，因此文字都採用居中對齊。<br>
牀前明月光，疑是地上霜。<br>舉頭望明月，低頭思故鄉。<br>李白
</p>
<p class="justify">
這個段落採用左對齊的方式，text-align:justify，因此文字都採用左對齊。牀前明月光，疑是地上霜。舉頭望明月，低頭思故鄉。<br>李白
</p>
</body>
</html>
<head>
<title>水平對齊</title>
<style>
<!--
p{ font-size:12px; }
p.left{ text-align:left; } /* 左對齊 */
p.right{ text-align:right; } /* 右對齊 */
p.center{ text-align:center; } /* 居中對齊 */
p.justify{ text-align:justify; } /* 兩端對齊 */
-->
</style>
</head>
<body>
<p class="left">
這個段落採用左對齊的方式，text-align:left，因此文字都採用左對齊。<br>
牀前明月光，疑是地上霜。<br>舉頭望明月，低頭思故鄉。<br>李白
</p>
<p class="right">
這個段落採用右對齊的方式，text-align:right，因此文字都採用右對齊。<br>
牀前明月光，疑是地上霜。<br>舉頭望明月，低頭思故鄉。<br>李白
</p>
<p class="center">
這個段落採用居中對齊的方式，text-align:center，因此文字都採用居中對齊。<br>
牀前明月光，疑是地上霜。<br>舉頭望明月，低頭思故鄉。<br>李白
</p>
<p class="justify">
這個段落採用左對齊的方式，text-align:justify，因此文字都採用左對齊。牀前明月光，疑是地上霜。舉頭望明月，低頭思故鄉。<br>李白
</p>
</body>
</html>
<html>
<head>
<title>垂直對齊</title>
<style>
<!--
td.top{ vertical-align:top; } /* 頂端對齊 */
td.bottom{ vertical-align:bottom; } /* 底端對齊 */
td.middle{ vertical-align:middle; } /* 中間對齊 */
-->
</style>
</head>
<body>
<table cellpadding="2" cellspacing="0" border="1">
<tr>
<td><img src="02.jpg" border="0"></td>
<td class="top">垂直對齊方式，top</td>
</tr>
<tr>
<td><img src="02.jpg" border="0"></td>
<td class="bottom">垂直對齊方式，bottom</td>
</tr>
<tr>
<td><img src="02.jpg" border="0"></td>
<td class="middle">垂直對齊方式，middle</td>
</tr>
</table>
</body>
</html>
<head>
<title>垂直對齊</title>
<style>
<!--
td.top{ vertical-align:top; } /* 頂端對齊 */
td.bottom{ vertical-align:bottom; } /* 底端對齊 */
td.middle{ vertical-align:middle; } /* 中間對齊 */
-->
</style>
</head>
<body>
<table cellpadding="2" cellspacing="0" border="1">
<tr>
<td><img src="02.jpg" border="0"></td>
<td class="top">垂直對齊方式，top</td>
</tr>
<tr>
<td><img src="02.jpg" border="0"></td>
<td class="bottom">垂直對齊方式，bottom</td>
</tr>
<tr>
<td><img src="02.jpg" border="0"></td>
<td class="middle">垂直對齊方式，middle</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>垂直對齊</title>
<style>
<!--
span.zs{ vertical-align:10px; }
span.fs{ vertical-align:-10px; }
-->
</style>
</head>
<body>
<p>給對齊屬性設置具體<span class="zs">數值</span>，正數</p>
<p>給對齊屬性設置<span class="fs">具體</span>數值，負數</p>
</body>
</html>
<head>
<title>垂直對齊</title>
<style>
<!--
span.zs{ vertical-align:10px; }
span.fs{ vertical-align:-10px; }
-->
</style>
</head>
<body>
<p>給對齊屬性設置具體<span class="zs">數值</span>，正數</p>
<p>給對齊屬性設置<span class="fs">具體</span>數值，負數</p>
</body>
</html>
<html>
<head>
<title>行間距</title>
<style>
<!--
p.one{
font-size:10pt;
line-height:8pt; /* 行間距，絕對數值，行間距小於字體大小 */
}
p.second{ font-size:18px; }
p.third{ font-size:10px; }
p.second, p.third{
line-height: 1.5em; /* 行間距，相對數值 */
}
-->
</style>
</head>
<body>
<p class="one">秋分，我國古籍《春秋繁露、陰陽出入上下篇》中說：“秋分者，陰陽相半也，故晝夜均而寒暑平。”“秋分”的意思有二：一是太陽在這時到達黃徑180。一天24小時晝夜均分，各12小時；二是按我國古代以立春、立夏、立秋、立冬爲四季開始的季節劃分法，秋分日居秋季90天之中，平分了秋季。</p>
<p class="second">秋分時節，我國長江流域及其以北的廣大地區，均先後進入了秋季，日平均氣溫都降到了22℃以下。北方冷氣團開始具有一定的勢力，大部分地區雨季剛剛結束，涼風習習，碧空萬里，風和日麗，秋高氣爽，丹桂飄香，蟹肥菊黃，秋分是美好宜人的時節。</p>
<p class="third">秋季降溫快的特點，使得秋收、秋耕、秋種的“三秋”大忙顯得格外緊張。秋分棉花吐絮，菸葉也由綠變黃，正是收穫的大好時機。華北地區已開始播種冬麥，長江流域及南部廣大地區正忙着晚稻的收割，搶晴耕翻土地，準備油菜播種。</p>
</body>
</html>
<head>
<title>行間距</title>
<style>
<!--
p.one{
font-size:10pt;
line-height:8pt; /* 行間距，絕對數值，行間距小於字體大小 */
}
p.second{ font-size:18px; }
p.third{ font-size:10px; }
p.second, p.third{
line-height: 1.5em; /* 行間距，相對數值 */
}
-->
</style>
</head>
<body>
<p class="one">秋分，我國古籍《春秋繁露、陰陽出入上下篇》中說：“秋分者，陰陽相半也，故晝夜均而寒暑平。”“秋分”的意思有二：一是太陽在這時到達黃徑180。一天24小時晝夜均分，各12小時；二是按我國古代以立春、立夏、立秋、立冬爲四季開始的季節劃分法，秋分日居秋季90天之中，平分了秋季。</p>
<p class="second">秋分時節，我國長江流域及其以北的廣大地區，均先後進入了秋季，日平均氣溫都降到了22℃以下。北方冷氣團開始具有一定的勢力，大部分地區雨季剛剛結束，涼風習習，碧空萬里，風和日麗，秋高氣爽，丹桂飄香，蟹肥菊黃，秋分是美好宜人的時節。</p>
<p class="third">秋季降溫快的特點，使得秋收、秋耕、秋種的“三秋”大忙顯得格外緊張。秋分棉花吐絮，菸葉也由綠變黃，正是收穫的大好時機。華北地區已開始播種冬麥，長江流域及南部廣大地區正忙着晚稻的收割，搶晴耕翻土地，準備油菜播種。</p>
</body>
</html>
<html>
<head>
<title>字間距</title>
<style>
<!--
p.one{
font-size:10pt;
letter-spacing:-2pt; /* 字間距，絕對數值，負數 */
}
p.second{ font-size:18px; }
p.third{ font-size:11px; }
p.second, p.third{
letter-spacing: .5em; /* 字間距，相對數值 */
}
-->
</style>
</head>
<body>
<p class="one">文字間距1，負數</p>
<p class="second">文字間距2，相對數值</p>
<p class="third">文字間距3，相對數值</p>
</body>
</html>
<head>
<title>字間距</title>
<style>
<!--
p.one{
font-size:10pt;
letter-spacing:-2pt; /* 字間距，絕對數值，負數 */
}
p.second{ font-size:18px; }
p.third{ font-size:11px; }
p.second, p.third{
letter-spacing: .5em; /* 字間距，相對數值 */
}
-->
</style>
</head>
<body>
<p class="one">文字間距1，負數</p>
<p class="second">文字間距2，相對數值</p>
<p class="third">文字間距3，相對數值</p>
</body>
</html>
<html>
<head>
<title>首字放大</title>
<style>
<!--
body{
background-color:black; /* 背景色 */
}
p{
font-size:15px; /* 文字大小 */
color:white; /* 文字顏色 */
}
p span{
font-size:60px; /* 首字大小 */
float:left; /* 首字下沉 */
padding-right:5px; /* 與右邊的間隔 */
font-weight:bold; /* 粗體字 */
font-family:黑體; /* 黑體字 */
color:yellow; /* 字體顏色 */
}
/*
p:first-letter{
font-size:60px;
float:left;
padding-right:5px;
font-weight:bold;
font-family:黑體;
color:yellow;
}
p:first-line{
text-decoration:underline;
}*/
-->
</style>
</head>
<body>
<p><span>中</span>秋節是遠古天象崇拜——敬月習俗的遺痕。據《周禮·春官》記載，周代已有“中秋夜迎寒”、“中秋獻良裘”、“秋分夕月（拜月）”的活動；漢代，又在中秋或立秋之日敬老、養老，賜以雄粗餅。晉時亦有中秋賞月之舉，不過不太普遍；直到唐代將中秋與儲娥奔月、吳剛伐桂、玉兔搗藥、楊貴妃變月神、唐明皇遊月宮等神話故事結合起，使之充滿浪漫色彩，玩月之風方纔大興。</p>
<p>北宋，正式定八月十五爲中秋節，並出現“小餅如嚼月，中有酥和飴”的節令食品。孟元老《東京夢華錄》說：“中秋夜，貴家結飾臺榭，民間爭佔酒樓玩月”；而且“弦重鼎沸，近內延居民，深夜逢聞笙芋之聲，宛如雲外。間裏兒童，連宵婚戲；夜市駢闐，至於通曉。”吳自牧《夢樑錄》說：“此際金鳳薦爽，玉露生涼，丹桂香飄，銀蟾光滿。王孫公子，富家巨室，莫不登危樓，臨軒玩月，或開廣榭，玳筵羅列，琴瑟鏗鏘，酌酒高歌，以卜竟夕之歡。</p>
</body>
</html>
<head>
<title>首字放大</title>
<style>
<!--
body{
background-color:black; /* 背景色 */
}
p{
font-size:15px; /* 文字大小 */
color:white; /* 文字顏色 */
}
p span{
font-size:60px; /* 首字大小 */
float:left; /* 首字下沉 */
padding-right:5px; /* 與右邊的間隔 */
font-weight:bold; /* 粗體字 */
font-family:黑體; /* 黑體字 */
color:yellow; /* 字體顏色 */
}
/*
p:first-letter{
font-size:60px;
float:left;
padding-right:5px;
font-weight:bold;
font-family:黑體;
color:yellow;
}
p:first-line{
text-decoration:underline;
}*/
-->
</style>
</head>
<body>
<p><span>中</span>秋節是遠古天象崇拜——敬月習俗的遺痕。據《周禮·春官》記載，周代已有“中秋夜迎寒”、“中秋獻良裘”、“秋分夕月（拜月）”的活動；漢代，又在中秋或立秋之日敬老、養老，賜以雄粗餅。晉時亦有中秋賞月之舉，不過不太普遍；直到唐代將中秋與儲娥奔月、吳剛伐桂、玉兔搗藥、楊貴妃變月神、唐明皇遊月宮等神話故事結合起，使之充滿浪漫色彩，玩月之風方纔大興。</p>
<p>北宋，正式定八月十五爲中秋節，並出現“小餅如嚼月，中有酥和飴”的節令食品。孟元老《東京夢華錄》說：“中秋夜，貴家結飾臺榭，民間爭佔酒樓玩月”；而且“弦重鼎沸，近內延居民，深夜逢聞笙芋之聲，宛如雲外。間裏兒童，連宵婚戲；夜市駢闐，至於通曉。”吳自牧《夢樑錄》說：“此際金鳳薦爽，玉露生涼，丹桂香飄，銀蟾光滿。王孫公子，富家巨室，莫不登危樓，臨軒玩月，或開廣榭，玳筵羅列，琴瑟鏗鏘，酌酒高歌，以卜竟夕之歡。</p>
</body>
</html>
<html>
<head>
<title>段落實例:Baidu搜索</title>
<style>
<!--
p{
margin:0px;
font-family:Arial; /* 定義所有字體 */
}
p.title{
padding-bottom:0px;
font-size:16px;
}
p.content{
padding-top:3px; /* 標題與內容的距離 */
font-size:13px; /* 內容的字體大小 */
line-height:18px;
}
p.link{
font-size:13px;
color:#008000; /* 網址顏色 */
padding-bottom:25px;
}
span.search{
color:#c60a00; /* 關鍵字顏色 */
}
span.quick{
color:#666666; /* 快照顏色 */
text-decoration:underline; /* 快照下劃線 */
}
p.title span.search{
text-decoration:underline; /* 標題處關鍵字的下劃線 */
}
-->
</style>
</head>
<body>
<p class="title"><a href="#">中國<span class="search">春節</span>網</a></p>
<p class="content">歡迎光臨中國<span class="search">春節</span>網,您現在的位置是中國<span class="search">春節</span>網首頁! "年"獸的傳說 熬年的傳說 萬年創建曆法說 中國古代曆法發展 <span class="search">春節</span>:傳統和現代 元宵燈節源於何時? 猜燈謎的來由 十二生肖的源流、排列與信仰 祭竈 掃塵 貼春聯 年畫 倒貼福字 除夕夜 ...</p>
<p class="link">www.chunjie.net.cn/ 46K 2006-12-18 - <span class="quick">百度快照</span></p>
<p class="title"><a href="#">喜迎2004<span class="search">春節</span>_TOM新聞</a></p>
<p class="content">·<span class="search">春節</span>流行三類“拜年短信”:猴、祝福、個性 ·<span class="search">春節</span>期間電視節目早知道(1月19日-1月25日) ·猴年賀歲:短信 彩信...·TOM遊戲與大家同過快樂<span class="search">春節</span> 一起來玩免費網遊! ·“對對聯 賀新春” 玩樂吧強檔推薦 許個願吧 ·<span class="search">春節</span>聽覺搜爆-...</p>
<p class="link">news.tom.com/hot/2004year/ 82K 2004-1-25 - <span class="quick">百度快照</span></p>
<p class="title"><a href="#"><span class="search">春節</span> 我把money獻給你_阿里巴巴</a></p>
<p class="content">編者按:新年、<span class="search">春節</span>、情人節,一年中時尚男女血拼的最佳時節。商家借節造勢,推出的攬客“花招”也是層出不窮…… 新春最受歡迎的開...·<span class="search">春節</span>期間:這些生意好賺錢(一)(圖)01/20 ·鼎大祥“紅腰帶吉祥褲”銷售紅火01/18 <span class="search">春節</span> 這些生意好...</p>
<p class="link">info.china.alibaba.com/news/subject/v3000 ... 33K 2006-12-10 - <span class="quick">百度快照</span></p>
</body>
</html>
<head>
<title>段落實例:Baidu搜索</title>
<style>
<!--
p{
margin:0px;
font-family:Arial; /* 定義所有字體 */
}
p.title{
padding-bottom:0px;
font-size:16px;
}
p.content{
padding-top:3px; /* 標題與內容的距離 */
font-size:13px; /* 內容的字體大小 */
line-height:18px;
}
p.link{
font-size:13px;
color:#008000; /* 網址顏色 */
padding-bottom:25px;
}
span.search{
color:#c60a00; /* 關鍵字顏色 */
}
span.quick{
color:#666666; /* 快照顏色 */
text-decoration:underline; /* 快照下劃線 */
}
p.title span.search{
text-decoration:underline; /* 標題處關鍵字的下劃線 */
}
-->
</style>
</head>
<body>
<p class="title"><a href="#">中國<span class="search">春節</span>網</a></p>
<p class="content">歡迎光臨中國<span class="search">春節</span>網,您現在的位置是中國<span class="search">春節</span>網首頁! "年"獸的傳說 熬年的傳說 萬年創建曆法說 中國古代曆法發展 <span class="search">春節</span>:傳統和現代 元宵燈節源於何時? 猜燈謎的來由 十二生肖的源流、排列與信仰 祭竈 掃塵 貼春聯 年畫 倒貼福字 除夕夜 ...</p>
<p class="link">www.chunjie.net.cn/ 46K 2006-12-18 - <span class="quick">百度快照</span></p>
<p class="title"><a href="#">喜迎2004<span class="search">春節</span>_TOM新聞</a></p>
<p class="content">·<span class="search">春節</span>流行三類“拜年短信”:猴、祝福、個性 ·<span class="search">春節</span>期間電視節目早知道(1月19日-1月25日) ·猴年賀歲:短信 彩信...·TOM遊戲與大家同過快樂<span class="search">春節</span> 一起來玩免費網遊! ·“對對聯 賀新春” 玩樂吧強檔推薦 許個願吧 ·<span class="search">春節</span>聽覺搜爆-...</p>
<p class="link">news.tom.com/hot/2004year/ 82K 2004-1-25 - <span class="quick">百度快照</span></p>
<p class="title"><a href="#"><span class="search">春節</span> 我把money獻給你_阿里巴巴</a></p>
<p class="content">編者按:新年、<span class="search">春節</span>、情人節,一年中時尚男女血拼的最佳時節。商家借節造勢,推出的攬客“花招”也是層出不窮…… 新春最受歡迎的開...·<span class="search">春節</span>期間:這些生意好賺錢(一)(圖)01/20 ·鼎大祥“紅腰帶吉祥褲”銷售紅火01/18 <span class="search">春節</span> 這些生意好...</p>
<p class="link">info.china.alibaba.com/news/subject/v3000 ... 33K 2006-12-10 - <span class="quick">百度快照</span></p>
</body>
</html>
來源：《精通CSS+DIV網頁樣式與佈局》