Chapitre 4. Les feuilles de styles : CSS CSS : Cascading style sheet
Plan du chapitre Introduction Historique Structure des feuilles de styles Héritage Localisation externe, interne, intra-ligne Règles de rédaction Sélecteurs regroupés Notions de boites Propriétés de styles Notions de class Notions de pseudo-class Notions de pseudo-élément Règles spéciales Unités de mesures Commentaires Filtres d’images
Introduction Les feuilles de styles offrent un moyen efficace pour contrôler l'apparence et le rendu des documents HTML. Elles permettent de séparer le contenu de la forme. Tous les navigateurs n'interprètent pas toutes les propriétés CSS2 au même degré. L'acronyme CSS signifie Cascading Style Sheets (feuilles de styles en cascade).
Historique Conçu initialement pour HTML, la première version dite CSS niveau 1 (CSS-1) est publiée en 1996, Les feuilles de styles sont apparues en 1997 avec le browser Internet Explorer 3.0, 1998, le W3C publie une nouvelle version CSS-2. Elle introduit la notion de type de média, Elles se sont généralisées avec les versions 4.0 d'Internet Explorer et de Netscape Navigator. IE 5 gère la quasi totalité des spécifications CSS-2, Le site du W3C propose une validation en ligne permettant de vérifier la conformité d’un style à la norme CSS-2.
Structure des feuilles de styles Une feuille de styles est composée d'un ensemble de descriptions de styles. Sélecteur { propriété: valeur; propriété: valeur … } Exemple : H2 { COLOR: navy; FONT: 18px; FONT-FAMILY: sans-serif Aucune limite dans le nombre de couple propriétés / valeurs
Héritage Pour chaque propriété la valeur « inherit » permet de préciser si la valeur doit être héritée. Exemple : H3 { COLOR: navy; FONT: inhérit; FONT-FAMILY: sans-serif }
Localisation des styles La déclaration de règles de styles peut être soit : externe au document HTML dans une feuille de style, interne au document HTML dans la section HEAD, intra-ligne, associé à l’attribut style d’une balise
Feuille de styles externe Séparation de la présentation de la page HTML, Réduit la taille de la page HTML, Style identique pour l’ensemble d’un site, Évolution rapide du « design » d’un site. Feuille de style spécifique au média (taille de l’écran, imprimante,...)
Feuille de styles externe Une feuille de styles externe est un fichier texte portant habituellement l'extension .css, Le lien entre le document HTML et le fichier CSS s’effectue dans la section <HEAD> d’un document HTML, Exemple : <HEAD> <TITLE>Histoire des feuilles de styles</TITLE> <link REL="StyleSheet" TYPE="text/css" HREF="../styles.css"> </HEAD> 1. La balise <LINK> avertit le navigateur qu'il doit établir un lien 2. rel=stylesheet précise qu'il s'agit d'une feuille externe 3. type="text/css" avertit qu'il s'agit de feuilles de style en cascade 4. href=" ... " définit l'emplacement de la feuille de style
Feuille de styles interne Une feuille de styles interne est insérée en en-tête du fichier HTML à l'aide de l'élément <STYLE>, Ces styles seront définies uniquement pour le document courant. Exemple : <HEAD> <TITLE>Nom du document</TITLE> <style> <!-- A { COLOR: red } .toto {COLOR: navy; FONT: 12px; FONT-FAMILY: sans-serif} --> </style> </HEAD> Application d'un style sur un élément <P CLASS="toto">texte du paragraphe…
Styles intra-ligne La description d'un style intra-ligne est insérée directement dans la balise d'ouverture d'un élément HTML, Le style est appliqué à l'aide de l'attribut HTML style inséré dans la balise d'ouverture de l'élément, Exemple : <P STYLE="COLOR: navy; FONT: 12px; FONT-FAMILY: sans-serif">
Règles de rédaction Les règles sont à la base de toute feuille de styles. Elles ont une syntaxe précise et sont construites de la manière suivante : Sélecteur {propriété: valeur; propriété: valeur …} Une règle est composée du sélecteur suivi du bloc de déclaration définissant le style. Le sélecteur identifie le style, il lui donne son nom. L’ensemble des balises HTML sont des sélecteurs potentiels
Règles de rédaction Les accolades ( { } ) fixent les limites d'un bloc de déclarations. Un bloc de déclaration comprend l'ensemble de toutes les déclarations composant un style. Une déclaration est composée du nom d'une propriété, suivi du caractère deux-points ( : ) puis des valeurs associées à la propriété. Chaque déclaration doit être terminée par un ;
Sélecteurs regroupés Possibilité de regrouper plusieurs sélecteurs pour une même description de style. Exemple : H1, H2, H3, H4 {color: blue} est identique à : H1 {color: blue} H2 {color: blue} H3 {color: blue} H4 {color: blue}
Notions de boîtes Le concept de boîte (box) dans CSS-2 permet de définir les surfaces sur lesquelles sont appliquées plusieurs propriétés. Le contenu de presque tous éléments d'un document est inséré dans une boîte. Il est possible qu'une boîte soit placée à l'intérieur d'une autre et ainsi de suite. Une boîte qui en contient une autre devient la boîte englobante de la deuxième. Chaque boîte est composée de plusieurs rectangles portant des noms et ayant un rôle à jouer.
Notions de boîtes Ces rectangles sont formés par : les marges (margin) les bordures (borders) la boîte de remplissage (padding) la boîte de contenu (content) Une Balise DIV est un cadre avec un espace et une marge (une boite), Un Balise SPAN permet de définir un style spécifique pour un texte
Notions de boîtes
Notions de boîtes Les balises DIV / LAYER permettent de définir des "couches" contenant des éléments et pouvant être positionnées sur l'écran. Il s'agit en réalité de balises HTML spéciales pouvant contenir elles-mêmes d'autres balises HTML, et dont les attributs sont entre-autres: La position par rapport au haut du navigateur, La position par rapport à la bordure gauche du navigateur, La largeur, La hauteur, Le Z-Index, c'est-à-dire le niveau de superposition de la balise
Notions de boîtes La première (LAYER) est une balise spécifique à Netscape Navigator, Les balises DIV et SPAN sont plus génériques mais sont toutefois mieux supportées par Internet Explorer que Netscape Navigator La syntaxe de la balise LAYER est la suivante: <LAYER NAME="Nom de la couche" LEFT="Distance au bord gauche" TOP="Distance au haut"> éléments HTML </LAYER>
Notions de boîtes Ainsi, le positionnement de deux images superposées sous Netscape Navigator (version 4 ou supérieure) peut se faire de la manière suivante Exemple : <LAYER NAME="IMG1" LEFT="20" TOP="30"> <IMG SRC="image.gif"> </LAYER> <LAYER NAME="IMG2" LEFT="25" TOP="35"> <IMG SRC="image2.gif">
Notions de boîtes Avec Internet Explorer (versions 4 et supérieures), le positionnement des éléments se fait selon le concept des CSS-2, au moyen des balises DIV et SPAN. Avec les balises DIV et SPAN, le positionnement peut se faire de deux façons: Le positionnement absolu se détermine par rapport au coin supérieur gauche de la fenêtre du navigateur. Les coordonnées d'un point s'expriment alors de haut en bas (top) et de gauche à droite (left). Le positionnement relatif se fait par rapport à d'autres éléments, comme une image, c'est-à-dire que les éléments contenus dans la balises DIV ou SPAN seront positionnés à la suite des éléments HTML après lesquels ils se trouvent. La syntaxe des balises DIV/SPAN est la suivante: <DIV style="position: absolute; top: 99 px; left: 99 px; visibility : visible;z-index : 2;"> éléments HTML </DIV>
Notions de boîtes LAYER Attribut Valeur Libellé Name Chaine Identifiant de la balise Top Entier Position absolue / partie supérieur de l’écran Left Position absolue / partie gauche de l’écran Width Largeur Height Hauteur zIndex Position Visibility Show Hidden Valeur de superposition
Notions de boîtes DIV SPAN Attribut Style Valeur Libellé ID Chaine Identifiant de la balise Name Nom de la balise Position static absolute relative Aucun mouvement par rapport au document positionnement par rapport au document par rapport à l'élément précédent Top auto valeur numérique entière valeur en pourcentage (%) distance au sommet automatique distance au sommet en pixels distance au sommet en pourcentage DIV SPAN
Notions de boîtes DIV SPAN Attribut Style Valeur Libellé Left auto valeur numérique entière valeur en pourcentage (%) distance à la bordure gauche automatique distance à la bordure gauche en pixels distance à la bordure gauche en pourcentage Width largeur automatique largeur de l'élément en pixels largeur de l'élément en pourcentage Largeur DIV SPAN
Notions de boîtes DIV SPAN Attribut Style Valeur Libellé Height auto valeur numérique entière valeur en pourcentage (%) hauteur automatique hauteur de l'élément en pixels hauteur de l'élément en pourcentage zIndex auto valeur numérique entière superposition automatique valeur indiquant la profondeur Visibility inherit hidden visible visibilité par défaut caché visible Valeur de superposition DIV SPAN
Propriétés de styles Padding Margin Color Border Font Display Filtre d’image
Notions de class Les class permettent d'affecter des styles différents à des balises (modification dynamique de l'aspect d'une page HTML). Il est possible d’ajouter une classe à un sélecteur. La définition des classes: .nom_de_la_classe {propriété de style: Valeur; propriété de style: Valeur ...} Pour utiliser une classe : <BALISE class="nom_de_la_classe"> ... </BALISE> Javascript va permettre grâce à sa gestion d'événement de changer dynamique la classe associée à une balise. (cf cours spécifique).
Notions de class Une même balise peut avoir plusieurs descriptions de styles. Exemple : Q.fra {color: blue} Q.ang {color: red} L'application des styles ainsi définis s’effectuera via l'attribut class: <Q CLASS="fra">contenu de l'élément… <Q CLASS="ang">contenu de l'élément…
Notions de class Les ID permettent d'identifier les balises et d'associer un style à une balise. Javascript va référencer la règle de style voulue grace à l'ID On l'utilisera de la manière suivante : <BALISE ID="nom_ID" > ... </BALISE> Différences entre l’utilisation de l’ID et de la CLASS ? ID unique CLASS multiple et modifiable
Notions de class document.all.nom_ID.style.propriété_de_style En javascript pour changer la class associée à une balise on utilisera la propriété className. <P ID='nom_ID' onMouseOver = "className ='style'">Bonjour </P> Pour affecter un style à une balise en Javascript : document.all.nom_ID.style.propriété_de_style Ou nom_ID est l’identifiant d’une balise <DIV> par exemple.
Notions de pseudo-class Les pseudo-classes sont en fait des classes spéciales permettant d'obtenir des effets particuliers. Certains des effets sont dynamiques et surviennent pendant ou après une action de l'utilisateur. Pseudo-classe :first-child :first-child La pseudo-classe :first-child affecte le premier élément-enfant d'un autre élément. Exemple de règle DIV > P:first-child {color: blue}
Notions de pseudo-class Analyse de la syntaxe utilisée. Le premier sélecteur indique l'élément parent, le signe > précède le deuxième sélecteur pour lequel la pseudo-classe :first-child est spécifiée. On comprendra ainsi que tout premier élément-enfant "paragraphe" d'un élément <DIV> sera affiché en bleu dans le document.
Notions de pseudo-class Pseudo-classes pour les liens :Link, :visited Ces deux pseudo-classes permettent de définir un style pour les hyperliens non-visités (link) et un autre pour les hyperliens visités (visited). Exemple de règle : A:link {color: blue} A:visited {color: green} Ainsi, les hyperliens non-visités seront affichés en bleu et les hyperliens visités seront affichés en vert.
Notions de pseudo-class Pseudo-classes dynamiques Ces pseudo-classes permettent de définir des effets de style survenant lors d'actions de l'utilisateur. :hover Survient lorsque l'utilisateur pointe l'élément : Exemple de règle A:hover {background-color: yellow} la couleur d'arrière-plan d'un hyperlien passera au jaune dès que l'utilisateur le pointera.
Notions de pseudo-class :active Survient lorsque l'utilisateur active (clique sur) l'élément : Exemple de règle : A:active {color: red} la couleur du texte d'un hyperlien passera au rouge dès que l'utilisateur l'activera.
Notions de pseudo-class Exemple A:link{ color : #000099; text-decoration : none; font-weight : normal } A:visited{ color : #000099; text-decoration : underline; font-weight : bold; } A:hover{ color : #ff0066; text-decoration : underline; font-weight : normal;}
Notions de pseudo-class :focus Survient lorsque l'élément obtient le focus via le clavier ou le pointeur de la souris. Exemple de règle : A:focus {font-size: larger} la taille du texte sera augmentée d'un cran lorsque l'élément obtiendra le focus.
Notions de pseudo-éléments Il existe quatre pseudo-éléments. Ils permettent d'agir sur du contenu impossible à identifier avec le langage HTML. :first-line Sélectionne la première ligne d'un élément. Exemple de règle : P:first-line {color: blue} La première ligne de chaque paragraphe sera affichée en bleu.
Notions de pseudo-éléments :first-letter Sélectionne la première lettre d'un élément, Exemple de règle : P:first-line {font-size: 24pt} la première lettre de chaque paragraphe sera affichée avec la taille 24 points. :after :before Ces pseudo-éléments permettent l'insertion de texte ou d'images devant ou après le texte de l'élément.
Règles spéciales Les AT-rules ou @rules sont destinées à fournir des informations à l’application.. @import Utilisée au début d'une feuille de styles permet l’importation d’une autre feuille de styles. Sa valeur doit être une URL Exemple de règle : @import url(http://www.reseau.com/styles.css) Plusieurs règles @import une à la suite de l'autre.
Règles spéciales @media Permet d'indiquer le média cible Plusieurs règles @media peuvent cohabiter. Chacune d'entre-elles devant être associées à des règles spécifiques. Exemple de règle : @media print {BODY {background-color: white} Dans cet exemple, la règle de style qui suit est destinée aux imprimantes.
Règles spéciales Liste des médias disponibles all Tous les médias. aural Synthétiseurs vocaux. braille Appareils lisant le braille. embossed Imprimantes pour le braille. handheld Petits écrans, écrans monochromes, etc. print Imprimantes et dispositifs d'aperçu avant impression. projection Projecteurs, acétates électroniques. screen Écrans d'ordinateurs. tty Écrans de type télétype (terminaux). tv Télévision
Règles spéciales @page Définir les paramètres d'une boîte de page (page box), Une boîte de page est une zone contenant deux aires appelées aire de la page (page area) et aire des marges (margin area), Cette règle permet d'insérer des instructions concernant les dimensions, orientation, marges, etc. . La boîte de page agit en tant que boîte englobante
Règles spéciales La règle @page peut utiliser les propriétés suivantes : size, margin, marks Exemple : @page { size: 8.5in 11in; margin: 2cm } Les propriétés des pages de gauche et de droite se présentent comme suit : @page :left { size: 8.5in 11in; margin: 2cm } @page :right { size: 8.5in 14in; margin: 2cm } Il est aussi possible de spécifier les propriétés de la première page du document : @page :first { size: landscape; margin: 2cm }
Les unités de mesures Unités de longueurs (lenght) Les longueurs, tailles, épaisseurs des propriétés définies dans les styles sont à associer à des unités de mesures. Exemples. : 10pt 1.2em 0.7em 12px
Les unités de mesures Deux groupes d'unités de longueurs sont utilisées avec CSS2 : Unités de longueurs relatives Elles permettent un ajustement automatique des dimensions en fonction du support employé. em (relative à la taille définissant l'élément parent. 1.2em = 120% de la taille de caractère définie dans l'élément parent) ex (relative à la valeur de la hauteur définie dans l’élément parent (x-height) .) px (valeur relative à la résolution du support visuel, par exemple l'écran)
Les unités de mesures Unités de longueurs absolues Intéressantes uniquement lorsque le support de sortie du document est connu à l'avance. in (pouces) cm (centimètres) mm (millimètres) pt (points; 1pt = 1/72in) pc (picas; 1pc = 12pt) Pourcentage Les pourcentages sont composés d'un nombre suivi du symbole %.
Les unités de mesures Les couleurs Une valeur de couleur est définie par un nom (nom de la couleur lorsqu'elle existe) ou un code de couleur RGB. Noms de couleurs : aqua, black, fuschia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white et yellow. Codes de couleurs : #rrggbb ex. : #6666FF
Les commentaires P { font-size : 10px ; } /* commentaire ici */
Les filtres d’images Spécifiques à Internet Explorer Disponibles à partir de la version xRay(enabled=1) gray(enabled=1) invert(enabled=1) alpha(opacity=15,enabled=1) flipV flipH Exemple <STYLE> .filtre {filter:xRay(enabled=1) gray(enabled=1) invert(enabled=1) alpha(opacity=15,enabled=1) flipV flipH} </STYLE>
Les filtres d’images Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?) BlendTrans(Duration=?) Blur(Add=?, Direction=?, Strength=?) Chroma(Color=?) DropShadow(Color=?, OffX=?, OffY=?, Positive=?) FlipH FlipV Glow(Color=?, Strength=?) Gris Invert (invert) Lumière Mask(Color=?) RevealTrans(Duration=?, Transition=?) Shadow(Color=?, Direction=?) Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?) Xray
Les filtres d’images Exemple : fliph(enabled=1) flipv(enabled=1) gray(enabled=1) invert(enabled=1) xray(enabled=1) alpha(opacity=50,enabled=1) blur(direction=45,strength=15, add=0, enabled=1) chroma(color=#FF0000 ,enabled=1) dropshadow(offx=5, offy=9, color=#008fff,enabled=1) glow(strength=5, color=#ffff00,enabled=1) mask(color=#FF0000 ,enabled=1) shadow(color=#FF0088,direction=315,enabled=1) wave(freq=2, strength=6, phase=0, lightstrength=0, add=0, enabled=1) wave(freq=4, strength=8, phase=0, lightstrength=25, add=1, enabled=1) chroma(color=#ff0000,enabled=1) shadow(color=#ff0000,enabled=1) chroma(color=ffff00,enabled=1)