Les trois méthodes d'inclusion CSS

Table des matières- Style en ligne Code

      • Résultat d'exécution
  • Style intégré Code
      • Résultat d'exécution
  • Style externe Code
      • Résultat d'exécution
  • Priorité des méthodes d'inclusion
  • Cependant, intégré > externe a une condition : le style intégré doit être placé après le style externe.
  • Résultat d'exécution
  • Résumé : principe de proximité (plus le style est proche de l'élément, plus sa priorité est élevée)

Style en ligne Code

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Style en ligne</title>
</head>
<body>
        <p style='color:blue;'>Le texte est bleu</p>
</body>
</html>
  • Résultat d'exécution

Style intégré Code

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Style intégré</title>
    <style type='text/css'>
        div{
            font-size:20px;   /* Taille de police (unité px) */
            color: blue;		 /* Couleur de police (bleu) */
            font-weight: bold; /* Police en gras */
        }
    </style>
</head>
<body>
    <div>La programmation est passionnante</div>
</body>
</html>
  • Résultat d'exécution

Style externe Codee

/* Le style externe CSS (également appelé lié externe) consiste à écrire le code CSS dans un fichier séparé. 
Ce fichier de style CSS a l'extension ".css" et est lié au fichier HTML dans la section <head> (pas dans une balise <style>) 
à l'aide de la balise <link>, comme dans le code suivant : */

/* Le nom du fichier de style CSS doit être significatif, par exemple styles.css, theme.css, base.css, etc.
rel="stylesheet"
rel : abréviation de relationship, l'attribut rel définit la relation entre le fichier lié et le document HTML
stylesheet : feuille de style externe du document
href : Hypertext Reference. Il spécifie l'URL cible du lien hypertexte. C'est une forme de code CSS. 
La valeur de l'attribut href est l'adresse du fichier de style. */

/* Imaginez que vous créez un site de commerce électronique similaire à Taobao. 
À mesure que les besoins du projet augmentent, la quantité de code CSS augmente également. 
Plus tard, les méthodes de style CSS en ligne et intégré ne suffiront plus. 
Que devrions-nous faire ? À ce moment, nous pouvons utiliser notre code CSS dans un fichier séparé 
pour faciliter la maintenance ultérieure. C'est le style CSS externe. */

/* Code HTML */
<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
    <div>Apprendre chaque jour, progresser continuellement</div>
</body>
</html>

/* Code CSS */
div{
    color: green;     
    font-size: 28px;
    text-decoration: underline; /* Souligner le texte */
}
  • Résultat d'exécution
  • Priorité des méthodes d'inclusion

Style en ligne > Style intégré > Style externe

  • Cependant, intégré > externe a une condition : le style intégré doit être placé après le style externe.

<html lang="fr" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Exemple de priorité</title>
    <!-- Le style intégré doit être placé après le style externe -->
    <link rel="stylesheet" href="styles.css">
    <style type="text/css">
      p{
        color:purple;        /* Couleur de police : violet */
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <p style='color:red;'>  /* Couleur de police : rouge */
      Bonjour à tous
    </p>
  </body>
</html>
  • Résultat d'exécution
  • Résumé : principe de proximité (plus le style est proche de l'élément, plus sa priorité est élevée)

Étiquettes: CSS style en ligne style intégré style externe priorité CSS

Publié le 22 juin à 22h30

Étiquettes Populaires

©2026 L'Atelier Monstre