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!
css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM在css中，可用list-style-type属性来去掉ul的圆点标记，语法为“ul{list-style-type:none}”；list-style-type属性可设置列表项标记的类型，当值为“none”可不定义标记，也可去除已有标记。
css与xml的区别是什么Apr 24, 2022 am 11:21 AM区别是：css是层叠样式表单，是将样式信息与网页内容分离的一种标记语言，主要用来设计网页的样式，还可以对网页各元素进行格式化；xml是可扩展标记语言，是一种数据存储语言，用于使用简单的标记描述数据，将文档分成许多部件并对这些部件加以标识。
css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM在css中，可以利用cursor属性实现鼠标隐藏效果，该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状，当属性值设置为none时，就可以实现鼠标隐藏效果，语法为“元素{cursor:none}”。
首行缩进2字符怎么设置 如何首行缩进两个字符Feb 22, 2024 pm 03:30 PM在文档开始的段落功能中进行设置即可。教程适用型号：联想AIO520C&&iPhone13系统：Windows10专业版&&iOS15.3版本：MicrosoftOfficeWord2021&&WPSOffice11.25.0解析1首先打开电脑中的word文档，选择要设置首行缩进2字符的内容后，点击顶部菜单栏中的开始。2然后在开始的菜单栏中，找到并点击段落。3在段落窗口中，将特殊格式设置为首行缩进，度量值设置为2字符即可。补充：wps手机版怎么首行缩进2字符1选择要设置的文字内容后，点击左下方的工
rtl在css是什么意思Apr 24, 2022 am 11:07 AM在css中，rtl是“right-to-left”的缩写，是从右往左的意思，指的是内联内容从右往左依次排布，是direction属性的一个属性值；该属性规定了文本的方向和书写方向，语法为“元素{direction:rtl}”。
css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM转换方法：1、给英文元素添加“text-transform: uppercase;”样式，可将所有的英文字母都变成大写；2、给英文元素添加“text-transform:capitalize;”样式，可将英文文本中每个单词的首字母变为大写。
css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM在css中，可以利用“font-style”属性设置i元素不是斜体样式，该属性用于指定文本的字体样式，当属性值设置为“normal”时，会显示元素的标准字体样式，语法为“i元素{font-style:normal}”。
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
SAP NetWeaver Server-Adapter für Eclipse
Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.
MinGW – Minimalistisches GNU für Windows
Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.
Dreamweaver CS6
Visuelle Webentwicklungstools
WebStorm-Mac-Version
Nützliche JavaScript-Entwicklungstools
