Extrait du cours programmation client web
CSS : introduction
✦ D’un point de vue « conception » (ergonomique et programmation), HTML non satisfaisant.
la maintenabilité non aisée, les modifier pour en changer l’aspect complique encore plus d’autant plus à cause des répercutions
✦ Les feuilles de style (CSS = Cascading Style Sheet) permettent :
Principe en IHM : séparation du contenu de la présentation :
Séparation du contenu et de la mise en forme.
Modifier l’aspect d’un page ou d’un site sans en modifier le contenu.
Modifier facilement l’aspect d’une page.
Cohésion de la présentation tout au long du site (feuilles de style externes).
Réduire le temps de chargement des pages.
Correction de certains écueils d’HTML :
compréhensible, simple et logique par rapport au HTML.
contrôle des polices, de la distance entre les lignes, des marges et des indentations (sans devoir utiliser de tableaux…) moins de code, mieux structuré, et donc des sites plus faciles à maintenir et à faire.
Utilisation de plusieurs feuilles de style (héritage)
✦ Syntaxe :
BALISE { Propriété : valeur}
Exemple : H2 { color : green ; } indique que tous les titres de niveau 2 sont en vert. Ici la propriété est color mais il en existe une bien plus !
✦ Une feuille de style CSS peut être définie de différentes façons :
Dans un document, il est possible de donner l’URI (url) d’un fichier externe. La syntaxe est la suivante :
<link rel= »stylesheet » type= »text/css » media= »screen » href= »fichier.css » />.
La balise LINK doit être utilisée entre les balises <head> et </head>
@import « fichier.css », entre les balises <style>…</style> et avant la règle suivante
A l’intérieur du document lui-même (toujours dans la partie entête) par l’utilisation de balises STYLE : <style type= »text/css »> h1 { color: green ; }</style>.
Par définition du style dans une balise qui supporte un ajout de style, comme par exemple <li style= »color:red; »> …</li>
…….
Si le lien ne fonctionne pas correctement, veuillez nous contacter (mentionner le lien dans votre message)Programmation client web les feuilles de style CSS (308 KO) (Cours PDF)
