CSS -Polsterung

„Haben Sie jemals von dem Padding -Konzept gehört, während Sie HTML -Programmierung in Ihrem Studium studiert haben? Wenn nicht, dann sind Sie am richtigen Ort. HTML bezieht. Es kam mit dem CSS -Styling, das als „Cascading Style Sheet“ erwähnt wurde.Das CSS verleiht der Website ein ansprechendes visuelles Erscheinungsbild. Das CSS -Styling kann verwendet werden, um einer Website ein neues Erscheinungsbild und ein neues Gefühl zu bieten, z. Eines der Funktionen von CSS ist die „Polsterung“, mit der Platz zwischen dem Elementinhalt und seinem Rand hinzugefügt wird. Der heutige Artikel wird über die Verwendung der CSS-Padding-Funktion im CSS-Style-Skript behandelt, während eine statische HTML-Seite erstellt wird. Beginnen wir also mit einigen der einfachen Beispiele von HTML.”

Beispiel # 01

Nehmen wir unser erstes Beispiel für HTML, um eine statische Seite mit einigen Überschriften zu erstellen und sie mit Hilfe eines CSS -Stylings im Visual Studio -Code zu stylen. Wir haben also eine neue Notepad-Datei mit dem Namen "Padding-Top" mit der HTML-Erweiterung am Ende erstellt. Wir haben dieses "HTML" -Dokument mit dem Tag "HTML" gestartet. Das Head -Tag dieses Dokuments enthält das Tag "Titel" zusammen mit seinem Titel "Top Polster", wie angezeigt. Wir werden am Ende das Tag "Stil" diskutieren. Das Body -Tag wird mit 4 Überschriften -Tags gestartet.

Alle diese Überschriften werden 1 sein^st Überschriften, ich.e., die größte Größe der Größe nach HTML. Alle Überschriften enthalten unterschiedliche Überschriftentitel, die darin angegeben sind. Wir haben drei verschiedene Klassen für die letzten drei Überschriften angegeben, ich.e., p1, p2 und p3. Diese Klassen werden im Style -Tag verwendet, um das Styling für jede Überschrift separat anzugeben. Der Körper- und HTML -Tag wurde hier nach der Verwendung von Überschriften beendet. Innerhalb des Style -Tags über dem Tag „Body“ haben wir das Styling für jede Überschriftsklasse separat in drei Zeilen definiert, ich.e., p1, p2, p3.

Wir haben die Randoption verwendet, um für jede Überschrift einen 2-Pixel-festen blauen Rand festzulegen, ich.e., PX steht für Pixel. Wir haben hier die Padding-Top-Funktion für alle drei Überschriften mit P1, P2 und P3 getrennt festgelegt. Die erste Überschrift enthält die 100-Pixel-Polsterung von oben. Der Stil und das Kopf -Tag werden hier abgeschlossen und wir werden diesen Code speichern, um ihn mit der Schaltfläche "Ausführen" auszuführen. Es wird im Browser geöffnet, um sein Ergebnis zu sehen.

Auf dem Browserbildschirm wurde die folgende Seite mit dem Titel „Top Polstering“ geöffnet. Die erste Überschrift wurde ohne Rand und Polsterung angezeigt, ich.e., Normale Überschrift. Während der 2^nd, 3. und 4^th Überschriften enthalten den blauen Rand um sie herum. Die 2^nd Die Überschrift hat 100 Pixel -Top -Polster von seiner Grenze, die 3^Rd Die Überschrift enthält die 50-Pixel-Polsterung aus der Grenze und die 4^th Die Überschrift enthält 10-Pixel-Polsterung von seinem blauen Rand. Sie können die Varianz verstehen, indem Sie die unterschiedlichen Werte für die Padding-Top über die „Pixel verwenden.”

Beispiel # 02

Lassen Sie uns ein anderes ähnliches Beispiel haben, um Polsterung oben in jedem HTML -Aspekt hinzuzufügen. Daher werden wir diesmal die prozentuale Option anstelle von Pixel verwenden. Diese Datei wurde mit dem HTML -Tag gefolgt vom Kopf- und Titel -Tag gestartet. In dieser Datei wurde dieselbe Beschriftung angegeben. Wir haben nur drei Überschriften innerhalb des Body -Tags dieser HTML -Datei verwendet. Alle drei Überschriften enthalten die gleichen drei Klassen P1, P2 und P3, um sie im Styling zu verwenden.

