資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 CSS 設定段落第二行的縮排？
HTML 用於建立網頁的結構。此外，CSS 用於設定這些網頁的視覺外觀。在 CSS 中，縮排是網頁上格式化文字的重要方面之一。它允許開發者在段落的開頭建立視覺效果。縮排可以使文字更易於閱讀，並在文件中建立結構感。
CSS 中的縮排
CSS 是一種強大的工具，允許開發者控制網頁上 HTML 元素的視覺呈現。我們可以設定文字樣式，並更改其字型、大小、顏色，甚至使用 CSS 更改其縮排。
在 CSS 中，縮排用於在元素之間建立視覺分離。它透過在元素的左側或右側新增空格或填充來建立元素之間的視覺分離。
語法
css selector {
text-indent: value;
}
使用 Text-Indent 屬性進行首行縮排
CSS 允許開發者使用 text-indent 屬性縮排段落的第一行。此屬性已設定為 0，這意味著屬性上沒有縮排。例如，如果我們想縮排網頁上所有段落的 25 畫素，我們可以使用以下程式碼 -
p {
text-indent: 25px;
}
示例 1
這是一個將 25px 縮排設定為網頁上所有段落的示例。
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
text-align: center;
}
p {
text-indent: 35px;
}
</style>
</head>
<body>
<h2>This is an example of a text-indent property</h2>
<p>This is the first indented paragraph. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<p>This is a second indented paragraph. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<p>This is the nth indented paragraph, Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>
如何縮排段落的第二行？
"text-indent" 屬性用於縮排段落的第一行。而要縮排段落的第二行，首先必須刪除第一行的縮排。為此，我們可以使用 "text-indent" 的負值將第一行向左移動，然後使用 "padding-left" 的正值將第二行向右移動。例如 -
p {
text-indent: -20px;
padding-left: 20px;
}
在上面的程式碼中，我們將段落的第一行縮進了 -20px，這將使其向左移動 -20px，而第二行縮進了 20px，這將使其向右移動回原位。
讓我們看一些使用 CSS 縮排段落第二行的示例。
示例 2
這是一個使用 CSS 元素設定段落第二行縮排的示例
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
text-align: center;
}
p {
text-indent: -30px;
padding-left: 30px;
}
</style>
</head>
<body>
<h2>Indent Second Line of Paragraph</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</body>
</html>
示例 3
這是一個使用 CSS 類選擇器設定段落第二行縮排的示例。
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
text-align: center;
}
.indent-p {
text-indent: -4em;
padding-left: 4em;
}
</style>
</head>
<body>
<h2>Indent Second Line of Paragraph using CSS class selector</h2>
<p class="indent-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</body>
</html>
結論
在這裡，我們討論了段落第二行的縮排。這是一種簡單的方法，可以提高網頁的可讀性和外觀。透過使用 "text-indent" 屬性，我們可以建立一個獨特且視覺上吸引人的外觀，使內容脫穎而出。
更新於: 2023年4月12日
2K+ 次瀏覽
廣告