Présentation de l'attribut de style HTML
Le code HTML a besoin de l'attribut style pour que les pages Web soient rendues dans les navigateurs Web comme Chrome, FireFox, IE pour qu'elles s'affichent comme elles sont censées apparaître. Les balises HTML peuvent contenir diverses informations et l'attribut style contrôle l'apparence des informations contenues dans les blocs HTML à l'aide d'un style en ligne.
Dans cet article, nous en apprendrons plus sur l'attribut de style HTML qui n'est rien de plus qu'un ensemble de règles qui définissent la façon dont une page sera affichée dans le navigateur Web.
Liste des attributs de style HTML
Voici une liste de toutes les propriétés de style qui peuvent être utilisées pour influencer et contrôler la conception des éléments HTML accompagnée d'un exemple pratique:
1. Couleur de fond
Avec cette propriété CSS, nous pouvons définir la couleur d'arrière-plan pour tout élément HTML comme,
etc.
Exemple
My background is blue
Production:
2. Couleur
La couleur de 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 ou le code HEX ou le code RVB.
Exemple
My font color is blue
Production:
3. Couleur de la bordure
Nous pouvons définir la couleur de la bordure de tout élément HTML si nous souhaitons lui ajouter une bordure.
Exemple
Ma bordure est rouge
Production:
Comme vous le voyez dans le code ci-dessus, la propriété border accepte 3 propriétés dans l'ordre suivant: «Border-width border-style border-color».
4. Image de fond
Nous pouvons également définir une image comme arrière-plan en utilisant la propriété background-image comme suit:
Exemple:
Production:
5. Background-Repeat
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; par défaut, il répète l'image à la fois horizontalement et verticalement. Cependant, certaines images peuvent devoir être répétées verticalement ou horizontalement ou elles peuvent ne pas être nécessaires pour être répétées. 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é en tant que propriété autonome.
La valeur «repeat-x» est utilisée pour permettre à l'image d'être répétée uniquement horizontalement.
La valeur «repeat-y» est utilisée pour permettre à l'image d'être répétée uniquement verticalement.
La valeur «sans répétition» est utilisée pour arrêter tout type de répétition de l'image d'arrière-plan.
Modifions l'exemple ci-dessus pour améliorer l'image d'arrière-plan.
Exemple
Production:
Nous pouvons comparer les exemples ci-dessus et comprendre qu'avec l'image d'arrière-plan, nous pouvons ajouter une image comme arrière-plan et avec la répétition d'arrière-plan, nous pouvons contrôler la répétition de l'image d'arrière-plan.
6. Contexte - Position
Avec cette propriété, nous pouvons définir la position de l'image d'arrière-plan.
Exemple
Production:
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 pourrions ajouter des marges à 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 au bas de l'élément. Au lieu d'utiliser ces 4 propriétés, nous pouvons également utiliser la propriété margin et définir ses valeurs selon nos besoins.
Exemple
p (
margin-top: 25px;
margin-bottom: 75px;
margin-right: 50px;
margin-left: 100px;
)
or
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 comme padding-top, padding-bottom, padding-left, 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;
)
or
p
(
padding: 25px 50px 75px 100px;
)
9. Hauteur et largeur
La hauteur et la largeur sont les propriétés CSS les plus élémentaires utilisées pour définir la hauteur et la largeur de tout élément HTML. Ils peuvent être définis sur une valeur de pixel comme 200 pixels ou sur un pourcentage comme 10%, 20%, etc.
10. Text-Align
Cette propriété est utilisée pour définir la direction horizontale dans laquelle nous aimerions aligner le texte d'un élément. La valeur peut être réglée au centre, à droite ou à gauche.
p (
text-align: center;
)
or
p (
text-align: left;
)
or
p (
text-align: right;
)
11. Texte-décoration
La propriété de décoration de texte peut être utilisée pour définir des décorations comme le soulignement, la ligne droite ou la surlignage sur du texte en HTML.
Exemple:
Ceci est souligné
Production:
12. Espacement des lettres
Comme son nom l'indique, cette propriété est utilisée pour définir l'espacement entre les lettres / caractères d'un mot. Il peut être attribué une valeur de pixel positive ou négative pour augmenter ou diminuer l'espacement entre les lettres.
Exemple:
Mes mots se chevauchent
Production:
13. Hauteur de ligne
La hauteur de ligne définit la distance entre les lignes verticales. Comme l'espacement des lettres, la hauteur de ligne peut également être définie sur une valeur de pixel positive ou négative. Examinons l'exemple ci-dessous pour mieux comprendre:
Exemple:
Ce paragraphe a une petite hauteur de ligne.
Ce paragraphe a une petite hauteur de ligne.
Production:
14. Direction du texte
Parfois, si le contenu de la page Web n'est pas en anglais mais dans une autre langue comme l'arabe qui suit une convention de droite à gauche, nous devons changer la direction du texte. Dans de tels cas, nous pouvons inverser la direction du texte.
Exemple:
Je suis de droite à gauche
Production:
15. Ombre du texte
Cette propriété ajoute une ombre au texte.
Exemple:
J'ai une ombre grise
Production:
16. famille de polices
Nous pouvons définir la classe de police du texte dans un élément. Nous pouvons définir plusieurs familles de polices séparées par une virgule comme système de secours pour gérer les scénarios où une classe de police préférée ne peut pas être chargée.
- Style de police: Avec la propriété de style de police, nous pouvons ajouter un effet italique ou oblique au texte.
Exemple:
C'est un style oblique.
Production:
- Poids de la police: cette propriété définit le poids d'une police.
Exemple:
Ceci est un paragraphe en gras
Production :
Les attributs de style présentés au-dessus de nos blocs de construction avec la conception UI et UX. Ils continuent d'évoluer à mesure que de nouvelles versions de CSS sont introduites.
Articles recommandés
Ceci est un guide de l'attribut de style HTML. Nous discutons ici la liste de toutes les propriétés de style qui peuvent être utilisées pour influencer et contrôler la conception des éléments HTML à l'aide d'exemples pratiques. Vous pouvez également consulter les articles suivants pour en savoir plus -
- Styles de polices HTML
- Styles de liste HTML
- Balises HTML de base
- Avantages du HTML
- Cadres HTML
- Inverser en JavaScript
- Blocs HTML
- Définir une couleur d'arrière-plan en HTML avec l'exemple