Embed Size (px)
Citation preview
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éesavec des documents HTML
! Peuvent être utilisées avec desdocuments XML
! CSS1 ⇒ CSS-2 (media)! La norme s’adresse
• Aux utilisateurs• Aux développeurs
M. Larooussi
CSS
• Langage de feuilles de style pour documentsHTML• Permet une séparation claire de la structureet du style
=> plus grande indépendance avec le mediautilisé.
• Recommandation W3C depuis le 12 mai1998
Spécification à: http://www.w3.org/TR/REC-CSS2
Principes
! Feuille de style = ensemble de règles
! Chaque règle spécifie les valeurs quepeuvent prendre les propriétésassociées aux éléments du document
– EM { color : red}
– sélecteur {propriété:valeur; propriété:valeur}
M. Larooussi
M. Larooussi
Association des feuilles de styleaux documents
! document HTML
• utilisation de l ’attribut style
• <H1 style = “color:blue“>Introduction</H1>
M. Larooussi
Association des feuilles de style auxdocuments
utilisation de l ’élément style pour inclure unefeuille de style dans le document
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><HTML>
<HEAD><TITLE>Les feuilles de style CSS</TITLE>
<STYLE type="text/css">H1 { color: blue }
</STYLE></HEAD><BODY><H1>Introduction</H1></BODY>
</HTML>
M. Larooussi
Association des feuilles de style auxdocuments
Utilisation de l ’élément LINK pour associer unefeuille de style au document
<!DOCTYPE HTML PUBLIC "-//W3C//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>
<H1>Introduction</H1>...
</BODY>
</HTML>
M. Larooussi
Généralités
• Chaque règle est constituée de 2 parties:-Un qui spécifie les éléments du document auxquelsla règle s’applique:
-Une partie déclaration qui spécifie les valeurs despropriétés
H1 { color: blue }• La partie déclaration peut comporter plusieurs
spécifications de valeurs de propriétés; dansce cas, les spécifications sont séparées par lecaractè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 CSSspé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 ourelatives)
! PourcentageP {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 decontrô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 textela fonte des caractères:
- font-family ,font-style,font-variant,font-style
- • D'autres attributs permettent de modifierl'apparence du texte:- text-decoration; text-transform.
• Les attributs suivants permettent de contrôlerla présentation des paragraphes:
- text-align, text-indent, lign-height, word-spacinget letter-spacing
M. Larooussi
Exemples de valeurs
! Spécification des couleursBODY { background:
url("http://www.bg.com/pinkish.gif") }
BODY {color: black; background: white }
EM { color: #ff0000 } /* #rrggbb */
EM { color: rgb(255,0,0) } /* integer range 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* float range
M. Larooussi
Héritage
• En général les propriétés sont héritées dupère
• Par exemple EM est bleu dans: H1 { color:blue } <H1>Le titre <EM>est</EM>important!</H1>
• 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 destyle
! Définies par l ’auteur
! Définies par l ’utilisateur
! Définies par l ’application
! de plus, les feuilles de style peuvent êtreimportées
--> règles de résolution de conflitspotentiels
M. Larooussi
Cascading
! Chaque règle peut être spécifiée comme étantnormale 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èglesimporté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 s’appliquent lesproprié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 leuremplacement 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 = nombreobtenu par la concaténation de 3valeurs
• 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
L’attribut Class
• Appliquer des déclarations à un grouped’éléments
• Ex: <P CLASS=citation> Mieux vaut tard que jamais</P>
• Nom de la classe= nom isolé + chiffres+ tirets
M. Larooussi
L’attribut ID
• Prescrire des formatage pour deséléments isolés
• # caractérise les ID
• Une seule fois dans le document
M. Larooussi
Sélecteur contextuelH1 EM { color: red } :Affecte uniquement les
éléments EM descendants d'un H1H1 > EM { color: red }: Affecte uniquement les
éléments EM fils d'un H1UL LI { font-size: small } UL UL LI { font-size:x-small }
– Règle 1: éléments LI ayant au moins un ancêtreUL– Règle 2: éléments LI ayant au moins deuxancê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 structureHTML
• 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 (règle @page)
feuilles de styles orales
curseurs
génération de contenu (compteurs)
...
M. Larooussi
Validation CSS
• Feuilles de style valides = garantie derésultats; cas d'erreurs non spécifiés
• Spécification officielle:http://www.w3.org/TR/REC-CSS2
• Outils et services:http://jigsaw.w3.org/css-validator/
M. Larooussi
Evolution future de CSS
• CSS3 en préparation:
• support pour entêtes, bas de pages,multi-colonnes
• internationalisation: texte vertical et engrille
• ...
