33 Voix

CSS: Comment inclure CSS dans HTML

Tutoriel de Stefan Trost | 22/02/2023 à 22:22

À l'aide des Stylesheets CSS, vous pouvez styliser et concevoir les éléments de votre page HTML. Cependant, dans ce tutoriel, je ne veux pas parler des possibilités du CSS, mais de la manière d'inclure du CSS dans votre HTML.

Dans ce qui suit, nous verrons comment inclure CSS en tant que fichiers externes, comment définir CSS dans un fichier HTML et comment appliquer CSS uniquement à des éléments HTML uniques. Dans la dernière section, nous verrons comment combiner ces méthodes.

Inclure CSS en tant que Fichier Externe

La voie royale est d'utiliser un fichier externe. Toutes les règles CSS sont écrites dans un seul fichier et ce fichier est ensuite lié dans l'en-tête de la page HTML. L'extension de fichier pour les fichiers CSS est CSS.

Jetons un œil à un exemple:

<!DOCTYPE html>
<html>
  <head>
    <title>Titre de la Page</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>Titre</h1>
    <p>Paragraphe</p>
  </body>
</html>

L'intégration se fait avec la balise HTML "link" dans l'en-tête (head) de notre page HTML. Cette balise doit contenir les attributs "rel", "type" et "href". "rel" (relation) a toujours la valeur "stylesheet" et "type" est toujours "text/css", qui est le type MIME d'un fichier CSS. Le nom de fichier de notre fichier CSS externe est spécifié dans l'attribut "href". Dans cet exemple, nous aimerions inclure "style.css". Remarque: Si le fichier CSS est stocké dans un sous-répertoire de l'espace Web, nous devons bien sûr ajuster le lien et le chemin ici.

Le fichier "style.css" est juste un fichier texte normal contenant nos règles CSS que nous aimerions définir. Par exemple, le contenu du fichier peut ressembler à ce qui suit et peut être créé à l'aide de chaque éditeur de texte.

h1 { font-size: 14px; padding-bottom: 10px; }
p  { font-size: 10px; }

L'avantage de définir des règles CSS dans des fichiers externes est évident: nous ne pouvons créer qu'un seul fichier CSS central pour l'ensemble de notre site Web, qui peut être inclus sur chaque page.

Avec cela, nous n'avons pas à répéter les règles CSS sur chaque page et il sera très simple de maintenir notre site Web: par exemple, si nous souhaitons changer la taille de la police d'un élément (font size), il suffit de changer le fichier CSS et la modification sera immédiatement visible sur chaque page.

Définir CSS dans la Page HTML

Si vous souhaitez définir des règles CSS pour un seul fichier HTML spécifique, vous pouvez également écrire les règles directement dans la tête sans utiliser des fichiers externes. Ici vous pouvez voir un exemple:

<!DOCTYPE html>
<html>
<head>
<title>Titre de la Page</title>
<style type="text/css">
<!--
h1 { font-size: 14px; padding-bottom: 10px; }
p  { font-size: 10px; }
-->
</style>
</head>
  <body>
    <h1>Titre</h1>
    <p>Paragraphe</p>
  </body>
</html>

Les règles sont entourées de la balise HTML "style" et la balise style d'ouverture peut à nouveau contenir le type MIME (text/css). Alternativement, nous pouvons aussi simplement écrire "<style>", les navigateurs le comprennent aussi.

En option, les règles peuvent être jointes sous forme de commentaire HTML (<!-- et -->). Il s'agit d'une pratique courante pour empêcher les anciens navigateurs d'interpréter les règles CSS comme du texte.

De nos jours, cependant, cela ne joue guère de rôle, car tous les navigateurs courants comprennent le CSS. Cependant, de nos jours, cela ne joue guère de rôle, car tous les navigateurs courants comprennent le CSS.

L'avantage de cette méthode est que le fichier CSS global ne sera pas gonflé par des règles qui ne sont importantes que pour une page. De plus, cette méthode s'applique à toute la page afin que vous puissiez néanmoins définir certaines règles centrales.

CSS uniquement pour les Éléments HTML Uniques

Enfin, il est également possible d'appliquer CSS uniquement à des éléments spécifiques. Encore une fois, nous aimerions jeter un coup d'œil à un exemple pour ceci:

<!DOCTYPE html>
<html>
  <head>
    <title>Titre de la Page</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1 style="font-size: 14px; padding-bottom: 10px">Titre</h1>
    <p style="font-size: 10px">Paragraphe</p>
  </body>
</html>

Pour cela, nous utilisons l'attribut "style" que nous ajoutons directement à l'élément HTML que nous souhaitons styliser. Donc, nous ajoutons simplement les règles pour l'élément correspondant en utilisant style="[Règles CSS]" comme vous pouvez le voir dans l'exemple ci-dessus.

Cette méthode peut être utilisée par exemple, chaque fois que nous ne voulons styliser qu'un élément spécifique. Cependant, en général, il est recommandé de se passer de cette méthode, car il est préférable de diviser le contenu et le style.

Combiner CSS de différentes Sources

Nous ne sommes pas tenus de nous limiter à une seule de ces trois méthodes introduites. De plus, nous sommes toujours autorisés à combiner les méthodes comme nous le souhaitons. Nous devons seulement garder à l'esprit que la dernière règle définie écrasera les règles définies auparavant.

Par exemple, lorsque nous avons inclus un fichier CSS séparé dans l'en-tête et que nous avons défini des CSS spécifiques à la page en dessous, les règles spécifiques à la page écraseront les règles du fichier CSS. Si nous définissons des règles supplémentaires pour certains éléments, ces règles écraseront toutes les autres règles définies auparavant.

Par exemple, si nous avons défini la taille de police "14" et le poids de police "bold" pour tous les éléments p de notre fichier CSS et que nous allons écraser cette règle avec "p { font-size: 12; }" sur la page, la police restera en bold, mais la taille de la police sera écrasée.

RépondrePositifNégatif

Sur l’Auteur

AvatarVous pouvez trouver des logiciels de Stefan Trost sur fr.sttmedia.com. Avez-vous besoin d'un logiciel personnalisé selon vos propres besoins? Écrivez-nous: fr.sttmedia.com/contact
Voir Profil

 

Sujets Connexes

VirtualBox: Changer la Date et l'Heure

Tutoriel | 10 Commentaires

Types de Sujets sur askingbox.com

Article | 0 Commentaires

Renommer des Fichiers en ses Noms de Dossier

Tutoriel | 0 Commentaires

MySQL: Supprimer Données de Table - Différence entre TRUNCATE, DELETE et DROP

Tutoriel | 0 Commentaires

jQuery: Compter les Éléments, les Images, les Classes, etc.

Conseil | 0 Commentaires

Convertir les Valeurs de Couleur RVB, CMJN, CMJ, HSV, TColor et XYZ

Tutoriel | 0 Commentaires

jQuery: Y a-t-il un Élément?

Conseil | 1 Commentaire

Avis Important

Veuillez noter: Les contributions publiées sur askingbox.com sont des contributions d’utilisateurs et ne doivent pas remplacer les conseils d’un professionnel. Ils ne sont pas vérifiés par des indépendants et ne reflètent pas nécessairement l’opinion de askingbox.com. Apprendre encore plus.

Participer

Posez votre propre question ou écrivez votre propre article sur askingbox.com. Voici comment.