Scribd
Importer
13 vues144 pages

Odc CSS

Cours sur les bases du css

Transféré par

wellgatse
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
13 vues144 pages

Odc CSS

Cours sur les bases du css

Transféré par

wellgatse
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 144

Introduction à CSS

• CSS : feuille de style en cascade


• Permettent de générer la présentation d’une page HTML : séparer la structure (HTML) de sa
présentation (CSS)

• Ensemble de règles stylistiques applicables à un, ou plusieurs documents HTML => gain de
taille du fichier HTML

• Facilite la mise à jour graphique, favorise l’accessibilité

• Gestion des différents médias possible (print, screen, mobile etc.)


Historique
• Le CSS est né en 1996
• Avant, on utilisait des balises de présentation directement dans le HTML
• CSS1 : publié en 1996
• CSS2 : Pour répondre aux besoins que la première spécification CSS1 ne couvrait pas encore
• CSS2.1 : Les retours d'implémentation de CSS2 conduisent le groupe de travail CSS du W3C à rédiger à
partir de 2001 une version révisée CSS 2.1
• CSS3 : Le développement du troisième niveau des feuilles de styles en cascade commence dès 1999,
parallèlement à celui de CSS 2.1
• CSS4 : L'écriture du quatrième niveau des feuilles de styles en cascade débute dès 2010 parallèlement aux
modules css3
Le CSS dans la balise html

Attribut style = …;

Titre en couleur rose


<h1 style="color:pink;" > …… </h1>

Et des sous titres avec une couleur de fond violette


<h2 style="background-color:purple;">…. </h2>
Problèmes de maintenabilité

• Et si je veux appliquer un style à tous les titres ?

• Et si je veux changer tous les titres d’un coup ?

• Long et fastidieux
• MAIS c’est comme ça que le JavaScript inject du CSS donc vous risquez de le voir dans
l’inspecteur d’élément.
Le CSS « interne» dans l’entête du HTML
On place une balise <style> dans la balise <head> du document Changer la couleur de tous les
titres h2 en blanc :

<style type="text/css">

h2{
color: #fff;
}

</style>
Le CSS « interne» dans l’entête du HTML

Avantage :

Possibilité d’appliquer une règle sur tous les mêmes éléments d’un même document

Inconvénients :

Ne s’applique qu’à ce document, et non au site en entier


Il faut donc modifier le CSS sur chaque page (ex : si on a 10 pages, modifier les styles sur les 10
fichiers)
La/les feuille(s) de style externe(s)

• Nous utiliserons les mêmes conventions de chemin que pour les images et pages
• Création d’un nouveau fichier appelé « styles.css » et on lie la feuille de styles au
HTML
• On « lie » la feuille de style au document HTML avec une balise <link>dans le <head>

<link rel="stylesheet" href="styles.css"/>


La feuille de style externe
index.html

style.css
La feuille de style externe
Avantages :
– Séparation totale de la structure et de
la présentation : possibilité d’avoir
des présentations alternatives
– Possibilité d’appliquer la même
feuille de style sur plusieurs pages
(donc le site en entier) sans devoir
la dupliquer
– Cohérence de la présentation sur tout
le site et les pages futures.
2.

Syntaxe CSS
La syntaxe de base

La syntaxe est composée de 3 éléments :

• Le sélecteur est l’élément sur lequel on applique les propriétés (balise HTML, id, classe,
etc.)
• La propriété est l’effet que l’on va vouloir donner (ex couleur de texte, positionnement,
couleur de fond, etc.)
• La valeur de la propriété CSS (rouge, 10px, etc.) selecteur {
propriete: valeur
propriete: valeur
...
}
La déclaration CSS

On appelle « une déclaration CSS » l’ensemble propriété +


valeur . On peut en avoir plusieurs pour un même élément et
elles sont séparées par le symbole point virgule.
Les commentaires CSS

• Pour créer un commentaire CSS, on utilise


/* commentaire */

• Le commentaire n’est pas visible dans le navigateur


• Sert au développeur à prendre des notes, laisser des messages aux autres et
savoir à quoi servent les lignes de code
3.
Généalogie et différents types
de sélecteurs
Le sélecteur usuel d'élément HTML

• On peut sélectionner n’importe quel élément HTML et lui appliquer un style.


• Une propriété appliquée sur un élément HTML, s’applique par défaut à tous les
éléments présents dans le document HTML.

p{
color : blue;
}

=> Tous les paragraphes auront une couleur de texte bleu


