Feuilles de style CSS
- But : contrôler la présentation du document en fonction du média :
- contrôler les marges ;
- contrôler les polices des sections et du texte ;
- gérer les couleurs.
Les CSS sont utilisées pour séparer l'affichage de la structure du document,
tous les attributs déclassés de HTML 4.0 peuvent être définis
en utilisant les propriétés de style.
- Trois types de méthodes :
- locale qui affecte un style à un élément HTML d'une page ;
- intégrée qui affecte des règles de style à toute la page ;
- externe qui définit des règles de style dans un fichier et peut
être appelé dans toute page HTML.
- Cascading Style Sheet = cascade car un ordre est respecté pour
interpréter les informations de style :
- externe ;
- intégré ;
- local (prend le dessus sur les autres) ;
- Spécifications :
- CSS 1 : décembre 1996
- CSS 2 : mai 1998
- CSS 3 : en développement
- pour plus d'informations : http://www.w3.org/Style/CSS/
Propriétés de style et leurs valeurs
En CSS une déclaration de style est toujours de la forme :
propriété : valeur
Lorsqu'il y a plusieurs déclarations, elles sont séparées par
des ';'
propriété1 : valeur1 ; propriété2 : valeur2;
... ; propriétéN : valeurN
Les commentaires sont autorisés dans les déclarations de style, ex :
EM { color: red } /* attribuer la couleur rouge a l'element EM */
Nous donnons ci-dessous la liste complète des propriétés et des valeurs
autorisées pour la norme CSS1 de décembre 1996 révisée
en janvier 1999. La norme CSS2 du 12 mai 1998 reconnaît toutes les propriétés
de CSS1 et en ajoute (nous préciserons les propriétés spécifiques
à CSS2). CSS2 est construit sur CSS1 et toutes les feuilles de style valides en CSS1 sont valides
pour CSS2.
Légendes :
| a | b | a ou b |
| a || b | a ou b ou les 2 |
| * | 0 ou plusieurs fois |
| + | au moins une fois |
| ? | optionnel |
| {m, n} | au moins m fois et au plus n fois |
Polices
- font-family : (nomf | nomfg,)* (nomf | nomfg)
- nomf = nom famille (helvetica)
- nomfg = serif | sans-serif | cursive | fantasy | monospace
BODY { font-family: monaco, helvetica, sans-serif }
- font-size: absolute-size | relative-size | length | percentage
- absolute-size : xx-small | x-small | small | medium | large |
x-large | xx-large
- relative-size : larger | smaller
- length : entierpt
- percentage : entier%
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 3em } /* 3 fois plus grand que la taille du parent */
- font-style: normal | italic | oblique
H2 { font-style: italic }
- font-variant: normal | small-caps
H3 { font-variant: small-caps }
- font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 |
500 | 600 | 700 | 800 | 900
P { font-weight: normal } /* = 400 */
H1 { font-weight: 700 } /* = bold */
STRONG { font-weight: bolder } /* plus gras que parents */
- font : [ font-style || font-variant || font-weight ]? font-size [ / line-height ]?
font-family
P { font: 12pt/14pt sans-serif }
Textes
- word-spacing: normal | xem | xcm ;
avec x un nombre
P { word-spacing: 2em }
- letter-spacing: normal | xem | xcm ;
avec x un nombre
P { letter-spacing: 0.5em }
- white-space: normal | pre | nowrap
PRE { white-space: pre }
P { white-space: normal }
- text-decoration: none | [ underline || overline || line-through || blink ]
A:link, A:visited, A:active { text-decoration: underline }
- text-shadow: none | [couleur || taille taille taille? ,]* [couleur ||
couleur taille taille taille?] | inherit (CSS2)
H1 { text-shadow: 0.2em 0.2em }
H2 { text-shadow: 3px 3px 5px red }
- vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | x%
- text-transform: capitalize | uppercase | lowercase | none
H1, H2, H3 { text-transform: uppercase }
- text-align: left | right | center | justify
H1, H2, H3 { text-align: center }
- text-indent: x% | xem | xcm
P{ text-indent: 4em }
- line-height: x | x% | xem | xcm
P{ line-height: 1.5; }
Couleurs et fonds
- color: nom_couleur | hexa_rgb | rgb_entier | rgb_%
- nom_couleur : aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, purple, red, silver, teal, white, and yellow
H1 { color: yellow }
- hexa_rgb : #RRVVBB (valeurs pour rouge, vert et bleu ; 0..9A..F)
H1 { color: #FFFFCC }
- rgb_entier : rgb(R, V, B) avec des valeurs entre 0 et 255
H1 {color: rgb(255,255,40) }
- rgb_% : color: rgb(R%, V%, B%) avec des valeurs entre 0 et 100
H1 { color: rgb(100%, 100%, 20%) }
- background-color: couleur | transparent
H1 { background-color: #FFCCCC}
- background-image: url(adresse) | none
BODY { background-image: url(plage.gif) }
- background-repeat: repeat | repeat-x | repeat-y | no-repeat
BODY { background-image: url(frise.gif);
background-repeat: repeat-y; }
- background-attachment: scroll | fixed
BODY { background-image: url(frise.gif);
background-repeat: repeat-y;
background-attachment: fixed;}
- background-position: [% | taille]{1,2} | [top | center | bottom] || [left | center | right]
BODY { background-image: url(plage.gif); background-repeat: no-repeat;
background-position: top right}
- background: background-color || background-image || background-repeat
|| background-attachment || background-position
P { background: url(plage.gif) green 40% repeat fixed }
Blocs
- Marges : valeurs possibles x | x% | xem | auto
- margin-right: marge droite ;
P{ margin-right: 100 }
- margin-left: marge gauche ;
P{ margin-left: 2em}
- margin-top: marge en haut ;
P{ margin-top: 3%}
- margin-bottom: marge en bas ;
- margin: [ x | x% | xem | auto ]{1,4}
P { margin: 2em } /* toutes à 2em */
P { margin: 1em 2em } /* top et bottom = 1em, right et left = 2em */
P { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
- Blanc autour du bloc : valeurs possibles x | x% | xem | auto
- padding-top: espace en haut ;
- padding-right: espace à droite ;
- padding-bottom: espace en bas ;
- padding-left: espace à gauche ;
- padding: [ x | x% | xem | auto ]{1,4}
P { background: blue; padding: 1em 2em;}
- Bordure : valeurs possibles thin | medium | thick | taille
- Style du cadre, valeurs : none | dotted | dashed | solid | double | groove | ridge | inset | outset
- border-top-style (CSS2)
- border-right-style (CSS2)
- border-bottom-style (CSS2)
- border-left-style (CSS2)
- border-style: [couleur]{1,4} (CSS2)
P {border-style: dotted}
- border-style (CSS1)
- Couleur du cadre, valeurs : couleur | inherit | transparent (uniquement pour border-color)
- border-top-color (CSS2)
- border-right-color (CSS2)
- border-bottom-color (CSS2)
- border-left-color (CSS2)
- border-color: [couleur]{1,4} (CSS2)
P {border-color: yellow; border-style: solid}
- border-color: couleur (CSS1)
- largeur de la bordure, valeurs : thin | medium | thick | taille
- border-top-width
- border-right-width
- border-bottom-width
- border-left-width
- border-width: [thin | medium | thick | taille]{1,4}
H1 { border-width: thin } /* tous sont thin */
H1 { border-width: thin thick } /* top et bottom thin, left et right thick */
H1 { border-width: thin thick medium } /* top thin, right et left thick, bottom medium */
H1 { border-width: thin thick medium thin } /* top, right, bottom, left */
- raccourcis :
- border-top: border-top-width || border-style || couleur
H1 { border-top: thick solid blue }
- border-right: border-right-width || border-style || couleur
- border-bottom: border-bottom-width || border-style || couleur
- border-left: border-left-width || border-style || couleur
- border: border-width || border-style || couleur
P { border: solid red } est équivalent à :
P { border-top: solid red; border-right: solid red;
border-bottom: solid red; border-left: solid red}
- Dimensions du bloc (utilisable pour les textes et les images) :
- width : taille | % | auto
.icon { width: 100px }
- height : taille | auto
P { height: 100px }
Format visuel
- display:
- valeurs en CSS1 : block | inline | list-item | none
- valeurs en CSS2 : inline | block | list-item | run-in | compact | marker | table |
inline-table | table-row-group | table-header-group | table-footer-group |
table-row | table-column-group | table-column | table-cell | table-caption | none |
inherit
P { display: block }
EM { display: inline }
LI { display: list-item }
IMG { display: none }
- position: static | relative | absolute | fixed | inherit (CSS2)
- float: left | right | none
.icon {width:100px; float:right}
- clear : none | left | right | both
H1, H2 {clear: both}
Listes
- list-style-type:
- valeurs pour CSS1 : disc | circle | square | decimal | lower-roman | upper-roman |
lower-alpha | upper-alpha | none
OL { list-style-type: lower-roman } /* i ii iii iv v etc. */
- valeurs pour CSS2 : disc | circle | square | decimal | decimal-leading-zero |
lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin |
upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic |
hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit
- list-style-image: url | none
UL { list-style-image: url(boule.gif) }
- list-style-position: inside | outside
- list-style: [list-style-type] || [ list-style-position] || [url| none]
Tableaux (CSS2)
- caption-side: top | bottom | left | right | inherit
CAPTION { caption-side: bottom; width: auto; text-align: left }
- table-layout: auto | fixed | inherit
- bords :
- border-collapse: collapse | separate | inherit
- border-spacing: taille taille? | inherit
- empty-cells: show | hide | inherit
- border-style: (c.f. valeurs des bordures pour les blocs)
COL { border-style: none solid }
TABLE { border-style: hidden }
- textes : utiliser les propriétés des textes
TH { text-align: center; font-weight: bold }
TH { vertical-align: baseline }
TD { vertical-align: middle }
Curseurs (CSS2)
cursor: [ [url ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize |
n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit
P { cursor : url("mything.cur"), url("second.csr"), text; }
H1 { cursor : wait }
Style local ou en ligne : attribut style
L'attribut style permet de changer le style :
- d'un élément unique (<P>, <A>, <HR>, <Hn>...) ;
- d'une partie de la page :
<SPAN style="..."> ... </SPAN>
modifie le style de tout le bloc compris entre les éléments
SPAN et /SPAN ;
<DIV style="..."> ... </DIV>
modifie le style de tout le bloc compris entre les éléments
DIV et /DIV après avoir effectué un saut de ligne.
Règles et classes pour les styles intégré et externe
Règles
Une règle est composée de deux parties un sélecteur
et une déclaration.
Règle simple
- syntaxe : élément {propriété: valeur}
H1 { color: blue }
- utilisation dans le fichier html : appeler l'élément habituel,
le style s'applique tout seul.
<H1>Un titre de niveau 1 en bleu</H1>
Règle à plusieurs propriétés
Règles pour plusieurs éléments
- élément1, élément2, élément3 {propriété: valeur}
H1, H2, H3 { font-family: helvetica }
- utilisation dans le fichier html : appeler les éléments, les
styles s'appliquent automatiquement.
Relations d'héritage
Un élément intégré dans un autre hérite du style de
l'élément parent :
- déclaration de style :
H1 { color:blue}
- code HTML :
<H1>Un titre <EM>important</EM></H1>
- résultat : tout le titre est écrit en bleu
Un titre important
Sauf si on a défini explicitement une autre valeur pour la propriété pour
cet élément :
- déclaration de style :
H1 { color:blue}
EM{ color:red}
- code HTML :
<H1>Un titre <EM>important</EM></H1>
- résultat : tout le titre est écrit en bleu sauf la partie EM en rouge
Un titre important
Il est possible de définir le comportement d'un élément lorsqu'il est
imbriqué dans un autre :
- élément_parent élément_enfant {propriété:
valeur}
- utilisation normale.
Par exemple on peut définir un style pour <LI> quand
il est fils de <UL> et un autre
quand il est fils de <OL>.
Exemple, une liste qui affiche des caractères plus petits lorsqu'on est dans une sous-liste :
UL LI { font-size: small }
UL UL LI { font-size: x-small }
Regroupements :
H1 B, H2 B, H1 EM, H2 EM { color: red }
Classes
- Syntaxe : (élément).label {propriété: valeur}
.rouge {color:red}
- Utilisation : <élément
class="label">...</élément>
<P class="rouge">paragraphe rouge</P>
S'applique à tous les éléments sauf BASE, HEAD, HTML, META, SCRIPT, STYLE, TITLE.
Pseudo-classes
Les styles sont attachés à un élément, les pseudo-classes
peuvent être utilisés comme sélecteurs CSS mais n'existent pas dans le
source HTML (les ancres sont des pseudo-classes)
A:link { color: red } /* unvisited link */
A:visited { color: blue } /* visited links */
A:active { color: lime } /* active links */
A:link IMG { border: solid yellow } /*met le lien autour de l'image en jaune. */
Style intégré ou global : élément STYLE avant le BODY
Syntaxe :
- <STYLE> </STYLE>
- placer juste avant <BODY>
Style externe ou lié : élément STYLE dans un fichier séparé
Fichier externe de style (.css)
Fichier html qui intègre ce style.
Média cible (CSS2)
L'attribut media de l'élément LINK permet de
définir le média pour la feuille de style. Il peut prendre en CSS2 les valeurs :
all | aural | braille | embossed | handheld | print | projection | screen | tty | tv
.
exemple :
<LINK rel="stylesheet" type="text/css"
media="print, handheld" href="mon_style.css">
