Wie stelle ich den Einzug der zweiten Zeile eines Absatzes mit CSS ein?-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

Wie stelle ich den Einzug der zweiten Zeile eines Absatzes mit CSS ein?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 26, 2023 pm 09:53 PM

Wie stelle ich den Einzug der zweiten Zeile eines Absatzes mit CSS ein?

HTML wird verwendet, um die Struktur von Webseiten zu erstellen. Darüber hinaus wird CSS verwendet, um das visuelle Erscheinungsbild dieser Seiten zu gestalten. In CSS ist die Einrückung einer der wichtigen Aspekte der Textformatierung auf einer Webseite. Es ermöglicht Entwicklern, visuelle Effekte am Anfang von Absätzen zu erstellen. Einrückungen können dazu verwendet werden, Text leichter lesbar zu machen und einem Dokument Struktur zu verleihen.

Einrückung in CSS

CSS ist ein leistungsstarkes Tool, mit dem Entwickler die visuelle Darstellung von HTML-Elementen auf einer Webseite steuern können. Wir können Text mit CSS formatieren und seine Schriftart, Größe, Farbe und sogar Einrückung ändern.

In CSS wird Einrückung verwendet, um eine visuelle Trennung zwischen Elementen zu schaffen. Es schafft eine visuelle Trennung zwischen Elementen, indem es auf der linken oder rechten Seite der Elemente Platz oder Polsterung hinzufügt.

Grammatik

css selector {
   text-indent: value;
}

Verwenden Sie die Text-Indent-Eigenschaft, um die erste Zeile einzurücken

CSS ermöglicht Entwicklern, die erste Zeile eines Absatzes mithilfe der text-indent-Eigenschaft einzurücken. Diese Eigenschaft wurde auf 0 gesetzt, was bedeutet, dass diese Eigenschaft keine Einrückung aufweist. Wenn wir beispielsweise alle Absätze auf einer Webseite um 25 Pixel einrücken möchten, könnten wir den folgenden Code verwenden –

p {
   text-indent: 25px;
}

Beispiel 1

Hier ist ein Beispiel für das Festlegen eines 25-Pixel-Einzugs für alle Absätze auf einer Webseite.

<!DOCTYPE html>
<html>
<head>
   <style>
      h2 {
         text-align: center;
      }
      p {
         text-indent: 35px;
      }
   </style>
</head>
<body>
   <h2 id="This-is-an-example-of-a-text-indent-property">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>

Wie rückt man die zweite Zeile eines Absatzes ein?

Das Attribut „text-indent“ wird verwendet, um die erste Zeile eines Absatzes einzurücken. Um die zweite Zeile eines Absatzes einzurücken, müssen wir zunächst den Einzug der ersten Zeile entfernen. Dazu können wir die erste Zeile mit einem negativen Wert von „text-indent“ nach links verschieben und danach die zweite Zeile mit einem positiven Wert von „padding-left“ nach rechts verschieben. Zum Beispiel -

p {
   text-indent: -20px;
   padding-left: 20px;
}

Im obigen Code rücken wir die erste Zeile des Absatzes um -20 Pixel ein, wodurch er um -20 Pixel nach links verschoben wird, und die zweite Zeile um 20 Pixel, wodurch er wieder nach rechts verschoben wird.

Sehen wir uns einige Beispiele für das Einrücken der zweiten Zeile eines Absatzes mithilfe von CSS an.

Beispiel 2

Dies ist ein Beispiel für das Festlegen des Einzugs der zweiten Zeile eines Absatzes mithilfe von CSS-Elementen

<!DOCTYPE html>
<html>
<head>
   <style>
      h2 {
         text-align: center;
      }
      p {
         text-indent: -30px;
         padding-left: 30px;
      }
   </style>
</head>
<body>
   <h2 id="Indent-Second-Line-of-Paragraph">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>

Beispiel 3

Hier ist ein Beispiel für die Verwendung von CSS-Klassenselektoren zum Festlegen des Einzugs der zweiten Zeile eines Absatzes.

<!DOCTYPE html>
<html>
<head>
   <style>
      h2 {
         text-align: center;
      }
      .indent-p {
         text-indent: -4em;
         padding-left: 4em;
      }
   </style>
</head>
<body>
   <h2 id="Indent-Second-Line-of-Paragraph-using-CSS-class-selector">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>

Fazit

Hier besprechen wir den Einzug der zweiten Zeile eines Absatzes. Dies ist eine einfache Möglichkeit, die Lesbarkeit und das Erscheinungsbild Ihrer Webseiten zu verbessern. Durch die Verwendung des Attributs „text-indent“ können wir einen einzigartigen und optisch ansprechenden Look schaffen, der den Inhalt hervorhebt.

Das obige ist der detaillierte Inhalt vonWie stelle ich den Einzug der zweiten Zeile eines Absatzes mit CSS ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme

Dieser Artikel ist reproduziert unter:tutorialspoint. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Verwandter Artikel

Eine kleine Erinnerung daran, dass Pseudoelemente Kinder sind.Apr 19, 2025 am 11:39 AM

Hier ist ein Container mit einigen Kinderelementen:

Menüs mit 'dynamischen Trefferbereichen'Apr 19, 2025 am 11:37 AM

Flyout -Menüs! Das zweite, das Sie für ein Menü implementieren müssen, das ein Hover -Ereignis verwendet, um mehr Menüelemente anzuzeigen. Zum einen sollten sie

Verbesserung der Video -Zugänglichkeit mit WebVTTApr 19, 2025 am 11:27 AM

"Die Kraft des Web liegt in seiner Universalität. Zugang von allen unabhängig von Behinderung ist ein wesentlicher Aspekt."- Tim Berners-Lee

Wöchentliche Plattform News: CSS :: Marker Pseudo-Element, Vorrendern von Webkomponenten, Hinzufügen von Webmenting zu Ihrer WebsiteApr 19, 2025 am 11:25 AM

In der Roundup:#039: DatePickers geben Tastaturbenutzer Kopfschmerzen, einen neuen Webkomponenten -Compiler, der bei der Bekämpfung von Fouc hilft.

Breite und flexible Gegenstände gut zusammen spielenApr 19, 2025 am 11:23 AM

Die kurze Antwort: Flex-Shrink und Flex-Basis sind wahrscheinlich das, worauf Sie suchen.

Positionieren Sie klebrige und TischkopfzeileApr 19, 2025 am 11:21 AM

Sie können nicht positioniert werden: klebrig; A

Wöchentliche Plattformnachrichten: HTML -Inspektion in der Suchkonsole, globaler Umfang von Skripten, Babel Env fügt Standardabfrage hinzuApr 19, 2025 am 11:18 AM

In der Welt der Web -Plattform -Nachrichten, in der die Google Search Console in der Welt der Web -Plattform -News -Such -Markup umgeht, lernen wir, dass benutzerdefinierte Eigenschaften einfacher werden können