Application de belles feuilles de style dans la production de pages Web XHTML CSS_HTML/Xhtml_web page production

Il s'agit d'un article écrit il y a longtemps. Il semble maintenant que les idées qu'il contient valent la peine d'être apprises. En étudiant des cas sur jb51.net, vous pouvez également acquérir des connaissances théoriques. Ce sera une avancée majeure dans vos connaissances. aide. Allez tout le monde !

Depuis que j'ai lu le chef-d'œuvre de M. Zeldman "Designing with Web Standards" ; la version chinoise est "Website Reconstruction" (2e édition), j'ai un sentiment profond et cela a renforcé mon idée de l'utilisation du Web normes. Développer et mettre en œuvre nos projets. Mais il ne suffit pas de connaître un peu ce que sont les standards du Web et comment les appliquer à des projets réels. Vous devez apprendre et appliquer chaque composant des standards du web un par un, et les décomposer un à un pour découvrir leur essence ! Pour les développeurs et concepteurs Web comme moi, si nous comprenons ce principe et menons des études et des pratiques ciblées, je pense que nous gagnerons davantage, et en même temps, nous pourrons contribuer à l'application des standards du Web en Chine ! (Haha, c'est peut-être un peu vantard, mais c'est effectivement l'idéal de la plupart d'entre nous, praticiens du logiciel.)

C'est maintenant l'ère du web2.0 ou même 3.0, l'ère du XHTML, XML, CSS , ECMAScript et DOM. Bien qu'il ne s'agisse pas de la technologie finale, elles se combinent pour devenir une solution - la base sur laquelle nous envisageons de créer un site Web rétrocompatible, et c'est également la base technique nécessaire pour créer un site Web conforme aux normes du Web. Nous voulons non seulement obtenir plus de soutien et de visites des utilisateurs, mais également créer un site Web magnifique et durable pour attirer leur attention pendant longtemps. Je pense qu'apprendre à utiliser CSS pour améliorer notre site Web est un bon moyen d'attirer leur attention, et c'est aussi une tendance de développement à la mode à l'ère du web2.0. Ci-dessous, je ne parlerai que de l'expérience que j'ai acquise grâce à la technologie CSS.

Pour devenir un expert CSS, il ne suffit pas de simplement maîtriser l'utilisation des sélecteurs CSS. Cela réside également dans la planification globale du travail, la maîtrise du workflow et l'amélioration de la maintenabilité et de l'efficacité de la feuille de style. Nous pouvons utiliser CSS pour créer les merveilleux sites Web que nous souhaitons, et écrire du CSS est un plaisir en soi. Alors comment créer une feuille de style plus attrayante ? Quelles fonctionnalités votre feuille de style doit-elle avoir ? En apprenant et en combinant avec ma propre expérience professionnelle, j'ai résumé un ensemble de bonnes méthodes pour créer de belles feuilles de style.

1. Ne laissez pas CSS avoir trop de balises

Lier ou importer des feuilles de style peut sembler une tâche inutile. J'ai vu de nombreux développeurs de sites Web avoir des documents CSS soignés et bien organisés, mais lentement, parce qu'ils ne peuvent pas être mis à jour rapidement dans un court laps de temps, ou sont trop paresseux pour les gérer, les feuilles de style exquises créées précédemment deviennent devenues poubelle. Si nous travaillons sur un énorme site Web qui doit publier des centaines de contenus. Le temps étant limité, vous devez effectuer des modifications ou des mises à jour rapides en imbriquant ou en organisant les CSS. Au fil du temps, cette habitude persiste jusqu'au jour où on vous annonce que le site va être complètement repensé (mais le contenu sera toujours le même) et que vous n'avez qu'une semaine pour le créer (tests compris). De manière générale, la mise à jour de la feuille de style est une méthode très simple. À moins que vous n'apportiez des modifications à des zones dispersées du site Web pendant une longue période, vous n'aurez pas une compréhension globale de la structure de la feuille de style du site Web.

Lier ou importer votre feuille de style n'est pas arbitraire. Créez une feuille de style propre et maintenez-la, et vous serez plus heureux au travail. Remarque : Si vous essayez de créer une nouvelle feuille de style à chaque fois que vous mettez à jour ou ajoutez du nouveau contenu, vous vous posez certainement des problèmes. Trop de liens et de feuilles de style importées rendent difficile l'élimination des bugs et rendent la feuille de style difficile à maintenir. Il est compréhensible que les grands sites Web créent des feuilles de style distinctes pour différentes parties. Faites juste attention à ne pas aller aux extrêmes. L'ajout de nombreuses feuilles de style augmentera davantage de requêtes http et pourra affecter le travail ultérieur.

2. La définition sémantique est claire et facile à comprendre

En plus de sélectionner les éléments les plus appropriés et les plus significatifs à exprimer, vous devez également sélectionner la classe et l'identifiant valeurs d'attribut. Être clairement défini facilite la maintenance et tous les membres de l'équipe le comprendront. Regardez cette définition :

　.l10k { color: #369; } , .left-blue { color: #369 } , si elle a été faite par moi, je sais peut-être ce que cela signifie, mais cela peut pas être le même que les autres. Même si vous connaissez sa signification aujourd’hui, pouvez-vous garantir que vous la connaîtrez encore dans de nombreuses années ? Il est préférable de ne pas ajouter de couleur ou de dimensions de longueur et de largeur aux attributs de classe. Une convention de dénomination plus appropriée : .work-description { color: #369; }

3. Sachez quand ajouter des commentaires conditionnels et des techniques d'application

De nombreux articles ont été écrits sur les techniques de résolution de problèmes. Les commentaires conditionnels constituent un bon moyen de contrôler la publication dans IE. Je suis d'accord que les commentaires conditionnels sont bien meilleurs que de déconner dans votre document CSS, mais dernièrement, j'ai réalisé qu'il existe de nombreuses preuves que ce n'est pas la meilleure solution. Vous souhaitez définir la hauteur minimale d'un élément, mais IE6 ne l'implémente pas, vous savez donc que la hauteur que vous pouvez utiliser sera également traitée de la même manière. Créez une nouvelle feuille de style et ajoutez des commentaires conditionnels à votre balisage. Tout ce dont vous avez besoin est de suivre cette règle ? Ne serait-il pas préférable de conserver ensemble les règles de hauteur minimale et de hauteur et de choisir une astuce dans le même document CSS ? Dans ce cas, j'ai du mal à utiliser cette méthode.

4. Essayez d'utiliser des feuilles de style externes lors de l'application de CSS aux pages Web

Y a-t-il des avantages ? Tout le monde le sait bien. Bien sûr, une chose est indéniable. Il peut maximiser la réutilisation du code et optimiser la configuration des fichiers du site Web.
D'accord, voici quelques-unes de mes opinions personnelles. J'espère que mes amis pourront me donner plus d'opinions. Vos suggestions sont ma motivation pour relever les difficultés ! Merci!

Ce qui précède est l'application de belles feuilles de style dans la production de pages Web XHTML CSS_HTML/Xhtml_. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !