Vous êtes sur la page 1sur 49

Les feuilles de style

Cascading Style Sheets (CSS)


Pr//BAATAOUI Aziz

Introduction
La feuille de style est un ensemble de rgles graphiques qui sappliquent une ou plusieurs pages Web. Il est possible dutiliser une mme feuille de style pour plusieurs pages . Le CSS est donc un langage de prsentation, permettant de crer un vrai mise en forme:

De la page :
Organiser la page HTML en blocs : colonnes, bandeaux, couleur/image de fond, etc.

Du texte :
Encadrer, souligner, taille/couleur du texte, espacement entre lettres, puces des listes, marges

Des images :
Dfinir les marges et les tailles standard des images

De votre site web

Comment appliquer CSS une page HTML?


Il existe trois mthode dappliquer le style CSS un document HTML:

Mthode 1:
On peut appliquer directement un style CSS un document HTML avec lattribut HTML style . Dans ce cas on parle dun style local.

Exemple:
Supposons quon veut dfinir un arrire plan noir une page HTML. Le code est le suivant: <html> <head><title>Exemple de CSS</title> </head> <body style=background-color:black> <font color=red>Le font de cette page est noir!</font> </body> </html>
3

Comment appliquer CSS une page HTML?


Mthode 2:
On ajout d'une section <style> au dbut du document html plac entre la balise <head> et </head>: s'applique aux balises du document courant

Exemple:
En reprenant lexemple prcdent le code est le suivant: <html> <head> <style> body {background-color:black;} </style> </head> <body> <font color=red>Le font de cette page est toujours noir!</font> </body> </html>
4

Comment appliquer CSS une page HTML?


Mthode 3: Cest la meilleure mthode
Elle consiste appeler une feuille de style externe dfinie ailleurs. On fait lappel par la balise <Link>

<link rel=stylesheet type=text/css

href=styles/feuille1.css>

Une feuille de style externe est un fichier texte ayant lextension .css . Elle peut tre range avec le reste des fichiers du site Web dans le mme rpertoire ou dans un rpertoire part rserv pour accueillir les feuilles de style dfinies

(recommand).

Comment appliquer CSS une page HTML?


Exemple:
En Supposons maintenant que la feuille de style est range dans un rpertoire nomm styles. La feuille sappelle feulle1.css .La structure du site est la suivante:

Maintenant on cre un lien depuis le document HTML (index.htm) vers la feuille de style (feuille1.css). Ce lien est cr en une ligne de code HTML: <link rel=stylesheet type=text/css href=styles/feuille1.css>
6

Comment appliquer CSS une page HTML?


Exemple:

Maintenant La ligne de code doit sinscrire dans la section dentte du code


HTML (entre <head> et </head>). Comme ceci: <html> <head> <link rel=stylesheet type=text/css href=style/style1.css> </head> <body> </body> </html> Vous pouvez conclure quavec une seule feuille de style dfinie sur votre site Web vous pouvez contrler la totalit des pages en y insrant un lien vers celle-ci.

Structure dune rgle


Syntaxe :

Rgle Dclarations
Exemple: h1 {

= =

Slecteur
Proprit
color: Proprit(s) font-weight: font-family :

+ +

Dclarations Valeurs
blue; } Valeur(s) bold; arial; }
8

Slecteur(s) h3, h4 {

Structure dune rgle


Les slecteurs permettent de dfinir la cible laquelle on veut appliquer le style. 1. Un slecteur simple est constitu du nom de la balise sans les caractres de dbut < et de n de balise />. balise { proprit1: valeur1; proprit2: valeur2; }

Exemple :
2. p { color: blue; background-color: red; } Un slecteur multiple porte sur plusieurs slecteurs simples, spars par une virgule. balise1, balise2 { proprit1: valeur1; proprit2: valeur2; } Exemple: plusieurs lments

p, h1

{color: blue;

background-color: yellow; }
9

Structure dune rgle


3. Un slecteur universel *:Pour appliquer un style tous les lments, nous utiliserons le slecteur universel * avant la dfinition dune ou plusieurs proprits. * { proprit1: valeur1; proprit2: valeur2; } Exemple : *{ background-color: yellow;} indique que la couleur du font de tous les lments soit le jaune. Cela nempche pas de modier cette couleur de fond pour un lment particulier, en la rednissant uniquement pour celui-ci, par exemple : *{ background-color: yellow;} p{ background-color: gray;} tous les lments ont un fond jaune, sauf <p> qui a un fond gris redni spcialement.
10

Structure dune rgle


4. Les classes: Pour crer une classe, le slecteur est constitu du nom choisi pour la classe prcd dun point (.). Le slecteur de classe est utilis pour spcifier un style pour un groupe d'lments. .Nom_Classe {

proprit1: valeur1; proprit2: valeur2; .. propritN:valeurN; }


