Support de cours - Lita

1 Principes de base
1.1 Structure d’une règle Css
Un document Css est une succession de règles. Détaillons une des règles de l’exemple
précédent :
body {
}
position: absolute;
left: 250px;
background: #ADFF2F;
padding-bottom: 30px;
Il y a deux parties ; le sélecteur et le bloc de déclarations. Pour cet exemple, le
sélecteur est body, tandis que le bloc de déclarations est entouré des accolades { et }.
Le bloc de déclarations contient des déclarations de la forme propriété: valeur ;.
Une déclaration est toujours terminée par un point-virgule, et le nom de la propriété
est toujours séparé de sa valeur par les « deux points ». Sur cet exemple, les valeurs de
quatre propriétés (position, left, background, padding-bottom) sont définies.
Il existe plusieurs façons de faire référence à un ou plusieurs éléments Html (plusieurs
types de sélecteurs), de nombreuses propriétés qu’il est possible de modifier, ainsi
que de nombreuses façons d’en indiquer la valeur.
1.2 Associer Html et Css
Pour que le navigateur sache quel style appliquer au document Html qu’il interprète,
il est nécessaire d’associer un document Css (un fichier) à un document Html. La
balise link permet d’indiquer un fichier Css à utiliser dans l’en-tête (head)
du document Html .
L’exemple suivant associe le document Html courant avec le fichier Css style.css :
...
Blog de Dieu en BD
...
...
rel définit la relation que la liaison représente : ici une feuille de style (stylesheet) ;
href indique l’URL (cf. ssec. 2.5, p. 10) vers le fichier représentant la feuille de style : ici
style.css ;
media définit le média pour lequel cette feuille de style sera utilisée 1 : ici affichage sur
un écran (screen).
1. En effet, il existe d’autres types de médias, comme par exemple : print pour l’impression,
projection pour les diaporamas, etc. et all pour tous les types possibles.
20