English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Les fichiers CSS sont des fichiers de texte purs enregistrés sous l'extension .css.
Dans ce tutoriel, vous apprendrez à quel point il est facile d'ajouter des styles et des informations de mise en forme aux pages Web en utilisant CSS. Mais avant de commencer, assurez-vous d'avoir des connaissances de base en HTML.
Si vous êtes tout juste entré dans le domaine du développement Web, veuillezÀ partir de maintenant, apprenons ensemble»
Ne tardez pas, commençons à utiliser les tableaux de styles en cascade (CSS).
Les feuilles de style CSS peuvent être attachées en tant que document séparé ou intégrées au document HTML lui-même. Il existe trois méthodes pour inclure des feuilles de style CSS dans un document HTML :
Les styles en ligne -UtilisezstyleLes attributs de la balise de début HTML.
Les styles en ligne -Utilisez<style>L'élément de l'en-tête du document.
Feuille de style externe -Utilisez<link>L'élément, pointant vers le fichier CSS externe.
Dans ce tutoriel, nous allons présenter l'une après l'autre toutes les trois méthodes d'insertion de CSS.
Attention :Les styles en ligne ont la priorité la plus élevée, tandis que les feuilles de style externes ont la priorité la plus faible. Cela signifie que, si dansEmbeddéeLes feuilles de style etFeuille de style externeDans le cas où les styles sont spécifiés pour l'élémentEmbeddéeLes règles de style en conflit dans les feuilles de style couvrent les feuilles de style externes.
Les styles en ligne sont utilisés pour appliquer une règle de style unique à l'élément en plaçant directement les règles CSS dans la balise d'ouverture. Il est possible d'utiliserstyleLes attributs appliquent le style à l'élément.
C'eststyleLes propriétés incluent une série de paires d'attributs CSS et de valeurs. Chaque"property: value"séparés par des points-virgules (}};séparés par des points-virgules (}}
<h1 style="color:red; font-size:30px;">Ceci est un en-tête/h1> <p style="color:green; font-size:22px;">Ceci est un paragraphe./p> <div style="color:blue; font-size:14px;">Ceci est un contenu texte./div>Vérifiez en cliquant ici‹/›
L'utilisation de styles en ligne est généralement considérée comme une mauvaise pratique. Comme les règles de style sont directement intégrées dans les balises HTML, cela mélange les styles avec le contenu du document. Cela rend le code difficile à maintenir et contredit l'objectif de l'utilisation de CSS.
Attention :pour définir des styles en lignepseudo-élémentsetpseudo-classesLes styles sont devenus impossibles. Par conséquent, il convient d'éviter d'utiliser des attributs de style dans le code. UtilisezFeuille de style externeest la méthode préférée pour ajouter des styles à un document HTML.
affecte uniquement le document dans lequel elle est intégrée.
Feuille de style intégrée ou interne<head>Feuille de style intégrée dans<style>utiliser dans la partie<style>définir l'élément. Vous pouvez<head>et</Définir un nombre quelconque d'éléments dans un document HTML, mais ils doivent apparaître entrehead>
<!DOCTYPE html><html lang="en"><head>
<title>Mon Document HTML</title>
<style>
marqueurs entre. Voici un exemple :-body { background
color: YellowGreen; }
</p { color: #fff; }/head><body>
<h1>Ce est un en-tête</h1>
<p>Ce est un paragraphe de texte.</p></body></html>Vérifiez en cliquant ici‹/›Astuce :style><et des balisestype5est le langage standard des feuilles de style et le langage par défaut des feuilles de style, donc vous pouvez ignorer ce réglage. L'attribut (c'est-à-dire) définit le langage de la feuille de style. Cet attribut est purement informatif. Comme le CSS est un langage HTML<style><link>type="text/css"
Lorsque les styles sont appliqués à de nombreux pages du site, les feuilles de style externes sont l'option idéale.
Les feuilles de style externes conservent toutes les règles de style dans un document séparé. Vous pouvez lier cette feuille de style à n'importe quel fichier HTML sur le site. Les feuilles de style externes sont les plus flexibles, car avec une feuille de style externe, vous n'avez besoin de modifier qu'un seul fichier pour changer l'apparence entière du site.
Vous pouvez attacher une feuille de style externe de deux manières- LienetImportation.
Avant de créer un lien, nous devons d'abord créer une feuille de style. Ouvrez votre éditeur de code préféré et créez un nouveau fichier. Tapez le code CSS suivant dans ce fichier et enregistrez-le sous le nom de "style.css".
body {
background: lightyellow;
font: 18px Arial, sans-serif;}h1 }
color: orange;}peut être utilisé<link>tag lie une feuille de style externe au document HTML. Le<link>tag pour entrer en interne<head>Partie, vous pouvez le voir dans l'exemple suivant :
<!DOCTYPE html><html lang="en"><head> <title>Mon Document HTML</title> <link rel="stylesheet" href="css/style.css"></head><body> <h1>Ce est un en-tête</h1> <p>Ce est un paragraphe de texte.</p></body></html>Vérifiez en cliquant ici‹/›
Astuce :Dans ces trois méthodes, l'utilisation d'une feuille de style externe est la meilleure méthode pour définir des styles et les appliquer à un document HTML. Il est clair que les fichiers HTML affectés par une feuille de style externe nécessitent le moins de modifications de balisage.
C'est@importC'est une autre méthode pour charger une feuille de style externe. Le@importCette instruction indique au navigateur de charger une feuille de style externe et d'utiliser ses styles.
Vous pouvez l'utiliser de deux manières. La plus simple consiste à l'inclure dans l'en-tête du document. Notez que d'autres règles CSS peuvent toujours être incluses dans<style>dans un élément. Voici un exemple :
<style>
@import url("css/style.css");
p {
color: blue;
font-size: 16px;
}
</style>Vérifiez en cliquant ici‹/›De même, vous pouvez utiliser@importRègle d'importation de feuille de style dans une autre feuille de style.
@import url("css/layout.css");
@import url("css/color.css");body {
color: blue;
font-size: 14px;}Vérifiez en cliquant ici‹/›Attention :Tous@importToutes les règles doivent apparaître au début de la feuille de style. Toute règle de style définie dans la feuille de style elle-même couvrira les règles conflictuelles dans la feuille de style importée. Cependant, en raison des problèmes de performance, il est déconseillé d'importer une feuille de style dans une autre feuille de style.