Objectif du tutorial :
Nous allons vous aider a mieux comprendre les différents points suivants sous CSS :
- Les unités
- Les polices de caractères
- Les marges
- Les évènements
- Le positionnement absolu
Il existe plusieurs unités de mesure :
– px : le pixel,
– em : une unité extensible selon la configuration de l'écran,
– cm : le centimètre,
– mm : le millimètre,
– % : une portion en pourcentage d'une dimension de la page.
– Etc.
px, cm et mm sont des unités dites fixes. Quel que soit la résolution de la page, leur taille ne changera pas.
em et % sont des unités adaptables. Elles varient dynamiquement suivant la résolution de la page.
Pour ces raisons de lisibilité et d'accessibilité, on préférera les unités adaptables de par leur compatibilité avec les petites résolutions, mais aussi avec les plus grandes.
Voici les principaux styles applicables sur les caractères :
– font-family : la police d'impression : Bitsream Vera Sans, Arial, serif, etc.
– font-size : la taille des caractères, avec les unités vues précédemment (en 2.A).
– font-style : le style des caractères : normal (« normal »), en italique (« italic »), ou en oblique (« oblique »).
– font-weight : le poids des caractères : normal (« normal »), en gras (« bold »), plus gras (« bolder », on augmente de 1 le poids), moins gras (« lighter », on diminue de 1 le poids), ou une valeur : 100, 200, etc.
– letter-spacing : l'espace horizontal entre les caractères, avec les unités vues précédemment.
– line-height : la hauteur des lignes, avec les unités vues précédemment.
Avec CSS, on va manipuler deux sortes de marges : « margin » et « padding ». On les utilise avec les unités de mesure vues précédemment.
Voici à quoi elles peuvent ressembler :
« margin » est la marge dite extérieur, tandis que « padding » est la marge intérieure. Ici, la bordure discontinue simule le cadre de la zone dans la quelle se trouve le texte.
Notez que les mages peuvent êtres générales : elles ont la même valeur pour les écart de gauche, de droite, en haut et en bas. Elles peuvent aussi êtres découpées en 4 sous marges : gauche, droite, haut et bas.
Deux exemples avec « margin » :
Ici, le margin est général et de 10 pixels.
Ici, on spécifie manuellement chaque sous marge de margin, de 10 pixels. Notez que les deux exemples donneront exactement le même résultat.
On pourrait donner les mêmes exemples avec padding.
Attention : veillez à toujours donner au moins une spécification des marges dans la classe « body ». La majorité des navigateurs Web donnent une valeur par défaut à ces marges si elles ne sont pas spécifiées. Sans cette manipulation, votre site Web risquerait fortement de provoquer des affichages différents suivants les navigateurs.
Nous avons vu comment décrire les éléments de page Web de façon statique : une fois la page chargée le style ne varie pas tant que l'on n'a pas changé de feuille CSS ou de page Web.
C'est là que les évènements entrent en jeu.
On distingue plusieurs évènements :
– hover : lorsque l'on passe le curseur sur la zone en question.
– visited : lorsque le lien hypertexte à déjà été cliqué au moins une fois.
– link : si la zone est un lien hypertexte.
Un évènement est précédé du la classe à laquelle il s'applique.
De cette manière, on peut personnaliser les liens, et tout autre élément d'une page Web. Voici un exemple de personnalisation de la classe « type1 » et des liens hypertextes :
Une manière couramment utilisée sur le Web pour découper une page consiste à disposer des calques via des positions absolues.
On utilisera l'attribut position: absolute.
De cette manière, il sera possible de spécifier les coordonnées du coin supérieur gauche d'un calque, l'origine de la page étant le coin supérieur gauche de la zone d'affichage du navigateur Web.
La classe p.type2 sera positionnée) 100 pixels du bord droit du navigateur, la coordonnée verticale n'étant pas spécifiée.
Notez qu'avec de tels attributs, si deux calques se trouvent l'un sur l'autre, c'est le dernier utilisé dans le code HTML qui apparaîtra sur l'autre. On peut ainsi superposer différents calques sans aucune surprise.
Ce document est disponible en format PDF dans le zone de téléchargement.
Nous allons vous aider a mieux comprendre les différents points suivants sous CSS :
- Les unités
- Les polices de caractères
- Les marges
- Les évènements
- Le positionnement absolu
Les unités
Il existe plusieurs unités de mesure :
– px : le pixel,
– em : une unité extensible selon la configuration de l'écran,
– cm : le centimètre,
– mm : le millimètre,
– % : une portion en pourcentage d'une dimension de la page.
– Etc.
px, cm et mm sont des unités dites fixes. Quel que soit la résolution de la page, leur taille ne changera pas.
em et % sont des unités adaptables. Elles varient dynamiquement suivant la résolution de la page.
Pour ces raisons de lisibilité et d'accessibilité, on préférera les unités adaptables de par leur compatibilité avec les petites résolutions, mais aussi avec les plus grandes.
Les polices de caractères
Voici les principaux styles applicables sur les caractères :
– font-family : la police d'impression : Bitsream Vera Sans, Arial, serif, etc.
– font-size : la taille des caractères, avec les unités vues précédemment (en 2.A).
– font-style : le style des caractères : normal (« normal »), en italique (« italic »), ou en oblique (« oblique »).
– font-weight : le poids des caractères : normal (« normal »), en gras (« bold »), plus gras (« bolder », on augmente de 1 le poids), moins gras (« lighter », on diminue de 1 le poids), ou une valeur : 100, 200, etc.
– letter-spacing : l'espace horizontal entre les caractères, avec les unités vues précédemment.
– line-height : la hauteur des lignes, avec les unités vues précédemment.
Les marges
Avec CSS, on va manipuler deux sortes de marges : « margin » et « padding ». On les utilise avec les unités de mesure vues précédemment.
Voici à quoi elles peuvent ressembler :
« margin » est la marge dite extérieur, tandis que « padding » est la marge intérieure. Ici, la bordure discontinue simule le cadre de la zone dans la quelle se trouve le texte.
Notez que les mages peuvent êtres générales : elles ont la même valeur pour les écart de gauche, de droite, en haut et en bas. Elles peuvent aussi êtres découpées en 4 sous marges : gauche, droite, haut et bas.
Deux exemples avec « margin » :
p{
margin: 10px;
}
Ici, le margin est général et de 10 pixels.
p{
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
Ici, on spécifie manuellement chaque sous marge de margin, de 10 pixels. Notez que les deux exemples donneront exactement le même résultat.
On pourrait donner les mêmes exemples avec padding.
Attention : veillez à toujours donner au moins une spécification des marges dans la classe « body ». La majorité des navigateurs Web donnent une valeur par défaut à ces marges si elles ne sont pas spécifiées. Sans cette manipulation, votre site Web risquerait fortement de provoquer des affichages différents suivants les navigateurs.
Les évènements
Nous avons vu comment décrire les éléments de page Web de façon statique : une fois la page chargée le style ne varie pas tant que l'on n'a pas changé de feuille CSS ou de page Web.
C'est là que les évènements entrent en jeu.
On distingue plusieurs évènements :
– hover : lorsque l'on passe le curseur sur la zone en question.
– visited : lorsque le lien hypertexte à déjà été cliqué au moins une fois.
– link : si la zone est un lien hypertexte.
Un évènement est précédé du la classe à laquelle il s'applique.
De cette manière, on peut personnaliser les liens, et tout autre élément d'une page Web. Voici un exemple de personnalisation de la classe « type1 » et des liens hypertextes :
type1:hover {
color:#000;
}
a:link {
color:#484;
}
a:visited {
color:#484;
}
a:hover {
color:#000;
}
Le positionnement absolu
Une manière couramment utilisée sur le Web pour découper une page consiste à disposer des calques via des positions absolues.
On utilisera l'attribut position: absolute.
De cette manière, il sera possible de spécifier les coordonnées du coin supérieur gauche d'un calque, l'origine de la page étant le coin supérieur gauche de la zone d'affichage du navigateur Web.
p.type1 {
position: absolute;
left: 10px;
top: 9px;
}
p.type2 {
position: absolute;
right: 100px;
}
Dans cet exemple, la classe p.type1 sera positionnée à 10 pixels du bord gauche du navigateur, et à 9 pixels du haut.La classe p.type2 sera positionnée) 100 pixels du bord droit du navigateur, la coordonnée verticale n'étant pas spécifiée.
Notez qu'avec de tels attributs, si deux calques se trouvent l'un sur l'autre, c'est le dernier utilisé dans le code HTML qui apparaîtra sur l'autre. On peut ainsi superposer différents calques sans aucune surprise.
Ce document est disponible en format PDF dans le zone de téléchargement.