Outils informatiques pour les sciences Licence 1 - td n˚4 - CSS

Outils informatiques pour les sciences
Licence 1
- td n˚4 CSS
1 La Feuille de Style CSS
Le CSS ou Cascading Style Sheets est le langage permettant de définir le style d’affichage de chacun
des éléments d’un document XML ou HTML.
Le principe des feuilles de style consiste à attribuer des caractéristiques de mise en forme à des groupes
d’éléments. Il est, par exemple, possible de décider de créer un groupe de titres en police Arial, de couleur
verte et en italique.
On définit par un nom une caractéristique de mise en forme, il suffit ensuite de l’appeler pour l’appliquer
à un texte.
On les appelle "feuilles de style en cascade" ("Cascading Style Sheets") car on peut en définir plusieurs,
et, en cas de redondance de style, un ordre de priorité est donné par le navigateur.
Les feuilles de style permettent :
– d’avoir une présentation homogène sur tout un site,
– de pouvoir changer l’aspect du site entier en modifiant quelques lignes,
– une plus grande lisibilité du HTML,
– le positionnement rigoureux des éléments,
– des chargements de page plus rapides.
1.1 Définition d’un style
La définition d’un style est une chose simple à effectuer. Un style CSS est caractérisé par 2 éléments :
– un sélecteur de type, permettant de préciser à quelles balises du document le style s’applique,
– une déclaration de style, permettant de définir précisément le style à appliquer aux balises sélectionnées.
La syntaxe est la suivante :
selecteur-de-type {style} où le style est une liste de couples propriété : valeur qui
définit le style des éléments sélectionnés.
selecteur-de-type {
propriété-de-style: valeur;
propriété-de-style: valeur;
...
}
Par exemple la syntaxe suivante définit le style à appliquer aux liens hypertextes (balise <a>...</a>),
c’est-à-dire une police Verdana de taille 18 points, en gras, de couleur rouge et non souligné :
a
{
font-family: Verdana, "sans serif";
font-size: 18pt;
1
font-weight: bold;
color: red;
text-decoration : none ;
}
Si l’on applique ce style sur le code html suivant :
1
2
3
<p>
V o i c i un l i e n v e r s <a h r e f = " h t t p : / / g o o g l e . f r " > g o o g l e ! < / a>
< / p>
on obtient quelque chose comme cela :
Un style peut être appliqué à plusieurs éléments HTML (a, h1, b...). Pour cela, il suffit de donner la listes
des balises, séparées par des virgules, avant la définition de style.
2 Insertion des feuilles de styles dans les pages web
Il y a plusieurs manières d’insérer une feuille de style dans une page HTML. La méthode que nous
retiendrons aujourd’hui consiste à créer d’un coté, la feuille de style dans son propre fichier (.css) et de
l’autre côté, de faire un lien vers ce fichier dans la page html. Pour faire ce lien, on dispose de la balise
<link>. La balise link est définie dans l’entête du document HTML, de cette manière :
1
< l i n k href =" m a F e u i l l e . c s s " r e l =" s t y l e s h e e t " type =" t e x t / c s s " / >
Remarquer que l’attribut href définit l’emplacement où se trouve le fichier css.
3 Propriétés des polices de caractères
CSS permet de spécifier, pour chaque élément html, quelle police de caractères utiliser ainsi que des
attributs relatifs à la police.
1. font-family spécifie une liste de familles de police,
2. font-size spécifie la taille de la police ; l’attribut peut prendre les valeurs : xx-small, x-small,
small, medium, large, x-large, xx-large, smaller, larger ou une taille en
points.
3. font-style spécifie le style : normal, italic ou oblique,
4. font-variant : normal ou small-caps,
5. font-weight : normal, bold, bolder, lighter, 100, 200, . . . jusqu’à 900.
4 Propriétés du texte
Les propriétés du texte permettent de contrôler l’apparence de celui-ci : sa couleur, l’espacement entre
les lettres ou les mots et son alignement. Voici quelques uns de ces attributs :
1. color la couleur du texte,
2. letter-spacing écart entre les lettres,
3. word-spacing écart entre les mots,
4. text-align alignement du texte : left, right, center ou justify,
5. text-decoration : none, underline, overline, line-through ou blink.
2