Skip to main content

Qu'est-ce qu'une feuille de style externe?

COURS COMPLET HTML ET CSS [39/71] - Les propriétés float et clear (Avril 2025)

COURS COMPLET HTML ET CSS [39/71] - Les propriétés float et clear (Avril 2025)
Anonim

Lorsqu'un navigateur Web charge une page Web, son apparence est déterminée par les informations d'une feuille de style en cascade. Un fichier HTML peut utiliser une feuille de style de trois manières: en externe, en interne et en ligne.

Les feuilles de style internes et en ligne sont stockées dans le fichier HTML lui-même. Ils sont faciles à utiliser immédiatement, mais comme ils ne sont pas stockés dans un emplacement central, il est impossible de modifier facilement le style de l'ensemble du site Web en une seule fois. vous devez plutôt retourner dans chaque entrée et la modifier manuellement.

Cependant, avec une feuille de style externe, les instructions de rendu de la page sont stockées dans un seul fichier, ce qui facilite grandement la modification du style sur un site Web entier ou sur plusieurs éléments. Le fichier utilise l'extension de fichier .CSS et un lien vers l'emplacement de ce fichier est inclus dans le document HTML afin que le navigateur Web sache où rechercher les instructions de style.

Un ou plusieurs documents peuvent être liés au même fichier CSS, et un site Web peut contenir de nombreux fichiers CSS uniques permettant de styliser différentes pages, tableaux, images, etc.

Comment lier à une feuille de style externe

Toute page Web qui souhaite utiliser une feuille de style externe particulière doit créer un lien vers le fichier CSS à partir de la bibliothèque. section, un peu comme ceci:

Dans cet exemple, la seule chose à modifier pour l’appliquer à votre propre document est la styles.css texte. Ceci est l'emplacement de votre fichier CSS.

Si le fichier s'appelle réellement styles.css et est situé dans le même dossier que le document qui y est lié, il peut alors rester exactement tel qu'il se lit ci-dessus. Cependant, il est fort probable que votre fichier CSS porte un titre différent. Dans ce cas, vous pouvez simplement remplacer le nom "styles" par celui que vous préférez.

Si le fichier CSS ne se trouve pas à la racine de ce dossier, mais dans un sous-dossier, il se peut qu’il se lise à peu près comme ceci:

Plus d'informations sur les fichiers CSS externes

Le plus grand avantage des feuilles de style externes est qu'elles ne sont pas liées à une page spécifique. Si le style est effectué en interne ou en ligne, les autres pages du site Web ne peuvent pas pointer vers ces préférences de style.

Avec un style externe, cependant, le même fichier CSS peut être utilisé pour littéralement toutes les pages du site Web, de manière à donner à toutes un aspect uniforme. La modification du contenu CSS de l'ensemble du site Web est extrêmement simple et centralisée.

Vous pouvez voir comment cela fonctionne ci-dessous …

Le style interne nécessite l’utilisation de

Cependant, étant donné que les feuilles de style externes sont contenues dans leur propre fichier, elles peuvent être créées comme ceci, et cela signifie exactement la même chose que l'exemple ci-dessus:

corps {couleur de fond: vert; } h1 {color: blue; marge gauche: 15px; }

Dans ces exemples, le style en ligne ne s'applique qu'à cette page, ce qui est évident par le fait qu'il est contenu dans les détails de l'en-tête de cette page HTML. Dans le deuxième exemple, les informations CSS sont contenues dans un fichier CSS auquel toute page peut accéder en utilisant le code de la commande. Comment lier à une feuille de style externe section ci-dessus.