種子論壇 | 高雄市資訊培育協會學員討論區

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style4.css">
<title>文字排版範例</title>
</head>
<body>
<h1>文字排版範例</h1>
<h2>這裡是一個子標題</h2>
<p>這是一個使用text-indent屬性的段落，可以設定首行縮排，這樣就可以使段落的第一行空出來，使文章更有層次感和美觀</p>
<h2>使用連結</h2>
<p>
這是一個包含連結的段落，你可以
<a href="">點擊這裡</a>
來進一步了解更多內容
</p>
<h2>有序清單</h2>
<ol>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ol>
<h2>調整行間距和字母間距</h2>
<p style="line-height: 1;">這是一個使用line-height屬性設定為1的段落，行高和文字大小一致，這樣行間距會比較緊湊。</p>
<p style="line-height: 24px;">這是一個使用line-height屬性設定為24px的段落，行高設定為具體的高度值，使行間距較大，提高閱讀舒適度。</p>
<p>字母間距是設定字母之間的距離，使用letter-spacing屬性可以調整自母間距。</p>
<P style="letter-spacing: 10px;">letter-spacing 10px</P>
<p style="letter-spacing: 20px;">letter-spacing 20px</p>
</body>
</html>

複製代碼