Hiérarchie et généalogie
Notion d’enfant et de descendance

• h1, p, h2, p sont enfants de div

• a, strong et em sont enfant du p dans lequel


ils sont contenus (mais pas de l’autre p)

• a, strong et em (et h1, p, h2 et p) sont


descendants de div
Notion de parent et d'ancêtre

div est parent de h1 p, h2, p Le 2ème


p est parent de a, strong et em.

div est ancêtre de a, strong et em (et


de h1, p h2 et p)
Sélecteur de groupe
Pour sélectionner plusieurs éléments
et leur appliquer la même valeur, on
les sépare par une virgule.

h1, h2 { color: red; }


=> Va donner la couleur rouge à
tous les h1 ou h2
Sélecteurs de mêmes niveaux

Également appelés les "combinateurs d'adjacence", ces sélecteurs


avancés permettent de cibler des éléments proches d'un autre élément.

Il existe à l'heure actuelle deux sélecteurs de ce type :

 Le combinateur d'adjacence directe,

 Le combinateur d'adjance indirecte.


Le combinateur d’adjacence directe
Pour cibler le frère d'un élément, nous allons utiliser le symbole

Element1 + element2 { Ici les styles seront appliqués uniquement à element2 directement
text-align: left; frère de element1.
}

h1 + p {
color: blue;
}

Dans cet exemple le style sera appliqué au paragraphe p qui vient directement après
h1
Le combinateur d’adjacence indirecte
Pour cibler d’un seul coup tous les frères d'un élément répondant à sélecteur précis, nous
allons utiliser le symbole
Element1 ~ element2 { Ici les styles seront appliqués à tous les éléments element2 frère de
text-align: left; element1.
}

h1 ~ p {
color: blue;
}

Dans cet exemple le style sera appliqué à tous les paragraphes p qui sont frères à h1
Les sélecteurs de classe

class=" " est un attribut qui peut se mettre sur n’importe quelle balise
Il permet de cibler de manière plus « spécifique » certains éléments

<p class="important"> Un paragraphe spécifique qui est mis en avant </p>


Classes multiples
Une même classe peut être utilisée sur plusieurs balises dans le même document

<p class="remarque"> une remarque paragraphe</p>

<blockquote class="remarque "> une remarque citation</ blockquote>


Cibler une classe indépendamment de la balise

Si on veut cibler une classe, sans se préoccuper de la balise on utilise le « point ».

Par exemple .remarque { } va cibler

<p class="remarque"> … </p>

<blockquote class="remarque"> …. </blockquote>

Une même classe peut être utilisée sur plusieurs balises HTML
Cibler une balise HTML avec une classe

Pour cibler un élément doté d'une classe en CSS on procède de la manière


suivante (notez qu’il n’y a pas d’espace) element.maclasse { }

Par exemple : p.toto { } va cibler tous les éléments comme celui- ci :

<p class="toto"> … </p>


Cibler une balise HTML avec une classe

Et button.btn.btn-default{ } va cibler

<button type="button" class="btn btn-default"> … </button>

Si l'on met plusieurs classes et un élément sans espace dans la déclaration, il faut donc
que TOUTES les conditions soient vrais
L’id (identifiant)

Il a le même rôle qu’une classe, mais doit être unique sur la page (donc on va moins
l’utiliser)

Un seul attribut id par balise est possible On le note


<element id="monid">

On le cible en CSS avec #monid { }


Convention de nommage

• Un nom de classe ou d'ID ne doit pas avoir d'accent ou caractères spéciaux


• On a tendance à éviter le « tout majuscule » Un nom d'ID ne
prend jamais d'espace

• Un nom de classe ne prend pas d'espace, sinon c'est une nouvelle classe
En résumé
4.

Couleur et Unité CSS


La synthèse additive des couleurs
Les couleurs en CSS
Les couleurs en CSS

• Notation hexadécimale : #ffffff (blanc)


• Notation hexadécimale courte (qui est doublée pour obtenir la version
longue) : #fff

• Notation RGB : rgb(255,255,255) / rgba(255,255,255,1)

• Notation HSL : hsl(0, 0%, 100%); / hsla(0, 0%, 100%,1);

• Mot clé : white


Les couleurs en CSS

• La couleur est une propriété utilisable sur :


– color
– background
– border
– …
Le Pixel - px