Exemple :

.corps { font-family : verdana, arial; font-style: italic ; } lutilisation de la classe corps dans html : <Body class=corps>..</body>
11

Structure dune rgle


5. Slecteur didentiant id: Pour les slecteurs identifiants, la procdure est la mme que pour les classes(on change le point par dise(#). Le slecteur d'ID est utilis pour spcifier un style pour un seul lment unique. #Identi fiant{ proprit1: valeur1; proprit2: valeur2; .. propritN:valeurN; }
Exemple :

#texte { font-family : arial; font-style: italic ; font-size:20px; } lutilisation de lidentifiant texte dans html : <p id=texte> exemple de slecteur identifiant appliquer sur un paragraphe</p>
12

Les couleurs et les arrire-plan


La couleur davant-plan: la proprit color La proprit color dcrit la couleur davant-plan dun lment. Supposons que nous voulons visualiser les grands titres en rouge. Nous savons jusquici que les grands titres sont balises en HTML avec llment <h1>. Le code suivant donne aux lments <h1> une couleur rouge: h1 { color:#ff0000; } Ou bien: h1 { color:red; }

Les arrire-plan La proprit background-color dcrit la couleur darrire-plan des lments. Llment <body> dcrit la page toute entire. Pour changer la couleur darrire-plan de la page entire il faut appliquer la proprit backgroundcolor sur llment <body>. On aura alos: body { background-color:#ffff00 } Ce qui donne un arrire plan jaune pour la page qui utilise ce style.
13

Les couleurs et les arrire-plan


Les arrire-plan La proprit background-image sert insrer une image darrire-plan. Si on veut ajouter lexemple prcdent, en plus darrire-plan jaune, une image darrire-plan nomm im.jpg on na qu mettre le code suivant: body { background-color:#FFFF00; background-image: url(im.jpg); } url contient le chemin (relatif ou absolu) de limage mettre en arrire-plan.

La proprit background-repeat permet de rpter limage darrire-plan selon le choix. Par dfaut, une image darrire-plan est rpte sur toute la page (si, bien sr, les dimensions de limage sont infrieures celles de la page).
14

Les couleurs et les arrire-plan


Les arrire-plan

La proprit background-repeat peut prendre quatre valeurs: background-repeat: repeat-x : Rptition horizontale (en haut)de limage background-repeat: repeat-y: Rptition verticale ( gauche)de limage background-repeat: repeat: Rptition partout de limage background-repeat: no-repeat : Limage ne se rpte pas Lexemple prcdent redevient: body { background-color: #FFFF00; background-image: url(im.jpg); background-repeat: no-repeat;

}
15

Les couleurs et les arrire-plan


Les arrire-plan

La proprit background-attachment permet de fixer ou de laisser dfiler limage darrire-plan. Par dfaut, une image darrire-plan dfile avec le contenu. La proprit background-attachment possde 2 valeurs: background-attachment: scroll : Limage darrire-plan peut dfiler background-attachment: fixed : Limage darrire-plan est fixe Lexemple prcdent redevient: body { background-color: #FFFF00; background-image: url(im.jpg); background-repeat: no-repeat; background-attachment: fixed; }
16

Les couleurs et les arrire-plan


Les arrire-plan La proprit background-position dfinit lemplacement de limage darrire-plan par rapport la page. Par dfaut, une image darrire-plan est situe en haut gauche.

La proprit background-position pocde comme valeur les coordonnes (X,Y) de lemplacement de limage darrire-plan.
Exemple: background-position: right top : Limage est situe en haut droite.

background-position: 4cm 2cm : Limage est situe 4cm de la gauche et 2cm du haut de la page.
background-position: 50% 50% : Limage est centre sur la page. Comme vous pouvez le constater, les valeurs peuvent tre exprimes en pourcentage, en cm, en px (pixels) ou encore en utilisant les mots-cls top,bottom,center,left ou right.
17

Les couleurs et les arrire-plan


Les arrire-plan La proprit background est un raccourci pour toutes les proprits numre prcdemment. En effet, au lieu dexprimer llment <body> de la faon: body { background-color: #FFFF00; background-image: url(im.jpg); background-repeat: no-repeat;

background-attachement: fixed;
background-position: 50% 50% } On peut raccourcir la syntaxe et on aura: body { background: #FFFF00 url(im.jpg) no-repeat fixed 50% 50%; }
18

Les polices
Les proprits de polices

La proprit font-family permet de lister un ensembles de polices que le navigateur prendra en compte selon leur ordre dnumration. Deux types de noms pour catgoriser les polices: Le nom de famille: appel aussi police. Comme Arial , Time New Roman , Verdana La famille gnrique: Elle regroupe les polices ayant des aspects uniformes. Par exemple on peut trouver la famille Sans srif caractrises par labsence dempattements, la famille Srif qui procdent des empattements et la famille Monospace caractrises par un espacement rgulier entre les caractres.
19

Les polices
Les proprits de polices Exemple de la proprit font-family : h1 {font-family: verdana, arial, sans-serif;}

h2 {font-family: Time New Roman, Georgia, serif;}


Notez que le nom de la police Time New Roman contient des espaces. Elle est alors mise entre des guillemets. La proprit font-style permet de dfinir le style de la police qui peut tre normal ou italic. h1 { font-family: verdana; font-style: italic; }

tous les titres <h1> en italic et la police en verdana:


20

Les polices
Les proprits de polices La proprit font-variant permet de dfinir la variante de la police qui peut prendre la valeur normal ou small-caps. Une police small-caps utilise les lettres majuscule mais avec une taille rduite la place des lettres en minuscules.

Lexemple suivant illustre le mot bonjour en petites majuscules (small-caps) et en majuscule:


bonjour BONJOUR BONJOUR (en police normale) (en police small-caps ou petites majuscules) (en police majuscule) Tous les titres <h1> seront mis en petites majuscules.
21

h1 {font-variant: small-caps;}

Les polices
Les proprits de polices
La proprit font-weight dfinit le degr de graisse avec lequel prsenter les polices. Il pends aussi deux valeurs: normal ou bold. Lexemple suivant va mettre toutes les polices places dans les colonnes des tableaux dcrits par <td> en gras.

td {font-weight: bold;}
Cette ligne CSS permet carrment de mettre tous les textes de la page en gras: body {font-weight:bold;} La proprit font-size permet de dfinir la taille des polices. La taille peut tre exprime par px , pt ou encore par % . h1 {font-size:32px;}
h2 {font-size:16pt;}

px: pixel (unit de base pour mesurer les dimensions dune image) pt: point (il vaut peut prs 1/72 pouce ou encore 1/28 cm)
22

Les polices
Les proprits de polices La proprit font permet de raccourcir les lignes CSS consernant la mise en forme des polices de la page. La syntaxe suivante: h1 { font-family: verdana; font-size: 32pt; font-weight: bold; font-variant:small-caps; font-style: italic; } Se rduit : h1 {font:32pt bold small-caps italic verdana arial sans-serif;}
23

Mise en forme des listes via CSS


En HTML, on a appris les diffrents types de liste et les diffrentes balises pour les dfinir. 1- Listes non ordonnes 2- Listes ordonnes 3- Listes descriptives

1- Listes non ordonnes( puces)


Les listes puces sont des listes non numrotes( puces). En CSS il est possible d'avoir diffrentes formes de puces grce la proprit list-style-type. Les

formes varient en fonction de la valeur de la proprit.


list-style-type: disc /* petit cercle plein */ list-style-type: circle /* petit cercle vide */ list-style-type: square /* petit carr plein */
24

Mise en forme des listes via CSS


Exemple: Code CSS: .disc { list-style-type:disc } .circle { list-style-type:circle; } .square { list-style-type:square; } Code HTML: <ul class="disc" > <li>liste 1 avec disc</li> <li>liste 2 avec disc</li> </ul> <ul class="circle" > <li>liste 1 avec circle</li> <li>liste 2 avec circle</li> </ul> <ul class="square" > <li>liste 1 avec square</li> <li>liste 2 avec square</li> </ul>

2- Listes ordonnes

Pour faire des listes numrotes et alphabtiques il suffit de remplacer <ul> par <ol> en HTML. Toujours avec la proprit list-style-type on peut mettre des types de chiffre ou de caractre de notre choix comme des :
25

Mise en forme des listes via CSS


decimal : affiche les puces sous forme de nombres dcimaux decimal-leading-zero : Nombres de deux dcimales (01,02, etc...) lower-roman : Chiffres romains minuscules upper-roman : Chiffres romains majuscules lower-latin : lettres minuscules (forme alphabtique) upper-latin : lettres majuscules (forme alphabtique)

lower-greek : lettres grecques (forme alphabtique)


Code HTML: Exemple: <ol class="Rom_min" > Code CSS: <li>item1 avec chiffre romain en minuscules .Rom_min { <li>item 2 avec chiffre romain en minuscules list-style-type: lower-roman </ol> } <ol class="Rom_maj" > .Rom_maj{ list-style-type: upper-roman; <li>item1 avec chiffre romain en majuscules <li>item 2 avec chiffre romain en majuscule } 26 </ol>

Mise en forme des listes via CSS


3- Listes avec images A la place des puces et des numros, il est aussi possible de mettre des images. Pour cela, utilisez la proprit list-style-image en mettant l'URL de l'accs local. Au cas o vous voulez dsactiver l'affichage de l'image mettez none la place de l'URL.
Exemple: Code CSS: Code HTML:

.listeimage1 { list-style-image: url("images/liste.gif"); }

<ul class="listeimage1"> <li>liste 1 avec image en locale <li>liste 2 avec image en locale</li> </ul>

Le chemin de l'image peut aussi contenir des URL comme dans cet exemple : .listeimage2 { list-style-image : url("http://www.votredomain.co m/images/liste.gif" ); } <ul class="listeimage2"> <li>liste 1 avec image en ligne</li> <li>liste 2 avec image en ligne</li> </ul>
27

Mise en forme des listes via CSS


4- Position de la liste list-style-position est la proprit pour spcifier l'emplacement de la liste par rapport la bordure et au texte. Il y a deux valeurs possibles :
outside qui est la valeur par dfaut , ces caractres sont intgrs au texte de litem. inside : les caractres de la numrotation sont placs dans la marge de retrait du texte de litem.

Exemple:

Code CSS:

Code HTML:

.bordure {border: medium double red;} .ins { font-size:36px; list-style-type: circle ; list-style-position: inside;} .out { font-size:36px; list-style-type: circle; list-style-position: outside;} Observez dans l'exemple suivant que les listes avec list-style-position: inside; sont un peu plus dcales de la bordure gauche du div que les listes avec list-style-position: outside ;

<div class="bordure"> <ul class="ins" > <li>liste 1 inside <li>liste 2 inside</ul> <ul class="out" > <li>liste 1 outside <li>liste 2 outside </ul> </div>

28

Les bordures
border-width: permet de dfinir la largeur de la bordure border-color: permet de dfinir la couleur de la bordure border-style : permet de dfinir le type de la bordure. Les diffrentes valeurs de cet attribut sont: none : pas de bordure (par dfaut) solid : un trait simple. dotted : pointills. dashed : tirets. double : bordure double. groove : en relief. ridge : autre effet relief. inset : effet 3D intrieur. outset : effet 3D extrieur.

border permet de regrouper les trois valeurs pour modier lapparence de la bordure :

29

Les ombres
Les ombres font partie des nouveauts rcentes proposes par CSS3. deux types d'ombres : les ombres des botes ; les ombres du texte. les ombres des boites : box-shadow La proprit box-shadow s'applique tout le bloc et prend quatre valeurs dans l'ordre suivant : le dcalage horizontal de l'ombre ; le dcalage vertical de l'ombre ; l'adoucissement du dgrad ; la couleur de l'ombre. Exemple p { box-shadow: 6px 6px 0px black; }
30

Les ombres
les ombres du texte : text-shadow

Avec text-shadow, vous pouvez ajouter une ombre directement sur les lettres de
votre texte ! Les valeurs fonctionnent exactement de la mme faon que boxshadow : :

le dcalage horizontal de l'ombre ;


le dcalage vertical de l'ombre ; l'adoucissement du dgrad ; la couleur de l'ombre. Exemple p { text-shadow: 2px 2px 4px black; }

31

DIV et SPAN
Deux nouvelles balises: balise div La balise <div> cest une balise de type "bloc" n'est utilise que pour diviser la page. Par exemple, sur un site, un bloc marqu par la balise <div> contient le menu, un autre contient l'espace de login, encore un autre contient un cours, etc...

.forme1 { .forme { Exemple text-align: center; text-align: center; border: solid 2px blue; border: dotted 2px blue; <div class=forme> padding: 5px; <p>Je suis dans un div dont les padding: 5px; margin: 5px; margin: 5px; bordures sont continues.<p> } }

</div> <p>Je suis une phrase hors d'un div.</p> <div class=forme1> <p>Je suis une autre phrase dans un autre div avec des bordures en pointilles.</p> </div>

32

DIV et SPAN
Deux nouvelles balises: balise span(inline)

Llment span permet de dcouper une partie de ligne .Balise de type ligne
Important : un lment de type "inline" doit toujours tre plac l'intrieur d'un lment de type "bloc" (block). Il ne doit pas tre directement encadr par la balise <div> mais par n'importe quelle autre balise de type "bloc". Exemple . form{

font-style: italic;
font-weight: bold; color:red;

}
33

Proprits des boites(blocs)


Boite(Bloc)

34

Proprits des boites(blocs)


Largeur , Hauteur et Dbordement width : Largeur du contenu de l'lment : longueur ou auto. Par dfaut auto, prend la taille maximale disponible. height : Hauteur du contenu de l'lment : longueur ou auto. Par dfaut auto, s'adapte la taille du contenu. La proprit overflow contrle le comportement :

visible : le contenu dbordant est affich.


hidden : le contenu dbordant est cach et donc illisible.. scroll : des barres de dlement horizontales et verticales apparaissent sur les cts droit et bas de la bote de llment, ce qui permet daccder au contenu dbordant. auto : le navigateur fait apparatre les barres de dlement en cas de dbordement uniquement. Par dfaut : visible. Internet Explorer 6 ne gre pas overflow: visible;
35

Proprits des boites(blocs)


Marge et Espacement nous pouvons dnir une marge autour de chaque lment. margin-top : dnit la marge haute ; margin-right : dnit la marge droite ; margin-bottom : dnit la marge basse ; margin-left : dnit la marge haute.

margin permet de dfinir d'un seul coup ces quatre proprits, dans l'ordre top right bottom left.
36

Proprits des boites(blocs)


Marge et Espacement nous pouvons dnir une zone situe entre la bote de contenu dun lment et sa bordure: padding-top : dnit lespacement haut ; padding-right : dnit lespacement droit ; padding-bottom : dnit lespacement bas ; padding-left : dnit lespacement gauche.

padding permet de d nir d'un seul coup ces quatre proprits, dans l'ordre top right bottom left.
37

Proprits des boites(blocs)


Flottement et Positionnement la proprit position contrle le positionnement position: statique ;(par dfaut) les boites se placent les unes aprs les autres; position: relative; left : dcale llment vers la droite (si sa valeur>0) ou vers la gauche (si sa valeur <0) ; top : dcale llment vers le bas (si sa valeur>0) ou vers le haut (si sa valeur<0) ; right : dcale llment vers la gauche (si sa valeur est positive) ou vers la droite (si sa valeur<0) bottom : dcale llment vers le haut (si sa valeur est positive) ou vers le bas (si sa valeur >0).
38

Proprits des boites(blocs)


Flottement et Positionnement la proprit position contrle le positionnement position: absolute; Ensuite dnir la position de llment par rapport son conteneur laide des

proprits left, top, right, bottom, qui dnissent la position des bords de
llment respectivement par rapport aux bords gauche, haut, droit et bas du conteneur.

39

Proprits des boites(blocs)


Flottement et Positionnement Exemple :

Positionnement relative:

Positionnement absolue:

40

Proprits des boites(blocs)


Flottement et Positionnement la proprit float contrle le flottement

L'lment flottant se met le plus droite (float: right) ou gauche (float: left) possible de son conteneur, donc l'lment suivant se

positionne ct. Les lments flottants doivent OBLIGATOIREMENT avoir une LARGEUR DEFINIE.

Attention les lments flottants se placent les uns ct des autres tant qu'ils ont la place, ensuite ils vont en dessous.
41

Proprits des boites(blocs)


Flottement et Positionnement sortir du flottement = clear : left, right ou both Puisque tous les lments qui se positionnent les uns ct des autres doivent avoir la proprit "float" y compris le dernier, il faut

ensuite "forcer" le retour la ligne.


Il est ncessaire d'avoir un lment qui permet de revenir la ligne. S'il y a eu du flottement gauche, il faut : clear: left S'il y a eu du flottement droite, il faut : clear:right S'il y a eu du flottement gauche et droite, il faut : clear:both
42

Proprits Display
Display display permet de spcifier la manire dont un lment est affich. Balise{ display: valeur; } valeur peut prendre: none: llment nest pas afch et la bote qui lui est associe nest pas cre. inline: llment devient du type en ligne (comme <span> par exemple). block: llment devient du type bloc (comme <h1>, <p>, <div>). list-item : llment devient du type liste (quivalent de <li>).
43

Les liens
1- Les proprits des liens Pour contrler les effets appliques aux liens, on utilise ce quon appelle des pseudo-classes. Les pseudo-classes permettent de tenir compte des conditions et vnements diffrents pour la dfinition dune proprit sur une balise HTML. Pour un lien, la pseudo-classe exprime ltat de celui-ci. Par exemple, le lien estil visit, actif ou survol. Pour chaque tat on peut appliquer des styles CSS dj vu dans ce chapitre tel que les couleurs, les arrire-plans, les proprits de texte

En HTML les liens sont exprimes avec les balises <a>. En CSS on utilise a comme slecteur.
44

Les liens
1- Les proprits des liens

Exemple:
a{ color: blue; } Lien non visit: a:link { color: bleu; text-decoration: none; } - Lien visit: Les liens sont alors mis en bleu. Cependant, ils peuvent avoir plusieurs tats.

On ajoute au slecteur a la pseuso-classe :link pour dsigner un lien non visit.

a:visited { color: orange; On ajoute au slecteur a la pseuso-classe background-color:green; :visited pour dsigner un lien visit. } 45

1- Les proprits des liens Exemple: Lien actif: a:active { color: yellow; }

Les liens
On ajoute au slecteur a la pseuso-classe :active pour dsigner un lien actif.

- Lien survol: Lun des effet les plus frquents sur les pages Web consiste changer les proprits du lien au moment du survol (quand on place le curseur de la souris en dessus). a:hover { color: purple; On ajoute au slecteur a la pseuso-classe :hover pour dsigner un lien survol. letter-spacing:4px; font-variant: small-caps; text-decoration: underline; 46 }

Les liens
1- Les proprits des liens Lien focus: focus, qui permet de modier le style dun lien quand il reoit le focus laide de la touche Tab ou dun raccourci clavier.

a:focus{ font-size:200%; border: yellow 2px double; }

On ajoute au slecteur a la pseuso-classe :focus pour dsigner un lien actif.

47

TP dapplication
TP: raliser la page suivante en utilisant HTML et CSS

48

Mini projet

Raliser un site HTML + CSS avec les notions vues dans le cours.
Projet rendre au plus tard le 20 Janvier 2014

49