M. Larooussi Formatage de documents - CSS École dété INSAT Août 2006

M. Larooussi Introduction Objectif: fournir un mécanisme pour associer différents styles à un même document Contenu Présentations

M. Larooussi Introduction ! Initialement conçues pour être utilisées avec des documents HTML ! Peuvent être utilisées avec des documents XML ! CSS1 CSS-2 (media) ! La norme sadresse Aux utilisateurs Aux développeurs

M. Larooussi CSS Langage de feuilles de style pour documents HTML Permet une séparation claire de la structure et du style => plus grande indépendance avec le media utilisé. Recommandation W3C depuis le 12 mai 1998 Spécification à: CSS2

Principes ! Feuille de style = ensemble de règles ! Chaque règle spécifie les valeurs que peuvent prendre les propriétés associées aux éléments du document – EM { color : red} – sélecteur {propriété:valeur; propriété:valeur} M. Larooussi

Association des feuilles de style aux documents ! document HTML utilisation de l attribut style Introduction

M. Larooussi Association des feuilles de style aux documents utilisation de l élément style pour inclure une feuille de style dans le document Les feuilles de style CSS H1 { color: blue } Introduction

M. Larooussi Association des feuilles de style aux documents Utilisation de l élément LINK pour associer une feuille de style au document Les feuilles de style CSS <LINK rel="stylesheet" href="cours.css" type="text/css"> Introduction...

M. Larooussi Généralités Chaque règle est constituée de 2 parties: -Un qui spécifie les éléments du document auxquels la règle sapplique: -Une partie déclaration qui spécifie les valeurs des propriétés H1 { color: blue } La partie déclaration peut comporter plusieurs spécifications de valeurs de propriétés; dans ce cas, les spécifications sont séparées par le caractère ;

M. Larooussi Exemples H1 {color:blue; text-align: center} H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: Helvetica; font-variant: normal; font-style: normal; font-stretch: normal; font-size-adjust: none } H1 { font: bold 12pt/14pt Helvetica }

M. Larooussi Propriétés ! Pour chaque propriété, la norme CSS spécifie la syntaxe une éventuelle valeur par défaut les éléments auxquels elle s applique si elle est héritable comment interpréter les pourcentages les media pour lesquels elle a un sens

M. Larooussi Exemples de valeurs ! Nombre entier ou réel ! Longueur (unités absolues ou relatives) ! Pourcentage P {font-size: 12px} H1 {margin: 0.5in} P { line-height: 120% } /* 120% de 'font- size' */

M. Larooussi Spécification des couleurs Les attributs suivants permettent de contrôler la couleur: - color pour la couleur du texte; - background-color pour la couleur du fond; - background pour un fond texturé ou coloré.

M. Larooussi Présentation du texte la fonte des caractères: - font-family,font-style,font-variant,font-style - D'autres attributs permettent de modifier l'apparence du texte: - text-decoration; text-transform. Les attributs suivants permettent de contrôler la présentation des paragraphes: - text-align, text-indent, lign-height, word-spacing et letter-spacing

M. Larooussi Exemples de valeurs ! Spécification des couleurs BODY { background: url(" } BODY {color: black; background: white } EM { color: #ff0000 } /* #rrggbb */ EM { color: rgb(255,0,0) } /* integer range */ EM { color: rgb(100%, 0%, 0%) } /* float range

M. Larooussi Héritage En général les propriétés sont héritées du père Par exemple EM est bleu dans: H1 { color: blue } Le titre est important! Style sur BODY == "style par défaut": BODY { color: black; background: url(texture.gif) white; } Exceptions: background, pourcentages... Possible de forcer l'héritage: inherit

M. Larooussi Multiplicité des spécifications de style ! Définies par l auteur ! Définies par l utilisateur ! Définies par l application ! de plus, les feuilles de style peuvent être importées --> règles de résolution de conflits potentiels

M. Larooussi Cascading ! Chaque règle peut être spécifiée comme étant normale ou importante /* From the user's style sheet */ P { text-indent: 1em ! important } P { font-style: italic ! important } P { font-size: 18pt } /* From the author's style sheet */ P { text-indent: 1.5em !important } P { font: 12pt sans-serif !important } P { font-size: 24pt }

M. Larooussi Résumé ! Règles importées: régles locales > règles importées ! Règles normales: auteur > utilisateur > application ! Règles importantes: utilisateur > auteur > application ! Spécification spécifiques > propriétés héritées ! En cas de conflit: la dernière règle spécifiée s applique

M. Larooussi Sélecteurs ! Spécifie les éléments auxquels sappliquent les propriétés un élément spécifique tous les éléments du document les éléments d un type donné des éléments spécifiés en fonction de leur emplacement dans la structure logique du document les éléments spécifiés en fonction des attributs les éléments appartenant à des classes pseudo elements

M. Larooussi Sélecteurs Spécificité d un sélecteur = nombre obtenu par la concaténation de 3 valeurs le nombre d attributs ID le nombre d autres attributs ou classes le nombre de noms d éléments ! Les pseudo-éléments sont ignorés

M. Larooussi Lattribut Class Appliquer des déclarations à un groupe déléments Ex: Mieux vaut tard que jamais Nom de la classe= nom isolé + chiffres+ tirets

M. Larooussi Lattribut ID Prescrire des formatage pour des éléments isolés # caractérise les ID Une seule fois dans le document

M. Larooussi Sélecteur contextuel H1 EM { color: red } :Affecte uniquement les éléments EM descendants d'un H1 H1 > EM { color: red }: Affecte uniquement les éléments EM fils d'un H1 UL LI { font-size: small } UL UL LI { font-size: x-small } – Règle 1: éléments LI ayant au moins un ancêtre UL – Règle 2: éléments LI ayant au moins deux ancêtres UL – Conflit: le sélecteur le plus spécifique l'emporte

M. Larooussi Pseudo-classes et pseudo- éléments Sélection indépendante de la structure HTML Pseudo-classes: A:link { color: red } /* unvisited */ A:visited { color: blue } A:active { color: lime } DIV > P:first-child { text-indent: 0 } :lang(fr) > Q { quotes: '« ' ' »' } Pseudo-éléments: P:first-line { font-style: small-caps } P:first- letter { font-size: 200% } P.special:before {content: "Special! "}

M. Larooussi Commentaires Identiques à ceux de C: EM { color: red } /* red, really red!! */

M. Larooussi Les unités Longueurs: – relatives: "0.5em", "1ex", "10px" – absolues: "0.5in", "3cm", "12pt".. Pourcentages: "120%" Couleurs: "black", "#f00", "rgb(255,0,0)"...

M. Larooussi Positioning flottant relatif absolu ou fixe IMG.icon { float: left; margin-left: 0; } #header { position: fixed; width: 100%; height: 15%; top: 0; right: 0; bottom: auto; left: 0; }

M. Larooussi Et d'avantage... différents types de media pagination feuilles de styles orales curseurs génération de contenu (compteurs)...

M. Larooussi Validation CSS Feuilles de style valides = garantie de résultats; cas d'erreurs non spécifiés Spécification officielle: Outils et services:

M. Larooussi Evolution future de CSS CSS3 en préparation: support pour entêtes, bas de pages, multi-colonnes internationalisation: texte vertical et en grille...