CSS
TP
DEVELOPPEMENT
Cours WEB
CLIENT
- CSS -
Projet
https://filalireda.wixsite.com/elearning-center
Pr Filali Reda
ESTC – DEP GI
CONCEPTS Partie 2
GENERAUX CSS
filalireda.wixsite.com/elearning-center
Avantages CSS
Séparer le contenu du contenant.
Modifier l'aspect d'une page ou d'un site sans en modifier le contenu.
Assurer la cohésion de la présentation tout au long du site (feuilles de style externes).
Réduire le temps de chargement des pages.
Contrôler les polices, la distance entre les lignes, les marges sans devoir utiliser de tableaux.
Moins de code Mieux structurer, Concevoir et Maintenir un site.
1
Partie 2
FONCTIONNEMENT CSS
filalireda.wixsite.com/elearning-center
Méthodes Il existe trois méthodes pour un insérer du code CSS.
Méthode 2
<!DOCTYPE html>
Méthode1 (A oublier) <html>
<!DOCTYPE html> <head>
<html> <meta charset="utf-8" />
<head> <style>
<meta charset="utf-8" /> p { color:blue;
<title>CSS–MET1</title> }
</head> </style>
<title>CSS-MET2</title>
<body> </head>
<h1>Les CSS</h1> <body>
<p style="color:blue;">Objectif</p> <h1>LES CSS</h1>
<p>Modifier l'aspect d'une page <em> <p>Objectif</p>
modifier</em> le contenu!</p> <p>Modifier l'aspect d'une page sans en <em>
</body> modifier</em>
</html> le contenu!</p>
</body>
</html>
2
Partie 2
FONCTIONNEMENT CSS
filalireda.wixsite.com/elearning-center
Méthode3 (A adopter)
Fichier html (ex: test.html) Fichier CSS :
(style.css)
<!DOCTYPE html>
<html> p
<head> {
<meta charset="utf-8" /> color:blue;
<link rel="stylesheet" href="style.css" /> }
<title>CSS-MET3</title>
</head>
<body>
<h1>Les CSS</h1>
<p>Objectif !</p>
<p>Modifier l'aspect d'une page
sans en <em> modifier</em> le
contenu!</p>
</body>
</html>
3
Partie 2
SYNTAXE CSS
filalireda.wixsite.com/elearning-center
Schématiquement une feuille de style à la
forme suivante :
balise1 balise: indique a quel élément du code on veut appliquer un style.
{
propriete1: valeur1; Ça peut-être un type de balise (exemple tous les paragraphes p ) ou
propriete2: valeur2; une balise en particulier (un titre h1).
propriete3: valeur3;
} Propriété: aspect de l’élément que l'on veut traiter.
balise2 exemple la taille du texte, la couleur de fond, l'espacement entre
{ les éléments, les bordures, les ombrages, etc.
propriete1: valeur1; o Pour chaque propriété, on précise une valeur. Ainsi pour
propriete2: valeur2;
propriete3: valeur3; modifier la couleur du texte, on attribuera à la propriété color
propriete4: valeur4; une valeur comme black, blue, green ou autre.
}
balise3
{
propriete1: valeur1;
}
4
Partie 2
class et id CSS
filalireda.wixsite.com/elearning-center
Regrouper les liens en diverses catégories.
Regroupement d'éléments (class)
Donner à chacune un style spécial.
<balise class="maClasse"> contenu </balise>
Une classe peut être appliquée à plusieurs balises.
Une balise peut recevoir plusieurs classes, séparées par un espace :
<balise class="maClasse1 maClasse2"> contenu </balise>
.maClasse
Les propriétés propriété1 et propriété2 sont
{propriété1:valeur1;
assignées à toutes les balises ayant la classe maClasse.
propriété2:valeur2;}
• Donner à un titre particulier, une autre couleur
Identification d'un élément (id)
que celle des autres titres du site Web
#nom_de_id • Il ne peut y avoir deux éléments avec le même id
{ dans le document.
propriété1:
<balise id="nom_de_id"> contenu</balise>
valeur1;
}
5
Partie 2
class et id CSS
filalireda.wixsite.com/elearning-center
Exemple :
Mettre un type de paragraphe en gras et en rouge désigné par le nom "Module
Math" et un autre type de paragraphe en italique nommé "Module
Informatique". Un troisième à paragraphe reste sans changement.
<html>
<head>
<title>Ex-Classe</title>
<meta charset="utf-8" />
<style>
.math {font-weight: bold; color: red}
.informatique {font-style:italic}
</style>
</head>
<body>
<p>Liste Module</p>
<p class="math">Module Math</p>
<p class="informatique">Module Informatique</p>
</body></html>
6
Partie 2
Balise span CSS
filalireda.wixsite.com/elearning-center
Assigner une propriété à une partie de texte non isolée par une balise.
Ex: Appliquer un style à une partie d'un paragraphe sans affecter le paragraphe
entier.
<html>
Exemple :
<head><title>Ex-Span</title>
Soit le texte suivant : <style>
« L’utilisation des CSS est venue pour
.par { font-weight:bold;
surmonter les problèmes observés sur le
HTM». color:red;}
On veut mettre en évidence le mot span.jaune {background-color: #FFFF00;}
problèmes en lui attribuant un arrière-plan </style>
de couleur. </head>
<body>
<p class="par">LES CSS</p>
<p>L'utilisation des CSS est venue pour
surmonter les
<span class="jaune">problèmes</span>
observés sur le HTML <br /> 7
</p></body></html>
Partie 2
Balise div CSS
filalireda.wixsite.com/elearning-center
Balise div
La balise div comme celle de span sert aussi à structurer un document et sera
souvent utilisée avec les attributs class et id.
L’élément <div> regroupe une ou plusieurs parties du texte.
Syntaxe : Il suffit d'entourer la zone sélectionnée par <div> ... </div>.
Associée à un style, la syntaxe complète est donc:
<div class="nom_de_classe"> contenu</div>
ou
<div id="nom_de_classe">contenu</div>
8
Partie 2
Mise en Forme : Texte CSS
filalireda.wixsite.com/elearning-center
Taille des polices
font-size : indique la taille des polices. Diverses unités sont disponibles pour
décrire la taille des polices. On distingue :
o Taille absolue : exprimée en pixels, en centimètres ou millimètres, cette
méthode est très précise.
o Taille relative : exprimée en "%", "em" ou "ex".
Exemple:
h1 {font-size: 30px;}
h3 {font-size: 120%;}
9
p {font-size: 2em;}
Exemple:
Choix des polices
h1 {font-family: arial, verdana, sans-serif;}
font-family: indique la liste prioritaire
des polices à utiliser pour l'affichage d'un
élément donné ou d'une page Web. h2 {font-family: "Times New Roman", serif;}
Si la première police de la liste n'est pas disponible sur l'ordinateur utilisé pour accéder au
site, la police suivante est essayée et ainsi de suite...
Partie 2
Mise en Forme : Texte CSS
filalireda.wixsite.com/elearning-center
Style des polices
font-style : définit le style de la police concernée soit : normal, italique.
Exemple: h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif; font-style:italic;}
Mettre en gras
font-weight : présente la police en normal ou en bold (caractères gras).
Exemple: p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}
Soulignement et Décoration du texte
Text-decoration : permet d'ajouter des décorations ou divers effets au texte.
Exemple: h1 {text-decoration: underline;}
h2 {text-decoration: overline;}
10
h3 {text-decoration: line-through;}
Partie 2
Mise en Forme : Texte CSS
filalireda.wixsite.com/elearning-center
Alignement du texte
text-align: applique un alignement au texte (left, right, center ou justify )
Exemple: th {text-align: left;}
td {text-align: center;}
Aligner une image et du texte par le biais de la propriété float
float: permet de prendre deux valeurs left et right
<head>
<style>
.im_flot
{float: left;}
</style>
</head>
<body>
<p><img src="taj3.jpg" class="im_flot" />
.........</p> 11
</body>
Partie 2
Couleurs et Arrière-plans CSS
filalireda.wixsite.com/elearning-center
Color : décrit la couleur d'avant-plan d'un élément.
Exemple: h1 {
color: #ff0000;
}
background-color : décrit la couleur d'arrière-plan des éléments comme une page
web, un titre ou un texte
Exemple: body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
13
Partie 2
Couleurs et Arrière-plans CSS
filalireda.wixsite.com/elearning-center
background-image : sert à insérer une image d'arrière-plan.
on applique la propriété background-image à l'élément <body> et on
indique le chemin de l'image.
Exemple:
body {background-color: #FFCC66;
background-image: url("image.jpg");}
On remarque la façon dont le chemin de l'image est indiqué avec url("image.jpg").
• Cela signifie que l'image se trouve dans le même dossier que la feuille de style.
• On peut aussi appeler des images dans d'autres dossiers avec
url("../images/image.jpg")
14
Partie 2
Couleurs et Arrière-plans CSS
filalireda.wixsite.com/elearning-center
background-repeat : Propriété qui décrit la façon de répéter une image ou non.
Le tableau suivant rassemble les différentes possibilités.
Par exemple, pour éviter la répétition d'une image d'arrière-plan, le code devrait
ressembler à ceci :
body {background-color: #FFCC66;
background-image: url("image.jpg");
background-repeat: no-repeat;}
15
Partie 2
Couleurs et Arrière-plans CSS
filalireda.wixsite.com/elearning-center
background-attachment : Bloquer l'image d'arrière-plan lorsque le lecteur fait
défiler la page avec du texte. Le tableau suivant rassemble les différentes
possibilités.
Par exemple, le code suivant bloque l'image d'arrière-plan.
body {background-color: #FFCC66;
background-image: url("image.jpg");
background-repeat: no-repeat;
background-attachment: fixed;}
16
Partie 2
Couleurs et Arrière-plans CSS
filalireda.wixsite.com/elearning-center
background-position : Positionner une image d'arrière-plan
Elle permet de changer la position de l'image par défaut (coin supérieur gauche de
l'écran) et de la placer n'importe où à l'écran.
Les coordonnées de positionnement peuvent s'exprimer en pourcentages de la largeur
de l'écran, ou en unités fixes (pixels, centimètres, etc.)
on peut aussi utiliser les mots-clés "top", "bottom", "center", "left" ou "right".
Le tableau suivant fournit quelques exemples.
body {background-color: #FFCC66;
background-image: url("image.gif");
background-repeat: no-repeat;
17
background-attachment: fixed;
background-position: right bottom;}
Partie 2
Bordures et Ombres CSS
filalireda.wixsite.com/elearning-center
Diverses notions interviennent :
border-width : définit l'épaisseur des bordures. Les valeurs peuvent être "thin",
"medium" et "thick", ou une valeur numérique en pixels.
border-color : définit la couleur d'une bordure. Des valeurs de couleur normales
sont, par exemple, "#123456", "yellow".
Border-radius : sert à arrondir les angles de n'importe quel élément en
indiquant en pixel la taille de l’arrondi.
border-style : définit le style de la bordure. Il y a plusieurs types :
h1
{ border-width : 3px;
border-color : blue;
border-style: dashed;
border-radius:10px;
}
18
Partie 2
Bordures et Ombres CSS
filalireda.wixsite.com/elearning-center
Ombres des boites : box-shadow
La propriété box-shadow prend quatre valeurs dans l'ordre suivant :
1. le décalage horizontal de l'ombre
2. le décalage vertical de l'ombre
3. l'adoucissement du dégradé
4. la couleur de l'ombre.
Par exemple, pour une ombre noire de 6 pixels et 12px en dégradé, on écrira :
Le résultat est donné par la figure suivante. p
{ box-shadow: 6px 6px
12px black;
}
19
Partie 2
Bordures et Ombres CSS
filalireda.wixsite.com/elearning-center
Les ombres des textes : text-shadow
Cette propriété fonctionne de la même manière que celle décrite précédemment (box-
shadow). Elle ajoute de l’ombre sur le texte. :
Le résultat est donné par la figure suivante. p
{ text-shadow: 6px 6px
12px black;
}
20
Partie 2
Pseudo Formats CSS
filalireda.wixsite.com/elearning-center
• Pseudo Formats : consiste à changer de façon dynamique l'apparence des
éléments et ceci après le chargement de la page. Il y a plusieurs cas de figure.
o au survol
o lors du clic (cas des liens)
o lors d’un focus (élément sélectionné)
o lors de la sélection d’un lien
Cas des liens. On peut leur assigner divers styles selon qu’ils soient visités ou non,
sélectionnés ou survolés.
a: {color: blue;}
a:visited {color: red;}
a: active {background-color: #FFFF00;}
a: hover {color: orange;
font-style: italic;}
21
Partie 2
Positionnement CSS
filalireda.wixsite.com/elearning-center
• position : propriété CSS permettant de changer le comportement d'affichage des blocs.
Divers cas de figure se présentent :
o position : static
Valeur par défaut. Elle correspond à un affichage normal. Un élément avec position:
static. est dit non positionné.
o position: relative
Le positionnement relatif permet de décaler l'élément par rapport à sa position
normale.
o position: fixed
Un élément positionné en fixed est positionné par rapport à la fenêtre du navigateur.
IL reste toujours à la même place même si la page défile.
o position: absolute
Le positionnement absolu permet de placer un élément n'importe où sur la page (en
haut à gauche, en bas à droite, tout au centre, etc.).
22
Partie 2
Positionnement CSS
filalireda.wixsite.com/elearning-center
Exemples
<head> <head>
<style> <style>
. relative { . fixed {
position: relative; position: fixed;
top: -20px; bottom: 0;
left: 20px; right: 0;
background-color: white; width: 200px;
width: 500px; background-color: white;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="relative"> <div class="fixed">
un élément en position relative, est décalé les éléments en position fixe ne bougent
de sa position normale. plus lorsque le document est scrollé.
23
</div> </div>
</body> </body>
