Vous êtes sur la page 1sur 33

Les feuilles de style

Réalisé par :
Sara RHAZLANE
Chaimaa MESSAOUDI
PLAN
• C’est quoi le CSS ?
• HTML vs CSS
• Pourquoi le CSS?
• Notion de cascade
• Syntaxe du CSS
• Notion d’héritage
• Notion de classe
• Balise DIV et SPAN
• Notion ID
• Points forts du CSS
• Liste des propriétés
• Les liens CSS
• Positionnement des éléments
19/12/2013
• Conclusion 2
C’est quoi le CSS ?
CSS = Cascading Style Sheets

• Apparu en 1996
• Code complémentaire à l’HTML

19/12/2013 3
HTML vs CSS
Avant CSS :
Structure

HTML gère
Apparence

Après CSS:

HTML gère la structure

CSS gère l’apparence


19/12/2013 4
Pourquoi le CSS ?

• Modification de la structure et de l’apparence


séparément
• Changer l’apparence facilement
• Moins de code HTML (1 seul fichier .css suffit)
• Vitesse de chargement de la page

19/12/2013 5
Pourquoi le CSS ?
Un exemple ?
Changer le fond des pages en gris. Si j'ai un site de 5 pages, je vais
répéter 5 fois :
En HTML simple : <body bgcolor="#CCCCCC">

Par contre si j’ai dans un fichier CSS :


