Attribut de style HTML

Le code HTML nécessite l'attribut style pour que les pages Web affichées dans les navigateurs Web tels que Chrome, Firefox et IE soient affichées telles qu'elles sont censées apparaître. Les balises HTML peuvent contenir diverses informations et l'attribut style contrôle l'apparence des informations dans les blocs HTML à l'aide du style en ligne.

Cet article en apprendra davantage sur l'attribut de style HTML, qui n'est rien de plus qu'un ensemble de règles définissant la façon dont une page sera rendue dans le navigateur Web.

Liste des attributs de style HTML

Voici une liste de toutes les propriétés de style pouvant être utilisées pour influencer et contrôler la conception des éléments HTML, accompagnée d'un exemple pratique :

1. Couleur de fond

Cette propriété CSS nous permet de définir la couleur d'arrière-plan de tout élément HTML comme

,

, etc.

Exemple

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

Sortie :

2. Couleur

La couleur de la police du texte dans un élément HTML peut être contrôlée en définissant son attribut de couleur sur le bon nom de couleur, le code HEX ou le code RVB.

Exemple

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

Sortie :

3. Couleur de la bordure

Nous pouvons définir la couleur de la bordure de n'importe quel élément HTML si nous souhaitons y ajouter une bordure.

Exemple

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

Sortie :

Comme le montre le code ci-dessus, la propriété border accepte trois propriétés dans l'ordre suivant : "Border-width border-style border-color."

4. Image d'arrière-plan

Nous pouvons également définir une image comme arrière-plan en utilisant la propriété background-image comme suit :

Exemple :

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

Sortie :

5. Répétition d'arrière-plan

Comme vous le voyez dans l'exemple ci-dessus, lorsqu'une image est définie comme arrière-plan à l'aide de la propriété background-image, elle répète par défaut l'image à la fois horizontalement et verticalement. Cependant, certaines images peuvent devoir être répétées verticalement ou horizontalement, ou il peut ne pas être nécessaire de les répéter. Ce comportement peut être contrôlé en définissant la valeur souhaitée par rapport à la propriété background-repeat, et il ne peut être utilisé que lorsque background-image est utilisé ; sinon, il n'ajoutera aucune valeur de style lorsqu'il est utilisé comme propriété autonome.

La valeur « repeat-x » permet de répéter l'image uniquement horizontalement.

La valeur « repeat-y » permet de répéter l'image uniquement verticalement.

La valeur « no-repeat » est utilisée pour stopper toute répétition de l'image de fond.

Modifions l'exemple ci-dessus pour améliorer l'image d'arrière-plan.

Exemple 

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

Sortie :

On peut comparer les exemples ci-dessus et comprendre cela avec une image de fond ; nous pouvons ajouter une image comme arrière-plan, et avec une répétition d'arrière-plan, nous pouvons contrôler la répétition de l'image d'arrière-plan.

6. Position d'arrière-plan

Avec cette propriété, nous pouvons définir la position de l'image de fond.

Exemple

<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>

Sortie :

7. Marges

CSS nous fournit des propriétés pour définir des marges sur les quatre côtés d'un élément HTML, ou nous pouvons ajouter des marges sur un côté particulier de l'élément.

Avec margin-top peut ajouter une marge en haut de l'élément, margin-right ajoutera une marge à droite de l'élément, margin-left ajoutera une marge à gauche de l'élément et margin-bottom ajoutera une marge en bas. Au lieu d'utiliser ces quatre propriétés, nous pouvons également utiliser la propriété margin et définir ses valeurs selon nos exigences.

Exemple

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

ou

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

8. Rembourrage

La propriété padding définit l'espace entre le contenu d'un élément et ses bordures. Nous pouvons utiliser la propriété « padding » ou des propriétés de remplissage individuelles telles que padding-top, padding-bottom, padding-left et padding-right pour définir le remplissage pour le haut, le bas, la gauche ou la droite du contenu d'un élément.

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

ou

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

9. Hauteur et largeur

Les propriétés CSS les plus élémentaires utilisées pour définir la hauteur et la largeur de tout élément HTML sont la hauteur et la largeur. Vous pouvez les définir sur une valeur de pixel, telle que 200 px, ou un pourcentage, tel que 10 %, 20 %, etc.

10. Alignement du texte

Vous pouvez utiliser cette propriété pour définir la direction horizontale de l'alignement du texte dans un élément. Les options de valeur sont centre, droite ou gauche.

p {
text-align: center;
}

ou

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn