Gut Web-Design geht es oft um gute Typografie. Da ein Großteil des Inhalts einer Webseite als Text präsentiert wird, ist es für Webdesigner wichtig, diesen Text attraktiv und effektiv zu gestalten. Leider haben wir online nicht das gleiche Maß an typografischer Kontrolle wie im Druck. Das bedeutet, dass wir Text auf einer Website nicht immer zuverlässig so gestalten können, wie wir es in einem gedruckten Stück tun könnten.
Ein gängiger Absatzstil, den Sie häufig in gedruckter Form sehen (und den wir online nachbilden können), ist dort, wo die erste Zeile dieses Absatzes eingerückt ist Tab-Leerzeichen. Auf diese Weise können die Leser sehen, wo ein Absatz beginnt und ein anderer endet.
Dieser visuelle Stil ist auf Webseiten nicht so häufig zu sehen, da Browser standardmäßig Absätze mit Leerzeichen anzeigen darunter, um zu zeigen, wo eine Seite endet und eine andere beginnt, aber wenn Sie eine Seite so gestalten möchten, dass sie das hat Print-inspiriert Einzugsstil auf Absätzen können Sie dies mit dem Texteinzug Stileigentum.
Die Syntax für diese Eigenschaft ist einfach. So fügen Sie allen Absätzen in einem Dokument einen Texteinzug hinzu.
p {
Texteinzug: 2em;
}
Anpassen der Einzüge
Eine Möglichkeit, die einzurückenden Absätze genau anzugeben, besteht darin, den Absätzen, die Sie einrücken möchten, eine Klasse hinzuzufügen. Dazu müssen Sie jedoch jeden Absatz bearbeiten, um ihm eine Klasse hinzuzufügen. Das ist ineffizient und folgt nicht HTML-Codierung empfohlene Vorgehensweise.
Stattdessen sollten Sie überlegen, wann Sie Absätze einrücken. Sie rücken Absätze ein, die direkt auf einen anderen Absatz folgen. Dazu können Sie den nebenstehenden Geschwisterselektor verwenden. Mit diesem Selektor wählen Sie jeden Absatz aus, dem unmittelbar ein anderer Absatz vorausgeht.
p + p {
Texteinzug: 2em;
}
Da Sie die erste Zeile einrücken, sollten Sie auch sicherstellen, dass zwischen Ihren Absätzen kein zusätzlicher Leerraum vorhanden ist (was die Standardeinstellung des Browsers ist). Stilistisch sollten Sie entweder Abstand zwischen den Absätzen haben oder die erste Zeile einrücken, aber nicht beide.
p {
Rand-unten: 0;
Polsterung-unten: 0;
}
p + p {
Rand-Oberseite: 0;
Polster-Oberseite: 0;
}
Negative Einzüge
Sie können auch die Texteinzug -Eigenschaft, zusammen mit einem negativen Wert, um zu bewirken, dass der Beginn einer Zeile nach links und nicht nach rechts verläuft, wie bei einem normalen Einzug. Dies können Sie tun, wenn eine Zeile mit einem Anführungszeichen beginnt, sodass das Anführungszeichen im leichter Rand links vom Absatz und die Buchstaben selbst bilden noch eine schöne linke Seite Ausrichtung.
Angenommen, Sie haben einen Absatz, der ein Nachkomme eines Blockquotes ist, und Sie möchten, dass er negativ eingerückt wird. Sie könnten dieses CSS schreiben:
Blockzitate p {
Texteinzug: -.5em;
}
Dies würde dazu führen, dass der Anfang des Absatzes, der vermutlich das öffnende Anführungszeichen enthält, leicht nach links verschoben wird, um hängende Satzzeichen zu erzeugen.
In Bezug auf Ränder und Auffüllung
Im Webdesign verwenden Sie oft Margin- oder Padding-Werte um Elemente zu verschieben und Leerräume zu schaffen. Diese Eigenschaften funktionieren jedoch nicht, um den eingerückten Absatzeffekt zu erzielen. Wenn Sie einen dieser Werte auf den Absatz anwenden, wird der gesamte Text dieses Absatzes, einschließlich jeder Zeile, statt nur der ersten Zeile mit einem Abstand versehen.