body { background-color: #CCCCCC; } , si je souhaite modifier la
couleur de mes pages, j'ai un seul fichier a modifier .

Conclusion :
CSS  Centralisation de l’information
19/12/2013 6
Notion de Cascade
Déclaration des styles à différents endroits+ Ordre de propriété des ses endroits
=> une cascade de style

<body style=" background-color:red"></body>


Attributs des
balises html

<head>
<title>titre de ma page</title>
Internal <style type="text/css"> body{background-color : blue;} </style>
(HEAD) </head>

<head>
<title>titre de ma page</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
External </head>

19/12/2013 7
La syntaxe du CSS
Syntaxe simple, se compose d'un selecteur et une propriété
associé à une valeur :

Selecteur

Propriété Valeur

19/12/2013 8
La syntaxe du CSS
Exemple:
p {font-family: Georgia,Arial ;
font-style: Gras;}

Combination de selecteurs:
h1, h2, h3, h4, h5, h6 { color: black; font-family: Georgia;}

Mettre des commentaires dans le CSS:


/* Commentaire ici */

19/12/2013 9
Notion d'héritage
Fondé sur le modèle Parent – Enfant

Exemple:
<H1> Le principe de <I> l'héritage </I> </H1>
Définir une couleur rouge d’arrière plan sur la balise <H1> « Père » => la
balise<l> « Enfant » aura aussi une couleur rouge en arrière plan

Attention:
Il existe des propriétés ou l’héritage ne fonctionne pas ( Margin, Padding…)

19/12/2013 10
Notion de classe en CSS

Classe = appliquer un style précis au sein d’une balise HTML


Façon de nommage :
. + nom_de_la_classe

Ne pas confondre les sélecteurs et les classes :


Sélecteur  H3 {font-family: Arial}
Classe  .Toto { font-weight: bold; font-color: #000080 }

19/12/2013 11
Notion de classe en CSS
Côté CSS:
.greenboldtext{ font-size: small; color: #008080; font-weight: bold; }
Côté HTML:
<p>\nVoici un texte <span class="greenboldtext"> avec une phrase en gras et
vert</span> alors que le reste ne change pas </p>

19/12/2013 12
Les balises DIV, SPAN
Les balises DIV et SPAN:
Appliquer un style à un contenu
Difference entre div et span:
- <SPAN> permet d'appliquer des styles à un morceau de paragraphe.

Exemple : Un monde de géants.


<HTML>
<HEAD>
<STYLE type="text/css">
.element{font-size: x-large; color: navy}
</STYLE>
</HEAD>
<BODY>
<P>Un monde de <SPAN class=element>géants</SPAN>.</P>
19/12/2013 13
</BODY></HTML>
Les balises DIV, SPAN
Les balises DIV et SPAN:
- <DIV> permet d'appliquer des styles plusieurs paragraphes.
• Exemple : La balise <DIV>
Commentaire :
N'oubliez pas l'attribut class!

<HTML><HEAD>
<STYLE type="text/css">
.zone{font-size: x-small}
</STYLE>
</HEAD>
<BODY>
La balise <DIV>
<DIV class=zone>
<P>Commentaire :</P>
<P>N'oubliez pas l'attribut class!</P>
19/12/2013
</DIV> </BODY></HTML> 14
La notion d’ ID
ID:
Notion ID ≈ Notion de classe
Code CSS:
#container{ width: 80%; padding: 20px; border: 1px solid #666; background:
#ffffff; }
Code HTML:
<div id="container"> Ici le code HTML relatif au contenu.. </div>

Classe ou ID ?
Css sans script  Il suffit d’utiliser les classes
CSS avec script (DHTML)  Notion ID indispensable

19/12/2013 15
Points forts du CSS

• Permet à l'utilisateur de personnaliser une page web

• Les pages web se chargent plus rapidement et utilisent


moins de bande passante

• Facilite le positionnement dans les moteurs de recherche

19/12/2013 16
Liste des propriétés
STYLES DE POLICE
font-family définit un nom de H3 {font-family:
police ou une Arial}
famille de police
font-style définit le style de H3 {font-style:
l'écriture italic}
normal ou italique
ou oblique
font-size définit la taille de la P {font-size: small}
police

19/12/2013 17
STYLES DE TEXTE

text-align définit l'alignement H1 {text-align:


du texte center}
left ou center ou
right

text-decoration définit une H1{text-decoration:


décoration du blink}
texte, soit barré,
clignotant, etc.
color définit la couleur H3 {color: red}
du texte

19/12/2013 18
ListeARRIERE
desPLANS
propriétés
background-color définit la couleur H1 {background-
de l'arrière-plan color: #000000}
couleur ou
transparent

background-image définit l'image de BODY


l'arrière-plan {background-
URL de l'image image: image.gif}
background- spécifie si l'image BODY
attachment d'arrière-plan {background-
reste fixe avec les image: image.gif;
déplacements de background-
l'écran attachement:
scroll ou fixed fixed}

19/12/2013 19
Les Marges
Exemple:
h1{ h1{
margin-top:10px; margin:10px;
margin-right:10px; => background-color:cyan;
margin-left:10px; color:black;}
margin-bottom:10px;
background-color: cyan;
color: black;}

19/12/2013 20
LES LISTES

list-style-type détermine le type de puces OL {list-style-type: square}


ou de numérotation

list-style-image permet de remplacer les ul


puces par une image {
list-style-image:
url('sqpurple.gif');
}

19/12/2013 21
Les liens en CSS
• Pour parler des liens en CSS, il faut définir la notion de pseudo-classe :

Pseudo-classe = d’ajouter des effets spéciaux à quelques sélecteurs suite à une


réaction à un événement par exemple.
selector:pseudo-class {property:value;}

Exemple: P:first-line { text-transform: uppercase }

19/12/2013 22
Les liens en CSS
Les pseudos-classes de liens sont des pseudo-classes spécifiques à la balise
<A> :
• a:link - normal, non visité
• a:visited – visité par l’utilisateur
• a:hover – souris sur le lien
• a:active – le moment où le lien est cliqué

Exemple:
a:hover {color:#FF00FF;} /* mouse over link */

19/12/2013 23
Les liens en CSS
Exemple:
a:link {background-color:gray;}

19/12/2013 24
Le positionnement des éléments
Comment modifier la position des éléments ?

Etape 1: Spécifier la valeur de la propriété position


On a 4 valeurs possibles : static, fixed,relative,absolute

Etape2: Spécifier la propriété top,bottom,left,right

19/12/2013 25
Positionnement statique
Positionnement par défaut
Attention: ne prends pas en compte les vals de top, …

19/12/2013 26
Positionnement Fixe
• Positionnée relativement au browser
• Ne bouge pas si la page est scrollée
<!DOCTYPE html>
<html>
<head>
<style>
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>

<p class="pos_fixed">Some more text</p>


<p><b>Note:</b> IE7 and IE8 supports the fixed value only if a
!DOCTYPE is specified.</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
</body>
</html>

19/12/2013 27
Positionnement Relatif
• Positionnée relativement à sa position initiale
<!DOCTYPE html>
<html>
<head>
<style>
h2.pos_left
{
position:relative;
left:-20px;
}

h2.pos_right
{
position:relative;
left:20px;
}
</style>
</head>

<body>
<h2>This is a heading with no position</h2>
<h2 class="pos_left">This heading is moved left according to its normal position</h2>
<h2 class="pos_right">This heading is moved right according to its normal position</h2>
<p>Relative positioning moves an element RELATIVE to its original position.</p>
<p>The style "left:-20px" subtracts 20 pixels from the element's original left position.</p>
<p>The style "left:20px" adds 20 pixels to the element's original left position.</p>
</body></html>

19/12/2013 28
Positionnement Relatif

19/12/2013 29
Positionnement Absolu
• Positionné relativement au premier élément parent qui a une autre position que la
position statique
• Si pas de parent trouvé alors le parent = <html>
<!DOCTYPE html>
<html>
<head>
<style>
h2
{
position:absolute;
left:100px;
top:150px;
}
</style>
</head>

<body>
<h2>This is a heading with an absolute position</h2>
<p>With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from
the top of the page.</p>
</body>

</html>

19/12/2013 30
Positionnement Absolu

19/12/2013 31
CONCLUSION

19/12/2013 32
MERCI
19/12/2013 33

Vous aimerez peut-être aussi