Cascading Style Sheets (CSS)
Objectifs Pré-requis : Contenu : (X)HTML Les bases de CSS Un condensé rapide de CSS 3
Principes de base Séparation de la forme et du fond : (X)HTML pour 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 marchent bien dans les principaux navigateurs
Où mettre le code CSS ? Dans le fichier HTML : <html> <head> <style> <!-- Ici le code CSS --> </style> </head> Mot en <em style="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 vert mais pas "Les balises"
Les pseudo-éléments et les pseudo-classes HTML CSS <html> <body> <p>Comme le disait <a href="./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 :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>.
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> Ce site répertorie des citations de <span>Napoléon Bonaparte</span>. </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 { 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. </body> </html> div.menu { position: absolute; top: 10px; left: 10px; border-style: dotted; } div.contenu { 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 </body> </html> div.menu { position: absolute; top: 10px; left: 10px; border-style: dotted; } div.contenu { 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> Lorem ipsum... </body> </html> div.menu { position: absolute; top: 10px; left: 10px; border-style: dotted; } div.contenu { bottom: 10px; right: 10px; border-style: dashed; border-color: red;
Marges 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. </body> </html> div.menu { position: absolute; top: 0px; left: 0px; width: 10%; padding-top: 30px; padding-left: 2px; border-style: solid; } div.contenu { margin-left: 15%; border-color: red; marge par défaut du navigateur !
Marges et bordures Bordures : Marges externes: Marges internes : 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 : Height width min-height min-width max-height max-width
none, solid, dotted, dashed, double, groove, ridge, inset, outset Bordures 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 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; ou une valeur numérique
Bordures des tableaux 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; factorisation... par défaut : hide
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> </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; 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).
ou des valeurs numériques Couleurs et fond HTML CSS CSS <html> <body> <div class="contenu"> Contenu </div> <div class="pub"> Partez au soleil ! </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; no-repeat, repeat, repeat-x, repeat-y ou des valeurs numériques
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 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 { #img4 { float:left; clear: left; #img5 { img1 img2 img3 img4 img5
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 Plusieurs sources Plusieurs méthodes 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 : Des livres : 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 : Fonds : Effets textuels : Coins arrondis Ombres Bordures avec une image Fonds : Taille modifiable Fonds multiples Effets textuels : Césures de mots
CSS 3 : quoi de neuf ? Polices de caractères : Transformations 2D : 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 : Multi-colonnes : Changements chronométrés de valeurs d’attributs Multi-colonnes : Texte sur plusieurs colonnes Interface utilisateur : Éléments redimensionnables etc.