Résumé de la mise en page css+div sous XHTML Super recommendation_Experience Exchange

Avec l'émergence du xml (extensible Markup Language), les documents et données structurés disposent d'un format universel et adaptable, applicable non seulement sur le web, mais aussi partout. Les normes sont dites possibles.
XHTML est l'abréviation de The Extensible HyperText Markup Language. Basé sur HTML4.0, il est étendu avec des règles XML pour obtenir du XHTML. Il implémente la transition du HTML vers XML.
CSS est l'abréviation de Feuilles de style en cascade. La combinaison d'une mise en page CSS pure et d'un XHTML structuré peut aider les concepteurs à séparer l'apparence et la structure, rendant le site plus facile d'accès et de maintenance. 1) Ajoutez le bon DOCTYPE à la page
DOCTYPE est l'abréviation du type de document. Principalement utilisé pour indiquer la version de XHTML ou HTML que vous utilisez. Le navigateur interprète le code de la page selon la DTD (Document Type Definition) définie par votre DOCTYPE.
XHTML1.0 propose trois options DOCTYPE :
(1) Transitionnel - très couramment utilisé.

(2) Strict (Strict)

(3) Frameset (Frameset)
2) Définir un espace de noms (Namespace)
Ajoutez le code suivant directement après la déclaration DOCTYPE :

Un espace de noms est une DTD détaillée qui collecte les types d'éléments et les noms d'attributs. La déclaration d'espace de noms vous permet d'identifier votre espace de noms via un pointeur d'adresse en ligne. Entrez simplement le code comme d'habitude.

3) Déclarez votre langage d'encodage
Afin d'être correctement interprétés par les navigateurs et de valider les tags de passe, tous les documents XHTML doivent déclarer le langage d'encodage qu'ils utilisent. Le code est le suivant :

Le langage de codage déclaré ici est le chinois simplifié GB2312. Si vous devez produire du contenu en chinois traditionnel, vous pouvez le définir comme BIG5.
4) Écrivez toutes les balises en lettres minuscules
XML est sensible à la casse, donc XHTML est également sensible à la casse. Tous les noms d’éléments et d’attributs XHTML doivent être en minuscules. Dans le cas contraire, votre document sera considéré comme invalide par validation W3C. Par exemple, le code suivant est incorrect :

5) Ajouter l'attribut alt aux images
Ajouter l'attribut alt à toutes les images. L'attribut alt spécifie que le texte de remplacement est affiché lorsque l'image ne peut pas être affichée. Ceci est inutile pour les utilisateurs normaux, mais c'est crucial pour les navigateurs texte uniquement et les utilisateurs utilisant des lecteurs d'écran. Ce n'est que lorsque l'attribut alt est ajouté que le code passera le contrôle d'exactitude du W3C. Notez que nous devons ajouter des attributs alt significatifs. Écrire comme suit n'a aucun sens :

Écriture correcte :


6) Ajouter toutes les valeurs d'attribut Citations
En HTML, vous n'avez pas besoin de citer les valeurs d'attribut, mais en XHTML, elles doivent être citées. Les attributs doivent également être séparés par des espaces.
Exemple : Ceci est également incorrect

7) Fermez toutes les balises
En XHTML, chaque balise ouverte doit être fermée. Les balises vides doivent également être fermées, en utilisant une barre oblique "/" à la fin de la balise pour se fermer. Par exemple :

8) Icône préférée
Par exemple : Créez d'abord une icône 16x16, nommez-la favicon.ico et placez-la dans le répertoire racine. Intégrez ensuite le code suivant dans la zone d'en-tête :

