CSS :Feuilles de Style / PDF





Sample of the pdf document : 





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.

Lasyntaxe 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>






   Click here for  Download PDF / FREE
     


0 commentaires: