Maison  >  Article  >  interface Web  >  Résumé et partage des conventions de nommage pour html et DIV+CSS (collection)

Résumé et partage des conventions de nommage pour html et DIV+CSS (collection)

黄舟
黄舟original
2017-07-26 11:41:081176parcourir

La normalisation de l'utilisation des règles de dénomination DIV+CSS dans la production de pages Web peut améliorer l'effet d'optimisation, en particulier lorsque vous travaillez en équipe, cela peut fournir une efficacité de production collaborative. Les règles de dénomination CSS DIV et les règles de dénomination CSS spécifiques se trouvent dans cet article. .

Une collection complète de dénominations DIV+CSS couramment utilisées, c'est-à-dire des règles de dénomination CSS

Lorsque nous développons des pages Web CSS+DIV (Xhtml), la chose la plus déroutante et la plus enchevêtrée est la dénomination CSS , surtout si les novices ne le savent pas. Quel endroit doit être nommé et quelle est la meilleure façon de le nommer.

1. Description des règles de dénomination

1. Tous les noms doivent être en minuscules

2. Les valeurs d'attribut doivent être placées entre guillemets (""), et Il doit avoir une valeur telle que class="helloweb", id="helloweb"

3. Chaque balise doit avoir un début et une fin, et doit avoir le bon niveau, et la mise en page doit être régulière et soignée.

4. Les éléments vides doivent avoir une balise de fin ou ajouter "/" après la balise de début

5. La performance et la structure sont complètement séparées, et le code n'implique aucun élément de performance, tel que. comme : style, police, Les définitions de bgColor, border, etc.

6,

à

doivent suivre le principe de grand à petit pour refléter la structure du document et faciliter la recherche. requêtes du moteur.

7. Ajoutez un identifiant de balise structurelle unique à chaque table et formulaire

8. Ajoutez des balises alt aux images L'avantage est que lorsqu'une erreur se produit dans l'image, alt peut la refléter. Pour les utilisateurs

9. Essayez d'utiliser les principes de dénomination anglais

10. Essayez de ne pas abréger les mots, à moins qu'il ne s'agisse de mots faciles à comprendre en un coup d'œil

Voici une introduction aux méthodes courantes de dénomination CSS et DIV CSS.

2. Dénomination des styles CSS pour les parties importantes de la couche externe de la page Web

Coat wrap ------------------utilisé pour la couche la plus externe

En-tête ---------------Utilisé pour l'en-tête

Contenu principal principal--------------- -Utilisé pour le contenu du corps (milieu)

Gauche principale-gauche -------------Disposition gauche

Droite principale-droite ------ -- ---Disposition à droite

Barre de navigation ------------------Barre de navigation du menu Web

Contenu du contenu ---- -- --------Utilisé pour le corps central de la page Web

Pied de page inférieur ------------------Utilisé pour le bas

3. Table de référence de dénomination DIV + CSS

Ce qui suit est la table de référence de dénomination de style CSS et de dénomination de fichier CSS, collection de dénomination CSS DIV :

①Page Web de description de dénomination de style CSS dénomination publique #wrapper page contrôle périphérique largeur globale de la mise en page # conteneur ou #conteneur de contenu
② est utilisé pour la #mise en page la plus externe #head, #header header part #foot, #footer footer part #nav navigation principale #subnav secondaire navigation #menu menu #sous-menu sous-menu #sideBar sidebar #sidebar_a, #sidebar_bleft colonne ou colonne de droite #main page body #tag label #msg #message prompt information #tips tips #vote vote #friendlink connexion amicale #title title ; 🎜>③# résumé résumé #barre de connexion de la barre de connexion #zone de saisie de la recherche searchInput #hot hot spot #recherche de recherche #search_output la sortie de la recherche et les résultats de la recherche sont similaires #barre de recherche de la barre de recherche #search_results résultats de la recherche #copyright copyright informations #branding

④marque commerciale #logo LOGO du site Web #informations sur le site Web #siteinfoLegal mention légale #siteinfoCrédits crédibilité #rejoignez-nous #partenaire partenaire #service service #regsiter inscription arr/flèche flèche #guide de guilde #sitemap plan du site #list liste #page d'accueil page d'accueil #sous-page secondaire page Sous-page #tool, #toolbar barre d'outils #drop drop-down #dorpmenu menu déroulant

⑤ #status status #scroll scrolling.tab label page.left.right.center gauche, centre, droite.news news .download .banner bannière publicitaire (bannière publicitaire supérieure) liés au commerce électronique .products produits .products_prices prix des produits .products_description description du produit .products_review revue du produit .editor_review revue de l'éditeur .news_release dernier produit .éditeur fabricant .screenshot miniature .faqs foire aux questions .keyword mot clé.blog blog.forum forum

⑥Nom du fichier CSS description master.css, style.css module principal.css module base.css partage essentiellement la mise en page layout.css, la mise en page thèmes.css thème colonnes.css police de colonne Texte .css, police form.css form mend.css patch print.css print


Autres instructions pour la dénomination CSS :

Résumé de la dénomination DIV+CSS : que ce soit en utilisant "." Peu importe que vous choisissiez de commencer le nom par un symbole (point minuscule) ou « # » (dièse), mais nous ferions mieux de comprendre que les cases principales, importantes, spéciales et les plus extérieures utilisent « # » (dièse). signe). ) symbole de sélection, et d'autres sont nommés avec le symbole de sélection "." (point minuscule). Pensez également à nommer le sélecteur CSS à réutiliser et à appeler en HTML.

Habituellement, nos noms principaux les plus couramment utilisés sont : wrap (couche, couche la plus externe), header (en-tête, tête), nav (barre de navigation), menu (menu), titre (titre de colonne, coordination générale balises h1h2h3h4 sont utilisés)

, contenu (zone de contenu), pied de page (pied de page, bas), logo (logo, peut être utilisé avec les balises h1), bannière (bannière publicitaire, généralement en haut), copyRight (droit d'auteur). D'autres peuvent être utilisés de manière sélective en fonction de vos propres besoins.


Recommandation : les cases principales, importantes et les plus extérieures doivent être nommées en commençant par le symbole de sélection « # » (dièse), et les autres doivent être nommées en commençant par le symbole de sélection « ». .

2. Les fichiers de style CSS sont nommés comme suit :

main master.css

layout, layout.css

columns.css

Texte font.css

Style d'impression print.css

Thème thèmes.css

Compétences en matière de dénomination en anglais

Si vous rencontrez quelque chose qui n'est pas couramment utilisé, vous pouvez utiliser un outil de traduction pour le traduire et le nommer en anglais.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn