CSS - LIFL

unités de mesure
MEMENTO CSS V071109
remarques, critiques et encouragements à :
[email protected]
généralités
/* commentaires css */
les non terminaux sont en italiques
les valeurs par défaut sont soulignées
att-i | att-j << [val1 | val2 | ... | valn] signifie : att-i ou att-j peut
prendre une des valeurs : val1, val2, ... valn
forme générale d'une règle CSS : selector { property : value ; }
H : propriété héritée
NH : propriété non héritée
Z : zéro par défaut ABR : propriété abrégée
syntaxe des sélecteurs
tag, tag-i, tag-j sont des balises XML, HTML
*
sélecteur universel
tag
sélecteur de type
tag-i tag-j
sélecteur de descendant
tag-i > tag-j
sélecteur d'enfant (descendant direct)
tag:first-child premier enfant de l'élément
tag:first-letter première lettre de l'élément
tag:first-line
première ligne de l'élément
a:link
lien non visité
a:visited
lien visité
tag:active
actif (en cours de sélection)
tag:before
permet d'insérer du texte avant
tag:after
permet d'insérer du texte après
tag:hover
survol de l'élément
tag:focus
ayant le focus (accepte l'entrée clavier)
tag:lang(lg)
tag est un élément qui utilise la langue lg
tag-i + tag-j
sélecteur de frères adjacents
tag[att]
sélecteur d'attribut
tag[att="val"] val est la valeur de l'attribut att
tag[att~="val"] val est une des valeurs de l'attribut att
tag[lang|="lg"] lang a pour valeur une liste commençant par lg
tag.val
en HTML identique à tag[class~="val"]
.val
sélecteur d'attribut class
tag#val
en HTML identique à tag[id="val"]
#val
sélecteur d'attribut id
@page
mise en page pour l'impression
@page:first @page:left @page:right
première page, page gauche et page droite
BP 90168 – ARLES Cédex
Tél : 04 90 52 24 10 / Fax : 04 90 52 24 15
e-mail : [email protected]
Site internet : www.up.univ-mrs.fr/iutarles
ih << inherit
value ou x-value seront définis par un nombre décimal suivi d'une
unité sauf 0 (zéro) qui est sans unité
dimensions : taille et position
px
em
ex
%
in
pt
pc
modèle des boites
color
arrière plan conteneur
width
margin
pixel, dépendant de la résolution de l'écran
valeur relative : largeur de la lettre M
valeur relative : hauteur de la lettre x (½ em)
pourcentage relatif au bloc conteneur
pouce (2,54cm)
mm
millimètre
point (1/72in)
cm
centimètre
pica (12pt ou 1/6in)
padding
Content
couleur en RGB
défini color ou x-color par composition rouge/vert/bleu
#XXXXXX
X est un nombre hexadécimal
#XXX
X est un nombre hexadécimal
rgb(r, g, b)
r, g et b sont 3 entiers entre 0 et 255
rgb(r%, g%, b%) r, g et b sont 3 entiers entre 0 et 100
couleur par mot clé
color | x-color << [aqua|black|blue|fuschia|gray|green|lime| maroon|
navy|olive|orange|purple|red|silver|teal|white|yellow]
héritage et cascade
de la priorité la plus faible à la priorité la plus forte
origine de la feuille de style
1. feuille de style par défaut du navigateur
2. feuille de style de l'utilisateur
3. feuille de style de l'auteur
3.1 feuille de style externe (liée avec <link .../>
3.2 feuille de style importées ( avec @import)
3.3 feuille de style embarquées (avec <style>...</style>)
3.4 style en ligne (attribut d'un élément)
3.5 déclaration marquée !important par l'auteur
4. déclaration marquée !important par l'utilisateur
spécificité du sélecteur
poids de la spécificité = (a, b, c, d)
a = 1 pour un style en ligne 0 sinon
b nombre d'attributs identifiants (id)
c nombre de classe d'attribut ou de pseudo-classe
d nombre d'éléments dans le sélecteur (nb. descendants + 1)
ordre des règles
Si plusieurs règles de même origine et de même spécificité restent
conflictuelles alors la dernière écrase les précédentes.
héritage
Les éléments enfants héritent de certaines propriétés de leurs parents.
'inherit' permet l'héritage de propriétés qui sont ou ne sont pas (H ou
NH) implicitement héritées.
border
height
background-color
dimensions de l'élément :
{size : [value | auto | ih] ; } NH
{max-size : [value | none | ih] ; } NH
{min-size : [value | none | ih] ; } NH
size << [height | width]
largeur de marge :
les marges sont transparentes et fusionnent verticalement.
les marges peuvent avoir des valeurs négatives.
{margin-side : [value | auto | ih] ; } NH Z
{margin : t-value r-value b-value l-value ; } NH ABR
side << [top | right | bottom | left]
bordures (style, largeur, couleur) :
{border-side-style : style ; } NH
x-style | style << [none | dotted | dashed | solid | double |
groove | ridge | inset | outset]
{border-style : t-style r-style b-style l-style; } NH ABR
{border-side-width : [value| thin| medium | thick| ih] ;}NH
{border-width : t-width r-width b-width l-width; } NH ABR
{border-side-color : [color | transparent | ih] ; } NH
{border-color : t-color r-color b-color l-color; } NH ABR
{border-side : style width color; } NH ABR
{border : style width color; } NH ABR appliquée aux 4 côtés
largeur de l'espacement :
{padding-side : [value | ih] ;} NH Z
{padding : t-value r-value b-value l-value ; } NH ABR
premier plan et arrière plan
color détermine la couleur du texte (et de la bordure)
{color : [color | ih] ; } H
{background-color : [color | tranparent | ih] ; } NH
{background-image : [url(url) | none | ih] ; } NH
{background-repeat : [repeat | no-repeat | repeat-x | repeat-y |
ih] ; } NH
{background-position : [x-side y-side | x-value y-value | ih] ; }
NH par défaut left top ( 0% 0%)
{background-attachment : [scroll | fixed | ih] ; } NH
{background : color image repeat position attachment; } NH
flottement et positionnement
{display : [block | inline | none | run-in] ; } NH
{float : [left | right | none | ih] ; } NH
{clear : [left | right | both | none | ih] ; } NH
{position : [static | relative | absolute | fixed | ih] ; } NH
relative décalage depuis sa position initiale
absolute positionnement relatif a son bloc conteneur
fixed positionnement relatif a la zone de visualisation
{side : [value | auto | ih] ; } NH
side << [top | right | bottom | left]
{overflow : [visible | hidden | scroll | auto | ih] ; } NH
{clip : [rect(top, right, bottom, left) | auto | ih] ; } NH
{visibility : [visible | hidden | collapse | ih] ; } H
{z-index : [ integer | auto | ih] ; } NH integer est un entier
bloc conteneur d'un élément
élément fixed : zone de visualisation
élément absolute : ancètre le plus proche ≠ static
ancètre block : bord de l'espacement
ancètre inline (avec P première et D dernière boite générée)
direction ltr : de P(haut, gauche) à D(bas, droit)
direction rtl : de P(haut, droit) à D(bas, gauche)
autre : bords du contenu de l'ancètre bloc le plus proche
sinon bloc conteneur initial (html ou body)
quelques liens utiles
www.alsacreations.com
www.siteduzero.com
www.stylescss.free.fr
www.yoyodesign.org
www.openweb.eu.org
www.pompage.net
dédiée à la conception web
créé pour aider les débutants
comme son nom l'indique
traduction française de la norme
standards et accessibilité
le web design puisé à la source
police et texte
police
{font-family : [list-policy, generic | ih] ; } H
list-policy << liste de polices séparées par des virgules
generic << [serif | sans-serif | monospace | cursive | fantasy]
{font-size : [ value | absolute-size | relative-size | ih] ; } H
absolute-size << [xx-small | x-smal| small | medium | large | xlarge | xx-large] du plus petit au plus grand
relative-size << [smaller | larger]
{font-weight: [w | normal | bold| bolder| lighter| ih] ; } H
w << [100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]
{font-style : [normal | italic | oblique | ih] ; } H
{font-variant : [normal| small-caps | ih] ; } H
{font : [family | system-font] size weight style ; } ABR H
system-font << [caption | icon | menu | message-box | smallcaption | status-bar] certaines polices du syst. d'exploitation
texte
{text-transform : [none|capitalize|lowercase|uppercase| ih] ;} H
{text-decoration : [none | underline | overline | line-through |
blink] ; } NH sans, souligné, surligné, biffé, clignotant
{line-height : [normal | value | ih] ; } H
{text-indent : [value | ih] ; } H Z
{text-align : [left | right | center | justify | ih] ; } H
v-align << [baseline | sub | super | top | text-top | middle |
bottom | text-bottom] habituel, indice, exposant, ...
{vertical-align : [v-align | value | ih] ; } NH
{letter-spacing : [normal | value | ih] ; } H
{word-spacing : [normal | value | ih] ; } H
{white-space : [normal| pre|nowrap|pre-wrap|pre-line| ih] ;} H
implicetement réduit, conserver la saisie, ...
{direction : [ltr | rtl | ih] ; } H par défaut left to right
{unicode-bidi : [normal| embed| bidi-override| ih] ; } NH
mise en page pour l'impression
en association avec le sélecteur @page
{size : [w-value h-value | portrait | landscape | auto | ih] ; }
{marks : [crop | cross | none | ih] ; }hirondelles
{page-break-before : [page-break-value | auto | ih] ; }
{page-break-after : [page-break-value | auto | ih] ; }
{page-break-inside : [page-break-value | auto | ih] ; }
page-break-value << [always | avoid | left | right]
{orphans : [integer | ih] ; } nb. min de lignes par page
{widows : [integer | ih] ; } nb. min de lignes par page
les tableaux
{caption-side : [top | bottom | ih] ; } H pos. de la légende
hiérarchie visuelle : cell > row > row group > column >
column group > table
{border-collapse : [collapse | separate | ih] ; } H
{border-spacing : [row-value col-value| ih] ; } H Z
{empty-cells : [show | hide | ih] ; } H
{table-layout : [auto | fixed | ih] ; } NH
{display : [table-display | ih] ; } NH permet de simuler des
éléments (X)HTML en XML
table-display << [table | inline-table | table-row-group | tableheader-group | table-footer-group | table-row | table-columngroup | table-column | table-cell | table-caption]
les listes
{list-style-type : [bullets-style | num-style | none | ih] ; } H
bullets-style << [disc | circle | square]
num-style << [decimal | decimal-leading-zero | lower-alpha |
upper-alpha | lower-latin | upper-latin | lower-roman | upperroman | lower-greek]
{list-style-position : [inside | outside | ih] ; } H
{list-style-image : [url(url) | none | ih] ; } H
{list-style : list-type list-position list-image ; }H ABR
{display : [list-item | ih] ; } NH permet de simuler des
éléments (X)HTML en XML
contenu généré
en association avec les pseudo-éléments :before :after
{content : [normal| string| uri|count| attr(attribut)| open-quote|
close-quote| no-open-quote| no-close-quote| ih] ; } NH
quotes, guillemets et apostrophe
{quotes : [quote-before quote-after | none | ih] ; } H
quote-before quote-after << ['\unicode-hexa' | string]
0022
0027
2039
203A
00AB
00BB
guillemets doubles
apostrophe
guillemets simples gauches
guillemets simples droits
guillemets doubles gauches
guillemets doubles droits
2018
2019
201C
201D
201E
apostrophe courbe gauche
apostrophe courbe droite
guillemets courbes gauches
guillemets coubes droits
guillemets inférieurs doubles
compteur
count << [counter(name) | counters(ident, separator)]
{counter-reset : [name int-initial | none | ih] ; } NH
{counter-increment : [name int-increment| none| ih] ; } NH