CSS Padding-Links-Eigentum

Wenn Sie jemals Student eines Webprogramms waren, müssen Sie die HTML- und CSS -Codes ausprobiert haben. HTML ist die Hypertext -Markup -Sprache, mit der die Webseiten statisch aussehen. Während CSS für Cascading Style Sheet steht, um der Webseite das ästhetische Erscheinungsbild zu verleihen. Mit der CSS -Formatierung können Sie der Webseite ein anderes Erscheinungsbild hinzufügen.e. Fügen Sie Datensätze hinzu, übertreffen Sie die linken oder rechten Eigenschaften, addieren Sie die Hintergrundfarbe, teilen Sie die Seite in Abschnitte und vieles mehr auf. In diesem Tutorial werden wir über die Verwendung der CSS-Padding-Links-Option im CSS-Style-Code diskutieren, i.e. Wahrscheinlich die Daten nach links verschieben.

Beispiel #01:

Beginnen wir mit dem ersten Beispiel für die Verwendung der Padding-Links-Eigenschaft innerhalb des CSS einer HTML-Datei. Zu diesem Zweck müssen Sie eine neue Notizblockdatei "Padding-Links" mit dem "erstellen".HTML ”Erweiterung am Ende. Diese Datei kann im Notepad oder in einem Sprachwerkzeug wie Visual Studio -Code verwendet werden, wie wir es im folgenden Bild getan haben. Wir starten diese HTML -Codedatei mit dem HTML -Standard -Tag "", gefolgt vom Kopf -Tag.

Das Kopf -Tag kann auch das Titel -Tag enthalten. Vorerst vermeiden wir die Verwendung des Titel -Tags. Innerhalb des Head -Tags verwenden wir das Style -Tag, um das CSS -Styling in der HTML -Datei zu verwenden. Das Body -Tag folgt den Kopf -Tags von der Überschrift 1 bis zum Kopf 6. In der Öffnung der Überschriften verwenden wir die Klasse „PG“ als Kennung für die Verwendung des Style -Tags. Innerhalb des Style -Tags verwenden wir das Klassenobjekt „PG“ für jeden Übergang zum Styling. Innerhalb der lockigen Klammern verwenden wir die Padding-Links-Eigenschaft von CSS und setzen sie auf 100 Pixel aus dem Line-Start auf 100 Pixel. Dies bedeutet, dass unsere Überschriften auf 100 Pixel weit entfernt von der Linie gestartet sind, anstatt am Start auf die Linie platziert zu werden. Der Stil und der Kopfetikett sind hier abgeschlossen.

Nachdem wir den vorherigen HTML -Code gespeichert haben, beginnen wir, ihn zu debuggen. Da enthält diese Datei die “.Die Erweiterung der HTML ”wird direkt im Standard -Browser geöffnet, den Sie im ersten Lauf ausgewählt haben. Die folgende Ausgabe wird auf der Browser -Seite angezeigt, die insgesamt 6 Überschriften enthält, die in der Entfernung von 100 Pixel von links am Start jeder Zeile platziert sind. Wenn wir die linke Polsterung aus dem Style -Tag entfernen, beginnen die Überschriften vom Beginn einer Linie.

Beispiel #02:

Kommen wir zum HTML -Code zurück und aktualisieren ihn ein wenig wie im Folgenden gezeigt. Wir fügen eine einzelne Überschrift "H1" in den Körper hinzu, die den "Div" -Tags folgen. Die "Div" -Tags werden verwendet, um die Seite in Abschnitte zu unterteilen. Das erste "Div" -Tag wird mit dem "id = div" und dem inneren "Div" -Tag in ihm instanziiert. Dieses „Div“ -Tag enthält einen einfachen Satz, der besagt, dass dieser Abschnitt „Div“ auf 500 Pixel von links platziert ist. Jetzt setzen wir im Style-Tag des "Kopf" -Tages die Hintergrund-Color-Eigenschaft „Pink“ für die Webseite und platzieren die Überschrift 1 in der Entfernung von 500 Pixel von ihrem Startpunkt mit der Option Polster-Links. Danach fügen wir die Höhe und die Hintergrundfarbe für den ersten Abschnitt „Div“ dieser ganzen Seite hinzu. Der von der Klasse „Greydiv“ verwendete innere Abschnitt „Div“ wird verwendet, um die Breite „900“ für diesen inneren Div-Abschnitt mit der auf „LightGrey“ eingestellten Hintergrundfarbe einzustellen, und die auf 500 Pixel festgelegte Padding-Links-Option.

