Cascading Style Sheets (CSS)

Cascading Style Sheets(CSS)

Objectifs • Pré-requis : • (X)HTML • Contenu : • Les bases de CSS • Un condensé rapide de CSS 3

Principes de base • Séparation de la forme et du fond : • (X)HTMLpour la structure et le contenu • CSS pour la mise en forme • Permet d'appliquer des styles différents au même document (par exemple, visualisation à l'écran ou impression) • Permet surtout d'appliquer le même style à de nombreux documents ! • Recommandation du W3C Pour le projet On n'utilisera que les fonctionnalités qui marchentbien dans les principaux navigateurs

Où mettre le code CSS ? • Dans le fichier HTML : • <html> <head> <style> </style> </head> • Mot en <emstyle="color: red;">emphase</em> • À l'extérieur (beaucoup mieux !) • <html> <head><link rel="stylesheet" type="text/css" href="style.css" /> </head>

CSS : Syntaxe HTML CSS <html> <body> <h1>Introduction</h1> <h1>(X)HTML</h1> <h2>Les bases</h2> <h3>Rappels de XML</h3> <h2>Les balises</h2> </body> </html> /* sélecteur { attribut: valeur } */ body { background: black; font-family: Arial, Verdana; } /* sélecteur universel */ * { color: #cccccc; } /* sélecteur multiple */ h1, h2, h3 { font-style: italic; font-family: Georgia, sans-serif; } /* sélecteur unique */ h3 { color: red; }

Les sélecteurs de classe HTML CSS <html> <body> <p class="normal">Comme le disait Napoléon :</p> <p class="citation">Du haut de ces pyramides, 40 siècles vous contemplent</p> </body> </html> body { background: #111111; color: #cccccc; } p.citation { text-align: center; color: white; border-style: solid; } .normal { font-size: 120%; }

Les sélecteurs d’identifiant HTML CSS <html> <body> <p id="normal">Comme le disait Napoléon :</p> <p id="citation">Et il vous suffira de dire : "J'étais à Austerlitz" pour que l'on vous réponde : "Voilà un brave !" </p> </body> </html> body { background: black; color: white; } p#citation { width: 50%; border-style: solid; background: blue; } #normal { font-size: 120%; }

Les sélecteurs contextuels HTML CSS <html> <body> <em>Les balises :</em> <ul> <li>de <em>titre</em></li> <li>d'emphase</li> <li>de listes : <ul><li>ordonnées</li> <li>non ordonnées</li> <li>de définition</li></ul> </li> </ul> </body> </html> /* Met les "em" en bleu dans les items */ li em { color: green; font-weight: bold; } /* diminue la taille du texte des listes imbriquées */ ul ol, ol ul, ul ul, ol ol { font-size: 80%; } NB : "titre" est en vertmais pas "Les balises"

Les pseudo-éléments et les pseudo-classes HTML CSS <html> <body> <p>Comme le disait <ahref="./napo.html">Napoléon </a>:</p> <p>Le doute est l'ennemi des grandes entreprises</p> </body> </html> /* Met la 1ère lettre de chaque paragraphe en très gros */ p:first-letter { font-size: 250%; } /* Colore les liens en rouge */ a:link { color: red; text-decoration: none; }

Les pseudo-éléments et les pseudo-classes • Pseudo-éléments • :first-letter première lettre de l'élément • :first-line première ligne de l'élément • :before insérer un contenu avant l'élément • :after insérer un contenu après l'élément • Pseudo-classes • :link lien • :visited lien déjà visité • :hover élément survolé • :focus élément ayant le focus • :active lien activé (cliqué) à utiliser dans cet ordre ! (cf règles de cascades)

"div" et "span" • Balises génériques pour appliquer un style à une portion de texte qui n’a pas sémantique particulière (titre, liste, paragraphe,…) • div définit un bloc de texte (block-level element) : boîte rectangulaire, retour à ligne à la fin. • span définit un morceau de texte à l’intérieur d’un bloc (inline element) : boîte colle au texte, pas de div dans un span ! <html> <body> <div class="menu"> ... </div> <div class="contenu"> Ce site répertorie des citations de <span class="personne">Napoléon Bonaparte</span>. </div>

Positionnement • Positionnement normal : static • Le navigateur positionne les éléments en fonction de leurs types (block-level ou inline) et de leurs ordres d’apparition dans le code source de la page <html> <body> <div> Ici se trouve le menu </div> <div> Ce site répertorie des citations de <span>Napoléon Bonaparte</span>. </div> </body> </html>

Positionnement (relatif) • Décalage par rapport au positionnement static HTML CSS <html> <body> Ceci est un exemple avec <span class="haut">du texte en haut</span> et <span class="bas">du texte en bas</span> </body> </html> span.haut { position: relative; bottom: 8px; background-color: #ffff00; } span.bas { position: relative; bottom: -8px; background-color: #5555ff; }

Positionnement (absolu) • Position arbitraire. L’ordre dans le code source n’a plus d’importance • Pour le positionnement des autres éléments : comme s’il n’existait pas HTML CSS <html> <body> <div class="menu"> Ici se trouve le menu </div> <div class="contenu"> Ce site répertorie des citations de Napoléon Bonaparte. </div> </body> </html> div.menu { position: absolute; top: 10px; left: 10px; border-style: dotted; } div.contenu { position: absolute; bottom: 10px; right: 10px; border-style: dashed; border-color: red; } en pourcentage, c'est encore mieux...

Positionnement (absolu) • Position arbitraire. L’ordre dans le code source n’a plus d’importance • Pour le positionnement des autres éléments : comme s’il n’existait pas HTML CSS <html> <body> <div class="contenu"> Ce site répertorie des citations de Napoléon Bonaparte. </div> <div class="menu"> Ici se trouve le menu </div> </body> </html> div.menu { position: absolute; top: 10px; left: 10px; border-style: dotted; } div.contenu { position: absolute; bottom: 10px; right: 10px; border-style: dashed; border-color: red; }

Positionnement (absolu) • Position arbitraire. L’ordre dans le code source n’a plus d’importance • Pour le positionnement des autres éléments : comme s’il n’existait pas HTML CSS <html> <body> <div class="contenu"> Ce site répertorie des citations de Napoléon Bonaparte. </div> <div class="menu"> Ici se trouve le menu </div> <div> Lorem ipsum... </div> </body> </html> div.menu { position: absolute; top: 10px; left: 10px; border-style: dotted; } div.contenu { position: absolute; bottom: 10px; right: 10px; border-style: dashed; border-color: red; }

Marges marge par défaut du navigateur ! HTML CSS <html> <body> <div class="menu"> Ici se trouve le menu </div> <div class="contenu"> Ce site répertorie des citations de Napoléon Bonaparte. </div> </body> </html> div.menu { position: absolute; top: 0px; left: 0px; width: 10%; padding-top: 30px; padding-left: 2px; border-style: solid; } div.contenu { position: absolute; margin-left: 15%; border-style: solid; border-color: red; }

Marges et bordures border (bordure) • Bordures : • border • border-left, border-right,border-top, border-bottom • Marges externes: • margin • margin-left, margin-right,margin-top, margin-bottom • Marges internes : • padding • padding-left, padding-right, padding-top, padding-bottom margin (marge externe) padding (marge interne) contenu height width • Tailles : • Heightwidth • min-height min-width • max-height max-width

Bordures ou une valeur numérique none, solid, dotted, dashed, double, groove, ridge, inset, outset HTML CSS <html> <body> <span class="i1"> Peu important </span><br /><br /> <span class="i2"> Important </span><br /><br /> <span class="i3"> Vital </span> </body> </html> span.i1 { border-style: dotted; border-color: #888888; border-width: thin; } span.i2 { border-style: dashed; border-color: blue; border-width: medium; } span.i3 { border-style: solid; border-color: red; border-width: thick; }

Bordures des tableaux factorisation... par défaut :hide HTML CSS CSS <html> <body> <table class="fusion"> <tr><td>A</td><td>1</td></tr> <tr><td>B</td><td>2</td></tr> </table><br /> <table class="fission"> <tr><td>A</td><td>1</td></tr> <tr><td>B</td><td></td></tr> </table> </body> </html> * { font-size: xx-large; } tr, td, table { border: 1px solid black; } .fusion { border-collapse: collapse; } .fission { border-collapse: separate; border-spacing: 2px; empty-cells: show; }

Tableaux HTML CSS <html> <body> <table class="tab1"> <caption>Légende en haut </caption> <tr><td>A</td><td>1</td></tr> <tr><td>B</td><td></td></tr> </table><br /> <table class="tab2"> <caption>Légende en bas </caption> <tr><td>A</td><td>1</td></tr> <tr><td>B</td><td></td></tr> </table> </body> </html> tr, td, table { border: 1px solid black; } .tab1 { caption-side:top; } .tab1 tr td { width: 100px; height: 50px; } .tab2 { caption-side:bottom; } .tab1 tr td { width: 200px; height: 100px; }

Propriétés de longueur • Les valeurs sous forme de pourcentage (par rapport à la valeur courante) Mais attention, tous les navigateurs ne réagissent pas de la même façon • Les valeurs relatives en fonction de la police : • em : largeur du caractère 'm' pour la police courante • ex : hauteur du caractère 'x' • Les valeurs relatives à l'écran • px : le nombre de pixels • Les valeurs absolues : • mm, cm, in (= 2.54 cm), pt (= 1/72 in), pc (= 12 pt) • à utiliser pour un mode impression, mais pas pour l'écran !

Polices • font-family. Police ou famille de police (serif, sans-serif, cursive, fantasy, monospace). Attention, les polices supportées dépendent fortement du navigateur ! Déclarez une famille générique après la police (séparées par une virgule) pour substituer une police non trouvée par une autre. • font-size. Taille de la police : valeur numérique ou xx-small, x-small, small, medium, large, x-large, xx-large. • font-style. Style de la police : italic, oblique, normal. • font-variant. Casse des caractères : normal, small-caps. • font-weight. Graisse des caractères : normal, bold, bolder, lighter. • line-height. Espace interligne (ex. : 150% ou 1.5em). • text-decoration. Ornement du texte : none, underline. (souligné), overline (surligné), blink (clignotant), line-through (barré).

Espacement, alignement, indentation • letter-spacing. Espacement des lettres (peut être négatif !). • word-spacing. Espacement des mots. • text-align. Justification et alignement : left, right, center, justify. • vertical-align. Alignement vertical : baseline (défaut), top, bottom, middle, super (exposant), sub (indice), etc. • text-indent. Indentation de la première ligne du texte (longueur).

Couleurs et fond no-repeat, repeat,repeat-x, repeat-y ou des valeurs numériques HTML CSS CSS <html> <body> <div class="contenu"> Contenu </div> <div class="pub"> Partez au soleil ! </div> </body> </html> body { background-color: purple; } .contenu { color: rgb(200, 250, 0); height: 400px; background-image:url("piece.gif"); background-repeat: repeat; } .pub { float: right; width: 470px; height: 300px; color: white; background-image:url("plage.jpg"); background-repeat: no-repeat; background-position: right top; }

Couleurs • Couleurs prédéfinies • Code RGB : rgb(150, 150, 150) ou rbg(10%, 25%, 100%) • Valeur hexadécimale • Outils pour faciliter la définition de nouvelles couleurs : • ColorBlender http://www.meyerweb.com/eric/tools/color-blend/ • Color Schemer http://www.colorschemer.com/online.html • La boîte à couleurs http://pourpre.com/colorbox/index.php • et beaucoup d'autres...

Plus sur les blocs… débordement • Si la hauteur d'un bloc est contrainte, le contenu peut déborder... • Propriété overflow : • visible, rend visible tout ce qui dépasse. • hidden, cache tout ce qui dépasse. • scroll, met toujours une barre de défilement horizontale et verticale. • auto, met une barre de défilement horizontale ou verticale si besoin. • Voir aussi : • overflow-x, overflow-y • clip (pour définir la zone visible d'un élément) • scrollbar-face-color, scrollbar-track-color, scrollbar-arrow-color, etc. (mais attention à la compatilité avec les navigateurs)

Plus sur les blocs… flottement Un objet flottant est positionné à un endroit précis et le reste du contenu s'écoule autour de lui. Le flottement est défini par la propriété float : • left : l'écoulement se fera par la droite • right : l'écoulement se fera par la gauche • none • La propriété clear (none, left, right, both) empêche que l'élément ne se colle au précédent de son côté gauche, droit ou les deux.

Plus sur les blocs… flottement img2 img1 img3 img4 img5 HTML CSS CSS <html> <body> <img id="img1" src="chamois.jpg" /> <img id="img2" src="mouflon.jpg" /> <img id="img3" src="bouquetin.jpg" /> <img id="img4" src="marmotte.jpg" /> <img id="img5" src="ours.jpg" /> Les Alpes connaissent une faune sauvage diverse et variée qui a su s'adapter aux reliefs accidentés et aux altitudes extrêmes. Du pied des Alpes à son sommet le plus haut qu'est le Mont-Blanc, la faune varie suivant l'altitude. </body> </html> #img1 { float:left; } #img2 { float:right; } #img3 { float:left; } #img4 { float:left; clear: left; } #img5 { float:left; clear: left; }

Plus sur les blocs… positionnement Le positionnement est défini par la propriété position (couplée avec left, right, bottom et top) • static : left, right, bottom et top ne s'appliquent pas • relative : positionnement relatif (voir les exemples au début du cours) • absolute : positionnement absolu (voir les exemples au début du cours) • fixed : positionnement absolu par rapport à la fenêtre d'affichage (ne bouge pas si on fait défiler la page). • La propriété visibility (visible, hidden, collapse) permet de cacher totalement l'élément

Règles de cascades Plus prioritaire • Plusieurs sources • Vos règles CSS (CSS auteur) • Les règles CSS de l’utilisateur • Les règles par défaut du navigateur • Plusieurs méthodes • Pour chaque élément XHTML : attribut style="..." • Intégré dans le XHTML : balise <style>...</style> • Fichiers externes + balises <link rel="stylesheet"/> Moins prioritaire

Règles de cascades • Plusieurs règles pour un élément • id • class • sélecteur contextuel • nom de balise • S’il y a encore des conflits : ordre de déclaration dans le code source .contenu { border-style: solid; border-color: red !important; } Plus prioritaire Moins prioritaire Pseudo-classes pour les liens Sélecteur universel *

Note sur le style des formulaires • Traditionnellement, on utilisait des tables pour mettre en page un formulaire. Interdit en XHTML ! • On utilise CSS pour la mise en page, comme pour le reste. • Il est parfois utile de considérer certains éléments comme des blocs (pour les faire flotter par exemple) : label { display: block; }

Références • Les spécifications de CSS : • http://www.w3.org/TR/REC-CSS1 • http://www.w3.org/TR/REC-CSS2/ • Des livres : • HTML et XHTML : La Référence , O’Reilly • CSS : La Référence , O’Reilly

CSS 3

CSS 3 • De nouvelles fonctionnalités et de nouveaux attributs • Souvent spécifique à un navigateur • -moz-transform (pour les navigateurs Mozilla : Firefox) • -webkit-transform (pour les navigateurs WebKit: Safari et Chrome) • -o-transform (pour Opéra) • -ms-transform (pour Internet Explorer) • Des prises en compte très variables selon les navigateurs • Implémentations réalisées ou pas • Interprétations parfois variables • À manipuler avec précautions • Tous les détails : http://www.w3schools.com/css3/default.asp

CSS 3 : quoi de neuf ? • Bordures : • Coins arrondis • Ombres • Bordures avec une image • Fonds : • Taille modifiable • Fonds multiples • Effets textuels : • Ombres • Césures de mots

CSS 3 : quoi de neuf ? • Polices de caractères : • Utiliser n’importe quelle police True Type, OpenType (tous sauf IE) ou Embedded OpenType (IE seulement) • À utiliser avec précaution et bien vérifier le rendu sur tous les navigateurs • Transformations 2D : • Translation • Rotation • Taille • Torsion • Etc. • Transformations 3D : • Mêmes effets mais sur 3 dimensions

CSS 3 : quoi de neuf ? • Transitions, animations : • Changements chronométrés de valeurs d’attributs • Multi-colonnes : • Texte sur plusieurs colonnes • Interface utilisateur : • Éléments redimensionnables • etc.

Cascading Style Sheets (CSS)