CSS
CSS 3
Plan du chapitre
1 Introduction
2 Les propriétés CSS
1 Style du texte
2 Style du fond
3 Style des listes
4 Bordures
5 Pseudo-classes CSS
6 Autres
3 CSS Avancé
Développement d’applications Web L2 – Info
CSS 3
Introduction
• HTML permet déjà d’apporter du style (b, i, u,…) ➔ Mauvaise conception ?
• Le CSS (Cascading Style Sheets) prend soin du style.
• But principal: Séparation entre le contenu (HTML), la forme (CSS), et le
comportement (JavaScript).
• Avantages de cette séparation:
❑ Facilite la création et la maintenance du code.
❑ Plusieurs styles peuvent être appliqués pour la même page.
❑ Réutilisabilité de styles.
❑ Travail collaboratif (designers, programmeurs,…).
Développement d’applications Web L2 – Info
CSS 3
Introduction
Où créer un style CSS ? (1/3)
1) Dans l’attribut style – Style Intégré
Exemple:
<body>
<p style="color:red">Paragraphe en rouge</p>
<p style="color:blue ; font-size:20px">Paragraphe en bleu avec une
taille de 20 pixel
</p>
</body>
Développement d’applications Web L2 – Info
CSS 3
Introduction
Où créer un style CSS ? (2/3)
2) Dans un fichier externe – Style Externe
Exemple:
<!DOCTYPE html>
<html>
<head>
<title>Titre de la page</title>
<link rel= "stylesheet" href= "[Link]">
</head>
<body>
.....
</body>
</html>
Développement d’applications Web L2 – Info
CSS 3
Introduction
Où créer un style CSS ? (2/3)
2) Dans un fichier externe – Style Externe
Exemple:
<!DOCTYPE html>
<html>
<head>
<title>Titre de la page</title>
<link rel= "stylesheet" href= "[Link]" media="screen">
</head>
<body>
..... Précise que le style va être
</body> appliqué uniquement sur PCs
</html>
Développement d’applications Web L2 – Info
CSS 3
Introduction
Où créer un style CSS ? (2/3)
2) Dans un fichier externe :
• Attribut rel: précise la relation entre la page courante et le fichier
que l’on veut importer.
• Attribut media: précise le type d’appareils sur lequel le style va être
appliqué.
➢ media="all": tous types d’appareils.
➢ media="screen": touts types d’écrans (PC, Smartphones, Tablettes).
➢ media="print": tous types d’imprimantes.
• Remarque: Une page HTML peut avoir zéro ou plusieurs styles
CSS.
Développement d’applications Web L2 – Info
CSS 3
Introduction
Où créer un style CSS ? (3/3)
3) Dans l’élément HTML <style> - Style Interne
Exemple:
<style>
/* Ceci est un commentaire CSS */ Commentaire CSS
p {.............} Style des paragraphes
div {.............} Style des divisions
</style>
Développement d’applications Web L2 – Info
CSS 3
Introduction
Syntaxe d’écriture d’un style CSS:
<style>
sélecteur {
proprété_1 : valeur_1 ;
proprété_2 : valeur_2 ;
proprété_3 : valeur_3 ;
...
}
</style>
Exemple:
<style>
div {
color : red ; Les divisions ont une couleur de texte
background-color : gray ; Rouge et une couleur de fond Grise
}
</style>
Développement d’applications Web L2 – Info
CSS 3
Introduction
Sélecteur spécifique:
p{
Les paragraphes ont une couleur de
color : yellow ; texte Jaune et une couleur de fond Blue
background-color: blue ;
}
h1, h2 { Les titres h1 et h2 ont une couleur de texte
color : white ; Blanche et une couleur de fond Blue
background-color: blue ;
}
Développement d’applications Web L2 – Info [Link]
CSS 3
Introduction
Sélecteur spécifique:
p{
Les paragraphes ont une couleur de
color : yellow ; texte Jaune et une couleur de fond Blue
background-color: blue ;
}
h1, h2 { Les titres h1 et h2 ont une couleur de texte
color : white ; Blanche et une couleur de fond Blue
background-color: blue ;
}
Conflit entre sélecteurs spécifiques:
p { color : red ; background-color: blue ; } Les paragraphes ont une couleur
de texte Jaune et une couleur de
p { color : yellow ;}
fond Blue
Développement d’applications Web L2 – Info [Link]
CSS 3
Introduction
Sélecteur universel:
*{
color : yellow ; Tous les éléments ont une couleur de
background-color: blue ; texte Jaune et une couleur de fond Blue
}
p{
Les paragraphes ont une couleur de
color : red ; texte Rouge et une couleur de fond Blue
}
Conflits entre sélecteur universel et sélecteur spécifique:
• UNION des propriétés non communes.
• REDEFINITION des propriétés communes par le sélecteur spécifique.
Développement d’applications Web L2 – Info [Link]
CSS 3
Introduction
Sélecteur à base d’identifiant:
<style>
#id_1 {
color : yellow ;
background-color: blue ;
}
</style>
<body>
<p id="id_1">Paragraphe 1</p>
<p id="id_2">Paragraphe 2</p>
</body>
Développement d’applications Web L2 – Info [Link]
CSS 3
Introduction
Sélecteur à base d’attributs:
*[required] {
... Tous les éléments qui ont un attribut
trequired
}
*[disabled] { Tous les éléments qui ont un attribut
... disabled
}
p[editable] { Tous les paragraphes qui ont un contenu
... éditable
}
input[required][pattern] { Tous les champs de saisie obligatoire avec
une restriction sur le contenu
...
}
Développement d’applications Web L2 – Info [Link]
CSS 3
Introduction
Priorités entre les différents types de style:
Priorité 1 :
Un style intégré est plus prioritaire qu’un style interne ou externe.
Priorité 2 :
Les styles internes et externes ont la même priorité, donc l’ordre est
pris en compte (celui défini le dernier est plus prioritaire).
Développement d’applications Web L2 – Info [Link]
CSS 3
Introduction
Priorités entre les sélecteurs:
Priorité 1 :
Styles définis avec sélecteurs à base d’identifiants
Priorité 2 :
Styles définis avec sélecteurs à base d’attributs
Priorité 3 :
Styles définis avec sélecteurs spécifiques
Priorité 4 :
Styles définis avec sélecteurs universels
Développement d’applications Web L2 – Info [Link]
CSS 3
Plan du chapitre
1 Introduction
2 Les propriétés CSS
1 Style du texte
2 Style du fond
3 Style des listes
4 Bordures
5 Pseudo-classes CSS
6 Autres
3 CSS Avancé
Développement d’applications Web L2 – Info [Link]
CSS 3
Style du texte
La police: ( la propriété font-family )
Il existe cinq familles de police:
1. sans-serif: Verdana, Arial, Trebuchet, Helvetica, Tahoma, Geneva.
2. serif: Times new roman, Times, Georgia, Palatino Linotype, Palatino.
3. monospace: Courier New, Courier, Lucida Console, Monaco.
4. cursive: Comic Sans, Comic Sans MS, Coronetscript, Florence.
5. fantasy: Impact, Arnoldboecklin, Oldtown, Blippo, Brushstroke.
Développement d’applications Web L2 – Info [Link]
CSS 3
Style du texte
La police: ( la propriété font-family )
Exemple:
p{
font-family : "Comic Sans", "Comic Sans MS", cursive ;
}
h1 {
font-family : "Times New Roman", Times, serif ;
}
h2 {
font-family : "Courier New", "Lucida Console", monaco,
monospace ;
}
Développement d’applications Web L2 – Info [Link]
CSS 3
Style du texte
La police: Pour aller plus loin (Google Fonts)
Développement d’applications Web L2 – Info [Link]
CSS 3
Style du texte
La police: Pour aller plus loin (Google Fonts)
Remarque:
Autres polices peuvent être trouvées sur le lien:
[Link]
• Il suffit de choisir la police qui vous plait (Cliquez sur le bouton +).
• Cliquez par la suite sur Family Selected.
• Un lien vers un style CSS externe vous sera crée, ce lien doit être ajouté à
votre page pour que le navigateur reconnaisse la police choisie.
• Le nom de la police vous sera donné. Il suffit de l’utiliser comme valeur
de la propriété font-family.
Développement d’applications Web L2 – Info [Link]
CSS 3
Style du texte
La taille des caractères: ( la propriété font-size )
Exemple:
body {
font-size : 15px ;
}
div {
font-size : 14.5px ;
}
Développement d’applications Web L2 – Info [Link]
CSS 3
Style du texte
Le style des caractères: (propriétés font-style et font-weight et font-variant )
• font-style: normal , italic (italique).
• font-weight: normal , bold (gras).
• font-variant: normal , small-caps (petites majuscules).
Exemple:
<p style=" font-style : italic ; font-weight : bold ; font-variant : small-caps">
Ceci est un paragraphe écrit italique, en gras et en petites majuscules !!!
</p>
Développement d’applications Web L2 – Info [Link]
CSS 3
Style du texte
La couleur du texte: (propriété color )
• Couleurs simples: red, white, blue,….
• Couleurs personnalisées: # + code hexadécimal de la couleur (voir la
palette des couleurs).
Développement d’applications Web L2 – Info [Link]
CSS 3
Les couleurs HTML
Développement d’applications Web L2 – Info
CSS 3
Style du texte
Alignement du texte: (propriété text-align )
Valeurs possibles: left , right, center , justify (alignement justifié)
Décoration du texte: (propriété text-decoration )
Valeurs possibles: none (aucun soulignement),
underline (ligne au-dessous) ,
line-through (ligne au milieu)
overline (ligne au-dessus).
Développement d’applications Web L2 – Info [Link]
CSS 3
Style du texte
Alignement du texte: (propriété text-align )
Valeurs possibles: left , right, center , justify (alignement justifié)
Décoration du texte: Les valeurs de la propriété text-decoration peuvent
être combinées:
Exemple:
<p style=" text-decoration : overline underline ">
Texte
</p>
Développement d’applications Web L2 – Info [Link]
CSS 3
Style du texte
Transformation du texte: (propriété text-transform )
Valeurs possibles:
none ,
capitalize (première lettre de chaque mot écrite en majuscule),
uppercase (texte en majuscules),
lowercase (texte en minuscules)
Indentation: (propriété text-indent )
• Ajoute un espace au début de chaque bloque de texte.
• Unités possibles: px , cm , mm .
Exemple:
<p style=" text-indent : 50px ">
Ceci est un paragraphe qui montre l’effet de l’indentation .
</p>
<p>Ceci est un paragraphe simple.</p>
Développement d’applications Web L2 – Info
CSS 3
Style du texte
Transformation du texte: (propriété text-transform )
Valeurs possibles:
none ,
capitalize (première lettre de chaque mot écrite en majuscule),
uppercase (texte en majuscules),
lowercase (texte en minuscules)
Indentation: (propriété text-indent )
• Ajoute un espace au début de chaque bloque de texte.
• Unités possibles: px , cm , mm .
Exemple:
Développement d’applications Web L2 – Info [Link]
CSS 3
Plan du chapitre
1 Introduction
2 Les propriétés CSS
1 Style du texte
2 Style du fond
3 Style des listes
4 Bordures
5 Pseudo-classes CSS
6 Autres
3 CSS Avancé
Développement d’applications Web L2 – Info [Link]
CSS 3
Style du fond
Exemple:
<style>
body {
background-color : gray ;
background-image : url("[Link]") ;
background-repeat : no-repeat ; /* Ou repeat-x, repeat-y */
background-position : center center ; /* Autres valeurs dans le slide suivant */
background-size : 100% 100% ; /* L’image couvre tout le fond de l’élément */
/* 100% de la largeur de l’élément et 100% de son hauteur */
}
</style>
Développement d’applications Web L2 – Info [Link]
CSS 3
Style du fond
Valeurs possibles de backgroud-position :
Développement d’applications Web L2 – Info [Link]
CSS 3
Plan du chapitre
1 Introduction
2 Les propriétés CSS
1 Style du texte
2 Style du fond
3 Style des listes
4 Bordures
5 Pseudo-classes CSS
6 Autres
3 CSS Avancé
Développement d’applications Web L2 – Info [Link]
CSS 3
Style des listes
Type des puces: (propriété list-style-type )
Valeurs possibles: circle ( ) , square ( ) , disc ( ).
Exemple:
<body>
<ul style="list-style-type : square">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ul style="list-style-type : circle">
<li>Item 3</li>
<li>Item 4</li>
</ul>
<ul style="list-style-type : disc">
<li>Item 5</li>
<li>Item 6</li>
</ul>
</body>
Développement d’applications Web L2 – Info [Link]
CSS 3
Style des listes
Puces avec image: (propriété list-style-image )
Exemple:
<body>
<p>Au menu aujourd'hui:</p>
<ul>
<li style="list-style-image : url('[Link]')">Des frites</li>
<li style="list-style-image : url('[Link]')">Une boisson</li>
<li style="list-style-image : url('café.PNG')">Un café</li>
</ul>
</body>
Développement d’applications Web L2 – Info [Link]
CSS 3
Style des listes
Type de la numérotation: (propriété list-style-type )
Valeurs possibles:
• decimal (1, 2,…)
• lower-roman (i, ii,…)
• upper-roman (I, II,…)
• lower-alpha (a, b,…)
• upper-alpha (A, B,…)
Exemple:
<body>
<ol style="list-style-type : upper-roman">
<li>Chapitre 1</li>
<li>Chapitre 2</li>
</ol>
</body>
Développement d’applications Web L2 – Info
CSS 3
Plan du chapitre
1 Introduction
2 Les propriétés CSS
1 Style du texte
2 Style du fond
3 Style des listes
4 Bordures
5 Pseudo-classes CSS
6 Autres
3 CSS Avancé
Développement d’applications Web L2 – Info [Link]
CSS 3
Style des bordures
Couleur des bordures: (propriété border-color )
Taille des bordures: (propriété border-width )
Type des bordures: (propriété border-style )
Exemple:
<body>
<p style="border-width : 1.5px ; border-style : solid">Paragraphe 1:</p>
<p style="border-width : 1.5px ; border-style : double">Paragraphe 2:</p>
<p style="border-width : 1.5px ; border-style : dotted">Paragraphe 3:</p>
<p style="border-width : 1.5px ; border-style : dashed">Paragraphe 4:</p>
<p style="border-width : 1.5px ; border-style : inset">Paragraphe 5:</p>
<p style="border-width : 1.5px ; border-style : outset">Paragraphe 6:</p>
<p style="border-width : 1.5px ; border-style : groove">Paragraphe 7:</p>
<p style="border-width : 1.5px ; border-style : ridge">Paragraphe 8:</p>
</body>
Développement d’applications Web L2 – Info [Link]
CSS 3
Style des bordures
Exemple:
Développement d’applications Web L2 – Info [Link]
CSS 3
Style des bordures
Bordure arrondies:
Propriétés border-radius , border-top-left-radius , border-top-right-radius ,
border-bottom-left-radius , border-bottom-right-radius .
Exemple:
<body>
<p style="border-style:solid ; border-radius:10px">Paragraphe 1</p>
<p style="border-style:solid ; border-top-left-radius:10px">Paragraphe 2</p>
<p style="border-style:solid ; border-top-right-radius:10px">Paragraphe 3</p>
<p style="border-style:solid ; border-bottom-left-radius:10px">Paragraphe 4</p>
<p style="border-style:solid ; border-bottom-right-radius:10px">Paragraphe 5</p>
</body>
Développement d’applications Web L2 – Info [Link]
CSS 3
Style des bordures
Bordure arrondies:
Propriétés border-radius , border-top-left-radius , border-top-right-radius ,
border-bottom-left-radius , border-bottom-right-radius .
Exemple:
Développement d’applications Web L2 – Info [Link]
CSS 3
Plan du chapitre
1 Introduction
2 Les propriétés CSS
1 Style du texte
2 Style du fond
3 Style des listes
4 Bordures
5 Pseudo-classes CSS
6 Autres
3 CSS Avancé
Développement d’applications Web L2 – Info [Link]
CSS 3
Pseudo-classes CSS
• Permettent d’appliquer des propriétés différentes pour chaque état d’un
élément HTML.
• Les pseudo-classes CSS commencent par : .
• Quelques pseudo-classes CSS:
a:visited définit des propriétés pour un lien qui a été déjà visité.
: focus définit des propriétés pour un élément en cours de modification.
: valid définit des propriétés pour un input ayant un contenu valide.
: invalid définit des propriétés pour un input ayant un contenu non valide.
: required définit des propriétés pour un élément obligatoire.
: hover définit des propriétés appliquées quand la sourie est sur l’élément.
: checked définit des propriétés appliquées quand l’élément est sélectionné
(à appliquer pour les éléments option).
Développement d’applications Web L2 – Info [Link]
CSS 3
Pseudo-classes CSS
Exemples de styles avec pseudo-classes :
<style>
/* Style à appliquer pour une zone input en cours de modification */
input : focus {
border-color : blue;
}
/* Style à appliquer pour une zone password ayant un contenu valide par rapport à
un certain pattern */
input[type="password"] : valid {
color : green ;
}
/* Style à appliquer pour une zone password ayant un contenu non valide */
input[type="password"] : invalid {
color : red ;
}
</style>
Développement d’applications Web L2 – Info [Link]
CSS 3
Plan du chapitre
1 Introduction
2 Les propriétés CSS
1 Style du texte
2 Style du fond
3 Style des listes
4 Bordures
5 Pseudo-classes CSS
6 Autres
3 CSS Avancé
Développement d’applications Web L2 – Info [Link]
CSS 3
Autres
line-height : 5px Définit la hauteur de la ligne du texte à 5px (valeur à
changer selon le besoin).
overflow-x : scroll Applique un scrolling horizontal quand le contenu
dépasse la largeur (width) de l’élément.
overflow-y : scroll Applique un scrolling vertical quand le contenu dépasse
la hauteur (height) de l’élément.
cursor:pointer ➔ Donner au curseur la forme de pointeur.
Valeurs possibles:
pointer , progress , help , move , wait , grab , not-allowed,…
Développement d’applications Web L2 – Info [Link]