Dies bedeutet, dass der Abschnitt „Text“ des inneren Divs auf 500 Pixel von der linken Seite platziert ist. Das CSS -Styling erfolgt hier und dieser Code ist bereit zu verwenden. Sparen wir diesen Code mithilfe der Strg+S und führen Sie diesen Code mit der Schaltfläche "Ausführen" in der Taskleiste des Visual Studio -Code aus. Der Code wird ausgeführt und der Browser wird geöffnet, um das Ergebnis für diesen HTML -Code anzuzeigen.

Die Chromseite zeigt die Ausgabe für diesen HTML -Code wie im folgenden Bild gezeigt. Es zeigt, dass die Farbe der Seite auf Pink gesetzt ist und der erste Abschnitt „Div“ nach der Überschrift 1 hinzugefügt wird, ich.e. weißer Farbabschnitt. Innerhalb des ersten Abschnitts „Div“ wird ein weiterer Abschnitt „Div“ generiert, i.e. graue Farbabschnitt. Es ist ersichtlich, dass die Überschrift 1 und die Daten innerhalb des Abschnitts der inneren Abteilung 500 Pixel von der linken Seite der Seite entfernt sind.

Beispiel #03:

Wir haben die Verwendung von „Pixel“ als Einheit gesehen, um den Wert für eine Option „Padding-links“ im HTML-Code festzulegen. Abgesehen von „PX“ können wir auch versuchen, den prozentualen Charakter „%“ für die Festlegung der Padding-Links-Option im CSS des HTML-Code zu verwenden. Somit haben wir eine Überschrift „H1“ mit dem Titel „Namen“ hinzugefügt und eine nicht ordnungsgemäße Liste von insgesamt 5 Elementen auf unserer Webseite erstellt, die das Tag „UL“ für "nicht ordnungsgemäße Liste" und das "li" -Tag zum Einfügen jedes Datensatzes In der Liste.

Die Klasse "Titel" ist für die Überschrift 1 angegeben und die Klasse "Werte" ist für die ungeordnete Liste definiert. Innerhalb des Tags „Style“ setzen wir den linken Polsterwert für H1 und die nicht ordnungsgemäße Liste auf 20% unter Verwendung der in den Tags definierten Klassennamen. Speichern Sie nun Ihren Code, um seine Ergebnisse zu sehen.

Nachdem dieser Code im Visual Studio -Code ausgeführt wird, wird der Chrome -Browser gestartet und die folgende Ausgabe wird angezeigt. Die "Namen", die zusammen mit der ungeordneten Liste von 5 Werten, die sie enthalten. Auf diese Weise kann die Option Polster-Links verwendet werden, um die Daten von links von jeder Seite hinzufügen.

In den vorherigen Beispielen haben wir das CSS -Style -Tag in derselben Datei jedoch im Kopf der Datei ausprobiert. Jetzt verwenden wir das CSS -Styling -Inline für den folgenden HTML -Code. Innerhalb des Head -Tags verwenden wir also nur das Tag "Titel", um den Titel für diese HTML -Datei hinzuzufügen.e. Linke Polsterung. Im Körper dieser Datei verwenden wir die gleiche H1 -Überschrift und die ungeordnete Liste. Wir stylen die Überschrift 1 und die ungeordnete Liste inline, indem wir die Werte für die Option Padding-Links auf 12% festlegen. Wir setzen den Rand auch mit der Farbe, blaues Violett auf die Überschrift 1. Sparen wir den Code und führen Sie ihn mit der Schaltfläche "Ausführen" des VS -Codes aus.

Es gibt den Rand an die Überschrift 1 - "Namen". Außerdem werden die Überschrift und die ungeordnete Liste 12% von links von der Seite entfernt angezeigt.

Abschluss

Der einführende Absatz dieses Artikels erläutert die Verwendung von CSS in HTML und zeigt ihnen die Möglichkeit, die Option Polster-Links zu verwenden. Wir haben die einfachen, aber eleganten Codes des HTML im Visual Studio-Code besprochen, um die Verwendung der Option Padding-Links anzuzeigen. Wir haben diese Option auch mit den Zeichen „PX“ und „%“ im Stilabschnitt getrennt ausprobiert, um zu sehen, wie sich der Ausgang ändert. Dafür haben wir versucht, das CSS -Styling inline und das CSS -Styling für die HTML -Codes zu verwenden.