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 :

br/>"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 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

Toujours en cascade
Il y a un point important à noter, c'est-à-dire que l'effet en cascade du CSS existe toujours. La feuille de style de remplacement est la même que les autres feuilles de style, c'est-à-dire qu'elle écrasera les règles communes. spécifiez la mise en page et le positionnement dans default.css De telles règles, et si la feuille de style du proxy ne répète pas ces règles, ces règles continueront à prendre effet. Faire fonctionner les feuilles de style de remplacement
Génial. Nous avons maintenant des feuilles de style de remplacement prêtes à l'emploi. Comment un utilisateur peut-il les activer ? Malheureusement, très peu de navigateurs ont une fonction de construction de feuilles de style de remplacement intégrée, et Mozilla est l'un des navigateurs. avec cette fonction.
S'il existe une feuille de style de remplacement, une petite icône apparaîtra dans le coin inférieur gauche de la fenêtre du navigateur. Les utilisateurs de Mozilla peuvent cliquer sur cette icône pour la lancer depuis le menu Feuilles de style de remplacement (Figure 10-). 3).
Figure 10-3 Liste des feuilles de style de remplacement de Mozilla.
J'espère que davantage de fabricants de navigateurs pourront implémenter des fonctions similaires, mais d'ici là, il existe une autre façon de changer et de remplacer les feuilles de style - vous pouvez même utilisez la magie des cookies pour enregistrer les choix de l'utilisateur.
Paul Sowden a écrit un tutoriel rare dans A List Apart, intitulé "Style alternatif : travailler avec des feuilles de style alternatives" (http://www.php.cn/). cet article, il explique comment démarrer et fermer la feuille de style de remplacement avec un morceau de JavaScript dans le navigateur
L'action de commutation est contrôlée par le super sur la page. Une fois le lien terminé, n'importe quelle feuille de style peut être sélectionnée en fonction. sur l'attribut title. Ce JavaScript définira des cookies pour enregistrer la dernière sélection de l'utilisateur, de sorte que la prochaine fois que l'utilisateur naviguera sur le site Web, en plus de la feuille de style par défaut, la feuille de style appropriée sera également activée. > Par exemple, lors de la rédaction de ce contenu, mon site Web personnel propose trois méthodes de correspondance de couleurs différentes. Chaque correspondance de couleurs peut être appelée le travail de script de Paul Sowden en cliquant sur l'icône. La première icône est la valeur par défaut, tandis que la deuxième et la troisième. les icônes sont deux feuilles de style de remplacement qui fournissent différentes méthodes de correspondance des couleurs (Figure 10-4)

Figure 10-4 Cliquez sur l'icône pour démarrer la feuille de style de remplacement Puisque JavaScript est exécuté côté utilisateur, l'action de commutation prendra effet immédiatement sans relire la page entière, et la vitesse de commutation est très rapide
Le programme JavaScript complet peut être trouvé sur A List Apart de Paul Sowden Téléchargez l'article écrit (http://www. php.cn/). Non seulement vous pouvez ajuster la taille de la police
En expérimentant l'effet en cascade, en plaçant des règles spécifiques dans la feuille de style de remplacement et en remplaçant certaines des règles par défaut, vous pouvez créer des effets interactifs très intéressants sur le site Web. un script et quelques règles CSS peuvent avoir un impact important même avec une petite bande passante. La gentillesse du DOM
Nous devons remercier une autre norme du W3C qui nous permet de remplacer les feuilles de style par un accès aux scripts. Le soi-disant DOM, ou Document Object Model, est en fait... Eh bien, jetons un coup d'œil au W3C Comment. expliquez :
Le modèle objet de document est une interface indépendante de la plate-forme et du langage. Il permet principalement aux programmes et aux scripts d'accéder et de modifier dynamiquement le contenu, la structure et le style des fichiers. Il peut également traiter davantage les fichiers, ainsi que le traitement. les résultats seront intégrés dans Dans la page affichée, c'est le concept du W3C et des autres ressources DOM sur Internet
.Cela vous semble familier, n'est-ce pas ? C'est exactement ce que fait le script de changement de style, en accédant et en mettant à jour dynamiquement les paramètres de style du document. Cela peut être facilement fait si vous suivez les normes du W3C, permettant aux développeurs d'écrire des scripts qui peuvent utiliser les paramètres établis. méthode pour accéder aux balises du code source de balisage. Si nous travaillons dur pour écrire du code source de balisage conforme aux normes, nous pouvons garantir qu'il sera plus facile d'écrire des scripts conformes au DOM standard à l'avenir et d'améliorer l'expérience utilisateur de navigation dans ceux-ci. pages.
Script de changement de style Nous n'avons fait qu'effleurer la surface de l'écriture de scripts pour le DOM, mais cela reste un excellent exemple des grands avantages qui peuvent être obtenus en écrivant des pages Web selon les standards. Conclusion
Dans ce chapitre, nous avons discuté de plusieurs façons d'appliquer le CSS aux balises, aux documents et à des sites Web entiers. Nous avons également appris comment masquer le CSS des navigateurs plus anciens et comment référencer plusieurs feuilles de style. Nous avons ensuite discuté de Provide Lo-Fi et. Feuilles de style Hi-Fi pour navigateurs avec différents niveaux de support sans avoir à écrire de scripts ou à détecter les types de navigateurs côté serveur
Enfin, j'ai appris à remplacer les feuilles de style en utilisant le DOM. L'écriture de JavaScript permet aux utilisateurs de bénéficier des avantages de la dynamique. changer de feuille de style, permettant aux utilisateurs de choisir la taille de la police, la couleur et même la mise en page.
Enfin, j'espère que ces conseils vous aideront à démarrer en douceur lors de la conception de styles !