Css Thierry
From Fxp Wiki
Contents |
Tout simplement
CSS= Cascading StyleSheet = Feuille de style en cascade
Pourquoi en cascade ?
En html, les balises sont imbriquées les unes dans les autres:
Exemple:
<body>
<p>
<blockquote>
Ma citation
</blockquote>
</p>
Blah blah
</body>
"Ma citation" est imbriquée dans blockquote, qui est lui-même dans p, qui est lui-même dans
Par contre, "Blah blah", ne se trouve qu'à l'intérieur de body.
En cascade, parce que l'on va appliquer des règles de présentation (arrière plan, couleur du texte, marge droite, épaisseur de la bordure gauche...) à nos balises html (body, div, h3, span, table, ul, li, ...) de telle sorte qu'une règle s'applique à toutes les balises qui sont à l'intèrieures, tant que la règle n'est pas modifiée.
Exemple: (blockquote = bloc de citation, c'est une balise html homologuée)
<body>
<p>
<blockquote>
Ma citation
</blockquote>
</p>
Blah blah
</body>
Le morceau de texte "ma citation", va recevoir les règles qui s'appliquent à blockquote, p et body. Ca lui retombe dessus en cascade. S'il y a une règle qui dit "body a un fond rouge", une autre qui dit "p a une police verdana", alors s'il n'y a aucune rêgle pour blockquote, on continuera d'appliquer le fond rouge et la police verdana pour "ma citation".
Ce qui veut dire que si j'avais un blockquote en dehors du p il n'aurait pas forcément la même police que celui qui est dans unp. La solution pour uniformiser tous les blockquote, il faudrait donc écrire une règle du genre "blockqote a une police verdana", qui certes répéterait celle du p dans le cas ou on a p>blockquote, mais qui assurerait que tous les blockquote auraient une police verdana.
Les règles
Voilà comment se présentent les règles:
body { background: blue; margin-left: 10px; }
On peut tout mettre sur la même ligne, cela n'a aucune importance:
body {background: blue; margin-left:10px}
Commentaires
Comme dans tous les langages, il arrivent parfois que l'on ai besoin d'ajouter un commentaire. Il faut le mettre entre /* et */
body { background: blue; /* background = fond */ margin-left: 10px; /* marge gauche */ /*font-family: verdana; */ }
Ici, on voit que j'ai même mis en commentaire une régle. Ainsi, elle ne sera pas prise en compte, et si je veux la remettre en service, il suffit d'enlever les marques de commentaire. C'est souvent utiles avec les codes couleurs.
body { background: #a2f5c9; /*background: #21a5b6 background: #21f6d8 */ }
On comprend l'utilité d'avoir toujours un éditeur de texte qui marque d'une couleur différente les règles qui commentées de celles qui sont actives. Scite
A plusieurs balises
On peut déclarer plusieurs balises ensembles pour les traits qu'elles ont en communs. Il suffit de les séparer par des virgules.
h1, h2, h3, h4, h5{ background: white; font-family: }
Il suffit ensuite de refaire des règles spécifiques pour chacun des éléments en particulier, pour affiner:
h1, h2, h3, h4, h5{ background: white; font-family: serif; } h1, h2 { font-size: 12 em; /*taille de la police =12 em*/ } h1 { text-decoration: underlined; /* ici on dit qu'il faut que ce soit souligner */ } h3 { font-size:9 em; margin-left: 10px; } h4 { font-size: 7 em; /* on a réduit la police par rapport à h3*/ margin-left: 20px; /* on décale encore la marge gauche */ }
Les règles les plus courantes
Voilà, j'ai dit tout ce qu'il y a de simple à savoir. La suite n'est pas compliquée à comprendre, mais pour faire une pause tu peux jeter un coup d'oeil sur les propriétés les plus courantes. Sinon passe à la suite: Je veux comprendre wp-layout
Il ne rest plus qu'à donner les règles les plus courantes.
Police
- font-family:
- font-style: italic ou normal
Margin et Padding et border
top = du dessus
bottom = du dessous
Padding, c'est la marge vers l'intérieur, 'entre le bord et le text', alors que margin c'est la marge entre le bord et les autres éléments autours.
Soit on écrit en épelant chacun des côtés (padding-left:3px; padding-top:5px margin-left )
Soit on écrit: margin: (haut) (droite) (bas) (gauche) margin: 3px 5px 2px 0px;
(idem pour padding)
border lui s'écrit avec trois valeur à chaque fois: border-left: 1px solid black;
C'est la taille du bord, son style (il pourrait être "dotted" par exemple, c'est à dire en pointillé), et sa couleur.
Le raccourcis: border: 1px solid black;
ou l'on n'a pas précisé left right ou bottom, s'appliquera donc à tous les côtés.
Les liens
on peut définir des styles pour les liens
- a (les liens en général)
- a:visited (les liens visités)
- a:hover (le style du liens quand la souris passe dessus)
- a:active (quand il est selectionné)
Exemple:
a, a:visited { color: blue; }
Ici je viens de dire que les liens et les liens visités auront la même couleur: bleu
On complique un peu
Imbriqués
Pour désigner un élément d'aprés sa position par rapport aux autres je peux dire:
p blockquote { background:yellow; }
Comme il n'y a pas de virgule entre p et blockquote, le navigateur va comprendre que cette règle s'applique au blockquote qui sont à l'intérieur d'un p. Attention, cela ne veut pas dire "directement" sous un p, donc il peut êtr imbriqué plus profondément.
On peut bien sùr cumuler plusieurs localisation:
"Class" un point c'est tout
Dans mon html, je peux ajouter à toute balise un attribut class qui me permettra d'affiner le style.
Par exemple, moi dans mon site multilingue, j'utilise en permanence:
<div class="en">This is in english</div> <div class="de">Das ist auf Deutsch</div> <div class="fr">Et ça d'aprés toi </div>
Pour faire varier la couleur de la police, j'utilise le petit point:
div.fr {color:blue} div.en {color: lightblue} div.de {display:none} /* petite astuce, display veut dire afficher, et ici il a la valeur "non" = aucun... donc tous les paragraphe allemand seront invisibles */
"id" en diése
La norme du html permet d'avoir des balise avec un attribut id, mais attention, un seul élément peut avoir cette identité. S'il y en a deux avec la même, le validateur w3c te dira "atttention monsieur c'est tout faux là, comment ça plusieurs balises peuvent avoir la même identité ?!"
Exemple: dans ton blog il n'y a qu'un seul div qui peut avoir id="content". Et ce div si particulier, on s'y réfère dans ta feuille de style, sous la forme:
div#content
... à une petite chose prés, que l'on omet le div puisqu'il n'y a qu'un seul élément qui peut avoir cet id.
Etoile et omission
Pour le dièse et le point, quand on veut généralisé à tous les éléments (tous les éléments class="fr" qu'ils soient div, span, td, body, p, ...) on écrit
- sans rien si c'est en début,
- avec une étoile si c'est dans une énumération
Exemple
#menu *.wp-calendar { background: green; }
Tous les éléments class="wp-calendar qui sont dans l'élément id="menu"
Feu d'artifice
Un exemple de ta wp-layout.css (la deuxième ligne)
body, html, p, td, li, #menu ul ul li, input, select, textarea { font-family: verdana, arial, helvetica, geneva, sans-serif; }
Les virgules séparent des éléments qui n'ont rien à voie ensemble, mais qui vont avoir la même règle. Par contre tu vois qu'il y a une série de termes qui ne sont pas séparé par des virgules:
#menu ul ul li
Il veut dire que la règle s'applique à des éléments qui sont dans l'élément id="menu" à l'intèrieur d'une liste puis d'une deuxième liste (les deux ul) et que ces éléments sont li
Si tu regardes ton blog (le html), tu verras que le menu n'est rien d'autre qu'une liste
UL
LI links
UL
LI Alex
LI Garoo
LI Jecolo
LI...
/UL
LI Categories
UL
LI General
/UL
LI Search
LI Archives
UL
LI January 2005
LI December 2004
LI November 2004
LI ...
/UL
LI Calendar
TABLE calendrier /TABLE
LI Other
/UL
