o [[ [ uri,]* [ auto | crosshair | default | pointer | move | e

MODEL VISUEL
 position: Indique le type de positionnement d'un élément
o [static | relative | absolute | fixed | inherit] "static"
 static: Position selon le flow normal d'affichage
 relative: Permet un déplacement par rapport à la position normal selon le
flow d'affichage.
 absolute: Permet un positionnement en fonction du document HTML.
 fixed: Permet un positionnement en fonction de la fenêtre du navigateur.
o top, right, botton, left : Pemet d'indiquer le déplacement en fonction du type de
"position".
 [déplacement | auto | inherit] "auto" (déplacement: Nombre + unité de
mesure)
o ATTENTION: Toujours mettre les éléments qui utilisent la propriété "position" à la
fin des balises.
 z-index: Permet d'indiquer la position en Z de l'élément (plus le chiffre est grand, plus il
est à l'avant (par-dessus!))
 Concept des éléments flottant
o float: Permet de rendre un élément flottant. ie: Si je rends un élément flottant à
gauche, le contenu qui suit viendra se placer à sa droite en partant du haut de
celui-ci.
 [left | right | none | inherit] "none"
o clear: Permet d'indiquer que l'élément n'est pas influencé par le "float" (va se
retrouver en dessous).
 [none | left | right | both | inherit] "none"
 display: Permet de modifier la nature d'un élément
o [inline | block | list-item | inline-block | table | inline-table | table-row-group |
table-header-group | table-footer-group | table-row | table-column-group | tablecolumn | table-cell | table-caption | none | inherit] "inline"
USER INTEFACE
 curseur: Permet de modifier l'apparence du pointeur de souris
o [[ [uri,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nwresize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help |
progress ] ] | inherit] "auto"

outline: Propriété générique: Ressemble à "border". La différence est que la largeur de
"outline-width" n'affecte pas la hauteur du rendu de l'environnement (c’est comme s'il
était positionné de façon absolu).
o outline-width: Largeur: [<border-width> | inherit] "medium" (Utilise les mêmes
valeurs que border-width)
o
outline-style: Apparence: [<border-style> | inherit] "none" (utilise les mêmes valeurs
que border-style)
© 2016 Richard Vigneux, Enseignant
o
outline-color: Couleur: [<color> | invert | inherit] "invert"
 "invert" est intéressant, car il utilise la couleur d'arrière-plan de l'élément
pour se donner la couleur inverse. Ceci nous assure que la couleur de la
bordure sera toujours visible quelque soit la couleur de fond.
AUTRES
 visibility: Affecte la visibilité d'un élément. Ce dernier utilisera l'espace qu'il a à prendre
dans le rendu qu'il soit visible ou non (la propriété "display" permet d'enlever l'élément
de l'affichage avec "hidden" (visibleblock).
o [visible | hidden | collapse | inherit ] "visible"
 "collapse" n'a de sens qu'avec les cellules d'un tableau. Il donne le même
effet que "display:none" pour les cellules de tableau. Appliqué sur autre
chose, égale "visibility:hidden".
 voir: http://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#dynamiceffects
 content: Permet de générer un contenu. NE S'UTILISE QU'AVEC les pseudo éléments
":before" et ":after".
o [normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote |
close-quote | no-open-quote | no-close-quote ]+ | inherit] "normal".
o Est utilisé pour préfixer ":before" ou suffixer ":after" un élément d'un contenu. Par
exemple, je pourrais vouloir que les citations soit encadré par "<<" et ">>". Ou
ajouter un no de chapitre via "counter". OU ajouter un espace avant et après " ".
 counter-increment: Permet d'indiquer la variable "counter" qu'on veut incrémenter (on
peut ajouter aussi le pas d'incrémentation).
o [ <identifier> <integer>? ]+ | none | inherit]
o
o
counter-reset: Permet de réinitialiser une variable "counter".
 [ <identifier> <integer>? ]+ | none | inherit]
Exemple:
Body
{
counter-reset: chapitre; /* Créer et initialiser un
compteur */
}
/* Sera initialisé qu'une seule fois
puisque sur BODY */
h1:before
{
content: "Chapitre " counter(chapitre) ". "; /* Utiliser
le compteur */
counter-increment: chapitre; /* Incrémenter le compteur
"chapitre" */
}
h1
{
counter-reset: section;
/* Créer et initialiser un
autre compteur */
}
/* Sera réinitialisé à la
rencontre d'un H1 */
© 2016 Richard Vigneux, Enseignant
h2:before
{
content: counter(chapter) "." counter(section) " ";
counter-increment: section; /* Incrémenter le compteur
"section" */
}
o
En résumé, le code précédent crée et initialise le compteur "chapitre" à la
rencontre de la balise "body". Puisque cette dernière n'existe qu'une seule fois
dans le document, le compteur "chapitre" ne sera initialisé qu'au départ. On
indique ensuite qu'on doit préfixer ":before" les "h1" de "Chapitre" suivi de la
valeur du compteur. Après avoir utilisé la valeur du compteur "chapitre", on
l'incrémente
"counter-increment:chapitre". En suite on déclare et initialise une autre variable
nommée "section". Celle-ci sera initialisée à chaque rencontre de "h1". Donc
éventuellement, plusieurs fois. On utilise et incrémente ce nouveau compteur en
préfixe aux éléments "h2".
SÉLECTEURS AVANCÉS
 http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#selectors
o Regarder les sélecteurs en fonction de l'attribut:
 E[nomAttrib], E[nomAttrib ="valAttrib"]
o Regarder les sélecteur en fonction de l'ordre ou de l'état:
 E:nth-child(indiceDeLOrdreApparitionDansParent)  Enfant direct
 E:nth-of-type(indiceDeLOrdreApparitionDansParent)  Enfant quelque soit la
profondeur.
 E:only-child  seule enfant direct de son parent, E:only-of-type  Seule
représentant "E".
 E:empty  Élément sans enfant.
 E:not(s)  Négation: "E" représente normalement un parent (souvent "*") et
"s" représente le sélecteur qui représente l'élément à exclure de la mise en
forme. Donc s'applique à tous les enfants de "E" sauf à ceux indiqué par "s".
AUTRES



Lorsqu'on positionne ou on rend flottant. On doit se souvenir que les éléments sortent
du flux normal d'affichage. Ceci implique que les éléments qui ne sont pas positionnés
devront impérativement avoir des éléments qui les empêchent de se retrouver en
dessous des éléments positionnés. De plus, on doit utiliser la propriété "clear" sur les
éléments suivant les "float" pour que le flottement cesse.
Texte de remplissage pour faire des tests: "Lorem ipsum"  http://fr.lipsum.com/
Le sélecteur "*": En raison du fait que ce sélecteur à priorité sur l'héritage, lorsqu'on
applique la police de base à notre document, il est habituel d'utiliser "body" comme
© 2016 Richard Vigneux, Enseignant


sélecteur au lieu "*". Ceci permet d'assurer l'héritage normal auquel on s'attend (ex :
H2 vs H1).
ATTENTION: Pour qu'un élément soit centrable, ses marges droite et gauche doivent
être à "auto". Le problème survient lorsqu’on décide au début de notre CSS de
supprimer l'ensemble des marges et des rembourrages. C’est souvent un problème
avec les tableaux si l’on veut les centrer dans quelque chose.
Utiliser le débogueur de Firefox (Inspecteur de code)
© 2016 Richard Vigneux, Enseignant