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.
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 :
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>
Copier après la connexion
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>
Copier après la connexion
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>
Copier après la connexion
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">Copier après la connexion
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">Copier après la connexion
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>Copier après la connexion
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;
}Copier après la connexion
ou
p
{
margin: 25px 50px 75px 100px;
}Copier après la connexion
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;
}Copier après la connexion
ou
p
{
padding: 25px 50px 75px 100px;
}Copier après la connexion
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;
}Copier après la connexion
ou
p {
text-align: left;
}Copier après la connexion
or
p {
text-align: right;
}Copier après la connexion
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>
Copier après la connexion
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>
Copier après la connexion
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>
Copier après la connexion
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>
Copier après la connexion
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>
Copier après la connexion
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>
Copier après la connexion
Output:
-
Font weight: This property defines the weight of a font.
Example:
<p style="font-weight: 900"> This is a bold paragraph</p>
Copier après la connexion
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
