HTML-Stilattribut

HTML-Code benötigt das Style-Attribut, damit Webseiten, die in Webbrowsern wie Chrome, Firefox und IE gerendert werden, so angezeigt werden, wie sie aussehen sollen. HTML-Tags können verschiedene Informationen enthalten und das Style-Attribut steuert die Darstellung von Informationen in HTML-Blöcken mithilfe von Inline-Styling.

In diesem Artikel erfahren Sie mehr über das HTML-Stilattribut, das nichts anderes als eine Reihe von Regeln ist, die definieren, wie eine Seite im Webbrowser gerendert wird.

Liste der HTML-Stilattribute

Hier finden Sie eine Liste aller Stileigenschaften, mit denen Sie das Design von HTML-Elementen beeinflussen und steuern können, begleitet von einem praktischen Beispiel:

1. Hintergrundfarbe

Mit dieser CSS-Eigenschaft können wir die Hintergrundfarbe für jedes HTML-Element wie

,

usw. festlegen.

Beispiel

<div style="background-color:blue">My background is blue</div>

Ausgabe:

2. Farbe

Die Schriftfarbe des Textes in einem HTML-Element kann gesteuert werden, indem dessen Farbattribut auf den richtigen Farbnamen, HEX-Code oder RGB-Code eingestellt wird.

Beispiel

<div style="color:blue">My font color is blue</div>

Ausgabe:

3. Randfarbe

Wir können die Rahmenfarbe jedes HTML-Elements festlegen, wenn wir ihm einen Rahmen hinzufügen möchten.

Beispiel

<p style="border: 1px solid red">My border is red</p>

Ausgabe:

Wie der obige Code zeigt, akzeptiert die Border-Eigenschaft drei Eigenschaften in der folgenden Reihenfolge: „Border-width border-style border-color.“

4. Hintergrundbild

Wir können ein Bild auch als Hintergrund festlegen, indem wir die Eigenschaft „Hintergrundbild“ wie folgt verwenden:

Beispiel:

<div style="background-image: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');height :365px">

Ausgabe:

5. Hintergrundwiederholung

Wie Sie im obigen Beispiel sehen können, wird, wenn ein Bild mithilfe der Eigenschaft „Hintergrundbild“ als Hintergrund festgelegt wird, das Bild standardmäßig sowohl horizontal als auch vertikal wiederholt. Einige Bilder müssen jedoch möglicherweise entweder vertikal oder horizontal wiederholt werden, oder sie müssen möglicherweise nicht wiederholt werden. Dieses Verhalten kann durch Festlegen des gewünschten Werts für die Eigenschaft „background-repeat“ gesteuert werden und kann nur verwendet werden, wenn „background-image“ verwendet wird; Andernfalls bringt es keinen gestalterischen Mehrwert, wenn es als eigenständige Immobilie verwendet wird.

Der Wert „repeat-x“ ermöglicht, dass das Bild nur horizontal wiederholt wird.

Der Wert „repeat-y“ ermöglicht, dass das Bild nur vertikal wiederholt wird.

Der Wert „no-repeat“ wird verwendet, um jegliche Wiederholung des Hintergrundbilds zu verhindern.

Lassen Sie uns das obige Beispiel modifizieren, um das Hintergrundbild zu verbessern.

Beispiel 

<div style="background-image: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');height :365px; background-repeat:no-repeat">

Ausgabe:

Wir können die obigen Beispiele vergleichen und das mit einem Hintergrundbild verstehen; Wir können ein Bild als Hintergrund hinzufügen und mit einer Hintergrundwiederholung können wir die Wiederholung des Hintergrundbilds steuern.

6. Hintergrundposition

Mit dieser Eigenschaft können wir die Position des Hintergrundbilds definieren.

Beispiel

<div style="background-image: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');height :365px; width:500px;background-repeat: no-repeat; background-position: left bottom;">
</div>

Ausgabe:

7. Ränder

