Apprenez-vous la mise en page CSS ? Êtes-vous toujours incapable de maîtriser pleinement la mise en page CSS pure ? Il y a généralement deux situations qui entravent votre apprentissage :
La première possibilité est que vous n'avez pas compris le principe du traitement CSS des pages. 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 du CSS pour la sémantique et la structure. Cet article vous expliquera comment structurer le HTML.
Une autre raison est que vous ne connaissez pas les propriétés très familières de la couche de présentation (telles que cellpadding, hspace, align=left, etc.) et que vous ne savez pas dans quelles instructions CSS les convertir. Une fois que vous aurez résolu le premier problème et que vous saurez comment structurer votre HTML, je vous donnerai une liste détaillant les CSS à utiliser pour remplacer les attributs de présentation d'origine.
HTML structuré
Lorsque nous apprenons pour la première fois la production de pages Web, nous réfléchissons toujours à la manière de les concevoir, en tenant compte des images, des polices, des couleurs et des plans de mise en page. Ensuite, nous utilisons Photoshop ou Fireworks pour le dessiner et le découper en petites images. Enfin, modifiez le HTML pour restaurer toutes les conceptions de la page.
Si vous souhaitez que votre page HTML soit mise en page avec CSS (compatible CSS), vous devez revenir en arrière et recommencer. Ne pensez pas d'abord à « l'apparence », mais pensez d'abord à la sémantique et à la structure du contenu de votre page.
L'apparence n'est pas la chose la plus importante. Une page HTML bien structurée peut être présentée sous n'importe quelle apparence, et CSS Zen Garden en est un exemple classique. CSS Zen Garden nous aide enfin à réaliser la puissance du CSS.
Le HTML ne se limite pas à être lu sur un écran d’ordinateur. Vos images soigneusement conçues dans Photoshop peuvent ne pas être affichées sur les PDA, les téléphones mobiles et les lecteurs d'écran. Mais une page HTML bien structurée peut être affichée n'importe où et sur n'importe quel périphérique réseau grâce à différentes définitions de CSS.
commencer à réfléchir
Commencez par apprendre ce qu’est la structure, que certains auteurs appellent également sémantique. Ce terme signifie que vous devez analyser vos blocs de contenu et l'objectif de chaque élément de contenu, puis créer la structure HTML correspondante en fonction de ces objectifs de contenu.
Si vous vous asseyez et analysez et planifiez soigneusement la structure de votre page, vous pourriez vous retrouver avec quelque chose comme ceci :
Logo et nom du site
Contenu de la page principale
Navigation sur le site (menu principal)
sous-menu
champ de recherche
Domaines fonctionnels (par exemple panier, caisse)
Pied de page (copyright et mentions légales associées)
Nous utilisons généralement des éléments DIV pour définir ces structures, comme ceci :
<div id=header></div>
<div id=content></div>
<div id=globalnav></div>
<div id=subnav></div>
<div id=search></div>
<div id=boutique></div>
<div id=footer></div>
Ce n'est pas la mise en page, c'est la structure. Il s'agit d'une description sémantique des blocs de contenu. Lorsque vous comprenez votre structure, vous pouvez ajouter l'ID correspondant au DIV. Tout bloc de contenu peut être contenu dans un conteneur DIV et un autre DIV peut y être imbriqué. Les blocs de contenu peuvent contenir n'importe quel élément HTML : titres, paragraphes, images, tableaux, listes, etc.
Sur la base de ce qui précède, vous savez déjà comment structurer le HTML et vous pouvez désormais définir la mise en page et les styles. Chaque bloc de contenu peut être placé n'importe où sur la page et la couleur, la police, la bordure, l'arrière-plan, les propriétés d'alignement, etc. du bloc peuvent être spécifiées.
Utiliser des sélecteurs est une chose merveilleuse
Le nom de l'identifiant est un moyen de contrôler un certain bloc de contenu. En enveloppant ce bloc de contenu avec un DIV et en ajoutant un identifiant unique, vous pouvez utiliser des sélecteurs CSS pour définir précisément l'apparence de chaque élément de la page, y compris les titres, les listes, les images. , liens ou paragraphes, etc. Par exemple, si vous écrivez une règle CSS pour #header, elle peut être complètement différente de la règle d'image dans #content.
Autre exemple : vous pouvez utiliser différentes règles pour définir des styles de liens dans différents blocs de contenu. Quelque chose comme ceci : #globalnav a:link ou #subnav a:link ou #content a:link. Vous pouvez également définir différents styles pour le même élément dans différents blocs de contenu. Par exemple, définissez les styles de p dans #content et #footer respectivement via #content p et #footer p. Structurellement parlant, votre page est composée d'images, de liens, de listes, de paragraphes, etc. Ces éléments eux-mêmes n'affectent pas le périphérique réseau sur lequel ils sont affichés (PDA, téléphone mobile ou TV Internet). Ils peuvent être définis comme n'importe quelle apparence de performance.
Une page HTML soigneusement structurée est très simple et chaque élément est utilisé à des fins structurelles. Lorsque vous souhaitez mettre en retrait 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 et margin est un attribut de présentation. La première appartient au HTML et la seconde au CSS. (C'est la séparation de la structure et de l'expression.)
Les pages HTML bien structurées n'ont presque pas de balises d'attribut. Le code est très propre et concis. Par exemple, le code original <table width=80% cellpadding=3 border=2 align=left> ne peut désormais écrire <table> qu'en HTML, et tout ce qui contrôle les performances est écrit en CSS. En HTML structuré, le tableau est. un tableau, rien d'autre (comme être utilisé pour la disposition et le positionnement).
Entraînez-vous à vous structurer
Ce qui précède n'est que la structure la plus basique. Dans l'application réelle, vous pouvez ajuster les blocs de contenu en fonction de vos besoins. L'imbrication DIV se produit souvent et vous verrez qu'il existe d'autres couches dans la couche conteneur, avec une structure similaire à celle-ci :
<identifiant div=conteneur de navigation>
<identifiant div=globalnav>
<ul>une liste</ul>
</div>
<div id=subnav>
<ul>une autre liste</ul>
</div>
</div>
Les éléments div imbriqués vous permettent de définir davantage de règles CSS pour contrôler la présentation. Par exemple, vous pouvez donner à #navcontainer une règle pour centrer la liste à droite, à #globalnav une règle pour centrer la liste à gauche et à #subnav une autre. règle pour centrer entièrement la liste. Différentes performances.
Remplacez les méthodes traditionnelles par du CSS
La liste suivante vous aidera à remplacer les méthodes traditionnelles par CSS :
Attributs HTML et méthodes CSS correspondantes
Description de la méthode CSS de l'attribut HTML
aligner=gauche
align=right float: gauche;
float : right ; Utilisez CSS pour faire flotter n'importe quel élément : images, paragraphes, divs, titres, tableaux, listes, etc.
Lorsque vous utilisez l'attribut float, vous devez définir une largeur pour l'élément flottant.
marginwidth=0 leftmargin=0 marginheight=0 topmargin=0 margin: 0; En utilisant CSS, la marge peut être définie sur n'importe quel élément, pas seulement sur l'élément body. Plus important encore, vous pouvez spécifier le haut, la droite, le bas et la gauche de l'élément. séparément.
vlink=#333399 alink=#000000 lien=#3333FF a:lien #3ff;
a : visité : #339 ;
a: survol : #999 ;
a:actif : #00f ;
En HTML, la couleur d'un lien est définie comme une valeur d'attribut du corps. Le style des liens est le même sur toute la page. À l’aide des sélecteurs CSS, les styles de liens peuvent être différents selon les parties de la page.
bgcolor=#FFFFFF background-color: #fff; En CSS, la couleur d'arrière-plan peut être définie pour n'importe quel élément, pas seulement pour les éléments de corps et de tableau.
bordercolor=#FFFFFF border-color: #fff; Tout élément peut définir une bordure (boeder). Vous pouvez définir respectivement haut, droite, bas et gauche.
bordure=3
cellpacing=3 border-width: 3px; En utilisant CSS, vous pouvez définir les bordures du tableau comme un style unifié, ou vous pouvez définir respectivement la couleur, la taille et le style des bordures supérieure, droite, inférieure et gauche.
Vous pouvez utiliser les sélecteurs table, td ou th.
Si vous devez définir un effet sans bordure, vous pouvez utiliser la définition CSS : border-collapse : collapse ;
<br clear=gauche>
<br clear=droit>
<br clear=tout>
clair : gauche ;
clair : c'est vrai ;
clair : les deux ;
De nombreuses mises en page à 2 ou 3 colonnes utilisent l'attribut float pour le positionnement. Si vous définissez une couleur d'arrière-plan ou une image d'arrière-plan dans le calque flottant, vous pouvez utiliser l'attribut clear.
remplissage de cellules = 3
vespace=3
hspace=3 padding : 3px ; En utilisant CSS, l'attribut padding peut être défini sur n'importe quel élément. De même, le remplissage peut être défini respectivement en haut, à droite, en bas et à gauche. le rembourrage est transparent.
align=center text-align: centre;
marge droite : auto ; marge gauche : auto ;
L'alignement du texte ne fonctionne qu'avec du texte.
Les éléments au niveau du bloc comme div et p peuvent être centrés horizontalement en utilisant margin-right: auto et margin-left: auto;
Quelques techniques et environnement de travail regrettables
En raison de la prise en charge imparfaite du CSS par les navigateurs, nous devons parfois adopter quelques astuces (hacks) ou établir un environnement (Workarounds) pour permettre au CSS d'obtenir le même effet que les méthodes traditionnelles. Par exemple, les éléments au niveau du bloc doivent parfois utiliser des techniques de centrage horizontal, des techniques de bogues de modèle de boîte, etc. Toutes ces techniques sont détaillées dans l'article de Molly Holzschlag Integrated Web Design: Strategies for Long-Term CSS Hack Management.
Une autre ressource sur les techniques CSS est « Position is Everything » de Big John et Holly Bergevin.
Comprendre le comportement du flotteur
"Containing Floats" d'Eric Meyer vous aidera à maîtriser l'utilisation des attributs float pour la mise en page. Les éléments flottants doivent parfois être effacés. La lecture de « Comment effacer les flotteurs sans balisage structurel » sera très utile.