Quand un navigateur lit une feuille de style, il forme le document HTML en fonction de l'information contenue dans la feuille de style.
Trois façons d'insérer CSS
Il y a trois manières d'insérer une feuille de style:
Feuille de style externe
Avec une feuille de style externe, vous pouvez modifier l'apparence d'un site Web entier en changeant un seul fichier!
Chaque page doit inclure une référence au fichier externe de feuille de style à l' intérieur du <link> élément. Le <link> élément va dans le <head> section:
Exemple
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head> Essayez - le vous - même » Une feuille de style externe peut être écrit dans un éditeur de texte. Le fichier ne doit pas contenir de balises HTML. Le fichier de feuille de style doit être enregistré avec un .css prolongation.
Voici comment le "myStyle.css" ressemble:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
} | Ne pas ajouter un espace entre la valeur de la propriété et l'unité (comme margin-left:20 px; ). La manière correcte est: margin-left:20px; |
|---|
Intérieurs Style Sheet
Une feuille de style interne peut être utilisé si une seule page a un style unique.
Styles internes sont définis dans le <style> élément, à l' intérieur du <head> section d'une page HTML:
Exemple
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head> Essayez - le vous - même » Inline Styles
Un style en ligne peut être utilisé pour appliquer un style unique pour un seul élément.
Pour utiliser les styles en ligne, ajoutez l'attribut de style à l'élément concerné. L'attribut de style peut contenir toute propriété CSS.
L'exemple ci - dessous montre comment changer la couleur et la marge gauche d'un <h1> élément:
| Un style en ligne perd beaucoup des avantages d'une feuille de style (en mélangeant le contenu avec présentation). Utilisez cette méthode avec parcimonie! |
|---|
Plusieurs feuilles de style
Si certaines propriétés ont été définies pour le même sélecteur (élément) dans différentes feuilles de style, la valeur de la dernière feuille de style de lecture sera utilisé.
Exemple
Supposons qu'une feuille de style externe a le style suivant pour le <h1> élément:
h1
{
color: navy;
}puis, supposons qu'une feuille de style interne a aussi le style suivant pour le <h1> élément:
h1
{
color: orange;
}Si le style interne est défini après le lien vers la feuille de style externe, les <h1> éléments seront "orange" :
Exemple
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head> Essayez - le vous - même » Toutefois, si le style interne est défini avant le lien vers la feuille de style externe, les <h1> éléments seront "navy" :
Exemple
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head> Essayez - le vous - même » Cascading Ordre
Quel style sera utilisé quand il y a plus d'un style spécifié pour un élément HTML?
D'une manière générale, nous pouvons dire que tous les styles seront "cascade" dans une nouvelle feuille de style "virtuel" par les règles suivantes, où le numéro un a la plus haute priorité:
- style de ligne (dans un élément HTML)
- feuilles de style externes et internes (dans la section de la tête)
- Navigateur par défaut
Donc, un style en ligne (dans un élément HTML spécifique) a la plus haute priorité, ce qui signifie qu'il va remplacer un style défini dans le <head> tag, ou dans une feuille de style externe, ou une valeur navigateur par défaut.
Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4»