Programmation web
Les feuilles de style CSS
Une nouvelle tendance: séparation entre contenu
et mise en forme
Avec HTML 5, il est nécessaire de dissocier le contenu d'un
document de sa forme:
• le langage HTML sera destiné à décrire le contenu,
• les feuilles de style serviront à décrire la forme du
document.
2
Pourquoi cette dissociation?
• Plusieurs mises en forme différentes peuvent être appliquées à un
même document
• Le code HTML est lisible et facilement modifiable,
• Les pages sont plus légères, donc plus rapides à circuler sur un
réseau (la feuille de style ne sera chargée qu'une seule fois)
3
Qu’est-ce qu’une feuille de style?
• Les feuilles de style CSS (pour Cascading Style Sheets),
décrivent l'apparence des divers éléments d'une page
web par le biais de couples propriété / valeur.
• Elles sont écrites dans un langage spécifique (CSS)
• Spécification du W3C
4
Comment appliquer un style?
a) L'utilisation de l'attribut style dans une balise
Exemple: <h2 style="color: blue">
Inconvénient : mêler des informations sur la présentation d'un
document (le style), et la structure de ce dernier.
• Utile uniquement pour une définition de style ponctuelle ( pour un
seul élément).
5
Feuille de style interne
<html>
<head>
<title>mon document</title>
<style> (……ma feuille de style interne…..) </style>
</head>
<body> (...) </body>
</html>
• Valable pour un seul document. 6
Feuille de style externe
• styles dans un fichier externe (.css), relié au document HTML via
la balise <link>, placée dans l'entête du document HTML.
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body> (...) </body>
</html>
7
Structure générale
• Une feuille de style = suite de règles.
• Une règle = sélecteur + déclaration
• Un sélecteur indique l'élément concerné par le style;
• Une déclaration est une suite de paires "propriété : valeur" séparées
par « ; » le tout placé entre { }.
Exemple:
H2 { text-align: center; color : black; } 8
Les sélecteurs
• Une des grandes richesses de CSS est la multiplicité des possibilités de
sélection des éléments auxquels on veut attribuer un style donné.
• Cette très grande diversité permet d’appliquer un style aussi facilement
à tous les éléments, qu’à un unique élément isolé dans la page web, sans
avoir à écrire la définition localement.
• De plus, la combinaison de plusieurs sélecteurs dans la même
déclaration permet de répondre à tous les besoins, même les plus
complexes.
Sélectionner un seul élément
• le sélecteur est constitué du nom de l’élément sans les caractères de
début < et de fin de balise >.
Exemple : p {color : yellow;}
• Nous pouvons appliquer le même style à plusieurs éléments différents
en les énumérant et en les séparant par une virgule dans le sélecteur.
Exemple:
h1,div,p {color : black ; background-color : red;}
10
Le sélecteur universel
• Pour appliquer un style à tous les éléments, nous utiliserons le
sélecteur universel *
Exemple: *{background-color : yellow;}
• On peut modifier cette propriété pour un élément particulier, en la
redéfinissant uniquement pour celui-ci, par exemple :
*{background-color : yellow;}
p{background-color : gray;}
Définir une Classe
• L’attribut class permet d’appliquer un style à une classe définie
d’éléments.
• Pour créer une classe, il faut ajouter l'attribut "class" aux éléments
de cette classe dans le code HTML.
• En CSS, le sélecteur de classe s'écrit ".classe"
• Exemple: .rouge {color : red;} pour class="rouge"
Utilisation des classes
• Nous pouvons définir une classe en la déclarant applicable
seulement à un élément en faisant précéder son nom de
celui de l’élément.
Exemple:
div.jaune {color : yellow;}
Une autre utilisation des classes
• Il est possible de définir d’abord une classe abstraite, puis de la
particulariser en ajoutant une autre propriété pour un élément qui
utilisera la même classe.
exemple:
.rouge {color : red;}
div.rouge {background–color : blue;}
Appliquer plusieurs classes au même
élément
• Nous pouvons appliquer plusieurs classes indépendantes à un
même élément. Celui-ci a alors la combinaison des propriétés de
chacune des classes.
• il faut donner à l'attribut "class" la liste des noms des classes en les
séparant par un espace :
<div class="classe1 classe2"> Ceci est un texte avec
la classe 1 et 2 </div>
Sélecteurs d‘identifiant (ID)
• Chaque élément peut avoir un attribut "id" qui doit être
unique dans une page donnée.
• Le sélecteur d'identifiant s'écrit "#id"
• Exemple :
#bleu{color: white; background-color: blue;}
16
Sélection par pseudo-classes
• En CSS, il existe des pseudo-classes qui, accolées à une
balise, apportent des précisions aux sélecteurs.
• Par exemple, la pseudo classe :hover indique que la règle
de style n’est à appliquer qu’au passage de la souris.
• Cette méthode permet d’écrire des propriétés à utiliser
uniquement dans certains cas de figure.
18
Les pseudo-classes applicables aux
liens
• :link qui permet d’attribuer un style à un lien non visité
• :visited pour attribuer un style à un lien déjà visité
• Il faut faire précéder le nom de la pseudo-classe de celui de
l’élément <a>:
Exemples:
a:link {color: blue;} a:visited {color: red;}
19
Les pseudo-classes dynamiques
:focus pour attribuer un style à l’élément qui a le focus.
:hover pour attribuer un style à un élément visible dont la zone
est survolée par le pointeur de la souris.
:active pour attribuer un style à un élément dit actif, c’est-à-
dire quand l’utilisateur clique sur son contenu.
Sélecteur d’attribut
• On peut définir un sélecteur d’attribut sans en préciser la
valeur.
Exemple: *[title] {background–color: yellow;}
• Il est possible de sélectionner plusieurs attributs pour un
élément en faisant suivre son nom de plusieurs attributs
entre crochets.
Exemple: h2[title][id]{background-color: yellow;}
Sélecteur de valeur d’attribut
• C’est une méthode qui sélectionne les balises ayant un
attribut avec une valeur donnée.
Exemple: input[type="button"]
• Il est possible de sélectionner plusieurs attributs et leurs
valeurs en utilisant la syntaxe :
élément[attribut1="valeur1"][attribut2="valeur2"]
22
Propriétés CSS
Propriétés
• Les propriétés sont des paires de clés et valeurs. La clé est le
nom de la propriété, suivie des deux-points, terminée par la
valeur qui peut revêtir différentes formes.
La déclaration !important
• Deux déclarations peuvent entrer en conflit au moment de la
création de la présentation par le navigateur.
• Pour donner une importance à un style, il faut insérer la déclaration
d’importance à l’aide du mot-clé !important
• Exemple:
*{color: black !important; background-color: yellow;}
Quelques propriétés CSS (les
plus utilisés)
Propriétés de mise en forme du texte
• Fontfamily: Nom de police (police1, police2, police3,..)
• font-size : Taille du texte (16px, 120%...)
• Fontweight: Gras (bold, normal)
• font-style : Italique (italic, oblique, normal)
• Text-decoration :Soulignement, ligne au-dessus, barré ou clignotant (underline,
overline, line-through, blink, none)
• text-align : Alignement horizontal (left, center, right, justify)
• Vertical-align: Alignement vertical (baseline, middle, sub, super, top,bottom)
Les unités de taille de polices
• Les unités de taille fixe ou absolues
• le point (pt) = 0,35 mm; le centimètre (cm); le millimètre (mm); le pouce
(in) = 2,54 cm
• Les unités de taille relatives
• le pourcentage (%) se définit par rapport à la police de référence;
• le pixel (px);
• Vw (1% de la largeur de la vue d’affichage)
• em (taille du caractère "M")
• Mots-clés de tailles: small, x-small, xx-small, medium, large, x-large et xx-large
Propriétés de couleur et de fond
• Color: Couleur du texte (nom, rgb(rouge,vert,bleu), #CodeCouleur...)
• Background-color: Couleur de fond (valeurs Identiques à color)
• Background-image: Image de fond (url('image.png'))
• Background-repeat: Répétition du fond (repeat-x, repeat-y, no-repeat, repeat)
• background-position: Position du fond ((x y), top, center, bottom, left, right)
• background-attachment: Attacher image de fond à la fenêtre (scroll ,fixed)
Syntaxe des couleurs en CSS
Chaque couleur est codée sur un octet (0…255). Chaque couleur est ainsi
transcrite sur trois octets. Ce système offre donc une palette de 17 millions de
possibilités.
• La notation RGB
rgb(0,0,255) ou en pourcentages rgb(0,0,100%)
• la notation Hexadécimale
#0000ff
• Les mots-clés de couleurs
blue, black, yellow ....
Tableau récapitulatif des 16 couleurs les plus fréquentes
Représentation de la couleur:
L'espace de couleur RGB - Synthèse
additive
• La synthèse additive est utilisée par nos écrans et est constituée des
trois lumières de base représentant les couleurs primaires qui sont
le rouge, le vert et le bleu.
Le modèle de boîte CSS
Hauteur et largeur
• Width: Largeur (150px, 80%... )
• Height: Hauteur (150px, 80%... )
• height et width=la largeur et la hauteur de la zone de
contenu.
• Pour calculer la taille complète d'un élément, vous devez
également ajouter les paddings, les bordures et les
margins.
Marges
• Margin-top: Marge en haut, Margin-left: Marge à
gauche, margin-right Marge à droite, margin-
bottom: Marge en bas
• Notation abrégée: « margin » permet de regrouper
les quatre marges précédentes(lire dans cet ordre:
top right bottom left)
Valeurs possibles
• Toutes les propriétés de la marge peuvent avoir les
valeurs suivantes:
• auto , longueur (en px, pt, cm, etc.),
• % de la largeur de l'élément conteneur,
Paddings
• Padding-left: Marge intérieure à gauche, padding-right:
Marge intérieure à droite, padding-bottom: Marge
intérieure en bas, padding-top: Marge intérieure en haut
Notation abrégée: Padding permet de regrouper les quatre
paddings précédents(lire dans cet ordre: top right bottom
left)
Valeurs possibles
• Toutes les propriétés de remplissage peuvent avoir
les valeurs suivantes:
• Longueur (en px, pt, cm, etc.),
• % de la largeur de l'élément conteneur,
Bordures
• Bordercolor: Couleur de bordure
• Borderstyle: Type de bordure (solid, dotted, dashed,
double, groove, ridge, inset, outset)
• border-width: Epaisseur des bordures ( Unités de
valeurs ou Thin, Medium, thick)
Notation abrégée
• Border: Notation raccourcie Border (épaisseur,
style , couleur, dans cet ordre)
Ex) border : 1px solid gray;
Styles des bordures
Angles arrondis
• border-radius permet d'arrondir un ou plusieurs angles d'un
élément en indiquant la valeur de l'arrondi souhaité.
Ex) #cadre { border-radius: 10px; }
• Il est possible de définir l'arrondi de chacun des angles, à l'aide
d'une écriture raccourcie (top, right, bottom, left).
Ex) #cadre { border-radius: 5px 10px 0 5px;}
Box sizing
• Cette propriété permet d’inclure le padding et la bordure
dans la largeur et la hauteur totales de l'élément.
• Valeurs:
• content-box: inclut uniquement le contenu (sans
bordure ni padding), val. Par défaut;
• border-box: inclut le contenu, le padding et la bordure
Boreder-box
Content-box
Positionnement
• Un élément HTML visible a un
positionnement défini par défaut (BLOC ou
LIGNE), et qui peut être modifié en CSS.
Positionnement en BLOC
Un élément de niveau bloc:
• Commence toujours sur une nouvelle ligne
• Occupe toute la largeur disponible (on doit définir
sa largeur).
• Peut être redimensionné (height, width)
• ex) div, section
Positionnement en ligne
Un élément en ligne:
• Ne commence pas sur une nouvelle ligne (se met après
le précédent)
• Ne prend que la largeur nécessaire (ne peut pas être
redimensionné avec height et width).
• ex) SPAN
Éléments en bloc Éléments en ligne
<address><article><aside> <a><abbr><acronym><br>
<blockquote> <button><cite><code><em>
<canvas><dd><div><dl> <img><input><label><map>
<dt> <object><script><select>
<fieldset><footer><form> <span><strong><sub><sup>
<h1>…<h6><header><hr> <textarea>
<li><main><nav>
<noscript><ol><output><p>
<pre>
<section><table><tfoot>
<ul><video>
Float
• La propriété float spécifie comment un
élément doit ‘flotter’ par rapport à son
conteneur (left, right, none).
• Les éléments après un élément flottant vont se
positionner autour de lui.
Exemples
Blocs
Div
flottants
img {float: right;}
Image
flottante
à droite
du texte
Clear
• La propriété « clear » spécifie ce qui doit arriver à
l’élément situé après l’élément flottant.
• « clear » spécifie sur quels côtés d'un élément les
éléments flottants ne sont pas autorisés à flotter
( none|left|right|both)
Exemple
• Header : positionnement par défaut (block)
• nav{ float: left; width: 25%;} Header
• section { float: left; width: 75%; } Nav Section
• footer { clear: both; width:100%;}
Footer
Display
La propriété « display » est utilisée pour spécifier comment
un élément doit s’afficher sur la page.
Pour masquer un élément et le retirer du flux courant (ne
s’affiche pas et ne laisse pas de vide) on utilise la valeur
display=none
Disposition des éléments
Display permet de modifier le comportement d'affichage par
défaut d'un élément.
• block : l'élément est affiché et se comporte comme un élément
de type "block"
• inline : l'élément est affiché et se comporte comme un élément
de type "inline"
Disposition-suite
• Inline-block: combinaison des deux, il s’affiche comme un
élément inline, sauf qu’il peut avoir une hauteur et une
largeur.
• Table: L’élément se comporte comme un tableau <table>
Les flexbox
• Les flexbox (ou boites flexibles) sont des conteneurs
regroupant plusieurs objets, et permettant de contrôler leur
positionnement à l’intérieur de la flexbox.
• L’élément conteneur doit avoir la propriété display=flex
Exemple
HTML
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Css: les éléments sont
.flex-container {display: flex;} alignés horizontalement
Quelques propriétés d’une flexbox
propriété rôle valeurs
display Type d’affichage Flex (pour une boite flexible)
flex-direction Orientation des blocs Column(alignement vertical),
row(alignement horizontal),column-
reverse, row-reverse
Flex-wrap Retour à la ligne si pas Wrap(revenir à la ligne)
d’espace No-wrap(pas de retour à la ligne,ajuste
la taille des blocs)
justify-content Alignement horizontal Flex-start, flex-end, center,space-
between, space-around
align-item Alignement vertical Stretch,flex-start,flex-end,center
Exemple: propriété flex direction
.flex-container {display: flex; flex-direction: column;}
.flex-container {display: flex; flex-direction: row;}
Exemple: Propriété flex-wrap
flex-wrap: wrap;
flex-wrap: no-wrap;
CSS GRID
• Le mode Grid offre un système de mise en page basé sur une grille,
avec des lignes et des colonnes, facilitant la conception de pages
Web.
• Une disposition en grille se compose d'un élément parent avec la
propriété display=grid, avec un ou plusieurs éléments enfants.
The grid-row
Grid-column, grid-row
• La propriété grid-column permet de spécifier le
positionnement de l’élément de grille par rapport aux
colonnes , soit en spécifiant la colonne de début et de fin, ou
en spécifiant la première colonne et le nombre de colonnes.
• La propriété grid-row permet de spécifier le positionnement
d’un élément par rapport aux lignes de la grille. Son
fonctionnement est similaire à grid-column
Exemples
.item1 {
grid-column: 1 / 5;
}
.item1 {
grid-column: 1 /
span 3;
}
grid-aera, grid-template-areas
• La propriété grid-template-areas spécifie les zones dans la
disposition de la grille.
• Nous pouvons nommer les éléments de la grille à l'aide de la
propriété grid-area (dans un élément de grille), puis faire référence
au nom dans la propriété grid-template-areas (dans le conteneur
grid). Un élément sans nom sera désigné par un point .
Exemple
header { grid-area: header; }
nav { grid-area: menu; }
main { grid-area: main; }
aside { grid-area: right; }
footer { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
Overflow
• overflow : spécifie ce qui doit se passer si le contenu
déborde de la boîte d'un élément.
• Cette propriété spécifie si le contenu doit être
découpé ou s'il faut ajouter des barres de défilement
lorsque le contenu d'un élément est trop volumineux
pour tenir dans une zone spécifiée
Valeurs opssibles
• (visible|hidden|scroll|auto)
• Préférer les valeurs auto ou hidden pour éviter le
défilement, par exemple lorsqu’un élément
flottant déborde de son élément parent.
visible hidden scroll auto
Position
• La propriété position spécifie le type de
méthode de positionnement utilisé pour un
élément. Doit être complétée par top , bottom,
left, right selon le cas.
Valeurs possibles
• Static: positionné en fonction du flux normal de la page
• Relative: positionné en décalage par rapport à sa position
normale;
• Fixed: reste toujours au même endroit même si la page
défile;
• Absolute: positionné par rapport à l'ancêtre le plus
proche;
position: relative; left: 30px;
div.relative {position: relative;}
div.absolute {position: absolute;top: 80px;right: 0;}
position: fixed; bottom: 0; right: 0;
Affichage et masquage d’éléments
Deux propriétés permettent de masquer des éléments:
• visibility peut prendre les valeurs :
• visible : l'élément est affiché; hidden : l'élément est masqué et reste dans le
flux courant du document (il laisse un vide)
• display peut prendre les valeurs :
• none : l'élément est masqué et le reste du document s'organise comme s'il
n'existait pas (pas de vide) / autres valeurs: l’élément est affiché
Propriétés des tableaux
• Border: permet d’ajouter une bordure aux éléments table,
th et td
• border-collapse: Fusion des bordures de tableau et de
cellules (collapse, separate)
• Width, height: largeur et hauteur du tableau
• caption-side : Position du titre du tableau (bottom, top)
Propriétés des tableaux
• Text-align: définit l’alignemet horizontal du texte (left, right,
center) dans les cellules <td> ou <th>.
• Vertical-align: alignement vertical (top, bottom, middle) dans
<td>, <th>
• empty-cells : Affichage des cellules vides (hide, show)
Propriétés des listes
• List-style-type: Type de marqueur de liste (disc, circle,
square, decimal, lower-roman,upper-roman, lower-alpha,
upper-alpha). La valeur "none" permet de supprimer le
marqueur de liste.
• list-style-position: Position en retrait (outside: les points
seront en dehors de l'élément de la liste; inside: les points
seront à l'intérieur de l'élément de la liste)
Listes-suite
• list-style-image: Puce personnalisée
(url('puce.png') )
• Notation abrégée: list-style: paramètres list-style-
type list-style-position list-style-image (dans cet
ordre)
Éléments DIV et SPAN
• Associés aux feuilles de style, ces éléments permettent de présenter
un aspect particulier, différent du comportement des éléments de
structure classique pour une partie (Div) ou une ligne (span)
particulier(e).
• Exemple:
• HTML: <DIV class="it">Ceci est un paragraphe en
italiques</DIV>
• Feuille de style: DIV.it {font-style: italic}
78
Mise en page d’une page HTML en
utilisant CSS
float/clear ; display ; …
Float et clear
• La propriété float spécifie comment un élément doit ‘flotter’ par
rapport à son conteneur (left, right, none).
• Les éléments après un élément flottant vont se positionner autour de
lui. Pour quitter le mode ‘flottant’, utilisez la propriété clear
• La propriété clear spécifie sur quels côtés d'un élément les éléments
flottants ne pas autorisés à flotter ( none|left|right|both)
Exemple
• Header : positionnement par défaut (block)
Header
• nav{ float: left; width: 25%;}
• section { float: left; width: 75%; } Nav Section
• footer { clear: both; width:100%;}
Footer
Display:inline-block
• Cette propriété permet de modifier le comportement d’un élément,
combine les modes en ligne et bloc: l’élément sera positionné ‘en
ligne’ , mais pourra être dimensionné (hauteur, largeur)
• Exemple: créer un menu horizontal à partir des éléments li
(éléments block)
• li{ display: inline-block; height:50px; width:70px;} permet de
disposer les éléments Li les uns à coté des autres horizontalement.
Créer un menu de navigation
Code HTML:
<nav>
<ul>
<li><a href="#" >lien 1</a></li>
<li><a href="#">lien 2</a></li>
<li><a href="#">lien 3</a></li>
<li><a href="#">lien 4</a></li>
</ul>
</nav>
CSS: transformer en menu vertical
• nav { float: left; width: 25%; } :Faire ‘flotter’ le menu à gauche
• a {text-decoration:none;} :Enlever le souligné des liens
• ul { list-style-type: none; margin: 0; padding: 0; } : enlever les puces de la liste ul
• li {margin:4px;} : donner l’apparence de boutons à vos li
• li:hover { background-color: #0099cc; } : faire réagir les ‘boutons’ (changer arrière-plan,
couleur de texte, ou même l’ombrage)
Menu horizontal
ul { list-style-type: none; /* enlever les puces de la liste */
marrgin: 0; padding: 0; } /* pas d’espaces */
li {float: left;} /* faire flotter les éléments de menu li à l’horizontale */
li a { display: inline-block; /* donner au liens un aspect de boutons */
text-decoration: none;} /* enlever le souligné des liens */
li a:hover{ background-color:red; } /* changer l’apparence du lien quand il est survolé (arrière-plan ou
couleur ou ombrage) */
Mise en forme d’un
formulaire en CSS
Sélectionner un type de champ input
• Pour cibler un type particulier de champ input, on utilise un
sélecteur de valeur d’attribut:
• input[type=text] permet de sélectionner les champs de texte
Propriétés CSS utiles
➢On ajoutera un padding aux champs de texte, et aussi des margin pour ne pas
‘coller’ les champs
➢Pour éviter les débordements, utiliser border-box
➢Width=100% est utile pour les champs de texte, mots de passe, listes select,
boutons (y compris submit et reset)
➢Arrondir les contours du champ avec border-radius
➢Modifier la bordure et l’arrière-plan
➢Display block pour un retour à la ligne automatique
Exemple
Champs de saisie (texte,mot de
passe,nombre,…)
Modifier la bordure si l’élément est sélectionné pour attirer l’attention(pseudo-classe
:focus)
input[type=text]:focus {
border: 3px solid blue; //épaisse bordure bleue
}
Ou
input[type=text]:focus {
background-color: blue; //l’arrière-plan devient bleu
}
Liste déroulante
• select {
width: 100%;
padding: 16px 20px;
border: none; //pour enlever la bordure
border-radius: 4px;
background-color: #f1f1f1;
}
• On ne peut pas changer la couleur de fond de l’élément sélectionné (JS)
Champ textarea
textarea {
width: 100%; //sur toute la largeur
height: 150px;
padding: 12px 20px; //nécessaire pour un textarea
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px; //arrondir les coins
background-color: #f8f8f8;
}
Boutons, reset, submit
input[type=button], input[type=submit], input[type=reset] {
width:100%;….
cursor: pointer; //pointeur de la souris au lien de la main
}
.button:hover {/* le bouton réagit au survol de la souris */
background-color: green;
color: white;
}
fieldset,legend
• On peut changer la bordure ou l’arrière-plan d’un fieldset,
• de même qu’on peut modifier le style de la légende (texte)
Important
• En HTML5, il est interdit d’utiliser un tableau pour la mise en
forme d’un formulaire
