Feuille de style externe
Nous allons maintenant apprendre les différentes manières de lier une feuille de style css à un document HTML via des liens.
Une feuille de style externe porte l’extension .css, et ne comporte que des règles CSS.
Cette feuille de style est séparée de la structure du document HTML, c’est pourquoi nous parlons de feuille de style externe
Vous devrez donc utiliser la balise dans l’en-tête (head) ... du document HTML pour lier votre feuille de style CSS à ce document HTML.
Dans l’en-tête de votre document HTML, vous aurez donc :
<head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
Quel est l'avantage d'une feuille de style externe ?
Les feuilles de styles externes sont idéales lorsqu’un style doit être appliqué à de nombreuses pages(gagné de temps).En effet, toutes vos pages HTML garderont la même mise en page !.
Feuille de style intégré
Vous pouvez définir une feuille de style grâce à l’élément style.
L’élément style doit être placé au sein de l’élément head , et commence toujours par <style type="text/css"> , puis se termine par la balise de fermeture </style>
C’est donc entre ces balises que vous définirez vos styles.
<style type="text/css"> h1 { color : blue ; } </style>
La règle @import
La règle @import est une règle CSS 2, et non pas une balise HTML. Vous devez donc la déclarer dans l’élément style de votre document HTML.
Exemple :
<style type="text/css">
@import url(feuille.css) ;
sélecteur { propriété : valeur ; }
sélecteur { propriété : valeur ; }
</style>Cette règle peut être utiliser plusieurs fois dans une feuille de style.
Bien évidemment, ce n’est pas parce que vous utilisez cette règle que vous ne pouvez pas déclarer d’autres règles.
Bien évidemment, ce n’est pas parce que vous utilisez cette règle que vous ne pouvez pas déclarer d’autres règles.
Je précise que la règle @import doit être placer avant toutes les autrès règles CSS.
Deuxième méthode pour la règle @import
Vous pouvez aussi utiliser cette règle dans une feuille de style externe.
La règle @import devra être placer avant toutes les autrès règles CSS.
Exemple :
@import url(feuille.css)
sélecteur { propriété : valeur ; }
sélecteur { propriété : valeur ; }Les Styles en Ligne
Vous pouvez, si vous le souhaitez, affecter un ou plusieurs styles à un élémént en utilisant l’attribut style.
Nous appellons ça un style en ligne.
Exemple :
<p style="color : red ;"> paragraphe avec mon
style CSS </p> Ainsi, notre paragraphe sera de couleur rouge.
Notez que vous ne pouvez placer qu’un bloc de déclaration à l’aide de l’attribut style.
Je vous déconseille d’utiliser les styles en ligne var vous ne profiterez pas des avantages offerts par les feuilles de style externes.
RSS Feed (xml)
Aucun commentaire:
Enregistrer un commentaire