Scribd
Carica
5 visualizzazioni

Dev Web Client-CSS

Cours de CSS

Caricato da

miftahsalma134
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
5 visualizzazioni

Dev Web Client-CSS

Cours de CSS

Caricato da

miftahsalma134
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 23

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>

Potrebbero piacerti anche