beonlinebyhp.com

Kleinunternehmer mit einem Druckhintergrund kennen den Begriff "führend", der sich auf den Abstand zwischen Textzeilen bezieht. Beim Erstellen einer HTML-Seite ist das Äquivalent von Leading die CSS-Eigenschaft „line-height“, mit der der Abstand zwischen den einzelnen Zeilen festgelegt wird. Die Zeilenhöhe kann auf eine feste Höhe eingestellt werden, beispielsweise 12 Pixel, oder als Prozentsatz der Schriftgröße, beispielsweise 120 Prozent. Wenn Sie den Wert auf „normal“ setzen, wird der Zeilenabstand auf den Standardwert zurückgesetzt.

1

Öffnen Sie eine Webdesign-Anwendung oder einen Texteditor und erstellen Sie eine neue HTML-Seite oder öffnen Sie eine vorhandene.

2

Fügen Sie dem Hauptteil der Webseite den folgenden Code hinzu:

Lorem ipsum dolor sitzen amet, consectetur adipiscing elit. Mauris condimentum pulvinar pulvinar. Suspendisse eros nulla, sodales ut tincidunt sit amet, facilisis id dui. Donec pharetra euismod mattis. Cum sociis natoque penatibus und magnis dis parturient montes, nascetur lächerlichus mus.

3

Fügen Sie dem Abschnitt der Seite das folgende CSS-Stylesheet hinzu:

Diese CSS-Regel gilt für das div mit der ID "exampleText", bei der die Breite auf 400 Pixel und die Schriftgröße auf 14 Pixel festgelegt werden und der Textabschnitt über mehrere Zeilen angezeigt wird. Speichern Sie die Seite und öffnen Sie sie in einem Webbrowser, um das Ergebnis anzuzeigen.

4

Fügen Sie dem Stylesheet in der Seite die folgende neue CSS-Regel hinzu:

Zeilenhöhe: 200%; 

}

Diese Regel ändert den Zeilenabstand des Absatzes auf 200% der Schriftgröße, in diesem Fall 28 Pixel. Wenn sich die Schriftgröße ändert, ändert sich der Zeilenabstand automatisch proportional. Speichern Sie die Seite und laden Sie sie erneut in Ihrem Webbrowser, um die Auswirkungen der Zeilenabstandseigenschaft zu sehen.

5

Ändern Sie die Zeilenhöheneinstellung wie folgt auf 20 Pixel:

Zeilenhöhe: 20px; 

}

Dadurch wird ein konstanter Abstand von 20 Pixel zwischen Textzeilen festgelegt, unabhängig von der Schriftgröße des Texts. Speichern Sie die Seite und aktualisieren Sie sie in Ihrem Browser, um den neuen Zeilenabstand anzuzeigen.