CSS est la forme courante actuelle de mise en page de pages Web, et c'est également le contenu principal présenté par 52CSS.com. Étant donné que CSS est largement utilisé sur presque tous les sites Web, prenons le temps de créer une feuille de style et de nous assurer qu'elle répond. bonnes normes. Les conseils suivants aideront grandement les débutants CSS pendant le processus de développement. Vous pouvez en apprendre davantage sur les dix compétences que les débutants DivCSS doivent connaître et sur leur compréhension des standards du Web.
1. Indice Les définitions ici vous aideront, vous et les autres développeurs, à comprendre les sites Web et les fichiers CSS. Elles vous aideront également à comprendre le contenu des fichiers CSS. La section index contient un paragraphe de commentaire formaté CSS.
1. Donner les informations sur l'auteur du fichier CSS 2. Définir le design du site (nombre de colonnes, statique/dynamique) [colonnes, statique/liquide]
3. Suivez en permanence les versions des fichiers (très utile lorsque le fichier a plusieurs auteurs ou doit être mis à niveau à l'avenir)
2. Point d'ancrage Les ancres sont comme des signets dans le même fichier CSS. Les ancres vous permettent de visualiser clairement l'intégralité du fichier CSS et de le garder organisé.
Les ancres doivent être définies à l'index du CSS (mentionné ci-dessus), et comme CSS n'a pas son propre système d'ancrage, j'ai utilisé une astuce simple pour définir les ancres dans le document.
La méthode consiste à utiliser un caractère relativement rare pour définir le commentaire. Lorsque vous souhaitez trouver un point d'ancrage, vous pouvez copier et rechercher le définisseur du point d'ancrage à partir de l'index et trouver le point d'ancrage.
3. Redéfinition La redéfinition est une méthode utilisée pour remplacer les styles de balises par défaut du HTML et les redéfinir. Avez-vous déjà vu du code CSS comme celui-ci, il veut juste styliser cet élément spécifique !
Une très belle utilisation en CSS est celle des sélecteurs contextuels, utilisons-les :
4. Règles de dénomination Un facteur clé est de donner aux éléments des noms précis et propres. Cela évitera toute confusion et facilitera et accélérera la lecture de votre CSS.
5. Abréviation La fonctionnalité d'abréviation en CSS est une propriété qui vous permet de combiner plusieurs propriétés du même type en une seule.
Les abréviations CSS facilitent le processus de développement et gardent vos fichiers CSS propres, courts et lisibles. Voici quelques exemples :
6. Lutins Le traduire en elfe ne semble pas approfondir la compréhension perceptuelle de l'article. Au contraire, lorsque je l'ai lu en anglais, je ne l'ai pas compris, donc je ne l'ai tout simplement pas traduit. Combiner toutes les images d’arrière-plan en une seule et utiliser le positionnement de l’arrière-plan pour afficher différentes parties est ce que nous appelons les Sprites CSS.
Les Sprites CSS peuvent réduire le nombre de requêtes HTTP, économiser de la bande passante et accélérer la lecture. En même temps, cela peut également éviter l'instabilité de l'image (par exemple, lorsque la souris passe sur une image, l'effet d'une autre image peut être affiché, et cette dernière image attendra une demi-journée sur une connexion Internet lente pour apparaître) .
L’exemple le meilleur et le plus populaire de CSS Sprites est le système de menus du site Web d’Apple :
7. Précisions L'explicitation du sélecteur est le processus de priorisation de celle à utiliser lorsque plusieurs règles peuvent être utilisées pour le même élément.
En termes simples, chaque sélecteur CSS a un poids. La somme de tous les poids d'un sélecteur détermine ses propriétés dans le document. L'explicite peut être d'une grande aide lorsque le document CSS est si volumineux que vous ne savez pas quel élément a le plus de poids.
Eh bien, la clarté est un domaine si vaste en CSS qu'il est difficile de l'expliquer en quelques phrases seulement.
8. Réinitialisation des attributs Les réinitialisations globales des propriétés garantissent qu'un site Web apparaît presque de la même manière dans tous les navigateurs. Dans chaque cas, différents navigateurs utilisent leur propre ensemble de paramètres de style par défaut pour tous les sites Web, ce qui entraînera un affichage différent de notre site Web dans différents navigateurs. Une réinitialisation globale des propriétés corrigera cette situation et vous permettra de construire votre site à partir d’une base absolument cohérente.
Je ne recommande pas toujours d'utiliser des frameworks CSS, mais vous devez quand même utiliser la réinitialisation CSS. Il existe de nombreuses méthodes de réinitialisation différentes, allant de la plus simple à la plus complexe.
9. Astuces CSS Même s'il s'agit d'un CSS parfait, il ne peut pas produire exactement le même affichage dans tous les navigateurs. Chaque navigateur a une manière différente d'interpréter le CSS. Dans l’ensemble, si vous avez besoin que votre site Web soit cohérent sur tous les navigateurs, vous devez utiliser CSS Hacks.
L'utilisation de CSS Hacks réduira les erreurs lors de la validation du CSS, je suis d'accord. Une autre façon d'y parvenir consiste à utiliser un seul fichier CSS différent pour chaque navigateur et à indiquer au navigateur quel CSS spécifique doit être utilisé en incluant des balises spécifiques au navigateur dans le code HTML. Je crée toujours un "fuck-ie.css" dans tous mes projets :) (Note du traducteur : l'auteur utilise ici des gros mots pour exprimer sa colère envers IE. S'il est traduit par "s'accoupler avec IE.css", le monde ne le ferait pas. est-ce que ce n'est pas plus harmonieux ?)
Après avoir utilisé cette méthode, votre "fichier CSS principal" sera vérifié en même temps, le fichier "fuck-ie.css" sera également vérifié, mais il écrasera uniquement le "fichier CSS principal" dans le navigateur IE.
10. Vérification Il est toujours important de valider votre CSS lorsque vous le créez. Cela garantira que votre CSS est sans erreur et peut être interprété correctement par tous les navigateurs.
W3C Validator est un outil de validation CSS en ligne très populaire.
