Langage de balisage - Application Web CSS Style_HTML/Xhtml_Production de pages Web

Cliquez ici pour revenir à la colonne Tutoriel HTML du Web Teaching Network. Pour consulter les didacticiels CSS, veuillez cliquer ici. Ci-dessus : langage de balisage – balises simplifiées. Chapitre 10 Application de CSS Dans la première partie, l'accent est mis sur les exemples de syntaxe de balisage et explore également comment appliquer le CSS aux balises pour la conception et spécifier les détails de style. Dans le chapitre 2, nous aborderons plusieurs façons d'appliquer le CSS aux balises. Cliquez ici pour revenir à la colonne Tutoriel HTML Script House. Pour consulter les didacticiels CSS, veuillez cliquer ici.
Ci-dessus : Langage de balisage - balises simplifiées. Chapitre 10 Application de CSS
Dans la première partie, l'accent est mis sur des exemples de syntaxe de balisage et explore également comment appliquer CSS aux balises pour la conception et spécifier les détails de style. Dans le chapitre 2, nous aborderons plusieurs façons d'appliquer CSS à. un document, un site Web ou même une seule balise. De plus, nous verrons également comment masquer le contenu CSS des versions antérieures des navigateurs, afin de pouvoir utiliser des techniques avancées sans affecter tous les navigateurs, la structure de balisage lue par l'appareil.
Dans l'unité « Extension technique » à la fin du chapitre, nous présenterons comment changer de police, de couleur et créer plusieurs thèmes sans écrire de scripts - en remplaçant les feuilles de style. Comment appliquer CSS aux documents ?
Explorons maintenant quatre méthodes différentes d'application de CSS aux documents. Chaque méthode a ses propres avantages et inconvénients. Selon la situation, les quatre méthodes peuvent être le meilleur choix. utilise ici la structure de syntaxe transitionnelle XHTML 1.0 légale, la balise et la configuration Méthode A :

Ceci Le est également devenue une feuille de style intégrée, qui vous permet d'écrire toutes les déclarations CSS directement dans le fichier (X)HTML. La balise

avec des méthodes Semblable à B, vous pouvez utiliser @import pour importer des définitions CSS à partir de fichiers externes avec des chemins relatifs (comme l'exemple ci-dessus) ou des chemins absolus.
La méthode C présente les mêmes avantages que l'utilisation de la balise La feuille de style est placée dans le document externe, la modification et la mise à jour d'un seul document peuvent modifier l'ensemble du site Web, et cela peut être fait rapidement et facilement. Les feuilles de style externes sont mises en cache par le navigateur, ce qui permet de gagner du temps de téléchargement pour toutes les pages qui importent la même feuille de style. . Cache-cache
Le principal avantage de l'utilisation de la méthode C est que les versions de Netscape inférieures à 4. La syntaxe CSS gère les détails de conception tels que la mise en page, permettant aux derniers navigateurs capables de la gérer de les afficher, tout en permettant également aux navigateurs plus anciens d'ignorer ces syntaxes.
Le problème avec Netscape 4.x est : il pense pouvoir prendre en charge CSS. Sa qualité dépend du navigateur qui le prend réellement en charge. Par conséquent, à l'exception de Netscape 4. Le code de balisage est séparé de l'affichage et fournit des détails de mise en page et d'autres styles pour. navigateurs pris en charge. Les navigateurs plus anciens peuvent facilement lire la structure affichée du contenu, mais ne traiteront pas la règle CSS avancée qui leur est cachée. Styles ouverts, styles fermés
Regardez les figures 10-1 et 10-2 et comparez. Il s'agit de mon site Web personnel utilisant CSS complet, puis désactivant l'effet d'affichage CSS (il devrait être très proche de l'effet d'affichage de. l'ancien navigateur) Effet), la structure sans utiliser de CSS est toujours très évidente, et elle est toujours facile à lire et à utiliser pour tout le monde. Si nous ne masquons pas le CSS requis pour afficher la mise en page, alors les utilisateurs d'anciens navigateurs peuvent obtenir un. désordre difficile à lire.

Figure 10-1 Mon site Web personnel, utilisant CSS

Figure 10-2 La même page, supprimez le CSS, ancien les navigateurs peuvent le modifier Affiché comme ceci Combiner la méthode B et la méthode C pour appliquer plusieurs feuilles de style
Parfois, il peut être utile d'introduire plusieurs feuilles de style dans un document. Par exemple, vous pouvez regrouper toutes les règles de mise en page dans un seul document et définir les paramètres de police. un autre document peut faciliter la gestion d'un grand nombre de règles pour les conceptions volumineuses et complexes. Effet caméléon
Lors de la création du site Web du magazine Fast Company, j'espère changer la couleur du site Web chaque mois pour qu'elle corresponde à l'image de couverture du magazine actuel. Afin de simplifier le travail de modification régulier, j'ai centralisé toutes les couleurs. règles CSS associées dans un document, et mettre les autres règles qui ne seront pas modifiées chaque mois dans un autre document
Il sera plus facile et plus rapide de couvrir toutes les couleurs chaque mois sans avoir à ajouter des centaines d'autres règles qui les composent. la conception Recherchez lentement le contenu qui doit être modifié Tant que ce document est modifié, la couleur de l'ensemble du site Web changera immédiatement. Comment faire
Pour combiner la méthode B et la méthode C pour introduire plusieurs feuilles de style, la méthode consiste à utiliser la balise dans le la démonstration de la méthode B, lien vers styles.css .
Le contenu de styles.css contient simplement quelques règles @import pour introduire d'autres fichiers CSS requis.
Par exemple, si vous souhaitez introduire trois feuilles de style, une pour la mise en page et un pour Définir la police et définir la couleur, alors le contenu de styles.css peut ressembler à ceci :

