Wie erstelle ich ein Padding in CSS?
Mit CSS-Auffüllung kann ein HTML-Codierer die Standardauffüllung oder den Totraum außerhalb eines HTML-Elements festlegen. Dies hat den Vorteil, dass der Codierer diesen Auffüllcode nicht für jede Instanz dieses Elements wiederholen muss, und dass die Konsistenz auf der Seite einfacher hergestellt werden kann. Das HTML-Element, das aufgefüllt werden soll, kann eine beliebige Anzahl von Dingen sein, z. B. ein Absatz, eine Tabelle oder eine Überschrift.
Um ein Auffüllen in CSS zu erstellen, müssen Sie zuerst das HTML-Element identifizieren, das Sie auffüllen möchten. Dieses Element, das Sie auffüllen möchten, wird als Selektor bezeichnet. Anschließend müssen Sie die entsprechenden Auffüllwerte angeben. Es gibt fünf verschiedene Arten von Auffülleigenschaften in CSS - eine für alle vier Seiten eines Elements gleichzeitig und vier weitere für jede einzelne Seite des Elements (z. B. die linke Seite, die rechte Seite, die obere Seite oder die untere Seite) ). Eine Eigenschaft, mit der der Programmierer Werte für alle vier Seiten eines HTML-Elements gleichzeitig angeben kann, wird als Shorthand-Eigenschaft bezeichnet .
Die für die Angabe einer Deklaration des CSS-Auffüllens verwendete Codiersprache ist einfach das Wort "Auffüllen". Auf dieses Etikett folgen die relevanten "Werte" des Auffüllens oder Informationen über den gewünschten Speicherplatz, der normalerweise entweder durch Pixel oder a dargestellt wird Prozentsatz. Das Auffüllen und die Werte werden in geschweiften Klammern oder geschweiften Klammern (dh "{" und "}") geschrieben. Davor steht das HTML-Element, das aufgefüllt werden soll (z. B. "p" für den Absatz oder "H2" für Überschriften der Ebene 2).
In Bezug auf die Darstellung des Werts können Werte in Pixeln (z. B. 1 Pixel oder 5 Pixel), Punkten (z. B. 1 Pixel oder 5 Pixel) oder Zoll (z. B. 1 Zoll oder 5 Zoll) oder Zentimetern (z. B. 1 cm oder 5 cm) dargestellt werden. . Werte können auch als Prozentsatz des gestalteten HTML-Elements angegeben werden. Wenn der Wert beispielsweise 50% beträgt, entspricht der Abstand der Hälfte der Größe des Elements.
Bei den folgenden Beispielen handelt es sich um den HTML-Code zum Auffüllen eines HTML-Elements anhand von Werten, die sich in Prozent bzw. Länge widerspiegeln. Wenn nur ein Wert zugewiesen wird, weisen Webbrowser diese Auffüllung allen vier Seiten des HTML-Elements zu.
Polsterung: 10%;
Polsterung: 100px;
Wenn Sie der oben genannten Art der Auffülldeklaration weitere Werte hinzufügen, interpretieren Webbrowser diese auf eine bestimmte Weise. Wenn zwei Werte zugewiesen sind, entspricht der erste dem oberen und unteren Wert, während der zweite dem linken und rechten Wert entspricht. Bei drei Werten bezieht sich der erste auf den oberen, der zweite auf den linken und rechten Rand und der dritte auf den unteren Rand des HTML-Elements. Wenn Sie maximal vier Werte zuweisen, entsprechen der erste, zweite, dritte und vierte Wert in dieser Reihenfolge dem oberen, rechten, unteren und linken Rand des HTML-Elements. Wenn mehr als ein Wert angegeben wird, sollten diese durch Leerzeichen getrennt und mit einem Semikolon abgeschlossen werden. Beispiel:
Auffüllen: 10px 20px 10px 20px;
Das Auffüllen von CSS kann auch einseitig erfolgen. In dieser Hinsicht stehen vier weitere Polstereigenschaften zur Verfügung. Dies sind Polsterung oben, Polsterung rechts, Polsterung unten und Polsterung links. Um das Auffüllen in CSS genauer zu gestalten, müssen Sie die Eigenschaften mit der gleichen Syntax wie die oben angegebenen Kurzschriftdeklarationen kennzeichnen. Jede dieser Auffülleigenschaften nimmt nur einen Wert in Länge oder Prozent an. Zum Beispiel:
Auffüllenoberteil: 10px;
rechts auffüllen: 20px;
Polsterboden: 10px;
links auffüllen: 20px;
Der folgende Code erstellt eine Webseite, deklariert die Auffülleigenschaften zwischen Stil-Tags und verwendet sie dann in einem durch das p-Tag angegebenen Absatzelement. Der Text zwischen / * und * / ist ein Vermerk zur Erläuterung der verwendeten Auffüllart und wird nicht in den CSS-Auffüllcode aufgenommen.
<html>
<head>
<style type = "text / css">
p.example1 {padding: 10px;} / * Kurzhandpolsterung für alle vier Seiten * /
p.example2 {padding: 50px 30px;} / * Kurzes Auffüllen von oben und unten, gefolgt von links und rechts * /
p.example3 {
Auffüllenoberteil: 10px;
Polsterboden: 20px;
Polsterboden: 10px;
links auffüllen: 20px;
} / * individuelle Polsterung. * /
</ style>
</ head>
<body>
<p class = "example1"> Dieser Text hat auf jeder Seite die gleiche Polsterung. Die Polsterung auf jeder Seite beträgt 10px. </ P>
<p class = "example2"> Dieser Text hat einen oberen und unteren Abstand von 50 Pixel und einen linken und rechten Abstand von 30 Pixel. </ p>
<p class = ”example3”> Dieser Text hat einen oberen Abstand von 10 Pixel, einen rechten Abstand von 20 Pixel, einen unteren Abstand von 10 Pixel und einen linken Abstand von 20 Pixel. </ p>
</ body>
</ html>
Im obigen Beispiel sind „example1“ usw. Namen, die einer Klasse zugewiesen wurden und auf die in den Absätzen verwiesen wird. Der Punkt zwischen dem p-Tag und den Klassennamen am Anfang des Codes kennzeichnet eine Deklaration einer Klasse, die einem Absatz zugeordnet ist. Beachten Sie die geschweiften Klammern nach der Klassendeklaration, die die Zuweisungen der Auffülleigenschaften enthalten.
Dies scheint zwar viel Arbeit zu sein, ist jedoch weitaus weniger arbeitsintensiv als das Festlegen von Auffüllungen für jeden einzelnen Absatz. Sie können eine Auffülleigenschaft für das gewünschte Element deklarieren, im obigen Beispiel das p-Tag, und dann auf die Klasse verweisen, wenn Sie das Element zwischen den body-Tags der Seite verwenden. Wenn für alle Absätze nur eine Art von Auffüllung erforderlich ist, müssen Sie überhaupt keine Klassen verwenden. Verwenden Sie einfach den folgenden Code zwischen den Style-Tags und codieren Sie dann die Absätze, ohne eine Klasse anzugeben. Dieser Code würde zwischen den Body-Tags anstelle des Codes im obigen Beispiel stehen.
p {Auffüllung: 10px 20px 10px 20px;}
Dieses CSS-Padding würde sich auf alle Absätze auswirken, obwohl keine Klasse angegeben wurde.