Cliquez ici pour revenir à la colonne de tutoriel Wulin.com HTML.
Ci-dessus: Langue de balisage - Parlez à nouveau de la liste
Source originale Chapitre 9 Lite Tags
Auparavant, nous avons continué à mentionner que le contenu structuré peut classer la structure et les détails de conception et rationaliser les balises. Que devons-nous faire? Nous pouvons utiliser XHTML et CSS qui répondent aux normes au lieu de tables et d'images pour créer la disposition dont nous avons besoin.
Lorsque vous utilisez la technologie standard pour créer des sites Web (en particulier les sites Web qui reposent fortement sur CSS), nous développons souvent une mauvaise habitude, qui est d'ajouter des balises supplémentaires et des attributs de classe, et la technologie n'en a pas du tout besoin.
En utilisant des sélecteurs descendant dans CSS, nous pouvons éliminer les propriétés inutiles <v>, <span> et de classification. Les balises simplifiées signifient que les pages seront lues plus rapidement et plus faciles à entretenir. Dans ce chapitre, nous discuterons de plusieurs façons simples d'accomplir cette tâche. Comment rationaliser les balises lors de la création d'un site Web avec une technologie standard?
Les balises simplifiées sont un sujet important qui mérite d'être discuté. Lors de la création d'un site Web, l'un des énormes avantages qui peut être obtenu en écrivant dans XHTML légitime et en définissant des effets d'affichage avec CSS est les balises rationalisées. Le code court représente une vitesse de téléchargement plus rapide, qui est certainement la clé pour les utilisateurs qui utilisent 56k Dial-up pour accéder à Internet. Le code court représente également les exigences de l'espace du serveur et réduit la consommation de bande passante, ce qui peut rendre le gestionnaire de boss et le gestionnaire du système.
Le problème est que la simple confirmation que la page est conforme à la spécification standard W3C ne signifie pas que le code utilisé dans le contenu sera raccourci. Bien sûr, vous pouvez ajouter diverses balises indésirables au contenu de balise qui répond aux normes. Oui, il répond aux normes, mais il a peut-être ajouté beaucoup de code inutile pour faciliter la conception de CSS.
N'ayez pas peur! Il y a ici quelques conseils qui vous permettent de concevoir concis et d'avoir du contenu de marquage standard, mais également de conserver suffisamment de capacités de contrôle de style CSS. Ensuite, apprenons quelques conseils simples pour rationaliser les balises. Sélecteur d'héritage
Ici, nous examinerons deux façons de marquer la barre latérale (y compris des informations, des liens et d'autres choses) sur un site Web personnel. Des farces toutes les bonnes choses dans un <v> avec un ID sont une barre latérale afin qu'elle puisse être placée dans une fenêtre de navigateur plus tard (la deuxième partie discutera de la fonctionnalité CSS Payout / Type). Méthode A: Classification heureuse
<div id = barre latérale>
<H3 CLASS = Side -heding> à propos de ce site </h3>
<p> c'est mon site. </p>
<h3 class = Sideheding> mes liens </h3>
<ul class = SideLlinks>
<li class = link> <a href = archives.html> archives </a> </li>
<li class = link> <a href = about.html> À propos de moi </a> </li>
</ul>
</div>
J'ai vu un contenu tagué similaire à la méthode A sur de nombreux sites Web. Lorsque le concepteur a découvert la puissance de CSS pour la première fois, il est facile d'être submergé et de spécifier une classe pour chaque balise qui souhaite créer un style spécial.
Dans l'exemple précédent, nous pensons peut-être que <h3> spécifie class = la tête latérale pour les aider à spécifier des styles différents des autres titres de la page; La spécification de la classe pour <ul> et <li> est également pour la même raison. Classification CSS
Lorsque vous spécifiez le style, supposons que nous voulions que le titre tourne orange, utilisez la police Serif, avec un bord gris clair en bas, et la liste non ordonnée à la touche doit supprimer le petit symbole de points et changer l'élément de liste en gras.
Le contenu CSS requis par la méthode A ressemblera à ceci:
.sideheading {
Font-Family: Géorgie, Serif;
Couleur: # C63;
Border-Bottom: 1px solide #ccc;
}
.sideLinks {
Type de style liste: aucun;
}
.lien {
Police-poids: Bold;
}
Nous pouvons nous référer aux noms de classe (classes) établis dans les balises pour spécifier des styles spéciaux pour ces balises, et vous pouvez même imaginer que d'autres parties de la page sont organisées de cette manière: barres de navigation, fin de la page et de la zone de contenu, chaque balise est encombrée afin d'avoir un contrôle complet sur eux.
Oui, cela fonctionne, mais il existe un moyen simple de sauver ces attributs de classe, tout en rendant votre CSS plus facile à lire et plus organisé. Puis regardez la méthode B. Méthode B: Choix naturel
<div id = barre latérale>
<h3> à propos de ce site </h3>
<p> c'est mon site. </p>
<h3> mes liens </h3>
<ul>
<li> <a href = archives.html> archives </a> </li>
<li> <a href = about.html> À propos de moi </a> </li>
</ul>
</div>
La méthode B est courte et concise! Mais attendez, où vont les catégories? Eh bien ... vous constaterez bientôt que nous n'en avons pas vraiment besoin, principalement parce que nous fourrons ces balises dans une relation <v> avec un nom unique (dans ce cas, la barre latérale).
C'est là que le sélecteur d'héritage est utilisé. Nous avons juste besoin de spécifier directement les balises situées dans la barre latérale avec le nom d'étiquette pour supprimer ces propriétés de classification inutiles. Spécifiez CSS avec le contenu avant et après la relation.
Regardons le même style que la méthode A, mais cette fois, nous utilisons le sélecteur d'héritage pour spécifier la balise située dans la barre latérale.
#sidebar h3 {Font-Family: Géorgie, Serif;
Couleur: # C63;
Border-Bottom: 1px solide #ccc;
}
#sidebar ul {Type de style liste: aucun;
}
#sidebar li {Police-poids: Bold;
}
En vous référant à l'ID #sidebar, vous pouvez spécifier un style spécial pour les balises qui y sont contenues. Par exemple, seules les balises <h3> situées dans <div id =barbar> définiront les règles CSS ci-dessus.
Cette méthode de spécification des styles basée sur la relation entre le contenu avant et après est la clé pour raccourcir le contenu. Habituellement, après la conception de la structure sémantique du contenu, il n'est pas nécessaire d'ajouter des attributs de classification à l'étiquette. Il n'est pas seulement utilisé dans la barre latérale
Nous affichons seulement un paragraphe de la page (c'est-à-dire la barre latérale), mais cette approche peut être appliquée à l'ensemble de la structure de la page. Divisez simplement le contenu de la balise en plusieurs paragraphes selon la logique (peut-être #nav, #content, #sidebar, #footer), puis utilisez le sélecteur d'héritage pour créer des styles spéciaux pour les balises de ce paragraphe.
Par exemple, supposons que les paragraphes #Content et #sidebar dans la page utilisent la balise <h3>, et que vous voulez qu'ils utilisent la police Serif, cependant, vous voulez que le <h3> d'un paragraphe soit affiché en violet et l'autre pour être orange.
Cela ne nécessite aucune modification de balise, plus les propriétés de classification. Nous pouvons spécifier des règles pour que toutes les balises <h3> soient partagées par un style global, puis utiliser le sélecteur d'héritage pour définir la couleur en fonction de la position de la balise.
H3 {
Font-Family: Géorgie, Serif; / * Tous les H3 pour être serif * /
}
#Content H3 {
Couleur: violet;
}
#sidebar h3 {
couleur: orange;
}
Spécifiez que toutes les balises <h3> utilisent des polices sénifères et que les couleurs doivent être sélectionnées pour utiliser le violet ou l'orange en fonction du contexte de contenu. Pour le moment, nous n'avons pas besoin de répéter les règles de partage (dans cet exemple, Font-Family), de sorte que le contenu du CSS peut être raccourci et les règles en double peuvent être empêchées de se produire dans plusieurs déclarations.
Non seulement nous pouvons réduire l'espace de marquage supplémentaire requis par l'attribut de classe, mais la structure CSS devient également plus significative, ce qui nous permet de lire plus facilement son contenu et de l'organiser en fonction des segments de page. Il devient également très simple de modifier des règles spécifiques, ce qui est particulièrement évident pour les types de grandes et complexes, car en ce moment vous pouvez avoir des centaines de règles CSS en même temps.
Par exemple, dans cet exemple, si vous ajoutez les règles de partage à chaque déclaration et que vous souhaitez remplacer tous les <h3> par des polices Sans Serif plus tard, vous devez modifier trois places, et il n'y a aucun moyen de le faire immédiatement. Moins des classifications, plus
En plus de réduire l'espace de code source qui doit être utilisé, le remplacement des catégories redondantes par des sélecteurs d'héritage représente également la facilité future de marquage du contenu à étendre.
Par exemple, supposons que vous voulez que les liens à l'intérieur de la barre latérale deviennent rouges au lieu d'utiliser du bleu comme le reste de la page, vous créez donc une classe rouge qui ajoute à la balise d'ancrage comme ceci:
<div id = barre latérale>
<h3> à propos de ce site </h3>
<p> c'est mon site. </p>
<h3> mes liens </h3>
<ul>
<li> <a href = archives.html class = red> archives </a> </li>
<li> <a href = about.html class = red> À propos de moi </a> </li>
</ul>
</div>
Pour transformer ces liens en rouge (en supposant que la couleur de liaison prédéfinie n'est pas rouge) nécessite un CSS comme celui-ci:
a: link.red {
Couleur: rouge;
}
Ces actions sont bien et peuvent fonctionner normalement. Mais que se passe-t-il si vous changez d'avis à l'avenir et que vous souhaitez modifier ces liens vers le vert? Ou plus pratique, votre patron dit occasionnellement que le rouge cette année est dépassé, alors changez ces liens de barre latérale vers le vert! Pas de problème, il vous suffit de modifier la classe rouge dans CSS et de le faire, mais l'attribut de classe dans le contenu de marquage est toujours rouge. De toute évidence, ce n'est pas complètement conforme à la sémantique, tout comme l'utilisation d'autres couleurs comme nom de classification.
Ce n'est pas un bon endroit pour utiliser les effets d'affichage comme nom de classification, mais si nous ne spécifions pas du tout de classification, nous pouvons économiser beaucoup d'efforts (et de code) dans la gestion de la classification et rendre la sémantique de contenu plus raisonnable. Nous pourrions aussi bien sélectionner des liens vers ces barres latérales avec des sélecteurs d'héritage et spécifier les styles au besoin.
Le contenu TAG est exactement le même que la méthode B, et le CSS requis pour définir le lien dans la barre latérale sera comme ceci:
#sidebar li a: lien {Couleur: rouge;
}
Fondamentalement, cela signifie que seules les balises d'ancrage utilisant l'attribut HREF dans la balise <li> dans <div id =barbar> doivent également être affichées en rouge.
Maintenant, nous maintenons le contenu de balisage court et flexible, et les mises à jour futures ne nécessitent que CSS, peu importe si nous voulons que le lien devienne rouge, vert, audacieux ou italique.
Ensuite, jetons un coup d'œil à une autre façon de rationaliser les balises: éliminer les balises <v> inutiles et utiliser directement les balises de niveau de bloc existantes.
Page précédente 1 2 3 Page suivante Lire le texte intégral