/*Les anciens navigateurs n'interpréteront pas ces règles d'importation*/
@import url( "layout .css");
@import url("fonts.css");
@import url("colors.css");

De cette façon, la même URL peut être utilisé sur tout le site Web La balise fait uniquement référence au fichier styles.css. Ce document peut continuer à importer d'autres feuilles de style en utilisant la règle @import. Tant que la nouvelle feuille de style est ajoutée à ce document, elle aura un. effet sur l'ensemble du site.
Cela permet La mise à jour et le remplacement du CSS sont devenus très simples. Par exemple, si vous souhaitez soudainement diviser le CSS en 4 fichiers en cours de route, il vous suffit de modifier la règle @import de ce document sans. devoir modifier tout le code source du balisage XHTML. Styles Lo-Fi et Hi-Fi
Lorsque vous utilisez la règle @import de la méthode C pour masquer le CSS des anciens navigateurs, il existe une autre astuce qui consiste à utiliser l'effet en cascade du CSS pour fournir aux anciens navigateurs la méthode A ou. méthode B. Les effets Lo-Fi sont pris en charge par les anciens et les derniers navigateurs, puis utilisez @import pour fournir des effets avancés pour les autres navigateurs pris en charge
Les anciens navigateurs n'obtiendront que le contenu qu'ils peuvent prendre en charge, tandis que les plus récents n'obtiendront que le contenu qu'ils peuvent prendre en charge. le contenu qu'ils peuvent prendre en charge. Le navigateur obtiendra tous les styles que vous souhaitez utiliser.
Voyons ensuite à quoi ressemble le code de cette technique :

"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">

Ici, lofi.css doit contenir des règles CSS de base, telles que la couleur du lien et la taille de la police ; tandis que hifi.css contient des règles avancées, telles que la mise en page, le positionnement, les images d'arrière-plan, etc.
Nous pouvons envoyer Lo- en même temps. et Hi-Fi du style sans avoir à écrire de script ou à identifier la version du navigateur de quelque manière que ce soit côté serveur. L'ordre est important
L'ordre dans lequel les balises et

En raison de la personnalisation, le CSS apparaît. deuxième dans le code source du balisage, donc les styles qu'il spécifie pour la même balise remplaceront le contenu spécifié dans master.css
Par exemple, supposons que dans main.css nous ayons besoin de < , tandis que

utilise une police serif bleue.

h1 {
famille de polices : Georgia, serif;
couleur : rouge;
}
h2 {
font-family: Georgia, serif;
color: blue;
}

Sur une page spécifique, nous voulons juste changer le style de la balise

de

. Ensuite, dans custom.css, il suffit de déclarer un nouveau style pour

.

h1 {
font-family: Verdana, sans- serif;
color: orange;
}

Cette instruction remplacera l'instruction dans master.css (car custom.css est introduit après) Si la page importe master.css en premier Si custom.css est à nouveau introduit). , la balise

utilisera la police Verdana orange, tandis que la balise

sera toujours la police serif bleue car cette dernière instruction dans master.css n'a pas été remplacée par custom.css.
La mise en cascade. La fonction CSS est un excellent outil pour partager des styles communs, vous permettant de remplacer uniquement les règles qui doivent être modifiées.

Méthode D : styles en ligne

Ceci est un titre

Il s'agit de la quatrième méthode d'application CSS que nous avons rencontrée - style en ligne, presque toutes les étiquettes peuvent être stylisées comme propriétés, vous permettant d'appliquer les règles de style CSS directement aux balises, comme dans l'exemple ci-dessus
Puisque les styles en ligne sont la couche inférieure de la pile, ils remplaceront toutes les déclarations de style externes, ainsi que Règles dans la balise style>
C'est un moyen simple d'ajouter des styles partout sur la page, mais il y a un prix à payer pour son utilisation. Les styles sont liés aux balises
Si vous comptez trop sur la méthode D lors de la formulation des styles pour la page, vous ne parvenez pas à séparer le contenu et la présentation. Lorsque vous revenez pour le modifier, vous devez marquer profondément le code source et le mettre. le CSS dans le fichier séparé, la maintenance est beaucoup plus simple.
Abuser la méthode D n'est pas différent de l'utilisation de balises d'effet d'affichage telles que pour polluer le code source de la marque. A utiliser avec prudence
Dans des situations réelles, bien sûr, il arrive parfois que vous ayez la possibilité d'utiliser des styles en ligne. Lorsque vous devez ajouter des styles à la page, mais que vous ne pouvez pas accéder aux fichiers externes ou que vous ne pouvez pas modifier le , cela peut vous sauver la vie. , ou appliquer temporairement le style. , il est également utilisé lorsqu'il n'est pas destiné à être partagé avec d'autres balises
Par exemple, s'il y a une page sur le site qui annonce une vente caritative, elle sera supprimée ultérieurement. , et vous souhaitez concevoir un ensemble unique de balises pour cette page, puis peut-être intégrer ces règles de style dans la balise au lieu de les ajouter à la feuille de style permanente
Faites-le maintenant, mais sachez que ces styles ne le peuvent pas. être facilement modifié, ou s'étendre sur la page pour utiliser l'ensemble du site Web.
                                                                                      #p# Résumé
Nous avons examiné quatre façons différentes d'appliquer le CSS au contenu de balisage et avons constaté que chaque méthode présente ses propres avantages pour faire face à des situations particulières. Passons en revue chaque méthode, ainsi que ses avantages et ses inconvénients.
Méthode A : Les styles doivent être placés dans le de chaque page. De nombreuses pages ne peuvent pas partager la même feuille de style et doivent être téléchargées à nouveau à chaque lecture de la page. Les styles placés dans