Vous êtes sur la page 1sur 52

Chapitre 2

Les feuilles de styles : CSS3


CSS : Cascading style sheet

Enseignante : Mme Mayssa Bensalah


Email : bensalah-maissa@hotmail.fr
Plan du chapitre
1. Introduction 9. Propriétés de styles
2. Historique 10. Notions de class
3. Structure des feuilles de styles 11. Notions de pseudo-class
4. Héritage 12. Notions de pseudo-élément
5. Localisation externe, interne, 13. Règles spéciales
intra-ligne 14. Unités de mesures
6. Règles de rédaction 15. Commentaires
7. Sélecteurs regroupés 16. Filtres d’images
8. Notions de boites
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 CSS 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 CSS3 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">
</LAYER>
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 Entier Position absolue / partie
gauche de l’écran
Width Entier Largeur
Height Entier Hauteur
zIndex Entier Position
Visibility Show Valeur de superposition
Hidden
Notions de boîtes
Attribut Style Valeur Libellé
• DIV ID Chaine Identifiant de la balise
Name Chaine Nom de la balise
• SPAN Position static Aucun mouvement par
absolute rapport au document
relative positionnement par rapport
au document
par rapport à l'élément
précédent
Top auto distance au sommet
valeur automatique
numérique distance au sommet en
entière pixels
valeur en distance au sommet en
pourcentage (%) pourcentage
Notions de boîtes
Attribut Style Valeur Libellé
• DIV Left auto distance à la bordure
valeur gauche automatique
• SPAN numérique
entière
distance à la bordure
gauche en pixels
valeur en distance à la bordure
pourcentage (%) gauche en pourcentage
Width auto largeur automatique
valeur largeur de l'élément en
numérique pixels
entière largeur de l'élément en
valeur en pourcentage Largeur
pourcentage (%)
Notions de boîtes
Attribut Style Valeur Libellé
• DIV Height auto hauteur automatique
valeur hauteur de l'élément en
• SPAN numérique
entière
pixels
hauteur de l'élément en
valeur en pourcentage
pourcentage (%)
zIndex auto superposition automatique
valeur valeur indiquant la
numérique profondeur
entière
Visibility inherit visibilité par défaut
hidden caché
visible visible Valeur de
superposition
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:
• Exemple :
<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
• 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
:focusSurvient 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
0
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)

Vous aimerez peut-être aussi