HTML H1 標題與內文
<h1>這裡是範例標題</h1>
這裡是文章內容 .....................
網頁中最重要的標題通常會用 <h1> 標籤來標示，請參閱：HTML H1 H2 H3 H4 H5 H6 標題。這裡是文章內容 .....................
CSS3 text-shadow 語法
<style type="text/css">
<!--
h1 {
text-shadow:3px 3px 3px #cccccc;
}
-->
</style>
這是一個標準的 CSS 語法區塊，由『<style type="text/css">』開始至『</style>』結束，我們在裡面使用了 h1 這樣的宣告來設定 H1 標題的陰影效果，text-shadow 即為文字陰影效果的屬性，詳細用法請參閱：CSS3 text-shadow 文字陰影效果。<!--
h1 {
text-shadow:3px 3px 3px #cccccc;
}
-->
</style>
將以上兩個部分整合在一個網頁中
<style type="text/css">
<!--
.h1 {
text-shadow:3px 3px 3px #cccccc;
}
-->
</style>
<h1>這裡是範例標題</h1>
這裡是文章內容 .....................
呈現效果<!--
.h1 {
text-shadow:3px 3px 3px #cccccc;
}
-->
</style>
<h1>這裡是範例標題</h1>
這裡是文章內容 .....................
這裡是範例標題
這裡是文章內容 .....................
是不是很清楚的將文章標題與文章內容區分開來了呢？這樣的技巧在許多網站上都看得到，不過編輯在這裡建議，雖然 text-shadow 可以將 H1 標題明顯標示出立體感，但使用過量會造成暈染效果，反而會讓標題模糊掉，設計上需多注意呈現效果。這裡是文章內容 .....................
相關主題延伸閱讀