Utilisateur:Darkoneko/CSS
Un article de Wikipédia, l'encyclopédie libre.
[modifier] Feuilles de style
/ou mettre les informations de style ?
[modifier] vocabulaire
- une regle CSS va s appliquer a plusieurs cibles et decrit l'habillage pour celles ci.
- une propriete est un element constitutif d'une regle.
[modifier] exemple de regle :
p { color:navy; }
Notes
- la regle concerne les paragraphes
- pas d'espace avant color, ;ais il est possible d'en mettre un apres
- color:navy est une propriete
[modifier] cibles possibles
- "*" : designe tous les elements (==reglage par defaut)
- h1, h2, h3, h4, h5, h6
- p, div, span...
[modifier] cibler plusieurs elements d'un coup
h1, h2, h3 { color:green: }
il est aussi possible d'utiliser une "classe" generique pour cibler un peu n'importe quoi
[modifier] Qualifier tous les elements possedant une classe
.erreur { color:red; }
[modifier] Ne qualifier que certains elements
(ex : les paragraphes)
p.erreur { color:red; }
[modifier] Qualifier tous les elements a l interieur d'un element utilisant la classe
L'exemple suivant applique les elements "fils" (contenu dans) un paragraphe utilisant la classe
La seule difference avec le precedente est l espace entre p et le fils
p .erreur { color:red; }
autre exemple
CSS : "qualifier les li se trouvant dans des ul qui se trouvent dans un tableau" table ul li { .... }
[modifier] qualifier des identifiants uniques
ex de page :
<h1 id="titre1" ...>
CSS
h1#titre1 { ... }
Note : comme titre1 est unique, le "h1" n'est pas obligatoire mais permet juste de s'y retrouver plus facilement
[modifier] exemples
p#main { ... } p #main { ... { #main p { ... }
- qualifie le paragraphe ayant l'identifiant main
- qualifie les elements se trouvant au sein d'un paragraphe ayant l'identifiant main
- qualifie tous les paragraphes se trouvant dans la cible ayant l'identifiant main'
body #main p.smallText span { .... }
qualifie un span
- qui se trouve dans un paragraphe de la classe smallText
- qui se trouve lui meme dans la cible possedant l'identifiant main
- qui se trouve dans le body
[modifier] Mise de commentaire :
/* comme ca */
[modifier] proprietes
[modifier] background-color:
couleur d'arriere plan. C'est le même argument que color.
[modifier] le texte
[modifier] les listes
[modifier] Pseudos classes
les pseudos classes sont des classes pre-existantes que l'on peut completer
- a:visited = pour un lien visite
- a:hover = la souris est sur l'element
- a:active = le lien est en train d'etre clique
Note: visited et active sont quasi reserves aux liens, mais hover est utilisable a peut pres partout (sauf que ce con d'IE ne le reconnais que pour les liens)
[modifier] le "modele de boite"
[modifier] type d'affichage
display:
- block = comme une balise block (sur tout l'espace disponible en largeur)
- inline = comme une balise inline
- none = ne pas afficher l'élément
- float:left (ou right) = élément flottant
NOTE : pour indiquer d'un élément qu'il ne supporte pas le cotoiement d un flottant (exemple, un titre qui serait gêné par une image a droite)
- clear:left / right / both (se placer dessous plutot qu'à coté si un élément flottant à gauche, droite ou des deux cotés.
- z-index : permet de mettre des éléments hors flux (float, absolute...) les uns au dessus/dessous des autres en fonction de la valeur affectée.