Cliquez ici pour revenir à la colonne de tutoriel Wulin.com HTML. Si vous souhaitez parcourir le tutoriel CSS, veuillez cliquer ici.
Ci-dessus: Langue de balisage - Tags Lite . Chapitre 10 Appliquer CSS
Dans la première partie, l'accent est mis sur l'exemple de la syntaxe de balise, et nous explorons également comment appliquer CSS sur la balise pour la conception et spécifier les détails du style. Dans le deuxième chapitre, nous discuterons de plusieurs façons d'appliquer CSS à un document, un site Web ou même une seule balise. De plus, nous discuterons également de la façon de masquer le contenu CSS des versions précédentes des navigateurs afin que nous puissions utiliser des techniques avancées sans affecter la structure de balise qui peut être lue par tous les navigateurs et appareils.
Dans la dernière unité d'extension de pointe du chapitre, nous présenterons la pratique de la commutation des polices, des couleurs et de la fabrication de plusieurs thèmes sans avoir à écrire des scripts - remplacer les feuilles de style. Comment appliquer CSS aux fichiers?
Nous allons maintenant discuter de quatre façons différentes d'appliquer CSS aux documents. Chaque méthode présente ses propres avantages et inconvénients. Selon la situation, les quatre méthodes peuvent être le meilleur choix. Chaque méthode démontrée ici utilise la structure de syntaxe de transition XHTML 1.0 légale, la configuration de la balise <HTML> et <A-Head>.
Commençons par la méthode A. Méthode A: <style> Tag
<! Doctype html public - // w3c // dtd xhtml 1.0 transitional // en
http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<adal>
<meta http-equiv = contenu contenu contenu = text / html; charse = utf-8 />
<Title> Application de CSS </TITME>
<style type = text / css> <! [Cdata [... La déclaration CSS est mise ici ...
]]> </ style></ head>
Cette approche devient également une feuille de style intégrée, vous permettant d'écrire toutes les déclarations CSS directement dans (x) fichier html, et la balise <ystyle> est située dans la page <adread> et peut être placée dans n'importe quel style dont vous avez besoin.
Le texte / CSS spécifié pour l'attribut type garantit que le navigateur comprend le langage de style que nous utilisons et ne peut pas être omis. Nous utilisons également la syntaxe d'annotation CDATA recommandée par W3C pour masquer ces contenus aux navigateurs qui ne peuvent pas gérer les règles de style (http://www.w3.org/tr/xhtml1/#h-4.8).
L'un des principaux inconvénients de l'utilisation de la méthode A est que certains anciens navigateurs (en particulier Internet Explorer 4.x et Netscape 4.x) feront de leur mieux pour afficher l'effet CSS spécifié dans la balise <style>. Si vous utilisez des règles de mise en page et de positionnement CSS avancées qui ne prennent en charge que le dernier navigateur, cela peut causer des problèmes. Si vous mettez des règles CSS complexes dans la balise <style>, cela peut provoquer des résultats de composition déroutants et difficiles à lire pour les utilisateurs de vieux navigateurs. Il ne peut pas être mis en cache.
Un autre inconvénient des feuilles de style embarquées est: si elle est placée dans la page, vous devez la télécharger ensemble à chaque fois que vous lisez la page. En revanche, d'autres méthodes fournies ultérieurement peuvent permettre à la feuille de style d'être téléchargée une seule fois, puis utiliser directement le cache du navigateur. Modifiez-le plusieurs fois.
Étant donné que la feuille de style intégrée est stockée dans des pages XHTML, si le même style est utilisé sur de nombreuses pages du site Web, cela signifie que ces styles auront de nombreuses copies identiques. Si vous devez modifier ces styles, vous devez modifier toutes les pages qui utilisent le même style. Souviens-toi! Modifier de nombreux documents à la fois sera une corvée. Il est pratique de développer
En parlant des avantages, j'ai constaté que lorsque j'ai commencé à écrire et tester CSS, il était très pratique d'écrire toutes les règles de la page que j'ai utilisées pour tester en utilisant la méthode A. Cela m'a permis de mettre les marques et les styles dans le même document, ce qui était pratique pour une modification fréquente. Une fois le test terminé, j'appliquerai CSS à la version publique de différentes manières. Jetons un coup d'œil à plusieurs méthodes. Méthode B: Fiche de style externe
<! Doctype html public - // w3c // dtd xhtml 1.0 transitional // en
http://www.w3.org/tr/2000/rec-xhtml1-20000126/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<adal>
<meta http-equiv = contenu contenu contenu = text / html; charse = utf-8 />
<Title> Application de CSS </TITME>
<link rel = Stylesheet type = text / css href = styles.css _fcksavedUrl = styles.css /></ head>
La méthode B démontre la pratique de la connexion des feuilles de style externe: mettez tous les contenus de la déclaration CSS dans un document séparé, puis référez son contenu à l'aide de la balise <nk> dans le (x) html <éadf.
Nous utilisons l'attribut HREF pour spécifier l'emplacement du document. Cet attribut peut être un chemin relatif (tel que l'exemple ci-dessus), ou un chemin absolu (rempli dans la position complète http: // de la feuille de style). Dans le même temps, notez que <nk> est une seule balise ou une balise vide et doit être fermée à la fin. Séparer le document = pratique pour la maintenance
Il y a un avantage clair de mettre toutes les règles CSS dans des documents différents du contenu tagué: c'est-à-dire que les modifications de style apportées à l'ensemble du site Web peuvent être modifiées pour compléter le fichier sans avoir à modifier à plusieurs reprises l'instruction CSS pour chaque page Web comme lors de l'utilisation de la méthode A.
Bien sûr, cela est très critique pour les sites Web à grande échelle. Des centaines, voire des milliers de pages peuvent partager le même style dans un seul document. Télécharger une fois
L'un des avantages supplémentaires de la liaison des feuilles de style externe est que ce document n'est généralement téléchargé qu'une seule fois, et le navigateur utilisera Cache, ce qui peut gagner le temps de téléchargement requis lors de la navigation à plusieurs reprises sur la même page ou d'autres pages qui font référence à la même feuille de style. Il ne peut toujours pas être complètement caché.
Comme la méthode A, la méthode B peut toujours être ancien et ne prend en charge que certaines fonctions CSS pour interpréter les navigateurs. Tout style conçu pour les derniers navigateurs peut provoquer une grande confusion dans les navigateurs non pris en charge.
Eh bien ... c'est la deuxième fois que je mentionne ce problème, la prochaine méthode doit le résoudre, non? Méthode C: @Import
<! Doctype html public - // w3c // dtd xhtml 1.0 transitional // en
http://www.w3.org/tr/2000/rec-xhtml1-20000126/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<adal>
<meta http-equiv = contenu contenu contenu = text / html; charse = utf-8 />
<Title> Application de CSS </TITME>
<style type = text / css> <! [Cdata [ @Import Styles.css; ]]> </ style></ head>
Semblable à la méthode B, l'utilisation de @Import peut importer des définitions CSS à partir de fichiers externes avec des chemins relatifs (tels que l'exemple ci-dessus) ou des chemins absolus.
La méthode C présente les mêmes avantages que l'utilisation de la balise <nk>. Étant donné que la feuille de style est placée dans un document externe, la modification et la mise à jour d'un seul document peuvent modifier l'intégralité du site Web et peuvent être achevées facilement et rapidement. La feuille de style externe sera mise en cache par le navigateur, ce qui gagne le temps de téléchargement pour importer toutes les pages de la même feuille de style.
Le principal avantage de l'utilisation de la méthode C est que les versions suivantes de Netscape 4.x ne prennent pas en charge la syntaxe @Import, donc il masquera le contenu CSS référencé. Il s'agit certainement d'une astuce utile, car nous pouvons écrire une syntaxe CSS avancée pour gérer les détails de conception tels que les dispositions, afin que les derniers navigateurs qui peuvent gérer les afficher, et aussi faire en sorte que les anciens navigateurs ignorent ces syntaxes.
Le problème avec NetScape 4.x est qu'il pense que ses capacités de soutien CSS sont aussi bonnes que celles qui sont réellement soutenues. Par conséquent, à l'exception de NetScape 4.x, nous pouvons laisser le navigateur décider s'il faut afficher l'effet correct par lui-même.
C'est le point clé lors de la conception de sites Web en fonction de la conception standard. Essayez de séparer le code de balise structuré du mode d'affichage et fournissez des détails de mise en page et d'autres styles pour les navigateurs pris en charge. Les anciens navigateurs utilisent du contenu structuré qu'ils peuvent facilement lire et afficher, mais ne traiteront pas les règles CSS avancées cachées pour eux. Styles ouverts et styles fermés.
Regardez les figures 10-1 et 10-2 et comparez-la. Ceci est mon site Web personnel à l'aide du CSS complet, puis éteignez l'effet d'affichage du CSS (il devrait être très proche de l'effet d'affichage des anciens navigateurs). La structure lorsque vous n'utilisez pas CSS est toujours très évidente, et il est toujours facile à lire et à utiliser. Si nous ne masquons pas le CSS requis pour la disposition d'affichage, les utilisateurs des anciens navigateurs peuvent obtenir un tas de contenu difficile à lire.
Figure 10-1 mon site Web personnel, en utilisant CSS
Figure 10-2: Supprimez CSS sur la même page, et l'ancien navigateur peut l'afficher comme une combinaison de la méthode B et de la méthode C pour appliquer une feuille de style multiple.
Parfois, il peut être utile d'introduire de nombreuses feuilles de style dans un document, par exemple, vous pouvez mettre toutes les règles de mise en page dans un document et des paramètres de police dans un autre document, ce qui peut faciliter le maintien d'un grand nombre de règles plus facile pour les grandes conceptions complexes. Effets de la caméléon
Lorsque je créais un site Web pour le magazine Fast Company, je voulais modifier la palette de couleurs du site Web chaque mois afin qu'il puisse correspondre à l'image de couverture du magazine actuel. Afin de simplifier le travail de modification régulière, j'ai mis toutes les règles CSS liées aux couleurs dans un document et mettre d'autres règles qui ne seraient pas modifiées chaque mois dans un autre document.
Il peut être plus facile et rapide de couvrir toutes les couleurs chaque mois, sans avoir à trouver lentement le contenu qui doit être modifié dans les centaines d'autres règles qui composent la conception. Tant que ce document est modifié, la couleur de l'ensemble du site Web sera changé immédiatement. Comment faire
Pour introduire plusieurs feuilles de style en combinaison avec la méthode B et la méthode C, la méthode consiste à utiliser la balise <nk> dans la page pour référencer le document principal CSS, identique à la démonstration de la méthode B, et lien vers Styles.css.
Le contenu de Styles.css ne contient que quelques règles @Import et introduit les autres fichiers CSS requis.
Par exemple, si vous souhaitez introduire trois feuilles de style, une pour traiter la disposition, une pour définir les polices et une pour définir la couleur, alors le contenu de Styles.css pourrait ressembler à ceci:
/ * Les anciens navigateurs n'interpréteront pas ces règles d'importation * /
@Import URL (Layout.CSS);
@Import URL (FONTS.CSS);
@Import URL (couleurs.css);
De cette façon, la même balise <nk> peut être utilisée sur tout le site Web, et seul le fichier Styles.css est référencé. Ce document peut continuer à importer d'autres feuilles de style avec la règle @Import. Tant que la nouvelle feuille de style est ajoutée à ce document, elle peut jouer un rôle dans l'ensemble du site Web.
Cela le rend très facile à mettre à jour et à remplacer CSS. Par exemple, si vous souhaitez soudainement couper CSS en 4 fichiers sur la route, il vous suffit de modifier les règles @Import de ce document sans modifier tous les styles Source Source.Lo-Fi et Hi-Fi XHTML
Il y a une autre astuce pour masquer CSS aux anciens navigateurs en utilisant la règle de la méthode @Import C. c'est-à-dire d'utiliser l'effet en cascade de CSS, et d'utiliser la méthode A ou la méthode B pour fournir des navigateurs anciens et les plus récents pour prendre en charge les effets LO-Fi, puis utiliser @Import pour fournir des effets avancés pour d'autres navigateurs pris en charge.
Les navigateurs plus âgés n'obtiendront que du contenu qu'ils peuvent prendre en charge, tandis que les nouveaux navigateurs obtiendront tous les styles qu'ils souhaitent utiliser.
Voyons à quoi ressemble le code de cette technique:
<! Doctype html public - // w3c // dtd xhtml 1.0 transitional // en
http://www.w3.org/tr/2000/rec-xhtml1-20000126/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<adal>
<meta http-equiv = contenu contenu contenu = text / html; charse = utf-8 />
<Title> Application de CSS </TITME>
<link rel = Stylesheet type = text / css href = lofi.css _fcksavedUrl = lofi.css /> <style type = text / css> @import hifi.css; </ style></ head>
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 transmettre des styles de version LO-Fi et Hi-Fi sans avoir à rédiger des scripts ou à identifier les versions du navigateur de quelque manière que ce soit du côté du serveur. L'ordre est important
Il est important de spécifier les balises Ordre des balises <ink> et <style> dans le code source de balise. La cascade de CSS fait référence à la priorité des règles, qui est déterminée en fonction de l'ordre d'occurrence.
Par exemple, comme la plupart des derniers navigateurs prennent en charge les deux méthodes, toutes les feuilles de style seront téléchargées et que tous les styles y seront appliqués. À l'heure actuelle, les règles de style dans HiFi.CSS remplaceront les styles spécifiés par Lofi.css pour la même balise. Quelle est la raison? Parce que dans le code source de balise, Hifi.css apparaît après lofi.css.
Les navigateurs plus âgés ignorent Hifi.css car la règle @Import n'est pas prise en charge, ils utilisent donc uniquement le style défini par Lofi.css. Embrasser la fonction Cascade
Les avantages de la cascgéité CSS sont provoqués de diverses manières. Par exemple, supposons que l'intégralité de votre site Web partage un CSS externe pour la mise en page, le positionnement, la définition des polices, des couleurs, etc., alors vous devriez utiliser la feuille de style @import sur chaque page pour masquer ces règles pour les anciens navigateurs.
S'il y a une page sur le site Web qui souhaite partager des paramètres de mise en page et de positionnement, mais doit ajuster la police ou la couleur. Dans cette page (différente des autres pages du site Web), le document principal CSS peut toujours être introduit. Après avoir terminé la référence, nous nous référerons au deuxième document CSS qui définit un style spécial pour cette page. Toutes les règles du deuxième fichier CSS seront privilégiées, écrasant les règles de style spécifiées par le premier fichier CSS pour la même étiquette.
Regardons l'exemple. Master.css contient toute la structure du site Web, les polices et autres règles CSS, tandis que dans Custom.css, il n'est référencé que sur une page spécifique, couvrant les paramètres de style de plusieurs balises spéciales.
<! Doctype html public - // w3c // dtd xhtml 1.0 transitional // en
http://www.w3.org/tr/2000/rec-xhtml1-20000126/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml xml: lang = en lang = en>
<adal>
<meta http-equiv = contenu contenu contenu = text / html; charse = utf-8 />
<Title> Application de CSS </TITME>
<style type = text / css> @Import Master.css; @Import Custom.css; </ style></ head>
Étant donné que Custom.css est le deuxième dans le code source de balise, le style qu'il spécifie pour la même balise remplacera ce qui est formulé dans Master.css.
Par exemple, supposons que dans Main.css, nous avons besoin que la balise <h1> utilise la police Red Serif, et <h2> pour utiliser la police Blue Serif.
H1 {
Font-Family: Géorgie, Serif;
Couleur: rouge;
}
H2 {
Font-Family: Géorgie, Serif;
Couleur: bleu;
}
Sur une page spécifique, nous voulons seulement modifier les paramètres de style de la balise <h1> et suivre le style de <h2>. Ensuite, dans Custom.css, nous devons seulement déclarer le nouveau style pour <h1>.
H1 {
Font-Family: Verdana, Sans-Serif;
couleur: orange;
}
Cette déclaration remplacera la déclaration dans Master.css (car Custom.css est introduite plus tard). Si la page présente d'abord Master.CSS puis personnalisé.css, la balise <h1> utilisera la police orange Verdana, tandis que <h2> est toujours Blue Serif Font. Parce que la déclaration ultérieure dans Master.css n'est pas remplacée par Custom.css.
La fonction en cascade de CSS est un excellent outil pour partager des styles communs, vous permettant de couvrir uniquement les règles qui doivent être modifiées.
<H1 Style = Font-Family: Georgia, Serif; Couleur: Orange;> Ceci est un titre </H1>
Il s'agit de la quatrième méthode d'application CSS avec laquelle nous sommes entrés en contact - les styles en ligne. Presque n'importe quelle balise peut être ajoutée avec des attributs de style, vous permettant d'appliquer directement des règles de style CSS aux balises, tout comme l'exemple ci-dessus.
Étant donné que les styles en ligne sont la couche d'empilement la plus basse, ils remplacent toutes les déclarations et règles de style externe déclarées dans la balise <ystyle> de <A-head>.
C'est un moyen simple d'ajouter des styles sur toute la page, mais il doit être payé pour l'utiliser. Le style est lié à l'étiquette
Si vous comptez trop sur la méthode D lors de la fabrication de styles pour la page, vous ne séparerez pas les méthodes de contenu et d'affichage. Lorsque vous revenez en arrière et modifiez, vous devez marquer le code source en profondeur et mettre CSS dans le fichier séparé, qui sera beaucoup plus facile à maintenir.
La méthode d'abus D n'est pas différente de l'utilisation d'étiquettes d'effet d'affichage telles que <FONT> pour contaminer le code source. Ces détails de conception doivent toujours être placés ailleurs. Faites attention à utiliser
En réalité, bien sûr, l'opportunité d'utiliser des styles en ligne est de vous sauver la vie lorsque vous devez ajouter des styles à la page, mais vous ne pouvez pas accéder aux fichiers externes, ou vous ne pouvez pas modifier <A-thead>, ou vous pouvez utiliser le style temporairement et vous l'utiliserez également lorsque vous n'avez pas l'intention de le partager avec d'autres balises.
Par exemple, s'il y a une page sur le site Web qui prévisualise une vente de charité qui sera supprimée plus tard et que vous souhaitez concevoir un style unique pour cette page, alors peut-être intégrer ces règles de style dans la balise sans les ajouter à la feuille de style permanent.
Faisons-le maintenant, mais sachez que ces styles ne peuvent pas être modifiés facilement ou sont utilisés sur toute la page pour l'ensemble du site Web.
Page précédente 1 2 3 Page suivante Lire le texte intégral