Heim > Artikel > Web-Frontend > So erzielen Sie den Einrückungseffekt der ersten Zeile in CSS
So erzielen Sie den Einrückungseffekt der ersten Zeile in CSS
- 青灯夜游Original
- 2018-10-11 14:46:5418110Durchsuche
So erzielen Sie den Einrückungseffekt der ersten Zeile in CSS: Erstellen Sie zunächst eine HTML-Beispieldatei. Definieren Sie dann einige Textabsätze im Textkörper. .
Die Betriebsumgebung dieses Artikels: Windows 7-System, Dell G3-Computer, HTML5- und CSS3-Version.
In CSS können wir das text-indent-Attribut verwenden, um den Einrückungseffekt der ersten Zeile zu erzielen. Dieser Artikel zeigt Ihnen, wie das text-indent-Attribut den Einrückungsstil der ersten Zeile festlegt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
Erstens lernen wir das relevante Wissen über das CSS-Texteinzugsattribut kennen.
text-indent-Attribut kann den Einzug der ersten Textzeile in einem Textblock (Element auf Blockebene) festlegen; es ermöglicht die Verwendung negativer Werte, wenn es sich jedoch um einen negativen Wert handelt verwendet wird, wird die erste Zeile nach links eingerückt.
Hinweis: Vor CSS 2.1 erbte text-indent immer einen berechneten Wert und nicht einen deklarierten Wert.
Lassen Sie uns das Texteinzugsattribut einführen. Sie können den Einzug der ersten Zeile über die folgenden Attributwerte festlegen:
Länge: Definieren Sie einen festen Einzug, der Standardwert ist 0.
%: Definiert den Einzug basierend auf dem Prozentsatz der Breite des übergeordneten Elements.
Sehen wir uns den Effekt anhand eines einfachen Codebeispiels an:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首行缩进</title>
<style>
.demo{
width: 500px;
height: 200px;
margin: 50px auto;
}
.p1{
text-indent:36px;
}
.p2{
text-indent:10%;
}
</style>
</head>
<body>
<div class="demo">
<p>demo盒子宽500px时：</p>
<p class="p1">这是一段测试代码，是关于css文本缩进的一段文字。这是一段测试代码，是关于css文本缩进的一段文字。这是一段测试代码，是关于css文本缩进的一段文字。这是一段测试代码，是关于css文本缩进的一段文字。这是一段测试代码，是关于css文本缩进的一段文字。这是一段测试代码，是关于css文本缩进的一段文字。<b>text-indent:36px;</b></p>
<p class="p2">这是一段测试代码，是关于css文本缩进的一段文字。这是一段测试代码，是关于css文本缩进的一段文字。这是一段测试代码，是关于css文本缩进的一段文字。这是一段测试代码，是关于css文本缩进的一段文字。这是一段测试代码，是关于css文本缩进的一段文字。这是一段测试代码，是关于css文本缩进的一段文字。<b>text-indent:10%;</b></p>
</div>
</body>
</html>Rendering:
Wenn wir das setzen Demobox Nachdem Sie die Breite auf 550 Pixel eingestellt haben, sehen Sie sich das Rendering an:
Der Einrückungseffekt des Absatztextes innerhalb des ersten p-Tags hat sich nicht geändert, wohl aber die Einrückung Der Effekt innerhalb des zweiten p-Tags hat sich nicht geändert. Die Einzugslänge des Absatztextes ist größer geworden. Es ist zu erkennen, dass sich der mit % festgelegte Einzug entsprechend der Größe des übergeordneten Elements ändert.
Sehen wir uns an, wie man CSS implementiert Erste Zeile um 2 Zeichen einrückenEffekt:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首行缩进</title>
<style>
.demo{
width: 550px;
height: 200px;
margin: 50px auto;
}
p{
text-indent:2em;/*em是相对单位，2em即现在一个字大小的两倍*/
}
}
</style>
</head>
<body>
<div class="demo">
<p>这是一段测试代码，是关于css文本缩进的一段文字。这是一段测试代码，是关于css文本缩进的一段文字。这是一段测试代码，是关于css文本缩进的一段文字。这是一段测试代码，是关于css文本缩进的一段文字。这是一段测试代码，是关于css文本缩进的一段文字。这是一段测试代码，是关于css文本缩进的一段文字。</p>
</div>
</body>
</html>Rendering:
Hier verwenden wir eine Längeneinheit em, also was ist em?
em ist eine relative Längeneinheit, die Schriftgröße relativ auf den Text im aktuellen Objekt. In unseren chinesischen Absätzen stehen normalerweise zwei chinesische Zeichen vor jedem Absatz. Tatsächlich ist die erste Zeile um 2em eingerückt.
Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter CSS-Video-Tutorial !
Verwandte Empfehlungen:
PHP-Video-Tutorial zur öffentlichen Wohlfahrtsschulung
Das obige ist der detaillierte Inhalt vonSo erzielen Sie den Einrückungseffekt der ersten Zeile in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!