Java EE
-

Cours 7

Cours de 2e année ingénieur Spécialisation « Génie Informatique »

Rappels

2

Feuilles de Styles : CSS
• Lorsque l’on réalise un site Web, il faut dissocier la partie forme de la partie fond. • Le fond correspond au contenu de notre page Web (texte, images, …) • La forme correspond à la mise en page de notre contenu (couleurs, cadres, centrage, polices, tailles…) • Le fond est stocké dans le fichier HTML. • La forme est stocké dans une feuille de style : un fichier CSS (Cascading Style Sheets)

3

Feuilles de Styles : CSS
• Dans la plupart des cas, il faut éviter de définir la forme d’un site Web directement dans les fichiers HTML (même si c’est possible de le faire) pour plusieurs raisons :
– Réutilisabilité / Homogénéité : Une fois défini, un fichier CSS peut être appliqué très facilement sur l’ensemble d’un site Web. Toutes les pages Web auront donc une même forme. – Maintenance / Mise à jour : Si l’on veut faire une modification sur le visuel de notre site, il suffit de modifier la propriété correspondante dans le fichier CSS et tout le site sera automatiquement affecté. – Séparation des tâches : La structure et la présentation sont gérées séparéments – Simplification : Le code HTML est réduit en taille et en complexité
4

Feuilles de Styles : CSS
• Utilisation :
– Un fichier CSS est un fichier texte d’extension .css – Il est lié à une page HTML par la balise suivante (dans la balise ) nom du fichier CSS

– Un fichier CSS contient un ensemble de règles d’affichage. Exemple : Le fichier CSS suivant fera afficher tous les titres h1 en italique h1 { font-style: italic;

}

5

Feuilles de Styles : CSS
• L’inconvénient de l’écriture précédente est qu’elle va s’appliquer sur toutes les balises h1. Si l’on veut spécifier son utilisation à certaines balises, on doit utiliser un attribut class ou bien id pour cette balise. Ex: fichier html Voici un Titre h1 En voici un autre Celui-ci a une classe