9) Utilisez CSS pour définir l'apparence des éléments
L'un des avantages de l'utilisation de la mise en page CSS est que vous pouvez modifier la page par lots , qui peut modifier la structure du document. Séparé de la couche de présentation pour réduire la charge de travail et la charge du serveur, et augmenter les capacités d'expansion et les applications du site.
CSS ne fait pas de distinction entre les espaces et la casse. Voici un résumé de base
(1) Valeur de couleur
La valeur de couleur peut être écrite en valeur RVB, par exemple : couleur : rgb(255,0,0). ), il peut également être écrit en hexadécimal, tout comme le color:#FF0000 dans l'exemple ci-dessus. Si les valeurs hexadécimales sont répétées par paires, elles peuvent être abrégées avec le même effet. Par exemple : #FF0000 peut s’écrire #F00. Cependant, il ne peut pas être abrégé s'il ne se répète pas. Par exemple, #FC1A1B doit être rempli de six chiffres.
(2) Définir les polices
Les standards du Web recommandent la méthode de définition de police suivante :
body { font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, Song Dynasty, sans-serif }
Les polices sont sélectionnées dans l’ordre indiqué. Si l'ordinateur de l'utilisateur contient la police Lucida Grande, le document sera désigné Lucida Grande. Sinon, elle est désignée comme police Verdana, s'il n'y a pas de Verdana, elle est désignée comme police Lucida, et ainsi de suite
La police Lucida Grande convient à Mac OS X
La police Verdana convient à tous les Windows ; systèmes ;
Lucida convient aux utilisateurs UNIX
"Song Ti" convient aux utilisateurs chinois simplifiés
Si aucune des polices répertoriées n'est disponible, l'appel de la police sans empattement par défaut peut être garanti ;
(3) Sélecteur de groupe
Lorsque plusieurs éléments ont les mêmes attributs de style, une instruction peut être appelée ensemble, et les éléments sont séparés par des virgules :
p, td, li { font-size: 12px; }
(4) Sélecteur dérivé
Vous pouvez utiliser des sélecteurs dérivés pour définir des styles pour les éléments enfants dans un élément, par exemple :
li strong { font-style: italic; font-weight: normal;}
est pour les éléments enfants ci-dessous, li strong définit un style italique mais pas gras.
(5)sélecteur d'identifiant
La mise en page CSS est principalement implémentée à l'aide du calque "div", et le style du div est défini via le "sélecteur d'identifiant". Par exemple, on définit d'abord un calque
puis on le définit comme ceci dans la feuille de style :
#menubar {MARGIN : 0px;BACKGROUND : #FEFEFE;COLOR : #666;}
où "menubar" est défini par vous-même votre nom d'identification. Notez le signe "#" devant.
Le sélecteur d'identifiant prend également en charge la dérivation, par exemple :
#menubar p { text-align : right; margin-top : 10px }
Cette méthode est principalement utilisée pour définir les calques et ceux qui sont plus complexes. et ont de nombreux éléments dérivés.
(6) Sélecteur de catégorie
Utilisez un point en CSS pour indiquer la définition du sélecteur de catégorie, par exemple :
.14px {color : #f60 ;font-size:14px ;}
sur la page , utilisez la méthode class="category name" pour appeler :
Taille de police 14px
Cette méthode est relativement simple et flexible, et peut être créée et supprimée à tout moment en fonction des besoins de la page.
(7) Définir le style du lien
Quatre pseudo-classes sont utilisées en CSS pour définir le style du lien, à savoir : a:link, a:visited, a:hover et a:active, pour exemple :
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}
Les déclarations ci-dessus définissent respectivement les styles de "liens, liens visités, lorsque la souris est survolée et lorsque la souris est cliquée". Notez que vous devez écrire dans l’ordre ci-dessus, sinon l’affichage pourrait être différent de ce à quoi vous vous attendiez. N'oubliez pas qu'ils sont dans l'ordre "LVHA".
(8) Utilisez des sélecteurs en combinaison pour créer des effets de design exquis
Remplacez les points noirs ennuyeux devant les listes ordinaires non ordonnées par de beaux motifs. Sitehttp://marine.happycog.com...
Utilisez d'abord les règles CSS pour indiquer la liste non ordonnée de l'inventaire des attributs de catégorie.
ul.inventory{
list-style:disc url(/images/common/lister2.gig) inside;}
Son tag d'appel :
Angelfish(67 items)
Anges/ Frogfish (35 articles)
Angelfish(5526 articles)
Angelfish(15 articles)
(9) Les abréviations sont dans le sens des aiguilles d'une montre
margin:25px 0 25px 0;
(10) Hauteur de la ligne
hauteur de ligne : 150 % indique que l'espacement des lignes est de 150 % de la normale
10) Code structuré div (division), identifiant, classe
Utilisez-les pour écrire du xhtml compact, utilisez le CSS plus judicieusement.
(1) Les balises d'identification structurées sont différentes de celles de classe :
Si votre page d'attributs contient un div avec un identifiant "content", elle ne peut pas avoir un autre div ou un autre élément portant le même nom. . En revanche, l’attribut class peut être utilisé encore et encore sur une page.
(2) Règles pour l'identifiant
Une valeur d'identifiant doit commencer par une lettre ou un trait de soulignement. Elle ne peut pas commencer par un chiffre puis suivre des lettres, des chiffres et des traits de soulignement. Espaces et tirets : les deux ne sont pas autorisés.
11) Le site Web terminé peut aller au w3c pour une correction standard
http:validator.w3.org
http://jigsaw.w3.org/css-v ...