CSS stellt uns Eigenschaften zur Verfügung, um Ränder auf allen vier Seiten eines HTML-Elements festzulegen, oder wir könnten Ränder zu einer bestimmten Seite des Elements hinzufügen.

Mit margin-top kann ein Rand oben am Element hinzugefügt werden, margin-right fügt einen Rand rechts vom Element hinzu, margin-left fügt einen Rand links vom Element hinzu und margin-bottom fügt unten einen Rand hinzu. Anstatt diese vier Eigenschaften zu verwenden, können wir auch die Margin-Eigenschaft verwenden und ihre Werte gemäß unseren Anforderungen festlegen.

Beispiel

p {
margin-top: 25px;
margin-bottom: 75px;
margin-right: 50px;
margin-left: 100px;
}

oder

p
{
margin: 25px 50px 75px 100px;
}

8. Polsterung

Die padding-Eigenschaft definiert den Abstand zwischen dem Inhalt eines Elements und seinen Rändern. Wir können die Eigenschaft „padding“ oder einzelne Padding-Eigenschaften wie padding-top, padding-bottom, padding-left und padding-right verwenden, um den Abstand für den oberen, unteren, linken oder rechten Rand des Inhalts eines Elements festzulegen.

p {
padding-top: 25px;
padding-bottom: 75px;
padding-right: 50px;
padding-left: 100px;
}

oder

p
{
padding: 25px 50px 75px 100px;
}

9. Höhe und Breite

Die grundlegendsten CSS-Eigenschaften, die zum Definieren der Höhe und Breite eines HTML-Elements verwendet werden, sind Höhe und Breite. Sie können sie auf einen Pixelwert wie 200 Pixel oder einen Prozentsatz wie 10 %, 20 % usw. festlegen.

10. Textausrichtung

Mit dieser Eigenschaft können Sie die horizontale Richtung für die Textausrichtung in einem Element festlegen. Die Wertoptionen sind Mitte, rechts oder links.

p {
text-align: center;
}

oder

p {
text-align: left;
}

or

p {
text-align: right;
}

11. Text-Decoration

Text decoration property can be used to set decorations like underline, line-through, or overline over text in HTML.

Example:

<p style="text-decoration:underline">This is underline</p>

Output:

12. Letter-Spacing

As the name suggests, this property defines the spacing between letters/characters in a word. You can assign a positive or negative pixel value to increase or decrease the spacing between letters.

Example:

<p style="letter-spacing: -3px">My words are overlapped </p>

Output:

13. Line-Height

Line height defines the distance between vertical lines. You can set the line height to a positive or negative pixel value, similar to letter spacing. Let’s review the example below to understand better:

Example:

<p style="line-height: 0.7px">This paragraph has a small line-height.<br>This paragraph has a small line-height.<br>
</p>

Output:

14. Text Direction

Sometimes, if the web page’s content is not in English but in some other language like Arabic, which follows a right to the left convention, we would need to change the direction of the text. In such cases, we can reverse the text direction.

Example:

<p style="direction: rtl"><bdo dir="ltr">I am right to left</bdo></p>

Output:

15. Text Shadow

This property adds a shadow to the text.

Example:

<p style="text-shadow: 3px 2px gray;"> I’ve got a gray shadow</p>

Output:

16. Font Family

We can define the font class for text in an element. We can define multiple font families separated by a comma as a fallback system to handle scenarios where a preferred font class cannot be loaded.

• Font style: We can add italic or oblique effects to the text with the font-style property.

Example:

<p style="font-style: oblique">This is oblique style.</p>

Output:

• Font weight: This property defines the weight of a font.

Example:

<p style="font-weight: 900"> This is a bold paragraph</p>

Output :

The styling attributes showcased above are our building blocks with UI and UX designing. New versions of CSS continue to evolve.

Das obige ist der detaillierte Inhalt vonHTML-Stilattribut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

firefox css chrome html define if for continue using class Attribute Property default this position margin padding border background ux ui word

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn