首頁 > web前端 > css教學 > 首行縮排怎麼設定

首行縮排怎麼設定

不言
發布: 2021-04-16 15:13:26
原創
32447 人瀏覽過

首行縮排的設定方法:先建立一個HTML範例檔案;然後在body中定義一些文字內容;最後透過「text-indent」屬性來設定首行縮排效果。

首行縮排怎麼設定

本文操作環境:Windows7系統、Dell G3電腦、HTML5&&CSS3。

這篇文章所說的內容是一個用HTML縮排段落第一行的程式碼,我們要知道縮排段落需要用到的屬性是text-indent,下面我們就來看一看具體的內容。

語法格式:

text-indent :(縮排寬度)

#描述範例:

p {text-indent:1em;}
登入後複製

程式碼範例1:縮排單個字元

透過指定「text-indent:1em」縮排一個字元的段落的開頭。

程式碼如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    p {text-indent:1em;} 
    </style>
</head>
<body>
    <p>但教心似金钿坚,天上人间会相见。临别殷勤重寄词,词中有誓两心知。七月七日长生殿,夜半无人私语时。在天愿作比翼鸟,在地愿为连理枝。</p>
    <p>临别殷勤重寄词,词中有誓两心知。七月七日长生殿,夜半无人私语时。在天愿作比翼鸟,在地愿为连理枝。天长地久有时尽,此恨绵绵无绝期。
    但教心似金钿坚,天上人间会相见。临别殷勤重寄词,词中有誓两心知。七月七日长生殿,夜半无人私语时。在天愿作比翼鸟,在地愿为连理枝。</p>
    <p>临别殷勤重寄词,词中有誓两心知。七月七日长生殿,夜半无人私语时。在天愿作比翼鸟,在地愿为连理枝。天长地久有时尽,此恨绵绵无绝期。
    但教心似金钿坚,天上人间会相见。临别殷勤重寄词,词中有誓两心知。七月七日长生殿,夜半无人私语时。在天愿作比翼鸟,在地愿为连理枝。</p>
</body>
</html>
登入後複製

(相關推薦:CSS學習手冊

顯示結果

使用網頁瀏覽器顯示上述HTML檔案。將顯示如下所示的效果。可以確認段落的第一行縮排一個字元。

首行縮排怎麼設定

程式碼範例2:半文字縮排

透過指定“text-indent:0.5 em”,您可以將段落的開頭縮排0.5個字元。

程式碼如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    p {text-indent:0.5em;} 
    </style>
</head>
<body>
    <p>但教心似金钿坚,天上人间会相见。临别殷勤重寄词,词中有誓两心知。七月七日长生殿,夜半无人私语时。在天愿作比翼鸟,在地愿为连理枝。</p>

    <p>临别殷勤重寄词,词中有誓两心知。七月七日长生殿,夜半无人私语时。在天愿作比翼鸟,在地愿为连理枝。天长地久有时尽,此恨绵绵无绝期。
    但教心似金钿坚,天上人间会相见。临别殷勤重寄词,词中有誓两心知。七月七日长生殿,夜半无人私语时。在天愿作比翼鸟,在地愿为连理枝。</p>

    <p>临别殷勤重寄词,词中有誓两心知。七月七日长生殿,夜半无人私语时。在天愿作比翼鸟,在地愿为连理枝。天长地久有时尽,此恨绵绵无绝期。
    但教心似金钿坚,天上人间会相见。临别殷勤重寄词,词中有誓两心知。七月七日长生殿,夜半无人私语时。在天愿作比翼鸟,在地愿为连理枝。</p>
</body>
</html>
登入後複製

顯示結果

使用網頁瀏覽器顯示上述HTML文件,將顯示如下所示的效果:可以確認該段落的第一行是縮小的。

首行縮排怎麼設定

程式碼範例3:像素規格

透過指定「text - indent:14px」縮排14像素段落的開頭。

程式碼如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    p {text-indent:14px;} 
    </style>
</head>
<body>
    <p>但教心似金钿坚,天上人间会相见。临别殷勤重寄词,词中有誓两心知。七月七日长生殿,夜半无人私语时。在天愿作比翼鸟,在地愿为连理枝。</p>

    <p>临别殷勤重寄词,词中有誓两心知。七月七日长生殿,夜半无人私语时。在天愿作比翼鸟,在地愿为连理枝。天长地久有时尽,此恨绵绵无绝期。
    但教心似金钿坚,天上人间会相见。临别殷勤重寄词,词中有誓两心知。七月七日长生殿,夜半无人私语时。在天愿作比翼鸟,在地愿为连理枝。</p>

    <p>临别殷勤重寄词,词中有誓两心知。七月七日长生殿,夜半无人私语时。在天愿作比翼鸟,在地愿为连理枝。天长地久有时尽,此恨绵绵无绝期。
    但教心似金钿坚,天上人间会相见。临别殷勤重寄词,词中有誓两心知。七月七日长生殿,夜半无人私语时。在天愿作比翼鸟,在地愿为连理枝。</p>
</body>
</html>
登入後複製

顯示結果

使用網頁瀏覽器顯示上述HTML文件,將顯示如下所示的效果:設定像素數段落的開頭是縮排的。

首行縮排怎麼設定

這篇文章到這裡就全部結束了,有關於CSS的更多內容大家可以關注php中文網的CSS視頻教程欄目! ! !

以上是首行縮排怎麼設定的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板