HTML Style - CSS


CSS (Cascading Style Sheets) est utilisé pour styliser les balises d'éléments HTML.

Regardez ! Styles et couleurs

Manipuler du texte
Couleurs,  Boîtes
et plus...



实例

Essayez-le - Exemple


Cet exemple montre comment formater du HTML en utilisant le style ajouté dans le <head>.

Cet exemple montre comment créer un lien sans soulignement en utilisant l'attribut style.
Comment utiliser l'attribut style pour créer un lien sans soulignement.


Cet exemple montre commentLien vers une feuille de style externe


Comment utiliser CSS

CSS est introduit dans HTML 4 pour mieux afficher les éléments.

CSS peut être ajouté au HTML de la manière suivante :

  • Styles en ligne - Utilisation de "style" dans les éléments HTMLAttributs
  • Feuille de style interne - Utilisation de <style> dans la section <head> du document HTMLÉlémentsPour inclure CSS
  • Référence externe - Utilisation d'un fichier CSS externeFichier

La meilleure façon est d'utiliser une référence externe vers un fichier CSS externe.

Dans nos tutoriels HTML sur ce site, nous utilisons des styles CSS en ligne pour introduire des exemples, ce qui est un exemple simplifié qui facilite la modification et l'exécution des exemples en ligne.

Vous pouvez en apprendre plus sur CSS grâce à ce qui suit :Tutoriel CSSEn savoir plus sur CSS.


Styles en ligne

Lorsque des styles spéciaux doivent être appliqués à des éléments individuels, vous pouvez utiliser des styles en ligne. Utilisez les styles en ligne en utilisant l'attribut style dans les balises concernées. L'attribut style peut contenir n'importe quelle propriété CSS. L'exemple suivant montre comment modifier la couleur et la marge gauche d'un paragraphe.

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

Pour en savoir plus sur les styles, veuillez consulter le tutoriel CSS.


Exemple de style HTML - Couleur d'arrière-plan

La propriété de couleur d'arrière-plan (background-color) définit la couleur d'arrière-plan d'un élément :

Exemple

<body style="background-color:yellow;"> <h2 style="background-color:red;">Ceci est un titre</h2> <p style="background-color:green;">Ceci est un paragraphe.</p> </body>

Essayez-le »

La propriété de couleur d'arrière-plan (background-color) était définie à l'aide de l'attribut bgcolor dans l'ancien HTML.

Essayez-le : ancien HTML pour définir l'arrière-plan


Exemple de style HTML - Police, couleur de police, taille de police

Nous pouvons utiliser les propriétés font-family (police), color (couleur) et font-size (taille de police) pour définir le style du texte :

Exemple

<h1 style="font-family:verdana;">Un titre</h1> <p style="font-family:arial;color:red;font-size:20px;">Un paragraphe.</p>

Essayez-le »

Maintenant, généralement, nous utilisons les propriétés font-family (police), color (couleur) et font-size (taille de police) pour définir le style du texte, plutôt que d'utiliser la balise <font>.


Exemple de style HTML - Alignement du texte

Utilisez la propriété text-align (alignement du texte) pour spécifier l'alignement horizontal et vertical du texte :

Exemple

<h1 style="text-align:center;">Titre centré</h1> <p>Ceci est un paragraphe.</p>

Essayez-le »

La propriété text-align a remplacé l'ancienne balise <center>.

Essayez-le


Feuille de style interne

Lorsqu'un seul fichier doit avoir des styles spéciaux, vous pouvez utiliser une feuille de style interne. Vous pouvez définir une feuille de style interne dans la section <head> en utilisant la balise <style> :

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>


Feuille de style externe

Lorsque des styles doivent être appliqués à de nombreuses pages, les feuilles de style externes seront le choix idéal. En utilisant des feuilles de style externes, vous pouvez modifier l'apparence de tout le site en changeant un seul fichier.

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css.html">
</head>


Balise de style HTML

Balise Description
<style> Définir le style du texte
<link> Définir l'adresse de référence de la ressource


Balises et attributs obsolètes

Dans HTML 4, les balises et attributs utilisés pour définir le style des éléments HTML étaient obsolètes. Ces balises ne prendront plus en charge les nouvelles versions des balises HTML.

Balises non recommandées : <font>, <center>, <strike>

Attributs non recommandés : color et bgcolor.

Autres extensions