|
Fondamentaux CSS
- BlocRésumé
- Cette section est une sous-partie d'IntroductionAuxFeuillesDeStyle et s'adresse à tous les débutants CSS
 pour connaître comment les navigateurs appliquent CSS dans le XHTML. Les exemples vus dans cette section utiliseront des feuilles de style concises pour tenter d'exprimer clairement les concepts. Si vous essayez quelques-uns de ces exemples, je vous recommande d'utiliser un navigateur standard comme l'excellent MozillaFirefox pour obtenir l'affichage de tous les effets désirés. Cette page est une adaptation/traduction de l'ouvrage  ''Cascading Style Sheets'' d'Owen Briggs, Steven Champeon, Eric Costello et Matt Petterson (ISBN 1-904151-04-03).
Statut page : en cours de construction avec des exemples.
Eléments de Blocs 
Les éléments de blocs les plus familiers comme <p> et <h1>... commencent toujours sur une nouvelle ligne et peuvent contenir d'autres éléments de blocs ainsi que des éléments de balise comme <em> et <a>. Les styles peuvent s'appliquer à n'importe lequel des éléments de votre balisage XHTML. Si vous désirez appliquer un style à une section non décrite par un élément existant, vous pouvez créer la section en utilisant les balises <div> ou <span>.
L'élément <div> est pour un usage d'élément de bloc et <span> est à utiliser à l'intérieur de la ligne.
Pour faire fonctionner les tyles à seulement certains éléments <div>'s ou <span>' au lieu des <div>'s ou des <span>'s, les attributs id et class peuvent être ajoutés à ces balises comme identifiants.
Consultez cet aperçu rapide pour voir un exemple :
<body>
<div id="contenu">
<h1>Renard</h1>
<p>Le roux <span class="animal">renard</span> mange la <span class="animal">poule</span> paresseuse</p>
<p>Cet exemple devrait vous permettre de vous reposer
l'esprit tout en pratiquant le <span class="machine">clavier</span>.</p>
<div>
</body>
Sans aucun style déclaré, les éléments <div> et <span> au-dessus n'ont aucun effet cf exemple sur la manière dont le navigateur affiche l'exemple.
Avec une feuille de style, nous pouvons ajouter un positionnement et un traitement visuel au <div id="content">
#contenu {
padding: 20px;
margin: 0px auto;
background: #ccc
border: 5px solid #000;
width: 50%;
}
Regardez désormais l'exemple en cliquant sur ce lien.
Tout ce qui est contenu à l'intérieur de l'élément <div> est désormais inclus dans une boîte grise encadrée, centrée sur la page.
En utilisant le même style pour une série d'éléments <div>, nous obtiendrons une série de boîtes en bas de la page. Modifions l'exemple plus haut en entourant chaque phrase par un élément <div> qui utilise ce style identique :
<body>
<div id="contenu1">
<h1>Renard</h1>
</div>
<div id="contenu2">
<p>Le roux <span class="animal">renard</span> mange la <span class="animal">poule</span> paresseuse</p>
</div>
<div id="contenu3">
<p>Cet exemple devrait vous permettre de vous reposer l'esprit tout en pratiquant
le <span class="machine">clavier</span>.</p>
</div>
</body>
La page s'affichera comme ceci (cliquez sur ce lien) affichant 3 boîtes empilées.
Naturellement, parce que vous savez que les éléments de bloc peuvent contenir d'autres éléments de bloc, vous pouvez vous demander ce qu'il se passerait si vous encapsulez ces éléments <div>.
<body>
<div id="contenu">
<h1>Renard</h1>
<p>Le roux <span class="animal">renard</span> mange la <span class="animal">poule</span> paresseuse</p>
<p>Cet exemple devrait vous permettre de vous reposer
l'esprit tout en pratiquant le <span class="machine">clavier</span>.</p>
<div>
</body>
Sans aucun style déclaré, les éléments <div> et <span> au-dessus n'ont aucun effet cf exemple sur la manière dont le navigateur affiche l'exemple.
Avec une feuille de style, nous pouvons ajouter un positionnement et un traitement visuel au <div id="content">
#contenu {
padding: 20px;
margin: 0px auto;
background: #ccc
border: 5px solid #000;
width: 50%;
}
Regardez désormais l'exemple en cliquant sur ce lien.
Tout ce qui est contenu à l'intérieur de l'élément <div> est désormais inclus dans une boîte grise encadrée, centrée sur la page.
En utilisant le même style pour une série d'éléments <div>, nous obtiendrons une série de boîtes en bas de la page. Modifions l'exemple plus haut en entourant chaque phrase par un élément <div> qui utilise ce style identique :
<body>
<div id="contenu1"><div id="contenu2"><div id="contenu3">
<h1>Renard</h1>
</div></div></div>
</body>
...
Cliquez ici pour voir le résultat.
Nous nous épancherons plus tard sur ces modèles de boîtes qui peuvent se montrer plus complexes (cf le bidouillage de boîtes de TantekÇelik)... Mais que devient l'élément <span> ? Là où il n'y a pas d'élément disponible pour ajouter un style, l'élément <span> peut être ajouté pour attacher un style sans créer un saut de ligne. Communément, cela se pratique pour créer des classes hors du champ des éléments de balisage XHTML comme les en-têtes et les paragraphes. Vous pouvez le placer où vous voulez. Reprenons notre exemple du dessus et voyons comment modifier les classes animal et machine'' de telle manière à ce que nous puissions distinguer les genres dans le document :
<body>
<div id="contenu">
<h1>Fourrure et Plastique</h1>
<p>Le roux <span class="animal">renard</span> mange la <span class="animal">poule</span> paresseuse</p>
<p>Cet exemple devrait vous permettre de vous reposer
l'esprit tout en pratiquant le <span class="machine">clavier</span>.</p>
<div>
</body>
Maintenant que les balises <span> sont en place, définissons des règles que nous ajouterons à la CSS pour fournir les styles désirés pour les nouvelles classes :
.animal {
font-variant: small-caps;
}
.machine {
font-variant: small-caps; text-decoration:underline;
}
Cliquez ici pour voir le résultat.
Même si cela pourra vous être utile, vous devez prendre des précautions. Vous devez insérer la balise <span> appropriée dans votre XHTML pour chaque item désiré pour orner et parce que cet ajout fonctionne uniquement sur des navigateurs compatibles CSS, ne l'utilisez pas pour de l'information critique. Gardez à l'esprit que CSS est conçu pour des améliorations de votre message XHTML, pas du message lui-même.
Pour conclure sur ce point, puis-je vous recommander de lire et d'imprimer le code HTML de l'article de KarlDubost sur les principes de base CSS : une autre manière claire et concise d'exprimer et de résumer la structure d'un document construit proprement. Et respectant les standards !
Héritage et Cascade
Un élément peut avoir zéro, une voire plusieurs styles qui s'applique(nt). L'héritage et la cascade décrivent comment les styles s'appliquent l'un à travers l'autre sans conflits.
L'héritage
L'héritage fonctionne d'une manière qui vous est déjà familière tirée du XHTML :
<body>
<h1>Bref Exemple</h1>
<p>Maintenant <em>c'est</em> un <strong>renard qui saute !</strong></p>
</body>
Dans cet exemple, <body> est l'ancêtre (ou le parent) de <h1>, <p>, <em> et <strong> ; en d'autres mots <h1>, <p>, <em> et <strong> sont des descendants de <body>. Aussi, <body> est le parent de <h1> et <p> et <p> est le parent de <em> et <strong>. Notez néanmoins que pendant qu'un parent peut avoir plus d'un enfant, aucun enfant ne peut avoir plus d'un parent !
Grâce à cet héritage, tous les descendants d'un élément auront le même type de fonte et de couleur que leur ancêtre, à moins que vous ne déclariez autre chose dans votre feuille de style. Par exemple, si vous déclarez du texte blanc pour l'élément <body>, tout le texte contenu dans l'élément <body> sera blanc, y compris les éléments descendants. Cependant, si vous déclarez plus loin du texte gris pour <p>, alors tout le texte cencadré par l'élément <p> et ses descendants seront gris, mais le texte à l'intérieur de <h1> hérite de la couleur de leur parent <body>.
Regardons un exemple avec le style suivant :
body {
background: #000;
color: #fff;
}
p {
color: #c0c0c0;
}
Regardez le résultat dans une nouvelle fenêtre.
Il y a des exceptions à cet héritage : la propriété background n'est pas héritée.
Ressources complémentaires : Comprendre l'héritage des styles CSS
Cascade
Un des avantages de CSS est sa capacité à mettre en cascade un nombre de feuilles de style différentes pour donner un résultat. Une page peut disposer de plus d'une feuille de style parce que le navigateur peut fournir la sienne, l'utilisateur la sienne tout comme l'auteur de la page web peut en fournir une... En fait, en tant qu'auteur, vous pouvez fournir un bon nombre de feuilles de style, prenant ainsi l'avantage de la cascade pour vous donner plus d'options. Dans le cas de multiples feuilles de styles, un navigateur donnera aux feuilles un poids dans cet ordre descendant :
- auteur
- utilisateur
- navigateur
Il y a des exceptions mais c'est la méthode la plus courante. Un style d'auteur déclaré surpasse ainsi le style utilisateur et les deux surpassent le style du navigateur.
La feuille de style du navigateur est celle avec laquelle vous êtes familier. Essayez d'afficher une production XHTML non stylée dans votre navigateur : du noir, police Times News Roman sur un fond blanc ou gris avec des liens bleus soulignés. Triste non ? Mais il y a une feuille de style. Notez que les titres sont gras et gros et que le texte entre les balises <em> s'affiche en italique. Tout cela, même le fond blanc est hérité de la feuille de style du navigateur.
Vous pouvez modifier cela en créant une feuille de style qui déclare une nouvelle famille de fonte pour la balise <body>. Vos nouveaux styles seront hérités à travers la page.
Détermination de l'orde de cascade et Conflits Le conflit entre feuilles de style peut exister : voir [le lien a un paramètre-url invalide].
Vous entendrez aussi parler de l'attribut !important que vous pouvez ajouter dans la règle. Dans ce cas, ce sera la feuille de style contenant cet attribut qui aura la priorité. Mais dans la pratique et à la limite de ce que je peux constater, cet attribut n'est que très peu utilisé ?
Le Modèle de Boîte
Une boîte CSS est constituée :
- d'un contenu (le texte d'un paragraphe par exemple) ;
- d'un remplissage (padding) : l'espace entourant le paragraphe ; situé entre la bordure et le contenu de l'élément.
- d'une bordure (border) : encadrement du paragraphe ; invisible tant que sa couleur, sa largeur et son style n'ont pas été définis
- d'une marge (margin) : espace séparant la bordure de l'élément des autres éléments de la fenêtre ;
Les propriétés CSS permettent de déterminer :
- les dimensions de la zone de contenu, son arrière-plan (image, couleur) et sa couleur d'avant-plan ;
- les dimensions, la couleur et le style des bordures ;
- les dimensions du remplissage ;
- les dimensions de la marge.
Graphique extrait de l' article dOpenWeb sur les modèles de boîtes et Microsoft
Le Modèle de boîte CSS est un outil visuel de mise en page. Une boîte peut être créée autour de n'importe quelle partie de votre document et appelée par une balise <div>. Toute boîte a un certain nombre de propriétés que vous pouvez manipuler dans votre feuille de style. Regardons ce diagramme au-dessus.
La largeur et la hauteur des éléments de blocs et des éléments remplacés sont spécifiés avec les propriétés width et height.
La propriété margin permet de définir l'espace entre l'élément des autres éléments de la fenêtre en indiquant l'une des quatre valeurs correspondant aux quatre côtés : une valeur unique, ou un jeu de paires haut/bas et gauche/droite ou les quatre côtés indépendamment.
L'aire de contenu contient initialement votre contenu uniquement. Vous pouvez régler sa largeur et sa hauteur ou laisser le navigateur décider de ses dimensions en fonction de la taille du contenu, de la taille de la fenêtre de votre navigateur ou bon nombre d'autre facteurs qui dépendent de la complexité de votre mise en page.
Vous pouvez pousser le bord externe de la boîte hors du contenu en ajoutant du padding (remplissage). Le padding peut être ajouté avec une seule valeur tout autour, ou vers les bords haut, droit, gauche ou bas. Une bordure peut être ajoutée autour de cette zone de padding. CSS vous pemet d'orner l'ensemble et spécifier la largeur, le type et la couleur de la bordure que ce soit tout autour ou sur des côtés que vous définissez. Les bordures peuvent être solid, dotted et dashed.
Un peu de mathématiques : les bords extérieurs de la boîte sont le résultat de la somme de :
la taille de l'aire de contenu + le padding (remplissage) + bordure + marge
Essayons d'exprimer cela dans une boîte comme :
#box {
width: 300px
padding: 10px
border: 1px solid #000
margin: 20px
}
La largeur totale d'un bord à l'autre sera donc de : 20px+1px+10px+300px+10px+1px+20px=362px. Pas forcément évident au premier abord, aussi prenez le temps d'étudier le graphique à nouveau. La largeur déclaré de 300px ne se mesure pas à travers les bords externes ou à travers les bords visibles, c'est seulement l'aire de contenu. Si une couleur ou une image d'arrière-plan s'applique à une boîte, elle remplit l'aire à l'intérieur du bord externe.
Nous avons ici abordé les fondamentaux CSS. Reposez-vous et revenez tranquillement visiter plus tard l'IntroductionAuxFeuillesDeStyle
Autres ressources :
Conclusion / Discussion
Sur cette page nous avons parlé de quelques concepts fondamentaux derrière CSS. Si vous êtes expert, n'hésitez pas à compléter cette page. Sinon reposez-vous l'esprit. Et revenez tranquillement plus tard sur la page IntroductionAuxFeuillesDeStyle. Vous pouvez naturellement poser ici toute question en cliquant sur le bouton Editer en haut et à droite dan la barre de menu.-- ChristopheDucamp
| 
