Академический Документы
Профессиональный Документы
Культура Документы
Formateur : A.AISSAOUI
ISTA TAZA
1. Prsentation
CSS (Cascading Style Sheets, aussi appeles Feuilles de style) est un langage de style qui dfinit la
prsentation des documents HTML. Par exemple, CSS couvre les polices, les couleurs, les marges, les
lignes, la hauteur, la largeur, les images d'arrire-plan, les positionnements volues et bien d'autres
choses
Les feuilles de style, pourquoi faire ?
En HTML, pour mettre en forme un titre nous utilisons la balise <font>.
Par exemple :
Formateur : A.AISSAOUI
ISTA TAZA
Dans ce qui suit, nous verrons comment CSS fonctionne rellement et comment commencer
Formateur : A.AISSAOUI
ISTA TAZA
Exemple 2 :
H3 { font-family: Arial; font-style: italic }
Donc ici, la balise H3 sera en Arial et en italique. Et dans votre document, toutes les balises
<H3> auront comme style Arial et italique.
Comme nous l'aurons remarqu, les codes sont plus ou moins identiques pour HTML et CSS. Ces
exemples illustrent galement le modle fondamental de CSS :
directement dans les balises du fichier HTML via un attribut style (mthode la moins
recommande).
Notez le contenu de la ligne <link rel="stylesheet" href="style.css" /> : c'est elle qui indique que ce
fichier HTML est associ un fichier appel style.css et charg de la mise en forme.
Formateur : A.AISSAOUI
ISTA TAZA
Enregistrez ce fichier sous le nom que vous voulez (par exemple page.html)
Maintenant, crez un nouveau fichier vide dans votre diteur de texte (par exemple Notepad++) et
copiez-y ce bout de code CSS :
p
{
color: blue;
}
Enregistrez le fichier en lui donnant un nom qui se termine par .css , comme style.css. Placez ce
fichier .css dans le mme dossier que votre fichier .html .
Dans Notepad++, vous devriez observer quelque chose de similaire la figure suivante.
Formateur : A.AISSAOUI
ISTA TAZA
Ouvrez maintenant votre fichier page.html dans votre navigateur pour le tester, comme vous
le faites d'habitude. Vos paragraphes sont crits en bleu, comme dans la figure suivante !
Formateur : A.AISSAOUI
ISTA TAZA
l existe une autre mthode pour utiliser du CSS dans ses fichiers HTML : cela consiste
insrer le code CSS directement dans une balise <style> l'intrieur de l'en-tte <head>.
Voici comment on peut obtenir exactement le mme rsultat avec un seul fichier .html qui
contient le code CSS.
<html>
<head>
<meta charset="utf-8" />
<style>
p
{
color: blue;
}
</style>
<title>Premiers tests du CSS</title>
</head>
<body>
<h1>Mon super site</h1>
<p>Bonjour et bienvenue sur mon site !</p>
<p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p>
</body>
</html>
Cette fois, seul le texte du premier paragraphe (ligne 11), dont la balise contient le code
CSS, sera color en bleu (figure suivante).
Formateur : A.AISSAOUI
ISTA TAZA
Si vous travaillez avec un fichier CSS externe, vous n'aurez besoin d'crire cette instruction
qu'une seule fois pour tout votre site, comme le montre la figure suivante.
Formateur : A.AISSAOUI
ISTA TAZA
Essayez vous-mme :
Lancez Notepad++ et crez deux fichiers, un fichier HTML et un fichier CSS, avec les contenus
suivants :
default.htm
<html>
<head>
<title>Mon document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Ma premire feuille de style</h1>
</body>
</html>
style.css
body {
background-color: #FF0000;
}
Placez maintenant les deux fichiers dans le mme dossier. Songez sauvegarder les fichiers avec les
bonnes extensions (respectivement .htm et .css )
Ouvrez default.htm dans votre navigateur et constatez le fond rouge de la page. Flicitations !
Vous avez fabriqu votre premire feuille de style !
Formateur : A.AISSAOUI
ISTA TAZA
background-position
background
10
Formateur : A.AISSAOUI
ISTA TAZA
Remarque :
Le chemin de l'image avec url("fleur.gif"). Cela signifie que l'image se trouve dans le mme
dossier que la feuille de style. On peut aussi appeler des images dans d'autres dossiers avec
url("../images/fond.gif"), ou mme sur Internet en donnant l'adresse complte du fichier :
url("http://www.html.net/fond.gif").
" Rpter l'image d'arrire-plan [background-repeat] :
Avez-vous remarqu, dans l'exemple prcdent, que limage de fond tait rpt par dfaut
horizontalement et verticalement pour couvrir la totalit de l'cran ? Ce comportement est
contrl par la proprit background-repeat.
Le tableau suivant dcrit les quatre valeurs diffrentes de background-repeat.
Valeur
repeat-x
repeat-y
repeat
no-repeat
Description
L'image se rpte horizontalement
L'image se rpte verticalement
L'image se rpte horizontalement et verticalement
L'image ne se rpte pas
Par exemple, pour viter la rptition d'une image d'arrire-plan, le code devrait ressembler
ceci :
body {
background-color: #FFCC66;
background-image: url("fleur.gif");
background-repeat: no-repeat;
}
" Bloquer l'image d'arrire-plan [background-attachment]
11
Formateur : A.AISSAOUI
ISTA TAZA
Description
L'image dfile avec la page (non bloque)
L'image est bloque
12
Formateur : A.AISSAOUI
ISTA TAZA
L'exemple de code suivre positionne l'image d'arrire-plan dans le coin infrieur droit de la
page :
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
" Concision [background] :
La proprit background est un raccourci pour toutes les proprits listes dans cette leon.
Avec background, on peut comprimer plusieurs proprits et donc crire une feuille de style
plus courte, ce qui en facilite la lecture.
Par exemple, les cinq lignes suivantes :
background-color: #FFCC66;
background-image: url("butterfly.gif");
13
Formateur : A.AISSAOUI
ISTA TAZA
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
On peut obtenir le mme rsultat avec background en une seule ligne de code :
background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
La liste de commande est la suivante :
[background-color] | [background-image] | [background-repeat] | [background-attachment] |
[background-position]
Si une proprit manque, elle prend automatiquement sa valeur par dfaut. Par exemple, si on
supprime background-attachment et background-position de l'exemple :
background: #FFCC66 url("butterfly.gif") no-repeat;
Ces deux proprits non dfinies prendront tout simplement leurs valeurs par dfaut, qui sont
comme chacun sait : "scroll" et "top left".
4. Les polices
Nous apprendrons ce que sont les polices et comment les appliquer avec CSS.
Les proprits CSS suivantes seront dcrites :
font-family
font-style
font-variant
font-weight
font-size
font
14
Formateur : A.AISSAOUI
ISTA TAZA
Exemple :
h1 {font-family: arial}
h2 {font-family: "Times New Roman"}
On peut mettre plusieurs nom de famille selon laffichage dans le navigateur sil accepte un
nom de famille ou non ; exemple :
h1 {font-family: arial, verdana, sans-serif;}
" Le style des polices [font-style]
La proprit font-style dfinit le style de la police concerne tre normal, italic ou
oblique.
Exemple : h2 {font-family: "Times New Roman"; font-style: italic;}
" Les variantes de polices [font-variant] :
La proprit font-variant sert choisir entre les variantes normal ou small-caps ( petites
capitales) d'une police.
Exemple :
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
" [font-weight] :
Dfinit l'paisseur de la police normal ou bold ou bolder ou lighter ou valeur numrique
soit (100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900)
P {font-weight: bold}
15
Formateur : A.AISSAOUI
ISTA TAZA
" font-size
Dfinit la taille de la police. On peut choisir parmi beaucoup d'units diffrentes points (pt),
inches (in), centimtres (cm), pixels (px) ou pourcentage (%)
Exemple :
P {font-size: 12pt}
h1 {font-size: 30px;}
h3 {font-size: 120%;}
16
Formateur : A.AISSAOUI
ISTA TAZA
5. Texte
Les proprits textes vont vous permette de personnaliser laffichage de vos textes tout en
combinant les balises de formatages avec la CSS.
text-indent
text-align
text-decoration
letter-spacing
text-transform
# text-indent
Cette proprit est utilise pour ajouter un alina la premire ligne du texte.
Exemple : un alina de 30px est appliqu tous les paragraphes baliss par un lment <p> :
p {text-indent: 30px;}
# text-align
La proprit text-align permet de modifier l'alignement dun texte. Le texte peut tre centr,
align droite ou gauche, ou encore justifi.
Dans l'exemple suivant, le texte des titres du tableau <th> est align droite, tandis que les
donnes du tableau <td> sont centres. Enfin, les paragraphes de texte normaux sont justifis :
th {text-align: right;}
td {text-align: center;}
p {text-align: justify;}
# text-decoration :
La proprit text-decoration permet d'ajouter des dcorations ou effets diffrents au
texte. Par exemple, on peut souligner le texte, le barrer, ou tracer un trait au-dessus, etc.
Dans l'exemple suivant, les lments <h1> sont des titres souligns, les lments <h2> sont
des titres avec un trait au-dessus et les lments <h3> des titres barrs.
h1 {text-decoration: underline}
h2 {text-decoration: overline}
h3 {text-decoration: line-through}
# letter-spacing :
L'espacement entre les caractres du texte peut tre dfini avec la proprit letter-spacing. La
valeur de la proprit est simplement celle de l'espacement dsir.
Chp3 : Feuilles de Style CSS
17
Formateur : A.AISSAOUI
ISTA TAZA
Par exemple, si vous voulez un espacement de 3px entre les lettres d'un paragraphe de texte
<p>, et de 6px entre les lettres des titres <h1>, voici le code utiliser :
h1 {letter-spacing: 6px;}
p {letter-spacing: 3px;}
# text-transform
La proprit text-transform contrle la capitalisation du texte. On peut choisir une
capitalisation initiale, une mise en majuscules ou une mise en minuscules,
capitalize : Elle capitalise la premire lettre de chaque mot. Par exemple, marcel
dupond deviendra Marcel Dupond .
uppercase : Elle convertit toutes les lettres en majuscules. Par exemple, marcel dupond
deviendra MARCEL DUPOND .
lowercase : Elle convertit toutes les lettres en minuscules. Par exemple, MARCEL
DUPOND deviendra marcel dupond .
none : Aucune transformation, et le texte se prsente tel qu'il apparat dans le code
HTML.
Exemple :
h1 {text-transform: uppercase}
h1 {text-transform: lowercase}
li {text-transform: capitalize}
Exercice :
En utilisant une feuille de style externe, sur un fond gris, centrez un <h1> rouge dans votre
document. Placez ensuite un titre de <h2> bleu en capitale suivi de deux paragraphes avec une
indentation. Modifiez ensuite la hauteur de ligne du deuxime paragraphe pour le rendre plus
lisible.
18
Formateur : A.AISSAOUI
ISTA TAZA
6.1 Border
Permet de dfinir les bordures autour des lments.
Liste des proprits border :
- border-style
Border-style vous permet de prciser la taille du bord. Les bords peuvent tre en pointill, en
trait, avec ligne continue, une double ligne, etc.
p {border-style:solid;}
Vous pouvez galement utiliser :
dashed (en tirets) ; dotted (en pointills) ; double (double); ridge; inset; outset (en 3D)
- border-color
Border-color vous permet de prciser la couleur du bord.
p {border-color:black}
-border-width :
Dfinit lpaisseur de la bordure.
Exemple :
p {border-width:5px}
Remarque : Les proprits border-width, border-style et border-color regroupent ellesmmes les proprits top, left, bottom et right.
19
Formateur : A.AISSAOUI
ISTA TAZA
Exemple :
p{
border-top-style:solid;
border-right-style:dotted;
border-left-style:solid;
border-bottom-style:dotted;
}
-border :
Dfinit comme un raccourci global les proprits de bordure
Border : taille style couleur;
Exemple :
p {border:5px solid red;}
6.2 Margin
Comme dit prcdemment, margin reprsente la marge externe de la bote. Vous pouvez modifier
les espaces haut, droit, bas et gauche indpendamment des autres.
20
Formateur : A.AISSAOUI
ISTA TAZA
Exemple:
margin-top:5px;
margin-right:50px;
margin-bottom:10px;
margin-left:5px;
Il existe quatre manires de raccourcir les margin, dpendant des cts que vous souhaitez modifier :
margin:5px 50px 10px 5px : Modifie respectivement TOP, RIGHT, BOTTOM, LEFT, toujours dans
cet ordre
margin:5px 50px 10px : top = 5px, right et left = 50px, bottom = 10px
margin:5px 50px : top et bottom= 5px, right et left = 50px
margin:50px : La marge de 50px sapplique dans toutes les directions.
6.3 Padding
Le padding reprsente un espace entre le contenu et le bord de la bote. Mme si ces proprits,
valeur et raccourci, sont identiques au margin, il ne faut en aucun cas les confondre. Ils ont chacun
leur utilisation propre.
Exercice :
Toujours en utilisant une feuille de style externe, ralisez cette mise en page
21
Formateur : A.AISSAOUI
ISTA TAZA
7 Les listes
Grce aux feuilles de style, les listes deviennent un lment incontournable de la construction dun
site internet. On peut les personnaliser de nombreuses faons, ajouter des images, appliquer
diffrents styles, etc.
Liste des proprits listes :
- list-style-type :
List-style-type vous permet de changer le marqueur prsent devant chaque lment de la liste.
Voici un exemple qui aura pour effet de placer un rond vide devant chaque lment :
ul {list-style-type:circle;}
Certaines de ces valeurs sappliquent pour les listes non-ordonnes et dautres pour les listes
ordonnes.
! Valeurs des listes non-ordonnes :
22
Formateur : A.AISSAOUI
ISTA TAZA
list-style-image : Utilisez les images avec les listes. Voici un exemple qui aura pour effet de
placer une image devant chaque lment :
ul {list-style-image:url(mon-image.jpg)}
-
list-style-position :
Spcifie le retrait des puces. Les valeurs possible : inside; outside;
- list-style : Raccourci global vers les proprits des listes : type position url();
8 Les liens
Nous pouvons appliquer aux liens ce que nous avons dj vu dans les parties prcdentes (c'est-dire changer les couleurs et les polices, les souligns, etc.). La nouveaut, c'est que CSS permet de
dfinir ces proprits diffremment, selon que le lien est visit, non visit, activ, ou si le curseur le
survole. Cela permet d'ajouter des effets plaisants et utiles vos sites Web. Pour contrler ces effets,
on utilise ce qu'on appelle des pseudo-classes.
Qu'est-ce qu'une pseudo-classe ?
Une pseudo-classe permet de tenir compte de conditions et vnements diffrents pour la
dfinition d'une proprit sur une balise HTML.
Voyons un exemple. Comme vous le savez, les liens sont dfinis en HTML avec des balises <a>.
On peut donc utiliser a comme slecteur dans CSS :
a {color: blue;}
Un lien est susceptible d'avoir plusieurs tats. Par exemple, il peut tre visit ou non. Vous
pouvez utiliser des pseudo-classes pour assigner des styles diffrents aux liens visits et non visits.
a:link {color: blue;}
a:visited {color: red;}
Utilisons respectivement a:link et a:visited pour les liens non visits et pour ceux visits. Les
liens actifs ont pour pseudo-classe a:active, et la pseudo-classe a:hover intervient lorsque le curseur
survole le lien.
Nous allons maintenant examiner chacune des quatre pseudo-classes avec des exemples et des
explications supplmentaires.
La pseudo-classe :link
La pseudo-classe :link est utilise pour les liens menant aux pages que l'utilisateur n'a pas
visites.
Dans le code suivant, les liens non visits seront en bleu clair.
La pseudo-classe :visited
La pseudo-classe :visited est utilise pour les liens menant aux pages que l'utilisateur a
visites. Par exemple, le code suivant donnera la couleur mauve fonc tous les liens visits :
23
Formateur : A.AISSAOUI
ISTA TAZA
La pseudo-classe :active
La pseudo-classe : active est utilise pour les liens qui sont activs.
Cet exemple montre des liens activs dont la couleur d'arrire-plan est jaune :
La pseudo-classe :hover
La pseudo-classe :hover est utilise lorsque le pointeur de la souris survole un lien.
On peut s'en servir pour crer des effets intressants. Par exemple, si nous voulons que nos
liens soient orange et en italiques au survol du pointeur, le code CSS devrait tre le suivant :
a:hover {
color: orange;
font-style: italic;
}
Exemples :
Comme indiqu avant, on peut ajuster l'espacement entre les lettres avec la proprit
letter-spacing. Cela s'applique aux liens pour un effet spcial :
a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}
MAJUSCULES et minuscules
Nous avons dj vu la proprit text-transform qui permet de basculer entre des lettres
majuscules et minuscules.
Elle peut aussi servir pour crer un effet sur les liens :
a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}
24
Formateur : A.AISSAOUI
ISTA TAZA
a {text-decoration:none;}
Syntaxe :
Pour appeler une classe dans le code HTML, il suffit de rajouter un attribut class la balise :
Il est possible de ne pas prciser de balise, auquel cas la classe pourra tre utilise dans
n'importe quelle balise pour laquelle le style slectionn a un sens ! On parle alors de classe
universelle (parfois classe indpendante). La dfinition d'une telle classe se fait en prcdant tout
simplement le nom de la classe d'un point
25
Formateur : A.AISSAOUI
ISTA TAZA
SPAN
26
Formateur : A.AISSAOUI
ISTA TAZA
La balise <SPAN> ... </SPAN> permet d'appliquer des styles des lments de texte d'un
paragraphe ou si vous prfrez un morceau de paragraphe. Ainsi on peut crire pour lexemple
prcdant :
.salutations
{
color: blue;
}
DIV
La balise <DIV> ... </DIV> est utilise pour dfinir une division ou une slection dans un
document html. Elle est souvent utilise pour grouper les lments de type bloc et leur appliquer un
style.
Exemple 1 :
<BODY>
<DIV class= "introduction">
<P>Paragraphe dintroduction :</P>
<P>un autre paragraphe>
</DIV>
</BODY>
Avec la dfinition de la classe introduction :
.introduction
{
font-type : arial ; font-size : 12px ; color : blue
}
Exemple 2 :
<div id="fruit">
<ul>
<li>Banane</li>
<li>Pomme</li>
<li>Fraise</li>
27
Formateur : A.AISSAOUI
ISTA TAZA
</ul>
</div>
<div id="legume">
<ul>
<li>Pomme de terre</li>
<li>Tomate</li>
<li>Ognion</li>
</ul>
</div>
28
Formateur : A.AISSAOUI