HTML ne peut présenter que certaines informations et a des capacités de performances très limitées. Il doit être utilisé conjointement avec CSS pour rendre la page plus belle. Dans une page Web, tout le code de style peut être déplacé hors du document HTML et vers une feuille de style distincte.
Les styles CSS peuvent être introduits dans les documents HTML sous forme de fichiers séparés (fichiers de type .css) ou écrits directement dans les documents HTML. Ils peuvent être grossièrement divisés selon les quatre méthodes suivantes :
1. Feuille de style intégrée
Embedded : concentrez les styles CSS dans la paire de balises <style></style> de la paire de balises <head></head> de la page Web ;
Ajoutez des styles CSS à la balise <style> dans la balise <head> du HTML. Les styles CSS définis à l'aide de feuilles de style en ligne ne peuvent être utilisés que dans la page Web actuelle.
<!DOCTYPEhtml><html><head><title>Style en ligne</title><style>body{background-color:linen;}h1{color:maroon;margin-left:40px;}</style>< / tête><corps><h1>Style</h1></corps></html>Étant donné que la feuille de style intégrée doit définir le style CSS à l'intérieur du document HTML, cela augmentera la taille du document, et lorsque d'autres documents doivent également utiliser le même style dans la feuille de style intégrée, il ne peut pas être introduit dans d'autres documents et doit être Le redéfinir dans d'autres documents entraînera une redondance du code et ne favorisera pas une maintenance ultérieure.
2. Styles en ligne
Inline : Également appelé inline, le style CSS est défini dans l'attribut style de la balise. Cette approche ne reflète pas les avantages du CSS ;
Le style en ligne consiste à définir les informations de style directement dans l'attribut style de la balise HTML. Puisque le style en ligne est défini à l'intérieur de la balise, il n'est valable que pour la balise dans laquelle il se trouve.
<!DOCTYPEhtml><html><head><title>En ligne</title></head><body><h1style=color:maroon;margin-left:40px>En ligne</h1></body></html >Bien que le style en ligne puisse facilement donner des styles CSS aux balises HTML, ses défauts sont également très évidents et il n'est pas recommandé de trop l'utiliser.
(1) La définition de styles en ligne nécessite de définir l'attribut de style dans chaque balise HTML, ce qui est très gênant ;
(2) Soyez particulièrement prudent lorsque vous utilisez des guillemets doubles ou simples dans des styles en ligne, car les attributs des balises HTML utilisent généralement des guillemets doubles pour envelopper la valeur de l'attribut, comme <input type=text> ;
(3) Les styles définis dans les styles en ligne ne peuvent pas être réutilisés ailleurs ;
(4) Les styles en ligne sont très gênants lors d'une maintenance ultérieure, car un site Web se compose généralement de plusieurs pages et lors de la modification du style de page, les pages doivent être modifiées une par une ;
(5) L'ajout de trop de styles en ligne entraînera une augmentation de la taille du document HTML.
3. Feuilles de style externes
Type de lien : comme le quatrième type d'importation, ils sont tous deux appelés type externe ou type de lien externe. Utiliser un lien pour référencer des fichiers CSS externes ;
Les feuilles de style externes constituent le moyen le plus courant et recommandé de référencer CSS. Il vous suffit de définir le style CSS dans un fichier au format .css, puis d'utiliser la balise HTML <link> pour appliquer le fichier de style au format .css au format HTML. le document.
<!DOCTYPEhtml><html><head><title></title><linkrel=stylesheethref=./style.css></head><body><h1>Feuille de style externe</h1></body>< / html>
Le style CSS étant défini dans un fichier au format .css distinct, il peut être référencé entre plusieurs pages. Si vous souhaitez modifier le style d'une page Web, il vous suffit de modifier ce fichier de style CSS, ce qui est très pratique.
4. Importer une feuille de style
Importé : utilisez @import pour référencer des fichiers CSS externes ;
Vous pouvez également utiliser @import pour référencer des feuilles de style externes, ce qui revient à utiliser la balise <link>. Créez d'abord un style.css général et importez d'abord tous les styles dans style.css.
HTML :
<!DOCTYPEhtml><html><head><title></title><linkrel=stylesheethref=style.css></head><body><h1>Feuille de style externe</h1></body></html >
style.css :
@import1.css;@import2.css;@import3.css;@import4.css;
1.css : (les css de 1 à 4 sont les mêmes, ils ajoutent tous des styles)
.top1{list-style-type:aucun;margin:0;padding:0;}