Innerhalb des Style -Tags haben wir die P1-, P2- und P3 -Klassen für jeden Übergang verwendet, um sie separat zu stylen. Für alle drei Überschriften haben wir das gleiche 2-Pixel-Solid Blue Border-Eigenschaft verwendet. Danach haben wir die Padding-Top-Eigenschaft verwendet, um unterschiedliche Werte für die Polsterung von Überschriften von ihren Grenzen festzulegen. Die erste Überschrift enthält 20 Prozent Top -Polsterung an seiner Grenze. Die zweite wird 15 Prozent von der Oberseite seiner Grenze gepolstert, und die letzte Überschrift wird 5 Prozent von seiner Grenze von der Oberseite von der Oberseite entfernt sein. Sparen wir dieses Programm und führen Sie es aus, um die Ergebnisse zu sehen.

Nachdem Sie diesen HTML-Code ausgeführt haben, um die Padding-Top-Eigenschaft mit dem prozentualen numerischen Wert zu veranschaulichen. Diese Seite enthält insgesamt 3 Überschriften mit blauen festen Grenzen um sie herum. Der erste Übergangsinhalt ist 20 Prozent von seiner Grenze entfernt, ich.e., 20 Prozent Top -Polsterung. Die zweite Überschrift ist 15 Prozent von der Grenze entfernt, die sie enthält, ich.e., 15 Prozent Top -Polsterung. Die letzte Überschrift enthält 5 Prozent Top -Polsterung von seinem blauen festen Rand, wie im Bild unten gezeigt. Es gibt einen deutlichen Unterschied zwischen den Ausgangsüberschriften unter Verwendung der verschiedenen Werte für die Top -Polsterung.

Die Einheit „EM“ kann auch zum Einsetzen der Polsterung verwendet werden. Die „EM“ -Einheit kann verwendet werden, um das Element 2 -fache der Größe des Elementinhalts zu verleihen. Nehmen wir an, wir haben die gleichen drei Überschriften im Körper der HTML.

Die Ausgabe für die Verwendung der „EM“ -Einheit zum Hinzufügen von Top -Polster wurde unten gezeigt. Die 5EM, 3EM und 1EM sind relativ größere Werte als die Einheiten „PX“ und „%“.

Beispiel # 03

Lassen Sie uns das letzte Beispiel haben, um die Verwendung der Padding-Top-Eigenschaft in CSS- oder HTML-Dateien zu demonstrieren. Wir werden also einen Vergleich zwischen der Polstertope und anderen verwandten Polstereigenschaften wie rechts, links und unten durchführen. Wir haben die Überschriften „H1“ mit etwas anderem Überschriftentitel verwendet, wie im Body -Tag dieser HTML -Datei gezeigt. Innerhalb des Style -Tags haben wir die P1-, P2- und P3 -Klassen für jeden Übergang definiert, um den Rand- und Polsterwert festzulegen. Wir haben den gleichen 1-Pixel-festen blauen Rand für alle drei Überschriften verwendet.

Danach haben wir für jede Überschrift die linken, rechten, oberen und unteren Werte getrennt getrennt verwendet. Erstens wird die Überschrift 10% Polster für alle Seiten verwenden, während die zweite Überschrift 10 Prozent Polster von allen Seiten enthält. Die letzte Überschrift enthält 2EM -Polster für alle Seiten.

Die Ausgabe für den HTML -Code zeigt die Polsterung für jede Überschrift von oben, unten, links und rechts am Rand.

Abschluss

In der Einführung dieses Artikels geht es um die Verwendung des CSS -Stylings und die Verwendung der Eigenschaft „Polsterung“ innerhalb der HTML -Datei. Wir haben die Beispiele gezeigt, die die Verwendung der Padding-Top-Eigenschaft von CSS enthalten, um die Polsterung von der Oberseite eines Elements von seiner Grenze hinzuzufügen. Dafür haben wir die „PX“ für Pixel, "%" für Prozent und die „EM“ für die Multiplikation einer Elementgröße mit dem spezifischen Wert zum Hinzufügen von Polsterung ausprobiert. Die hier dargestellten Beispiele sind recht einfach und einfach zu bedienen. Daher kann sich jeder Anfänger jederzeit an diese Beispiele anpassen.