Création de site web Feuilles de style.

Présentation au sujet: "Création de site web Feuilles de style."— Transcription de la présentation:

1 Création de site web Feuilles de style

2 Création de site web

3 Création de site web CSS : Cascade Style Sheet body p div em p img
span

4 Création de site web Syntaxe : sélecteur {propriété:valeur;}
Exemples : hr {width:80%;} span {font-size:11pt;}

5 Création de site web sélecteurs systématiques :
div, p, span {font-size:11pt;} sélecteurs contextuels : div p span {font-size:11pt;} sélecteur universel : * {font-size:11pt;}

6 Création de site web Styles par priorité
Locaux : un endroit de la page ex : <hr style="width:80%; color:#FF0000;" /> Internes : toute la page ex : <style type="text/css">hr {width:80%;}</style> Externes : toutes les pages ex : <link type="text/css" href="global.css" rel="stylesheet" media="all" />

7 Création de site web Modèle de boîte

8 Création de site web Exemple : #mon_id { width: valeur;
height: valeur; margin: valeur; border: valeur; padding: valeur; background: valeur; color: valeur; }

9 Création de site web Identificateur : unique et englobant
syntaxe : #mon_id {propriété: valeur;} déclaration : <balise id="mon_id">...</balise> ex : #important {font-weight: bold; color: #FF0000;} <p id="important">...</p>

10 Création de site web classe :
syntaxe : .ma_classe {propriété: valeur;} déclaration : <balise class="ma_classe">...</balise> ex : .important {font-weight: bold; color: #FF0000;} <span class="important">...</span>

11 Création de site web Pseudo-classes : balise:link {propriété: valeur;}
balise:visited {propriété: valeur;} balise:hover {propriété: valeur;} balise:active {propriété: valeur;}

12 Création de site web Pseudo-éléments :
balise:first-letter {propriété: valeur;} balise:first-line {propriété: valeur;} ex : p:first-letter {font-size: 300%; float: left;}

13 Création de site web Effet rollover : Événement sur un survol
Stop javascript ! ex : #mon_id balise a:hover { background-image: img/mon_image.png; }