Standardisation de la dénomination et de l'écriture CSS

Convention de dénomination CSS

un. Convention de dénomination des fichiers

Style global : global.css ;
Disposition du cadre : layout.css ;
Style de police : font.css ; Style de lien : lien.css ;
Style d'impression : print.css ;

deux. Convention de dénomination commune de classe/ID

En-tête : en-tête

Contenu : contenu
Conteneur : conteneur
Pied de page : pied de page
Droit d'auteur : droit d'auteur　
Navigation : menu
Navigation principale : menu principal
Sous-navigation : sous-menu
Logo : logo
Slogan : bannière
Titre : titre
Barre latérale : barre latérale
Icône : Icône
Remarque : remarque
Rechercher : rechercher
Bouton : btn
Connexion : connexion
Lien : lien
Encadré d'information : gérer
……

La dénomination des classes couramment utilisées doit être basée autant que possible sur des mots anglais courants, les rendant faciles à comprendre et annotées aux endroits appropriés. Pour la dénomination de classe/ID secondaire, le mode d'écriture combiné est adopté et la première lettre du dernier mot doit être en majuscule : par exemple, "zone de recherche" doit être nommée "searchInput", "icône de recherche" doit être nommée "searchIcon", "bouton de recherche" "Nommé "searchBtn"...

Spécifications et méthodes d'écriture CSS

1. Normes et méthodes d'écriture conventionnelles

1. Sélectionnez DOCTYPE :

XHTML 1.0 propose trois déclarations DTD parmi lesquelles choisir :

Transitionnel : Une DTD avec des exigences très lâches, qui permet de continuer à utiliser le logo HTML4.01 (mais doit respecter la méthode d'écriture xhtml). Le code complet est le suivant :

Strict : pour une DTD stricte, vous ne pouvez pas utiliser d'identifiants et d'attributs de couche de présentation, tels que
. Le code complet est le suivant :

Frameset : une DTD spécialement conçue pour les pages de cadre. Si votre page contient un cadre, vous devez utiliser cette DTD. Le code complet est le suivant :

La situation idéale est bien sûr une DTD stricte, mais pour la plupart d'entre nous, concepteurs qui débutent dans les standards du Web, la DTD transitionnelle (XHTML 1.0 Transitional) est actuellement le choix idéal (y compris ce site, qui utilise également la DTD transitionnelle). Étant donné que cette DTD nous permet également d'utiliser des identifiants, des éléments et des attributs de la couche de présentation, il est également plus facile de passer la vérification du code W3C.

2. Spécifiez la langue et le jeu de caractères :

Précisez la langue du document :

Afin d'être correctement interprétés par les navigateurs et de passer la vérification du code W3C, tous les documents XHTML doivent déclarer le langage de codage qu'ils utilisent, tel que :

 ; Définitions de langues couramment utilisées :

Définition du langage de document XML standard :

Définition du langage pour les anciens navigateurs :

Pour améliorer le jeu de caractères, il est recommandé d'utiliser "utf-8".

3. Feuille de style d'appel :

Appel de feuille de style externe :

Méthode page inline : La feuille de style est écrite directement dans la zone d’en-tête du code de la page. Tels que :

Méthode d'appel externe : écrivez la feuille de style dans un fichier .css indépendant, puis appelez-la avec un code similaire au suivant dans la zone d'en-tête de la page.

Dans une conception conforme aux standards du web, il est recommandé d'utiliser la méthode d'appel externe, qui permet de changer le style de la page sans modifier la page et en modifiant uniquement le fichier .css. Si toutes les pages appellent le même fichier de feuille de style, la modification d'un fichier de feuille de style peut modifier les styles de tous les fichiers.

4. Choisissez les éléments appropriés :

Sélectionnez les éléments HTML en fonction de la structure du document et non du style des éléments HTML. Par exemple, utilisez l'élément P pour contenir des paragraphes de texte, pas pour des sauts de ligne. Si vous ne trouvez pas l'élément approprié lors de la création du document, vous pouvez envisager d'utiliser le générique p ou span

; Évitez l’utilisation excessive de p et de span. Une petite utilisation appropriée des éléments p et span peut rendre la structure du document plus claire et des styles plus raisonnables et faciles à utiliser

 ; Utilisez le moins possible les balises et l'imbrication structurelle. Cela rendra non seulement la structure du document claire, mais gardera également le fichier petit. Tout en améliorant la vitesse de téléchargement de l'utilisateur, cela permettra également aux navigateurs d'interpréter et d'afficher plus facilement le document

5. Sélecteur dérivé :

Vous pouvez utiliser des sélecteurs dérivés pour définir des styles pour les éléments enfants au sein d'un élément, ce qui simplifie la dénomination et rend la structure plus claire, par exemple :

.mainMenu ul li {background:url(images/bg.gif;)}

6. Utiliser le traitement d'image arrière pour les images auxiliaires :

Les « images auxiliaires » font ici référence à des images qui ne font pas partie du contenu à exprimer sur la page, mais ne sont utilisées qu'à des fins de décoration, d'intervalle et de rappel. Traitez-la comme une image de fond et vous pouvez la modifier via des styles CSS sans changer la page, comme :

#logo {background:url(images/logo.jpg) #FEFEFE sans répétition en bas à droite ;}

7. Séparation de la structure et du style :

Seule la structure du document est écrite dans la page et le style est écrit dans le fichier CSS. La séparation de la structure et du style est obtenue en appelant en externe la feuille de style CSS.

8. Rédaction structurée des documents :

Les documents CSS sur la page doivent être rédigés de manière structurée, avec une logique claire et faciles à lire. Tels que :

• Page d'accueil


• Introduction


• Service

/*======Navigation principale=====*/
#mainMenu {
largeur:100%;
hauteur:30px;
background:url(images/mainMenu_bg.jpg) répétition-x;
>
#mainMenu ul li {
float:gauche;
hauteur de ligne : 30px ;
marge droite:1px;
curseur:pointeur;
>
/*=====Fin de la navigation principale=====*/

9. Gestes de la souris :

Dans le standard XHTML, la main n'est reconnue que par IE. Lorsque vous devez convertir le geste de la souris en "forme de main", remplacez "main" par "pointeur", c'est-à-dire "cursor:pointer;"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!