Formatage de documents CSS cole dt INSAT Tunis

Formatage de documents CSS École d’été INSAT Tunis

Introduction • Objectif: fournir un mécanisme pour associer différents styles à un même document

Introduction ! Initialement conçues pour être utilisées avec des documents HTML ! Peuvent être

CSS • Langage de feuilles de style pour documents HTML • Permet une séparation

Principes ! Feuille de style = ensemble de règles ! Chaque règle spécifie les

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

Association des feuilles de style aux documents utilisation de l ’élément style pour inclure

Association des feuilles de style aux documents Utilisation de l ’élément LINK pour associer

Généralités • Chaque règle est constituée de 2 parties: -Un qui spécifie les éléments

Exemples • H 1 {color: blue; text-align: center} • H 1 { font-weight: bold;

Propriétés ! Pour chaque propriété, la norme CSS spécifie • la syntaxe • une

Exemples de valeurs ! Nombre entier ou réel ! Longueur (unités absolues ou relatives)

Spécification des couleurs • Les attributs suivants permettent de contrôler la couleur: - color

Présentation du texte la fonte des caractères: - font-family , font-style, font-variant, font-style -

Exemples de valeurs ! Spécification des couleurs BODY { background: url("http: //www. bg. com/pinkish.

Héritage • En général les propriétés sont héritées du père • Par exemple EM

Multiplicité des spécifications de style ! Définies par l ’auteur ! Définies par l

Cascading ! Chaque règle peut être spécifiée comme étant normale ou importante /* From

Résumé ! Règles importées: régles locales > règles importées ! Règles normales: auteur >

Sélecteurs ! Spécifie les éléments auxquels s’appliquent les propriétés • un élément spécifique •

Sélecteurs • Spécificité d ’un sélecteur = nombre obtenu par la concaténation de 3

L’attribut Class • Appliquer des déclarations à un groupe d’éléments • Ex: <P CLASS=citation>

L’attribut ID • Prescrire des formatage pour des éléments isolés • # caractérise les

Slides: 23

Download presentation

Formatage de documents CSS École d’été INSAT Tunis

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

Introduction ! Initialement conçues pour être utilisées avec des documents HTML ! Peuvent être utilisées avec des documents XML ! CSS 1 ⇒CSS-2 (media) ! La norme s’adresse • Aux utilisateurs • Aux développeurs

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 W 3 C depuis le 12 mai 1998 Spécification à: http: //www. w 3. org/TR/RECCSS 2

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}

Association des feuilles de style aux documents ! document HTML • utilisation de l ’attribut style • <H 1 style = “color: blue“>Introduction</H 1>

Association des feuilles de style aux documents utilisation de l ’élément style pour inclure une feuille de style dans le document <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 0//EN"> <HTML> <HEAD> <TITLE>Les feuilles de style CSS</TITLE> <STYLE type="text/css"> H 1 { color: blue } </STYLE> </HEAD> <BODY> <H 1>Introduction</H 1> </BODY> </HTML>

Association des feuilles de style aux documents Utilisation de l ’élément LINK pour associer une feuille de style au document <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 0//EN"> <HTML> <HEAD> <TITLE>Les feuilles de style CSS</TITLE> <LINK rel="stylesheet" href="cours. css" type="text/css"> </HEAD> <BODY> <H 1>Introduction</H 1>. . . </BODY> </HTML>

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 s’applique: -Une partie déclaration qui spécifie les valeurs des propriétés H 1 { 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 “; ”

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

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

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

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é.

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

Exemples de valeurs ! Spécification des couleurs BODY { background: url("http: //www. bg. com/pinkish. gif") } BODY {color: black; background: white } EM { color: #ff 0000 } /* #rrggbb */ EM { color: rgb(255, 0, 0) } /* integer range 0 - 255 */ EM { color: rgb(100%, 0%) } /* float range

Héritage • En général les propriétés sont héritées du père • Par exemple EM est bleu dans: H 1 { color: blue } <H 1>Le titre <EM>est</EM> important!</H 1> • 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

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

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

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

Sélecteurs ! Spécifie les éléments auxquels s’appliquent 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

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

L’attribut Class • Appliquer des déclarations à un groupe d’éléments • Ex: <P CLASS=citation> Mieux vaut tard que jamais</P> • Nom de la classe= nom isolé + chiffres+ tirets

L’attribut ID • Prescrire des formatage pour des éléments isolés • # caractérise les ID • Une seule fois dans le document