Le pixel CSS désigné dans CSS avec le suffixe px, est une unité de longueur qui correspond
approximativement à la largeur ou à la hauteur d'un point unique qui peut être vu
confortablement par l'œil humain sans effort mais par ailleurs aussi petit que possible. Par
définition, il s'agit de la taille physique d'un seul pixel à une densité de pixels de 96 DPI, situé à
une longueur de bras des yeux du spectateur.

• Unité « fixe »
• Dépendance à la résolution du périphérique
• Valeur « compilée » finale en CSS
Le cadratin - em

• Unité fluide utilisée pour les polices d’écriture

• Sa taille est relative à la taille de la police de l’élément parent.


Conversion d'em
Le pourcentage : %

%: proportion relative à la dimension de l'élément parent ou la taille de la


police selon la propriété.
En web, quelle unité utiliser ?

• "px" pour exprimer une dimension fixe (indépendante de la taille de la police)

• "em" pour attribuer des tailles de polices en fonction de la taille de la police de leur
parent.

• "%" pour attribuer des dimensions proportionnées aux dimensions de l'élément parent.

Une mise en page fluide s'appuie généralement sur un

dimensionnement des éléments en pourcentage


5.
Propriétés de typographie : polices et puces
Font-family

body {
font-family: Arial, Helvetica, sans- serif;

font-family : indiquer la (ou les) polices à utiliser

body { font-family: Arial, Helvetica, sans-serif;}


L’ordre des polices appliquées est celui de la
propriété de gauche à droite
Font-size

body {
font-size: 18px;

font-size : valeur en unité permet de définir la taille


d’une police (= la « hauteur »)

On utilise les unités vues précédemment (px, em,


etc.)
Font-weight

body {
font-weight: bold;

• font-weight : valeur permet de déterminer l’épaisseur


de la police.
• Principales valeurs possibles : normal, bold (gras)

• Permet de mettre en gras d'autres éléments


Font-style

body {
font-style: italic;

• font-style : valeur permet de préciser le style de police


• Principales valeurs possibles : normal, italic, oblique.
• Permet de mettre en italique des éléments
line-height

body {
line-height : 1.5;

• line-height: valeur change l’interlignage


• Les valeurs possibles sont des valeurs numériques en
unité de mesure (px, em, %) mais il vaut mieux ne pas
mettre d’unité du tout pour garder plus de flexibilité.
color

body {
color: #008499;

color: valeur permet de donner la couleur du texte


Les valeurs possibles sont toutes les couleurs présentées
précédemment
text-align

• text-align : valeur permet d’aligner le texte à gauche, droite ou milieu


• Les valeurs possibles sont : left, right, center, justify (comme sur Word)
• L’alignement se fait sur le contenu des balises de type bloc (paragraphes, titres, divs,
etc.)
text-align

body { body {

text-align: left; text-align: right;

} }

body { body {
text-align: center; text-align: justify;

} }
Text-transform

text-transform permet de transformer le texte en majuscule, minuscule


Valeurs possibles :

• none

• capitalize

• uppercase

• lowercase
Text-transform

body { body {

text-transform: none; text- transform : capitalize;

} }

body { body {
text- transform : uppercaser; text- transform : lowercase;

} }
Font-variant

body { body {
font-variant: normal; font-variant: small-caps;

} }

font-variant : valeur permet de changer la casse de la police Principales valeurs possibles :

• normal

• small-caps
Text-decoration

text-decoration : valeur permet de changer différents valeurs de « décoration »

Valeurs possibles :

• none: permet d'empêcher l'héritage de la propriété et plus particulièrement de supprimer


le soulignement par défaut des liens
• overline : surlignement
• underline : soulignement
• line-through: texte barré
Text-decoration

body {
body {
text- decoration : underline red;
text-decoration: none;
}
}

body { body {
text- decoration : line-through; text- decoration : wavy overline lime;

} }
Text-indent

p{
Text-indent: 10px;

}
• text-indent : valeur (négative ou positive) permet de
spécifier un décalage de la première ligne d’un texte
• Valeurs : unités de mesure de police, positif ou négatif

• Ne fonctionne que sur des éléments de type bloc (ou


inline-block)
Liste à puce

• list-style-type : permet de spécifier le type de puce ou de numérotation (appliqué sur le ul / ol)

• Valeurs possibles : none (pas de puce), disc, circle, square


Listes ordonnées

Valeurs possibles : decimal (1.), decimal-leading-zero (01.), lower-roman (vii), upper-


roman (VII), etc.
Retirer les puces

ul {
list-style-type : none;

}
Utiliser une image comme puce

ul {
List-style-image : url(‘img/liste.png’);

• list-style-image : pour utiliser une image personnalisée en guise de puce

• Valeur : le chemin d’une image url("cheminimage");


6.

Bordure et arrière plan


Les bordures

La propriété border permet d'ajouter une bordure à un élément Elle a 3 « sous propriétés » possibles :
style, color et width. On regroupe souvent comme ceci : border: width style color;

h2 {
border: 2px solid #009860;

}
Les bordures
On peut décomposer les 4 bordures de la manière suivante :

• border-top : …;
• border-left : …;
• border-right : …;
• border-bottom : …;

Si on ne précise pas à quelle bordure on applique la propriété, elle s’applique aux 4.

h2 {
border-top : 1px solid grey;

}
Style des bordures
• none : pas de bordure (par défaut);
• dotted : pointillés;
• dashed : tirets;
• solid : un trait simple;

• double : bordure double;

• groove : en relief;

• ridge : autre effet relief;


• inset : effet 3D global enfoncé;
• outset : effet 3D global surélevé.
Des bords arrondis
border-radius : valeur permet de faire des bords arrondis
Valeur : une valeur en unité de mesure (px, em ou même %)
Le même arrondi partout : border-radius : 10px;
Un arrondi par angle (en haut à gauche, en haut à droite, en bas à droite, en bas à gauche ) : border-
radius : 2px 20px 5px 10px;

div { div {
Border-radius: 10px; Border-radius: 2px 20px 5px 10px;

} }
Background-color

• background-color : valeur permet de donner une couleur de fond.


• Valeurs : n’importe quelle couleur CSS
• Sur un élément bloc (prend toute la largeur) ou inline (prend la largeur du contenu)

body {
Background-color: yellow;

}
Backgound-image

• background-image : valeur permet de définir une image de fond pour l'élément


• Valeur : none ou url("monimage.png" )
• Par défaut : l’image se répète horizontalement et verticalement (comme une mosaïque)

body {
Background-image: none;

}
Backgound-repeat
background-repeat : permet de définir la façon dont l’image va se répéter.
Valeurs possibles :
• no-repeat : l’image ne sera pas répétée
• repeat-x : l’image sera répétée horizontalement
• repeat-y : l’image sera répétée verticalement

body {Background-repeat: no-repeat;} body {Background-repeat: repeat-x;} body {Background-repeat: repeat-y;}


Backgound-position
• background-position : valeur permet de donner la position de l’image de fond par rapport au coin
haut gauche. A utiliser avec background-repeat: no-repeat.
• Valeurs possibles :
 Des valeurs numériques sur des axes x et y : background-position: 10px 30px;
 Valeurs en toute lettre background-position:right top (en haut à droite):

 top : en haut
 bottom : en bas
 left : à gauche
 center : centré
 right : à droite
Backgound-position

body {
background-color: #A4D0F2;

background-image: url("etoile.png");

background-repeat: no-repeat;

background-position: right bottom;

}
Tout melanger

body {
background: #A4D0F2 url("etoile.png") no-repeat; right bottom;

}
7.

Dimension : margin et padding


Marges
Il existe deux types de marges : intérieure appelée padding, et extérieure appelée margin

(s'il y a une bordure elle est elle aussi ajoutée à la largeur effective des éléments)
Marge extérieur « margin »
• La propriété margin détermine l’espace entre le bord de l’élément, et l’élément suivant.
• Par défaut margin : valeur applique la même
• valeur aux 4 cotés Valeur possible : auto, valeur en unité de mesure, positive ou négative

On peut la décomposer individuellement en :


 margin-top : marge extérieure haute

 margin-right : marge extérieure droite


 margin-bottom : marge extérieure basse
 margin-left : marge extérieure gauche

Ou rassembler les 4 valeurs : margin: 10px 5px 8px 15px; (dans l’ordre : haut, droite, bas, gauche)
Exemple marge

p{
Margin-bottom: 30px;

Ajouter une marge sous un paragraphe


Exemple marge

h2 {
margin: 50px 0;

Ici 50px correspondent à la


marge haute et basse et 0 aux
marges gauches et droites
Exemple marge
body { Pour centrer un élément de type bloc
margin: auto 0; horizontalement dans son parent il faut lui donner

Width: 800px; une largeur (width), et appliquer une marge auto


à gauche et à droite
}
Margin et éléments inline

• Par défaut, une margin top ou bottom sur un élément inline ne


fonctionnera pas (puisqu’il est dans le flux de la page).

• Une marge left ou right fonctionnera par contre


Marge intérieure « padding »

• La propriété padding détermine un espacement entre le bord de la boite et son contenu


• Par défaut padding : valeur applique la même valeur aux 4 côtés
• Valeur possible : valeur en unité de mesure
Marge intérieure « padding »

On peut la décomposer individuellement en :

• padding-top : marge intérieure haute


• padding-right : marge intérieure droite
• padding-bottom : marge intérieure basse
• padding-left : marge intérieure gauche

Ou rassembler les 4 valeurs : padding: 10px 5px 8px 15px;

(dans l’ordre : haut, droite, bas, gauche)


Exemple padding

body {
padding: 10px 15px;

}
Exemple padding

h2 {
Padding-bottom: 15px;

Ajouter du padding à un titre pour


décoller la bordure
Exemple padding

Padding sur élément en inline

a{
Padding: 5px 15px;

Ajouter du padding sur des éléments inline permet


de « changer leur taille » sans passer par un width /
height (attention aux débordements)
Exemple padding
Retirer les marges et padding par
défaut du navigateur

ul {
Padding: 0;

Margin: 0

}
Par défaut, le navigateur applique aussi du padding
(comme par exemple sur les listes). Pour le retirer on
peut écrire padding:0;
overflow

Il est possible que du contenu texte dépasse l'élément qui le contient (surtout si on défini
des hauteurs fixes)

p{
height: 100px;

}
Overflow | Cacher la partie qui déborde

• overflow: hidden permet de cacher tout ce qui dépasse.


• Problème : on perd tout ce qui est caché, impossible de le voir

p{
height: 100px;

Overflow: hidden

}
Overflow | Afficher une barre de défilement

overflow: auto permet d’afficher une barre de défilement si nécessaire

p{
height: 100px;

Overflow: auto

}
8.

Positionnement CSS : float


Les flottants et les flux
La propriété float:valeur indique qu'un élément doit être retiré du flux normal et doit être
placé sur le côté droit ou sur le côté gauche de son conteneur. Le texte et les autres éléments en
ligne (inline) entoureront alors l'élément flottant. L'élément est retiré du flux normal de la page
mais s'inscrit toujours dans le flux.

Elle prend 3 valeurs : left, right et none (permet de remettre un élément dans le flux)
Float left

img {
float: left;

}
Float right

img {
float: right;

}
Problème des flottants

Comme le contenu « coule » autour, on se retrouve avec ce genre de problèmes


Clear : bloquer le dépassement
La propriété clear : valeur permet à un élément de cesser le contournement des éléments
flottants. Il se positionne alors sous les éléments flottants précédents comme si ces derniers
étaient restés dans le flux.

Valeurs possibles :
• clear: left permet d’empêcher le contournement des blocs flottants à gauche
• clear: right permet d’empêcher le contournement des blocs flottants à droite
• clear : both permet d’empêcher le contournement des blocs flottants à gauche et à droite

On l'applique sur le premier élément « suivant » dont on veut cesser le contournement.


Problème des flottants

.content {
clear: both;

On applique clear:both; sur l'élément qui


ne doit plus être affecté par les flottants
BFC et contenir les flottants dans un bloc

Les éléments flottants peuvent « dépasser » de leur parent si le contenu de celui-ci n'est
pas suffisant
BFC et contenir les flottants dans un bloc
Un « contexte de formatage de bloc » (ou BFC) est un élément avec des « super pouvoirs » :

– Il peut « contenir » les flottants (qui ne peuvent plus en dépasser)

– Il ne s'écoule pas autour des flottants


BFC et contenir les flottants dans un bloc

.parent {
overflow: hidden;

Ajouter overflow:hidden au parent des


flottants permet de créer un « contexte de
formatage de bloc » et résoudre notre
problème
9.

Positionnement CSS : display


La propriété « display » pour mise en page

• La propriété display: valeur va permettre une mise en forme avancée.


• Quelques unes des valeurs possibles sont : block, inline, inline- block et none
• Ces valeurs sont appliquées par défaut en fonction des éléments :

 p, div, h1, etc. : display :block;

 span, a, em, strong, etc. : display : inline;


display block

• Il est possible de transformer un élément inline en élément de bloc avec display:


block
• Il a alors toutes les propriétés d’un élément de bloc : par défaut, il prend toute la
largeur de son parent, on peut en changer la dimension ET est suivi d’un retour
à la ligne. On peut alors lui appliquer des marges.
display block

a{
display: block; Pour transformer les liens inline en
éléments de bloc
}
display block
Transférer les liens de la navigation en
header li, header a { éléments de bloc
display: block;

header a {
background: #98C9;

margin-bottom: 5px;

Width: 150px;
}
display inline

• Nous connaissons déjà display:inline appliqué sur les éléments de type inline
(span, a, em, strong, etc.).

• Il permet aux éléments de rester sur une seule ligne (on ne peut alors pas
leur donner de largeur)
display inline

p{
display: inline;

Confère un à un élément toutes les


propriétés d’un élément en ligne,
sans retour à la ligne
display inline-block

display: inline-block est une propriété hybride qui permet à un élément d’avoir les
propriétés d’un élément en ligne (pas de retour à la ligne après l’élément), mais avec les
propriétés d’un bloc (possibilité d’avoir une dimension et des marges)
Exemple inline-block
display: inline-block sur une liste de liens permet par exemple
header li { de créer une navigation horizontale
display: inline-block;

header li a {
display: block;
Padding: 5px;
Background: green;
Color: #fff;

}
Display none

• display: none permet de retirer un élément du flux de la page : il n’est plus visible, et
la place qu’il occupait est disponible pour d’autres éléments, c’est comme s’il
n’existait pas.

• Les éléments en display:none ne sont pas lus par les lecteurs d’écran
• Pour rendre l’élément à nouveau visible, il faut lui appliquer par exemple display:block
10.

Positionnement CSS : position


Positionnement CSS
La propriété position:valeur permet de positionner les éléments dans la page
Les valeurs possibles sont : static (valeur par défaut) ,relative, absolute et fixed
Position static

• static est la valeur par défaut de tous les éléments


• Un élément avec position: static; n'est positionné d'aucune manière spéciale.

• Un élément static est dit non positionné et un élément avec une propriété position
ayant une valeur autre que static est dit positionné.
Position relative

• Un élément positionné avec position:relative; se comporte par défaut de la même


manière que static.
• On peut utiliser les propriété top, left, right et bottom pour déplacer l'élément
• Le reste du contenu ne sera pas affecté
• top, left right et bottom peuvent prendre des valeurs positives ou négatives (10px, -
30px, etc.)
Position relative

a{
position: relative;

top: -15px;

}
Position relative

.etoile {
position: relative;

top: 5px;

}
Position fixe
• Un élément en position: fixed; ne bougera pas, même si on fait défiler la page. Il sort du flux
et se positionne au dessus des autres éléments.
• Il se positionne par rapport à l'espace affichable du navigateur
Position fixe

nav {
position: fixed;

top: 0;

left: 0;

right: 0;

}
Position absolue

• Un élément en position: absolute;

 sort du flux (les autres éléments se réorganisent comme s’il n’était pas là)
 vient se positionner par rapport à son dernier ancêtre positionné, à l’intérieur de celui-
ci.

• Par défaut, si aucun ancêtre n’est positionné (et qu’on a modifié top, left, right ou
bottom) il se positionne par rapport à l'élément racine <html>.
• Pour positionner le parent, on donne au parent une position: relative | fixed | absolute;
Position absolue
Position absolue

.caption {
Préparer l’image avec les couleurs
background: rgba(0,0,0,0.8);

Color: #fff;

Padding: 20px;

}
Position absolue

.caption {
Préparer le positionnement de l’image
background: rgba(0,0,0,0.8);

color: #fff;

padding: 20px;

position: absolute;

left: 0;

right: 0;

}
Position absolue

Positionner le parent pour que la légende se


.img-caption {
place par rapport aux bords de ce dernier
position: relative;

}
11.

Positionnement CSS : flexbox


Mise en page avec flexbox
• Pendant longtemps nous avons utilisé des fottants pour faire des mises en page.
Vous retrouvez encore cette technique sur beaucoup de sites développés jusqu’il y
a encore quelques années.

• Aujourd’hui, la mise en page de sites web moderne se fait avec deux techniques :
flexbox (pour des mises en page fluides) et grid- layout (plus récent et moins bien
supporté mais qui permet de créer facilement des sites sur des principes de grilles.
Mise en page avec flexbox
• Le principe de la mise en page avec Flexbox est simple : vous définissez un conteneur, et à l'intérieur
vous placez plusieurs éléments. Imaginez un carton dans lequel vous rangez plusieurs objets : c'est le
principe
• Sur une même page web, vous pouvez sans problème avoir plusieurs conteneurs (plusieurs cartons, si
vous préférez). Ce sera à vous d'en créer autant que nécessaire pour obtenir la mise en page que vous
voulez.

https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
Les deux axes des boîtes flexible

Lorsqu'on travaille avec les boîtes flexibles, deux axes interviennent : l'axe principal
(main axis en anglais) et l'axe secondaire (cross axis en anglais). L'axe principal est
défini par la propriété flex-direction et l'axe secondaire est l'axe qui lui est
perpendiculaire. Tout ce que nous manipulons avec les boîtes flexibles fera référence à
ces axes.
Flex-direction
L'axe principal est défini par la propriété flex-direction qui peut prendre quatre valeurs : row,
row-reverse, column, column-reverse

• Si on choisit la valeur row ou row-reverse l'axe principal sera aligné avec la direction « en
ligne »
• Si on choisit la valeur column ou column-reverse l'axe principal sera aligné avec la direction
« en ligne »
Axe secondaire
L'axe principal est défini par la propriété flex-direction qui peut prendre quatre valeurs : row,
row-reverse, column, column-reverse

• L'axe secondaire est perpendiculaire à l'axe principal. Ainsi, si flex-direction vaut rox ou
row-reverse, l’axe secondaire suivra l’axe de colonnes
• Si l'axe principale est column ou column-reverse , l'axe secondaire suivra celui des lignes
(horizontales).
Flexbox Exemple
#conteneur {
display: flex;
flex-direction: column;
}

#conteneur {
display: flex;
flex-direction: row;
}
12.

Pseudo-Éléments
Pseudo-éléments
Un pseudo-élément est un mot-clé ajouté à un sélecteur qui permet de mettre en forme certaines parties de
l'élément ciblé par la règle. Ainsi, le pseudo-élément ::first-line permettra de ne cibler que la première ligne
d'un élément visé par le sélecteur.

Quelques pseudo-éléments :

::after : ex: p::after Insérez quelque chose après le contenu de chaque élément <p>

::before : ex: p::before Insérez quelque chose avant le contenu de chaque élément <p>

::first-letter : ex: p::first-letter sélectionne la première lettre de chaque élément <p>

::first-line : ex: p::first-line sélectionne la première ligne de chaque élément <p>


::marker : ex: ::marker sélectionne les marqueurs des éléments de la liste
::selection : ex: p::selection sélectionne la partie d’un élément qui est sélectionnée par l'utilisateur
Pseudo-éléments | ::after
En CSS, ::after crée un pseudo-élément qui sera le dernier enfant de l'élément sélectionné. Il est souvent utilisé
pour ajouter du contenu cosmétique à un élément, en utilisant la propriété CSS content. Par défaut, ce contenu est
de type « en ligne ».
Pseudo-éléments | ::before
En CSS, ::before crée un pseudo-élément qui sera le premier enfant de l'élément sélectionné. Il est souvent utilisé
pour ajouter du contenu cosmétique à un élément, en utilisant la propriété CSS content.
Pseudo-éléments | ::first-letter
En CSS, ::first-letter sélectionne la première lettre de la première ligne d'un bloc, si elle n'est pas précédée par
un quelconque autre contenu (comme une image ou un tableau en ligne) sur sa ligne.
13.

Pseudo-Classes
Pseudo-classes
• Une pseudo-classe est un mot-clé qui peut être ajouté à un sélecteur afin
d'indiquer l'état spécifique dans lequel l'élément doit être pour être ciblé par la
déclaration.

• Les pseudo-classes vont nous permettre d’appliquer des styles à des éléments
HTML uniquement lorsque ceux-ci sont dans un certain état (cliqués, activés,
etc.).

• Il existe de nombreuses pseudo-classes en CSS. Nous n’allons étudier en détail


que les plus utilisées car toutes les pseudo-classes s’utilisent de manière similaire :
:hover, :active, :visited, :link, :first-child, :last-child, :first-of-type, last-of-
type, :checked, :focus, :required, :empty,…
Pseudo-class :hover
La pseudo-classe :hover va nous permettre d’appliquer des styles à un élément HTML uniquement lorsque
celui-ci est survolé par la souris d’un utilisateur. Cette pseudo-classe peut être utilisée avec la majorité des
éléments HTML mais on l’utilisera généralement pour appliquer des styles différents à des liens lorsqu’un
utilisateur passe sa souris dessus.

div { div:hover {
height: 100px; background-color: lightBlue;
}
border: 1px solid black;

width: 200px;

box-sizing: border-box;

text-align: center;
}
Pseudo-class :active
La pseudo-classe :active permet de cibler un élément lorsque celui-ci est activé par l'utilisateur. Elle permet
de fournir un feedback indiquant que l'activation a bien été détectée par le navigateur. Lorsqu'on a une
interaction avec un pointeur, il s'agit généralement du moment entre l'appui sur le pointeur et le relâchement
de celui-ci

La pseudo-classe :active est également activée lorsque l'utilisateur emploie la touche de tabulation. Elle
est souvent utilisée sur les éléments HTML <a> et <button> mais n'est pas restreinte à ceux-ci. Les
éléments ciblés par cette pseudo-classe incluent les éléments qui contiennent l'élément activé et les
éléments de formulaires activés via leur élément <label> associé.

a:active {
color: red;
}
Pseudo-class :visited
La pseudo-classe :visited va elle nous permettre de modifier les styles d’un élément HTML lors d’un état très
particulier qui est le moment où l’on clique sur l’élément. Pour bien visualiser cet état, je vous conseille de
rester cliqué sur l’élément en question le temps de voir les changements de style. Une nouvelle fois, en
pratique, cette pseudo-classe va généralement être utilisée pour modifier l’apparence des liens au moment du
clic.

a:visited {
color: #00ff00;
}
Pseudo-class :first-child, last-child
• La pseudo-classe :first-child permet de cibler un élément qui est le premier élément fils par
rapport à son élément parent.
• La pseudo-classe :last-child permet de cibler un élément qui est le dernier élément enfant de
son parent.
li:first-child { li:last-child {

color: green; Background-color: green;


} }
Pseudo-class :nth-child
• Pour pouvoir cibler n’importe quel élément HTML en fonction de sa place dans le document, on utilise le
sélecteur CSS :nth-child permet de sélectionner un élément HTML qui est le énième enfant de son parent.

• Valeurs avec mot clé :


 Odd : Représente les éléments dont la position est impaire par rapport à leurs voisins.
 Even : Représente les éléments dont la position est paire par rapport à leurs voisins.

• Notation fonctionnelle :

(an + b) : Représente les éléments dont la position est la an+b –ième avec n qui parcours
les entiers à partir de 0. Les valeurs fournies par A et B doivent être les entiers.
Exemple :nth-child

li { li:nth-child(2n+1) {

Background-color: stategrey; Background-color: lightsteelblue;


} }

Ciblé les éléments li impairs


Pseudo-class :nth-of-type
• La pseudo-classe :nth-of-type correspond à des éléments d'un type donné, en fonction de
leur position au sein d'un groupe de frères et sœurs..
• La pseudo-classe :nth-of-type ne prend qu'un argument qui représente le motif de répétition
pour les éléments ciblés.
Les préfixes vendeurs en CSS

Les vendeurs de navigateurs ajoutent parfois des préfixes aux propriétés CSS
expérimentales ou non standards. Les développeurs peuvent ainsi les expérimenter
sans que les changements de comportement du navigateur ne cassent le code pendant
le processus de standardisation. Les développeurs sont supposés attendre que le
comportement du navigateur soit standardisé pour inclure la propriété non préfixée.
Les préfixes vendeurs en CSS
En général, les principaux navigateurs utilisent ces préfixes :

.class{
 -webkit- (Chrome, nouvelles versions d'Opera.)
-moz-border-radius: 5px;
 -moz- (Firefox)
-webkit-border-radius: 5px;
 -o- (Anciennes versions d'Opera)
-o-border-radius: 5px;
 -ms- (Internet Explorer et Edge)
border-radius: 5px;
}

L'idéal est de toujours commencer une déclaration par les propriétés précitées, puis de la finir par
celle qui devra les remplacer un jour, pour garantir que l'implémentation finale sera bien assurée
par cette dernière
SASS
Sass est le langage d'extension CSS de qualité professionnelle le plus mature, le plus stable
et le plus puissant au monde.
Sass est un langage de feuille de style compilé en CSS. Il vous permet d'utiliser des variables ,
des règles imbriquées , des mixins , des fonctions , etc., le tout avec une syntaxe entièrement
compatible CSS. Sass aide à garder les feuilles de style volumineuses bien organisées et
facilite le partage de la conception au sein et entre les projets.
Merci

Vous aimerez peut-être aussi