CSS (Cascading Styel Sheet) est une série de règles de formatage qui contrôlent l'apparence des pages Web. C'est l'un des outils essentiels pour la conception Web. Ensuite, nous commencerons à apprendre le format de syntaxe de base du CSS.
1. Règles de définition CSS
Une feuille de style en cascade est un fichier texte brut complet, généralement utilisé comme fichier distinct avec une extension « css ». Son contenu contient un ensemble de règles qui indiquent au navigateur comment organiser et afficher le contenu dans des règles de définition CSS spécifiques. se compose de trois parties : les sélecteurs, les attributs et les valeurs d'attribut. La syntaxe est la suivante :
Syntaxe : sélecteur { propriété : valeur }
↑ ↑ ↑
sélecteur {propriété : valeur}
Les styles CSS consistent en une série de règles analysées par les navigateurs Web puis appliquées aux éléments correspondants d'un document HTML. Les règles de style CSS se composent de trois parties, à savoir les sélecteurs, les attributs et les valeurs :
1. Sélecteur : Le sélecteur est la balise html permettant de définir le style. Une fois la balise html définie comme sélecteur, le contenu sous la balise dans la page html sera modifié selon les règles définies par CSS.
2. Attribut : le nom de style que vous souhaitez définir pour l'élément HTML fait référence au contenu à modifier dans le sélecteur. Les attributs courants incluent : les attributs de police, les attributs de couleur, les attributs de texte, etc. Vous trouverez ci-dessous une feuille de style que nous avons définie.
3. Valeur : La valeur d'un attribut, composée d'une valeur numérique et d'une unité ou d'un mot-clé, est utilisée pour contrôler l'effet d'affichage d'un certain attribut.
@charsetgb2312;body{font-family:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}Dans cette feuille de style :
1. @charsetgb2312 ; signifie utiliser le jeu de caractères standard national chinois.
2. body et p sont deux balises en html, et trois styles sont définis pour ces deux balises, à savoir :
font-family : Spécifie le type de police de la police.
"> 2. Intégrer une feuille de style
La feuille de style CSS définie à l'intérieur de la page HTML est appelée feuille de style CSS intégrée, c'est-à-dire que dans la partie d'en-tête du document HTML, la balise de style est utilisée et une série de règles CSS sont définies dans la balise.
Syntaxe : <head><styletype=text/css><!--......--></style></head>
illustrer:
<style> indique le début de la feuille de style CSS et la marque de fin est </style> Dans la marque de début <style>, vous pouvez ajouter certains attributs si nécessaire, tels que l'attribut type=text/css ci-dessus. colonne, qui indique que la feuille de style CSS adopte le type MIME, la caractéristique de ce type est que lorsque le navigateur ne supporte pas le code CSS, le code CSS est filtré pour empêcher le navigateur d'afficher le code CSS sous forme de. code source. Afin de garantir plus de fiabilité, ajoutez à nouveau l'identifiant de commentaire <!--...--> dans la feuille de style. Les règles CSS sont définies dans cet identifiant de commentaire.
Exemple 1 : t1.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Feuille de style CSS intégrée</title><styletype=text/css><!--@charsetgb2312 ; {font-fa mily :宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}--></style></head><body> Les oiseaux de milliers de montagnes volent sur des milliers de sentiers et les traces humaines sont effacées<p>Les oiseaux de milliers de montagnes volent sur des milliers de sentiers et les traces humaines sont effacées</p></body></html>3. Lien vers des feuilles de style externes
Une feuille de style CSS externe est un fichier externe avec un suffixe .css. La définition d'une feuille de style externe peut être appliquée à plusieurs pages. À l'aide de la balise link dans la page HTML, vous pouvez connecter la feuille de style CSS externe. La syntaxe est la suivante :
grammaire:
<linkrel=stylesheethref=*.css” type=text/css>
paramètre:
1. L'attribut rel indique comment la feuille de style sera combinée avec le document HTML. valeur rel : feuille de style, indiquant la spécification d'une feuille de style externe
2. *.css est un fichier de feuille de style enregistré séparément.
Exemple 2 Définissez un fichier CSS externe p2.css, puis connectez le fichier dans le fichier t2.htm.
Exemple 2 : t2.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Lien vers une feuille de style externe</title><styletype=text/css><!--@charsetgb2312; corps {font-family:宋体;f ont-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}--></style></head><body>Cher, tu voles lentement, fais attention à la rose épineuse devant<p>Ma chérie, ouvre la bouche, le parfum des fleurs dans le vent t'enivrera</p></body></html>4. Feuilles de style en ligne
Les styles en ligne font référence aux feuilles de style CSS définies dans les balises spécifiques au HTML. Les balises HTML couramment utilisées concernent principalement certains éléments de BODY, tels que : <p>, <h2>, <ul>, <div>, etc. Voici des exemples de styles en ligne.
Exemple 3 : t3.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Document sans titre</title></head><body><divstyle=color:blue;font-size :30px;>Le parfum des fleurs dans le vent vous enivrera</div><pstyle=color:#ff0000;font-style:italic;>Le parfum des fleurs dans le vent vous enivrera</p>< /corps></html>
5. Importez des feuilles de style externes
Importer une feuille de style externe signifie qu'une feuille de style intégrée a été établie dans le fichier html, mais certains paramètres de la feuille de style externe doivent être utilisés. Dans ce cas, vous pouvez importer une feuille de style externe dans <style> et utiliser @. importer, comme le montre l’exemple ci-dessous.
<html><head><styletype=text/css><!--@importurl(mystyle.css);Déclaration d'autres feuilles de style--></style></head></body>..... .</body></html>
Parmi eux, @import url(mystyle.css); signifie importer la feuille de style mystyle.css. La feuille de style externe importée doit être au début de la feuille de style, au-dessus de la feuille de style interne.
Exemple 4
Définissez un fichier CSS externe p4.css, puis importez le fichier dans le fichier t4.htm
Exemple 4 : t4.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Importer une feuille de style externe</title><styletype=text/css><!--@importurl(p4 .css);@charsetgb2312;corps {font-family:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}--></style></head> <body>Des milliers d'oiseaux volent à travers des milliers de montagnes et aucune trace d'êtres humains n'est visible<p>Des milliers d'oiseaux volent à travers des milliers de montagnes et aucune trace d'êtres humains n'est visible</p></body></html>6. Héritage des feuilles de style CSS
Dans la feuille de style CSS, certains attributs de la balise enfant hériteront des attributs de la balise parent. Par exemple, la balise p est un élément enfant du corps de la balise. Lorsque la balise p ne définit pas l'attribut de couleur de police, le contenu. in p utilisera la couleur dans la valeur du corps, l'exemple suivant illustre cette situation.
Exemple 5 : t5.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Feuille de style CSS intégrée</title><styletype=text/css><!--@charsetgb2312 ; { font-family:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;}--></style></head><body>千山鸟En volant sur des milliers de chemins, les traces humaines sont effacées<p>Des milliers de montagnes, des oiseaux volent sur des milliers de chemins, les traces humaines sont effacées</p></body></html>7. Définir plusieurs éléments
CSS permet d'appliquer un seul format à plusieurs balises. Chaque balise est séparée par une virgule lorsqu'elle est utilisée comme sélecteur, comme le montre l'exemple suivant.
Exemple 6 : t6.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Feuille de style CSS intégrée</title><styletype=text/css><!--@charsetgb2312; ,h2,h3 ,p,{font-family:宋体;color:#FF0000;}--></style></head><body><h1>Des milliers d'oiseaux volent à travers des milliers de montagnes et des milliers de personnes disparaissent</h1> <h2> Les oiseaux de milliers de montagnes volent sur des milliers de sentiers, disparaissant sans laisser de traces. </h2><h3> Les oiseaux de milliers de montagnes volent sur des milliers de sentiers, disparaissant sans traces de personnes. </h3><p> Oiseaux depuis des milliers de montagnes, volez sur des milliers de chemins, disparaissant sans laisser de traces</p></ body></html>