Überblick über das HTML-Stilattribut
HTML-Code benötigt das style-Attribut, damit Webseiten in Webbrowsern wie Chrome, FireFox und IE so dargestellt werden, wie sie aussehen sollen. HTML-Tags können eine Vielzahl von Informationen enthalten. Das Attribut style steuert die Darstellung von Informationen in HTML-Blöcken mithilfe des Inline-Stils.
In diesem Artikel erfahren Sie mehr über das HTML-Stilattribut, bei dem es sich lediglich um eine Reihe von Regeln handelt, die definieren, wie eine Seite im Webbrowser gerendert wird.
Liste der HTML-Stilattribute
Hier ist eine Liste aller Stileigenschaften, mit denen das Design von HTML-Elementen beeinflusst und gesteuert werden kann, zusammen mit einem praktischen Beispiel:
1. Hintergrundfarbe
Mit dieser CSS-Eigenschaft können wir die Hintergrundfarbe für jedes HTML-Element festlegen, z.
etc.
Beispiel
My background is blue
Ausgabe:
2. Farbe
Die Schriftfarbe des Texts in einem HTML-Element kann gesteuert werden, indem dessen Farbattribut auf den richtigen Farbnamen oder den richtigen HEX- oder RGB-Code festgelegt wird.
Beispiel
My font color is blue
Ausgabe:
3. Rahmenfarbe
Wir können die Rahmenfarbe jedes HTML-Elements festlegen, wenn wir ihm einen Rahmen hinzufügen möchten.
Beispiel
Mein Rand ist rot
Ausgabe:
Wie Sie im obigen Code sehen, akzeptiert die border-Eigenschaft 3 Eigenschaften in der folgenden Reihenfolge: "Rahmenbreite Rahmenstil Rahmenfarbe".
4. Hintergrundbild
Wir können ein Bild auch als Hintergrund festlegen, indem Sie die Eigenschaft background-image wie folgt verwenden:
Beispiel:
Ausgabe:
5. Hintergrund wiederholen
Wie Sie im obigen Beispiel sehen, wird ein Bild mit der Eigenschaft background-image als Hintergrund festgelegt. Standardmäßig wird das Bild sowohl horizontal als auch vertikal wiederholt. Einige Bilder müssen jedoch möglicherweise vertikal oder horizontal wiederholt werden, oder sie müssen möglicherweise nicht wiederholt werden. Dieses Verhalten kann gesteuert werden, indem der gewünschte Wert für die Eigenschaft "Hintergrundwiederholung" festgelegt wird. Es kann nur verwendet werden, wenn ein Hintergrundbild verwendet wird. Wenn es als eigenständige Eigenschaft verwendet wird, wird kein Stilwert hinzugefügt.
Mit dem Wert "repeat-x" kann das Bild nur horizontal wiederholt werden.
Mit dem Wert "repeat-y" kann das Bild nur vertikal wiederholt werden.
Der Wert "no-repeat" wird verwendet, um eine Wiederholung des Hintergrundbildes zu stoppen.
Ändern wir das obige Beispiel, um das Hintergrundbild zu verbessern.
Beispiel
Ausgabe:
Wir können die obigen Beispiele vergleichen und verstehen, dass wir mit dem Hintergrundbild ein Bild als Hintergrund hinzufügen und mit der Hintergrundwiederholung die Wiederholung des Hintergrundbildes steuern können.
6. Hintergrund-Position
Mit dieser Eigenschaft können wir die Position des Hintergrundbildes definieren.
Beispiel
Ausgabe:
7. Ränder
CSS stellt uns Eigenschaften zur Verfügung, mit denen wir Ränder an allen vier Seiten eines HTML-Elements festlegen oder einer bestimmten Seite des Elements Ränder hinzufügen können.
Mit margin-top kann ein Rand am oberen Rand des Elements hinzugefügt werden, margin-right fügt einen Rand am rechten Rand des Elements hinzu, margin-left fügt einen Rand am linken Rand des Elements hinzu und margin-bottom fügt einen Rand hinzu an den unteren Rand des Elements. Anstatt diese 4 Eigenschaften zu verwenden, können wir auch die margin-Eigenschaft verwenden und ihre Werte gemäß unserer Anforderung festlegen.
Beispiel
p (
margin-top: 25px;
margin-bottom: 75px;
margin-right: 50px;
margin-left: 100px;
)
or
p
(
margin: 25px 50px 75px 100px;
)
8. Polsterung
Die Auffülleigenschaft definiert den Abstand zwischen dem Inhalt eines Elements und seinen Rändern. Wir können die Eigenschaft "padding" oder einzelne Auffülleigenschaften wie "padding-top", "padding-bottom", "padding-left", "padding-right" verwenden, um die Auffüllung für "top", "bottom", "left" oder "right" des Inhalts eines Elements festzulegen.
p (
padding-top: 25px;
padding -bottom: 75px;
padding -right: 50px;
padding -left: 100px;
)
or
p
(
padding: 25px 50px 75px 100px;
)
9. Höhe und Breite
Höhe und Breite sind die grundlegendsten CSS-Eigenschaften, die zum Definieren der Höhe und Breite eines HTML-Elements verwendet werden. Sie können entweder auf einen Pixelwert wie 200px oder einen Prozentsatz wie 10%, 20% usw. eingestellt werden.
10. Text-Align
Diese Eigenschaft wird verwendet, um die horizontale Richtung festzulegen, in der der Text eines Elements ausgerichtet werden soll. Der Wert kann auf Mitte, rechts oder links eingestellt werden.
p (
text-align: center;
)
or
p (
text-align: left;
)
or
p (
text-align: right;
)
11. Text-Dekoration
Die Textdekorationseigenschaft kann verwendet werden, um Dekorationen wie Unterstreichen, Durchstreichen oder Überschreiben von Text in HTML festzulegen.
Beispiel:
Dies ist unterstrichen
Ausgabe:
12. Buchstabenabstand
Wie der Name schon sagt, wird diese Eigenschaft verwendet, um den Abstand zwischen Buchstaben / Zeichen in einem Wort zu definieren. Es kann ein positiver oder negativer Pixelwert zugewiesen werden, um den Abstand zwischen den Buchstaben zu vergrößern oder zu verkleinern.
Beispiel:
Meine Worte überschneiden sich
Ausgabe:
13. Zeilenhöhe
Linienhöhe definiert den Abstand zwischen vertikalen Linien. Ebenso wie der Buchstabenabstand kann auch die Zeilenhöhe auf einen positiven oder negativen Pixelwert eingestellt werden. Sehen wir uns das folgende Beispiel an, um es besser zu verstehen:
Beispiel:
Dieser Absatz hat eine geringe Zeilenhöhe.
Dieser Absatz hat eine geringe Zeilenhöhe.
Ausgabe:
14. Textrichtung
Manchmal, wenn der Inhalt der Webseite nicht in Englisch ist, sondern in einer anderen Sprache wie Arabisch, die einer Rechts-nach-Links-Konvention folgt, müssten wir die Textrichtung ändern. In solchen Fällen können wir die Textrichtung umkehren.
Beispiel:
Ich bin von rechts nach links
Ausgabe:
15. Text Shadow
Diese Eigenschaft fügt dem Text einen Schatten hinzu.
Beispiel:
Ich habe einen grauen Schatten
Ausgabe:
16. Schriftfamilie
Wir können die Schriftartklasse für Text in einem Element definieren. Wir können mehrere durch Komma getrennte Schriftfamilien als Fallback-System definieren, um Szenarien zu behandeln, in denen eine bevorzugte Schriftklasse nicht geladen werden kann.
- Schriftstil: Mit der Schriftstileigenschaft können wir dem Text einen kursiven oder schrägen Effekt hinzufügen.
Beispiel:
Dies ist ein schiefer Stil.
Ausgabe:
- Schriftstärke: Diese Eigenschaft definiert die Stärke einer Schrift.
Beispiel:
Dies ist ein fetter Absatz
Ausgabe :
Die Styling-Attribute, die über unseren Bausteinen mit UI- und UX-Design dargestellt werden. Sie entwickeln sich weiter, wenn neue Versionen von CSS eingeführt werden.
Empfohlene Artikel
Dies ist eine Anleitung zum HTML-Stilattribut. Hier diskutieren wir die Liste aller Stileigenschaften, mit denen das Design von HTML-Elementen anhand praktischer Beispiele beeinflusst und gesteuert werden kann. Sie können sich auch die folgenden Artikel ansehen, um mehr zu erfahren -
- HTML-Schriftarten
- HTML-Listenstile
- Grundlegende HTML-Tags
- Vorteile von HTML
- HTML-Frames
- In JavaScript umkehren
- HTML-Blöcke
- Stellen Sie eine Hintergrundfarbe in HTML mit Beispiel ein