Structure div + CSS
Apprenez-vous la disposition CSS? Vous ne pouvez pas maîtriser complètement la disposition CSS pure? Il y a généralement deux situations qui entravent votre étude:
La première possibilité est que vous n'avez pas encore compris le principe des pages de traitement CSS. Avant de considérer les performances globales de votre page, vous devez d'abord considérer la sémantique et la structure du contenu, puis ajouter CSS à la sémantique et à la structure. Cet article vous dira comment structurer HTML.
Une autre raison est que vous êtes impuissant à ces attributs de couche de présentation très familiers (tels que celle de cellule, HSPACE, Align = Left, etc.) et ne savez pas dans quelle déclaration CSS à convertir. Lorsque vous résolvez le premier problème et que vous savez comment structurer votre HTML, je donnerai une liste de détails sur le CSS pour remplacer l'attribut de performance d'origine.
HTML structuré
Lorsque nous avons appris pour la première fois la production de pages Web, nous considérons toujours comment concevoir et considérer les images, les polices, les couleurs et les plans de mise en page. Ensuite, nous utilisons Photoshop ou des feux d'artifice pour dessiner et couper en petites images. Enfin, toutes les conceptions sont restaurées sur la page en modifiant HTML.
Si vous voulez que votre page HTML soit mise en place dans CSS (qui est conviviale CSS), vous devez recommencer sans considérer l'apparence et réfléchir d'abord à la sémantique et à la structure de votre contenu de page.
L'apparence n'est pas la chose la plus importante. Une page HTML bien structurée peut être exprimée dans n'importe quelle apparence, et CSS Zen Garden est un exemple classique. CSS Zen Garden nous aide enfin à reconnaître la puissance du CSS.
HTML n'est pas seulement lu sur les écrans d'ordinateur. Les images que vous avez soigneusement conçues avec Photoshop peuvent ne pas être affichées sur les PDA, les téléphones portables et les lecteurs d'écran. Mais une page HTML bien structurée peut être affichée n'importe où, sur n'importe quel périphérique réseau via différentes définitions de CSS.
Commencer à penser
Tout d'abord, nous devons apprendre quelle est la structure, que certains écrivains appellent également la sémantique. Le terme signifie que vous devez analyser vos blocs de contenu et le but de chaque service de contenu, puis créer une structure HTML correspondante en fonction de ces objectifs de contenu.
Si vous vous asseyez et analysez soigneusement et planifiez votre structure de page, vous pouvez obtenir quelques pièces comme ceci:
Nom du logo et du site
Contenu de la page principale
Navigation du site (menu principal)
Sous-menu
Recherche de recherche
Zone fonctionnelle (comme le panier, caissier)
Pied de page (droit d'auteur et déclarations juridiques pertinentes)
Nous utilisons généralement des éléments div pour définir ces structures, comme ceci:
＜ div id = en-tête ＞＜ / div ＞
＜ div id = contenu ＞＜ / div ＞
＜ div id = globalnav ＞＜ / div ＞
＜ div id = subnav ＞＜ / div ＞
＜ div id = search ＞＜ / div ＞
＜ div id = shop ＞＜ / div ＞
＜ div id = pied de page ＞＜ / div ＞
Ce n'est pas une disposition, c'est une structure. Ceci est une description sémantique des blocs de contenu. Lorsque vous comprenez votre structure, vous pouvez ajouter l'ID correspondant au div. Le conteneur Div peut contenir n'importe quel bloc de contenu ou nid un autre div. Les blocs de contenu peuvent contenir les éléments HTML - titre, paragraphe, image, table, liste, etc.
Selon ce qui a été décrit ci-dessus, vous savez déjà comment structurer HTML, et maintenant vous pouvez faire des définitions de mise en page et de style. Chaque bloc de contenu peut être placé n'importe où sur la page, puis la couleur, la police, la bordure, l'arrière-plan, les attributs d'alignement, etc. du bloc sont spécifiés.
Utiliser un sélecteur est une chose merveilleuse
Le nom d'un ID est un moyen de contrôler un certain bloc de contenu. En mettant une div sur ce bloc de contenu et en ajoutant un ID unique, vous pouvez utiliser le sélecteur CSS pour définir avec précision l'apparence de chaque élément de page, y compris le titre, la liste, l'image, le lien ou le paragraphe, etc. Par exemple, si vous écrivez une règle CSS pour #header, elle peut être complètement différente des règles d'image dans #Content.
Un autre exemple est: vous pouvez définir des styles de liaison dans différents blocs de contenu via différentes règles. Semblable à ceci: #GlobalNav A: lien ou #SubNava: lien ou #Content A: Link. Vous pouvez également définir les mêmes éléments dans différents blocs de contenu avec différents styles. Par exemple, les styles de P dans #Content et #Footer sont définis par #Content P et #FooterP, respectivement. Structurellement parlant, votre page est composée d'images, de liens, de listes, de paragraphes, etc. Ils peuvent être définis comme n'importe quelle apparence.
Une page HTML soigneusement structurée est très simple et chaque élément est utilisé à des fins structurelles. Lorsque vous souhaitez licencier un paragraphe, vous n'avez pas besoin d'utiliser la balise BlockQuote. Utilisez simplement la balise P et ajoutez une règle de marge CSS à P pour atteindre l'objectif d'indentation. P est une balise structurée, la marge est un attribut de représentation, le premier appartient à HTML et le second appartient à CSS. (C'est la séparation de phase de la structure et de l'expression.)
Il n'y a presque pas de balises qui représentent les attributs dans une page HTML bien structurée. Le code est très propre et concis. Par exemple, le code d'origine <TableWidth = 80% CELLPADDING = 3 Border = 2Align = Left> ne peut désormais être écrit qu'en HTML, et toutes les choses qui contrôlent la représentation sont écrites en CSS. En HTML structuré, le tableau est un tableau, pas autre chose (comme être utilisé pour la disposition et le positionnement).
Structure de pratique vous-même
Ce qui est mentionné ci-dessus n'est que la structure la plus basique. Dans l'application réelle, vous pouvez ajuster les blocs de contenu selon les besoins. Il y a souvent des situations de nidification div, et vous verrez qu'il y a d'autres couches dans la couche de conteneur, avec une structure similaire à celle:
＜ div id = navContainer ＞
＜ div id = globalnav ＞
＜ ul ＞ une liste ＜ / ul ＞
＜ / div ＞
＜ div id = subnav ＞
＜ ul ＞ Une autre liste ＜ / ul ＞
＜ / div ＞
＜ / div ＞
Les éléments de div imbriqués vous permettent de définir davantage de règles CSS pour contrôler les performances, par exemple: vous pouvez donner à #NavContainer une règle pour rendre la liste correcte, puis donner à #GlobalNav une règle pour faire la gauche de la liste et donner à #SubNav une liste une autre performance complètement différente.
Remplacer les méthodes traditionnelles par CSS
La liste suivante vous aidera à remplacer les méthodes traditionnelles par CSS:
Attributs HTML et méthodes CSS correspondantes
Attributs HTML
Description de la méthode CSS
Aligner = gauche
Align = Float droit: gauche;
flottant: à droite; Utilisez CSS pour faire flotter n'importe quel élément: image, paragraphe, div, titre, table, liste, etc.
Lorsque vous utilisez l'attribut Float, vous devez définir une largeur pour l'élément flottant.
marginwidth = 0leftmargin = 0 marginheight = 0 topmargin = 0 marge: 0; En utilisant CSS, la marge peut être définie sur n'importe quel élément, non seulement un élément corporel, mais plus important encore, vous pouvez spécifier les valeurs de marge du haut, de la droite, du bas et de la gauche de l'élément respectivement.
vlink = # 333399 link = # 000000 link = # 3333ff a: lien # 3ff;
R: Visité: # 339;
R: Hover: # 999;
A: Actif: # 00F;
Dans HTML, la couleur du lien est définie comme une valeur d'attribut du corps. Les styles de liaison de toute la page sont les mêmes. À l'aide du sélecteur CSS, les styles de liaison de différentes parties de la page peuvent être différents.
bgColor = # fffff background-color: #ffff; Dans CSS, n'importe quel élément peut définir la couleur d'arrière-plan, pas seulement les éléments du corps et de la table.
BorderColor = # FFFFFF Border-Color: #FFFF; Tout élément peut définir une bordure (Boeder), vous pouvez définir respectivement le haut, la droite, le bas et la gauche
bordure = 3CellSpacing = 3 largeur de bordure: 3px; Avec CSS, vous pouvez définir la bordure de la table comme un style unifié, ou vous pouvez définir respectivement la couleur, la taille et le style des bordures supérieures, droites, inférieures et gauche.
Vous pouvez utiliser des sélecteurs Table, TD ou TH.
Si vous avez besoin de définir un effet sans bordure, vous pouvez utiliser CSS Définition: Border-Collapse: effondrement;
＜ Br Clear = Left ＞
＜ Br clear = droite ＞
＜ Br clear = tout ＞
Clear: à gauche;
Clear: à droite;
Clear: les deux;
De nombreuses dispositions de 2 colonnes ou 3 colonnes utilisent l'attribut Float pour localiser. Si vous définissez la couleur d'arrière-plan ou l'image d'arrière-plan dans la couche flottante, vous pouvez utiliser l'attribut Clear.
cellpadding = 3
vspace = 3
HSPACE = 3 rembourrage: 3px; Avec CSS, n'importe quel élément peut définir des attributs de rembourrage. De même, le rembourrage peut régler le dessus, à droite, en bas et à gauche respectivement. Le rembourrage est transparent.
Align = Centre Text-Align: Centre;
marge droite: auto; marge-gauche: auto;
Text-Align ne fonctionne qu'avec du texte.
Les niveaux de bloc comme Div et P peuvent être centrés horizontalement à travers la marge-droite: Auto; et marge-gauche: Auto;
Quelques conseils et environnements de travail regrettables
En raison du soutien incomplet de CSS par les navigateurs, nous devons parfois prendre des hacks ou créer une solution de contournement pour permettre au CSS d'obtenir le même effet que les méthodes traditionnelles. Par exemple, les éléments au niveau des blocs nécessitent parfois l'utilisation de techniques de centrage horizontal, des techniques de bogues du modèle de boîte, etc. Tous ces conseils sont détaillés dans l'article de Mollyholzschlag "Conception Web intégrée: stratégies pour la gestion de CSS à long terme".
Un autre site de ressources pour les conseils CSS est la position de Big John et Holly Bergevin est tout.
Comprendre le comportement flottant
Les flotteurs de contenu d'Eric Meyer vous aideront à maîtriser comment utiliser les dispositions d'attribut flottantes. Les éléments flottants doivent parfois être effacés et lire comment effacer les flotteurs sans balisage structurel sera très utile.