Technologie Du Web: Université Mohammed Premier Faculté Des Sciences - Oujda

Université Mohammed Premier
Faculté des Sciences - Oujda

Filière : Sciences Mathématiques et Informatique (SMI-S3)
Module :
Technologie du web
Responsable du module :
Pr. Youssef DOUZI

Département d’informatique
y.douzi@ump.ac.ma
1
A.U. 2023-2024
Chapitre 3:
CSS
FSO Pr. Youssef DOUZI 2

Pourquoi avons-nous besoin de CSS ?
❑Le HTML définit la structure de la page, mais n'offre que

des styles de base.
❑Le CSS permet de personnaliser l'apparence, le design et la
mise en page d'une page web.
❑Il facilite la cohérence visuelle sur un site web.

Plan
❑Introduction au CSS
❑Les sélecteurs CSS
❑Les propriétés CSS
❑Mise en page CSS

Introduction au CSS
❑ CSS signifie Cascading Style Sheets (Feuilles de style en cascade).
▪ C'est un langage qui vient compléter le HTML.
▪ C'est un langage qui permet de contrôler l'apparence et la présentation des pages
web.
▪ C’est un langage de style qui permet de gérer la mise en forme de des site web
(définir la couleur, la police, la taille, la mise en page, etc. des éléments HTML).
▪ C'est un langage très puissant qui permet de créer des sites web complexes et
attrayants. Il est également très flexible et permet de s'adapter à différents
appareils et tailles d'écran.
Introduction au CSS : Avantages d'utiliser le CSS
❑ Il y a de nombreux avantages à utiliser le CSS, notamment :
▪ Séparation du contenu et de la présentation : Le CSS permet de séparer le contenu
HTML de sa présentation (CSS). Cela rend le code plus organisé, plus lisible, plus facile à
maintenir et à mettre à jour.
▪ Cohérence visuelle : CSS permet de définir un style cohérent pour l'ensemble d'un site
web. Vous pouvez définir les couleurs, les polices, les marges, les bordures, etc., une fois,
puis les appliquer de manière cohérente à l'ensemble du site.
▪ Flexibilité : CSS offre une grande flexibilité pour personnaliser l'apparence des éléments
HTML. Vous pouvez cibler spécifiquement les éléments que vous souhaitez styliser à
l'aide de sélecteurs, de classes, d'IDs, etc.
Introduction au CSS : Avantages d'utiliser le CSS
▪ Accessibilité : En utilisant des pratiques de codage CSS appropriées, vous pouvez rendre
votre site web plus accessible aux personnes handicapées, notamment en utilisant des styles
pour les lecteurs d'écran.
▪ Rapidité de chargement : Les fichiers CSS externes sont généralement mis en cache par les
navigateurs, ce qui signifie que les styles ne doivent être téléchargés qu'une seule fois, ce qui
accélère le chargement des pages ultérieures.
▪ Facilité de mise à jour : Si vous souhaitez apporter des modifications à l'apparence d'un site,
vous pouvez le faire en modifiant simplement le fichier CSS, sans avoir à toucher au contenu
HTML. Cela facilite la gestion des mises à jour.
▪ Compatibilité multiplateforme : CSS est pris en charge par la plupart des navigateurs, ce qui
garantit une expérience utilisateur cohérente sur différentes plates-formes et appareils. 7
Introduction au CSS : Exemple
❑ Ce code CSS définit les styles suivants :
body {
▪ La police de caractères par défaut pour le corps du
font-family: sans-serif;
document est une police sans-serif. color: #000000;
▪ La couleur de texte par défaut est le noir. }
▪ Les titres de niveau 1 (h1) ont une taille de police deux fois h1 {
font-size: 2em;
plus grande que la taille de police par défaut. Ils sont
font-weight: bold; }
également en gras. p { font-size: 1em;
▪ Les paragraphes ont une taille de police par défaut et une line-height: 1.5em; }
img {
interligne de 1,5em.
width: 100px;
▪ Les images ont une largeur et une hauteur de 100 pixels.
height: 100px; }
Intégration du code CSS
❑ Associer du CSS à du HTML est possible avec des feuilles de style internes ou externes.
❑ Des feuilles de style internes : les instructions CSS sont situées dans le document HTML. Vous
pouvez également intégrer du CSS au début du fichier HTML ou le placer dans le code source.
❑ Des feuilles de style CSS externes : le CSS est intégré en liant le document HTML à un fichier
CSS externe. C’est la façon la plus courante et la plus propre de développer des sites.
❑ Voici un aperçu des trois méthodes :
▪ Style interne, c’est-à-dire directement dans le code source (Intégration inline) (méthode la
moins recommandée).
▪ Au début du document HTML (Intégration en ligne)
▪ Externalisé vers un fichier CSS externe (Intégration externe) (méthode la plus recommandée).

❑ Il existe trois méthodes principales pour intégrer du code CSS dans une page HTML :
▪ Intégration inline : consiste à insérer du code CSS directement dans le code HTML, dans la
balise de l'élément que vous souhaitez styliser. Cette méthode est la plus simple, mais elle est
également la moins flexible.
▪ Intégration en ligne : consiste à utiliser la balise style dans la balise head du code HTML. Cette
méthode est similaire à l'intégration inline, mais elle vous permet de styliser plusieurs éléments à
la fois.
▪ Intégration externe : consiste à créer un fichier CSS séparé, puis à le lier à la page HTML.
Cette méthode est plus flexible que l'intégration inline, car elle vous permet de réutiliser le code
CSS pour plusieurs pages HTML.

Intégrer le CSS directement dans les balises (inline)
❑ Avec cette méthode, les instructions de conception sont intégrées directement dans les balises
du fichier HTML via un attribut style. Les propriétés souhaitées sont attribuées uniquement à
un seul élément, de sorte que des conceptions distinctes sont possible au fil du document
HTML. Dans l’exemple ci-dessous, le titre h1 doit apparaître en bleu et avec une taille de
police de 14 :
<h1 style = "color : blue; font-size : 14px;">Ceci est un titre</h1>
❑ Avec ce type d’intégration, on perd beaucoup des avantages du CSS. Parmi ceux-ci, l’option de
définir une commande unique qui s’appliquera, par exemple, à tous les éléments de h1 dans le
document HTML. Dans certaines circonstances, cela suppose également plus de travail de
maintenance, car des interventions directes sur le code HTML sont nécessaires.
Intégrer le CSS directement dans les balises (inline) : Exemple
<!DOCTYPE html> page.html

<html>
<head>
</head>
page.html <body >

<h1 style = " color: blue ; font-size :14px; " >Ceci est un titre</h1>
<p>Ceci est un paragraphe</p>
</body>
</html>

Intégrer le CSS à l’en-tête du document HTML
❑ Cette méthode permet d’intégrer le CSS dans l’en-tête <head> de votre document HTML.
❑ La balise style (<style> et </style>)est donc intégrée à l’élément head et s’applique à la
totalité du fichier.
❑ Les instructions de conception sont contenues dans le document mais sont distinctes du
code HTML.
❑ Dans l’exemple ci-dessous, on applique la même commande que dans l’exemple précédent.
En revanche, tous les titres h1 seront formatés conformément aux instructions.
< style >

h1 { color : blue; font-size : 14px; }
< /style >

Intégrer le CSS à l’en-tête du document HTML :Exemple
<!DOCTYPE html> <html>
<head>
<style>
h1 {color: blue ; font-size :14px; }
</style>
page.html </head>
<body >
<h1>Ceci est un titre</h1>
</body>
</html>

Intégrer le CSS avec un fichier externe : Utilisation
❑ Pour utiliser le CSS, il faut créer un fichier CSS et l'associer à une page HTML. Cela peut être fait en utilisant
la balise link dans la tête du document HTML.
❑ Une fois que le fichier CSS est associé à la page HTML, vous pouvez commencer à ajouter des styles. Pour ce
faire, vous devez utiliser des sélecteurs CSS pour cibler les éléments HTML que vous souhaitez styliser.
❑ Ensuite, vous pouvez définir les propriétés CSS que vous souhaitez appliquer aux éléments sélectionnés. Par
exemple, vous pouvez définir la couleur, la police, la taille, la mise en page, etc.
❑ Exemple : Dans le même dossier que la page HTML(page.html), créer le fichier stylesheet.css. Sinon
spécifier le chemin du fichier (mon_dossier\...\ stylesheet.css) dans href.
❑ Cet attribut définit l'URL de la ressource liée. L'URL utilisée peut être absolue ou relative.
❑ Le lien peut être absolu (commençant par http://...) ou relatif.
15
Pr. Youssef DOUZI FSO
Intégrer le CSS avec un fichier externe : Exemple
❑ La balise <link> inclut les attributs suivants :
▪ attribut rel : relation entre le document et le document lié (stylesheet, icon, licence…)
▪ attribut href : définit l'URL de la ressource liée. L'URL utilisée peut être absolue ou relative.
▪ attribut type : le type de média du document lié
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css" type="text/css" >
page.html </head>
<body>
</body>
</html>
❑La feuille de style externe ne contient aucune balise HTML, juste le sélecteur
respectif et les accolades avec les déclarations comme dans l'exemple suivant:
stylesheet.css
h1 {
color: blue ;
font-size :14px;
}

<!DOCTYPE html>
h1 {
<html>
color: blue ;
<head>
font-size :14px;
<link rel="stylesheet" href="stylesheet.css" type="text/css" >
}
</head>
stylesheet.css
<body>
</body>
</html>
page.html
Intégrer le CSS avec un fichier externe : Avantage
❑ Cette méthode et beaucoup plus pratique car on peut appliquer la même mise en
forme sur toutes les balises qu’on veut, alors les autres méthodes ne le permettent
pas. Il faut définir le style pour chaque balise.
❑ Comme un site Web est souvent constitué de multiples pages, il paraît sensé
d’enregistrer les instructions de conception dans un fichier séparé. Cela permet
une séparation claire entre contenu et conception et facilite la maintenance.
(Séparation du contenu (fichier .html) et de la présentation (fichier .css))
❑ Possibilité de partager les styles entre plusieurs documents
Intégrer le CSS avec un fichier externe
❑ Une page peut avoir plusieurs feuilles de style associées avec possibilité d'avoir
des feuilles externes au site (Bootstrap).
stylesheet1.css
stylesheet2.css

Intégrer le CSS avec un fichier externe : Utilisation
❑ Le même code CSS est indiqué une fois pour toutes dans un fichier CSS.
stylesheet.css
page1.html page2.html page3.html

❑Les trois méthodes donnent même résultat (inline – en ligne
– externe ) :

Syntaxe de base CSS
❑ Une règle CSS est composée de deux éléments principaux :
▪ Un sélecteur (s) qui identifie les éléments HTML que vous souhaitez styliser.
▪ Un bloc de déclarations qui définit les propriétés et leurs valeurs pour les
éléments sélectionnés.
sélecteur {
propriété1 : valeur1;
propriété2 : valeur2;
...
}

Syntaxe de base CSS : Exemple
/* Sélection de tous les paragraphes */
p{
color: blue;
font-size: 16px;
margin-top: 10px;
}
/* Sélection d'une classe spécifique */
.ma-classe {
background-color: #F0F0F0;
border: 1px solid #CCCCCC;
}
/* Sélection d'un ID spécifique */
#mon-id {
text-align: center;
FSO } Pr. Youssef DOUZI 24
Syntaxe de base CSS : les commentaires
❑ Les commentaires dans du CSS : pour insérer un commentaire en CSS Tapez /* suivi de
votre commentaire, puis */ pour terminer votre commentaire. Le commentaire ne
s'interprète pas.
/* Sélection de tous les h1 */
h1 {
color: blue;
text-align: center;
}
/* Sélection de tous les h2 */
h2{
color: blue;
text-align: center;
}

Syntaxe de base CSS : Regroupement des sélecteurs
❑ Si plusieurs balises (≥2) doivent avoir la même mise en forme. On déclare les noms des balises
et on les sépare par une virgule « , » comme suit : ces deux fichiers sont équivalents.
h1 {
color: blue;
text-align: center; Equiv. h1, h2 {
} color: blue;
h2{ text-align: center;
color: blue; }
text-align: center;
}

Les attributs class et id
❑En CSS, les classes (classes CSS) et les identifiants (IDs) sont
des sélecteurs que vous pouvez utiliser pour cibler
spécifiquement des éléments HTML et leur appliquer des styles.
▪ les classes ➔ class
▪ Identifiants ➔ id

Les attributs class et id : class
❑ Les classes CSS sont l'une des méthodes les plus courantes pour cibler et styliser des
éléments HTML.
❑ Une classe est définie en utilisant le sélecteur de classe, qui commence par un point
(.nom-de-classe).
❑ Plusieurs éléments peuvent partager la même classe, ce qui permet de réutiliser un style
pour différents éléments.
❑ Pour appliquer une classe à un élément HTML, vous utilisez l'attribut class de la balise
HTML, suivi du nom de la classe.
❑ Le nom de la classe ne doit pas commencer par un chiffre et ne doit contenir ni espaces,
ni accent, ni caractère de ponctuation, ni tiret.
❑ Exemple en HTML :
<p class="text-important">Ceci est un paragraphe important.</p>
❑ Exemple en CSS :
.text-important {
color: red;
font-weight: bold;
}
Les attributs class et id : id
❑ Les identifiants (IDs) sont utilisés pour cibler un élément HTML unique.
❑ Un identifiant est défini en utilisant le sélecteur d'ID, qui commence par un
dièse # (#nom-de-l-id).
❑ Chaque identifiant doit être unique dans une page HTML, ce qui signifie
qu'un ID ne peut être attribué qu'à un seul élément.
❑ Les identifiants sont généralement utilisés pour appliquer des styles
spécifiques à un élément particulier.

❑ Exemple en HTML :
<div id="mon-element-unique"> Contenu de l'élément </div>
❑ Exemple en CSS :
#mon-element-unique {
background-color: #FFFFCC;
border: 1px solid #999999;
}

Les sélecteurs
❑ Les sélecteurs CSS sont utilisés pour identifier les éléments HTML que vous souhaitez
styliser(cibler et styliser spécifiquement ). Voici une liste de certains des types de sélecteurs CSS
les plus couramment utilisés :
▪ Sélecteurs simples (de type - d'élément - de balise) : les sélecteurs simples ciblent des
éléments HTML spécifiques par leur nom de balise. Par exemple, le sélecteur h1 cible tous les
éléments h1 du document.
p{
/* Styles appliqués à tous les éléments <p> */
}

Les sélecteurs
▪ Sélecteur de classe : Il cible des éléments ayant une classe spécifique. Les classes sont
définies dans le code HTML à l'aide de l'attribut class. Par exemple, pour cibler tous les
éléments avec la classe "important," vous utiliseriez le sélecteur de classe .important.
.important {
/* Styles appliqués à tous les éléments ayant la classe "important" */
}

Les sélecteurs
▪ Sélecteur d'identifiant : Il cible un élément spécifique avec un attribut id unique.
L'identifiant est défini dans le code HTML à l'aide de l'attribut id. Par exemple, pour cibler un
élément avec l'identifiant "header," vous utiliseriez le sélecteur d'identifiant #header.
#header {
/* Styles appliqués à l'élément avec l'identifiant "header" */
}

Les sélecteurs
▪ Sélecteur d'attribut : Sélectionne les éléments qui ont un attribut spécifique ou des valeurs
d'attributs spécifiques. Il est défini en utilisant la syntaxe [attribut] ou [attribut=valeur]. Par
exemple, [type="text"] sélectionne tous les éléments avec l'attribut type ayant la valeur "text".
a[target] {
/* Styles appliqués à tous les liens avec l'attribut "target" */
}

Les sélecteurs
▪ Sélecteur de descendant (d'enfant ) : Il cible un élément qui est un descendant direct( élément
enfant) d'un autre élément(élément parent). Par exemple, pour cibler tous les éléments <a> qui
sont des descendants directs d'une liste non ordonnée (<ul>), vous utiliseriez le sélecteur de
descendant ul > a.
ul > a {
/* Styles appliqués aux éléments <a> qui sont des descendants (des enfants )
directs d'une liste non ordonnée <ul> */
}

Les sélecteurs
▪ Sélecteur d'adjacence : Il cible un élément qui est immédiatement précédé d'un autre élément.
Par exemple, pour cibler un paragraphe (<p>) immédiatement précédé d'un titre de niveau 2
(<h2>), vous utiliseriez le sélecteur d'adjacence h2 + p.
h2 + p {
/* Styles appliqués au paragraphe <p> immédiatement précédé
d'un titre de niveau 2 <h2> */
}

Les sélecteurs
▪ Sélecteur universel : Il cible tous les éléments sur la page. Il est défini comme *. Par exemple,
pour cibler tous les éléments sur la page, vous utiliseriez le sélecteur universel *.
*{
/* Styles appliqués à tous les éléments sur la page */
}

Les sélecteurs
▪ Sélecteur pseudo-classe : Il cible des éléments en fonction de leur état ou de leur interaction.
Par exemple, :hover cible un élément lorsque la souris passe au-dessus de lui, et :active cible
un élément lorsqu'il est activé (clic). Les pseudo-classes sont précédées de deux-points.
a:hover {
/* Styles appliqués aux liens lorsqu'ils sont survolés par la souris */
}

Les sélecteurs
▪ Sélecteur pseudo-élément : Il cible des parties spécifiques d'un élément. Par exemple, ::before
cible le contenu généré avant un élément, et ::after cible le contenu généré après un élément.
Les pseudo-éléments sont précédés de deux deux-points.
p::before {
/* Styles appliqués au contenu généré avant les éléments <p> */
}

Les sélecteurs
❑Ces sélecteurs CSS permettent de cibler des éléments de manière

précise et de personnaliser l'apparence de votre page web en
fonction de vos besoins de conception. Vous pouvez également
combiner ces sélecteurs pour des sélections plus complexes et
spécifiques.

Les sélecteurs : Exemples
h1 { Une seule balise à la fois , signifie
/*les propriété et valeurs*/ tous les paragraphes
}
h1, h2, p { Plusieurs balises à la fois , signifie
/*les propriété et valeurs*/ tous les titres h1, h2 et tous les
} paragraphes
.class { signifie touts les balises de la classe

/*les propriété et valeurs*/ class
}
#id { signifie touts les balises de
/*les propriété et valeurs*/ l’identifiant id
}
*{ Signifie toutes les balises sans

/*les propriété et valeurs*/ Exception (Sélecteur Universel)
}
p em { signifie toutes les balises <em>
/*les propriété et valeurs*/ situées à l'intérieur d'une balise
} <p>
h1 + p { signifie toutes les premières balises
/*les propriété et valeurs*/ <p> située après un titre <h1>.
}
a [title]{ Signifie tous les liens <a> qui
/*les propriété et valeurs*/ possèdent un attribut title et avoir
} exactement pour valeur val
a [title = "val"]{ Signifie tous les liens <a> qui
/*les propriété et valeurs*/ possèdent un attribut title et avoir
} exactement pour valeur val

a [title * = "val"]{ Signifie tous les liens <a> qui
/*les propriété et valeurs*/ possèdent un attribut title et
} contient la valeur val
div > img{ Signifie tous les éléments enfant
/*les propriété et valeurs*/ <img> appartenant directement
} au parent <div>
a:hover { Signifie les balises a qui sont

/*les propriété et valeurs*/ survolées par la souris
}
Sélecteur de frère général

ou
sélecteur de frère suivant
Sélectionne tous les éléments p qui sont
div ~ p{ frères des éléments div. Cela signifie que les
/*les propriété et valeurs*/ éléments p peuvent être n'importe où dans
} l'arborescence DOM, tant qu'ils sont frères
d'un élément div.

Formatage du texte
❑ Le formatage du texte dans CSS consiste à utiliser des propriétés et des

valeurs qui permettent de modifier l’apparence et la disposition du
texte sur les pages web.
❑ Par exemple, vous pouvez changer la couleur, la taille, la police,

l’alignement, l’espacement, la décoration et la transformation du texte.
❑ Voici quelques propriétés CSS courantes pour le formatage du texte :

Formatage du texte : font-family
❑ font-family : Cette propriété permet de spécifier la police de caractères à

utiliser pour le texte. Elle peut prendre une liste de noms de police, séparés
par des virgules, pour indiquer une liste de polices de secours à utiliser si la
police principale n'est pas disponible.
❑ Remarque : Si le nom de la police comporte plusieurs mots, il doit être
entre guillemets, comme : "Times New Roman".

❑ Par exemple, font-family : Arial, Helvetica, sans-serif; utilisera la police

Arial si elle est disponible, sinon Helvetica, sinon une police sans serif par
défaut.
p{
font-family: Arial, Helvetica, sans-serif;
}

❑ Quelques exemples de polices :
Famille de Polices Générique Exemples de Noms de Polices
Serif Times New Roman
Georgia
Garamond
Sans-serif Arial
Verdana
Helvetica
Monospace Courier New
Lucida Console
Monaco
Cursive Brush Script MT
Lucida Handwriting
Fantasy Copperplate
Papyrus

Formatage du texte : font-size
❑ La propriété font-size permet de définir la taille de la police de caractères.
Vous pouvez utiliser des valeurs absolues (en pixels « px », points « pt
»,cm, etc.) ou des valeurs relatives (comme em ou rem, %).
❑ Par exemple, font-size: 2em; rendra le texte deux fois plus grand que la
taille de la police de son élément parent3.
h1 { p{
font-size: 24px; font-size: 1.2em;
} }
Formatage du texte : font-size
Unité de Taille de Police Description
Pixels (px) Unité de mesure fixe basée sur les pixels de l'écran.
Em (em) Unité relative à la taille de la police de l'élément parent.
Pourcentage (%) Unité relative à la taille de la police de l'élément parent en pourcentage.

Unité de mesure couramment utilisée pour la taille de police en impression
Point (pt) (point = 1pt = 1/72 in(de pouce)).
Unité de mesure en impression équivalant à 12 points (1/6 de pouce).
Pica (pc) (pica = 1pc = 12pt)
Millimètre (mm) Unité de mesure basée sur la longueur réelle d'un millimètre.
Centimètre (cm) Unité de mesure basée sur la longueur réelle d'un centimètre.
Unité relative à la taille de la police de l'élément racine (<html>), indépendante

Rem de la taille de police de l'élément parent.
Viewport Height (vh) Unité relative à la hauteur de la fenêtre d'affichage.
Viewport Width (vw) Unité relative à la largeur de la fenêtre d'affichage.

Formatage du texte : font-weight
❑ La propriété font-weight permet de définir l'épaisseur de la police. Les
valeurs courantes sont normal (par défaut) et bold (gras) pour une police
plus épaisse.
❑ Exemple :
h1 {
font-weight: bold;
}

Formatage du texte : font-style
❑ La propriété font-style est utilisée pour définir le style de la police de
caractères d'un texte. Elle permet de spécifier si le texte doit être affiché en
italique, en oblique ou en style normal. Cette propriété est principalement
utilisée pour spécifier du texte en italique. Cette propriété a trois valeurs
possibles :
▪ normal : Le texte est affiché normalement
▪ italique : Le texte est affiché en italique
▪ oblique : Le texte est « penché » (l'oblique est très similaire à l'italique,
mais moins pris en charge) Pr. Youssef DOUZI 54 FSO
Formatage du texte : font-style
p.normal {
font-style: normal; /*Pour afficher le texte en style normal (par défaut)*/
}
p.italic {
font-style: italic; /*Pour afficher le texte en italique*/
}
p.oblique {
font-style: oblique; /*Pour afficher le texte en oblique*/
}

Formatage du texte : font
❑ Il est également possible de combiner plusieurs propriétés de style

en utilisant la propriété font abrégée.
p{
font: font-style font-variant font-weight font-size/line-height font-family;
}

Formatage du texte : font
p{
font: italic bold 14px/1.5 Arial, sans-serif;
}
❑ Dans cet exemple, le texte sera affiché en italique et en gras avec une taille
de police de 14 pixels, un interligne de 1.5 et une police de caractères Arial
ou une police sans-serif de secours.
❑ NB : N'oubliez pas que la disponibilité des styles et des polices peut varier
en fonction du navigateur et du système d'exploitation utilisés.

Formatage du texte : Exemple font
<!DOCTYPE html>
<html>
<head>
#p4 {
<style>
font: italic bold 30px/1.5 Arial, sans-serif;
#p1 {
font-family:Arial, Helvetica, sans-serif;
}
font-size: 50px;
</style>
font-weight : bold;
</head>
font-style: normal;
<body>
}
#p2 {
<p id="p1">paragraphe 1</p>
font-size: 3em;
font-weight : bold;
font-style: italic;
}
#p3 {
</body>
font-size: 500%;
</html>
font-weight : bold;
font-style: oblique;
}

Formatage du texte : Exemple font

Formatage du texte : text-align
❑ La propriété text-align permet de définir l'alignement horizontal du texte.
Les valeurs courantes sont "left" (gauche-par defaut), "right" (droite),
"center" (centre), ou "justify" (justifié). Par exemple :
p{
text-align: center; /* Le text sera au centre*/
}

Formatage du texte : text-decoration
❑ La propriété text-decoration permet d'ajouter des décorations au texte, telles que
souligné (underline), barré (line-through), en exposant-ligne au-dessus (overline) ou
aucune décoration (none).
a{ a{
text-decoration: underline; text-decoration: line-through;
} }
❑ Vous pouvez également combiner plusieurs valeurs avec des espaces. Par exemple, text-
decoration: underline overline; appliquera un soulignement et un surlignement au texte.
h1 {
text-decoration: underline overline;
Formatage du texte : text-transform
❑ La propriété CSS text-transform est utilisée pour spécifier la transformation du texte dans un élément. Elle permet de
modifier la casse du texte.
❑ Voici les différentes valeurs possibles pour la propriété text-transform :
▪ none : C'est la valeur par défaut. Aucune transformation de casse n'est appliquée
▪ capitalize (capitales) : Transforme la première lettre de chaque mot en majuscule et les autres lettres en minuscules.
▪ uppercase (majuscules) : Convertit tout le texte en majuscules
▪ lowercase (minuscules) : Convertit tout le texte en minuscules
▪ inherit : Hérite de cette propriété de son élément parent.
❑ Exemple :
p{
text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;.
Formatage du texte : float
❑ La propriété CSS float est utilisée pour déplacer un élément HTML vers la gauche ou la
droite, tout en permettant aux autres éléments de s'aligner autour de lui.
❑ Voici comment utiliser la propriété float :
▪ float: left; ➔ Cela déplace l'élément vers la gauche et permet aux autres éléments de
s'aligner à sa droite.
▪ float: right; ➔ Cela déplace l'élément vers la droite et permet aux autres éléments de
s'aligner à sa gauche.
❑ Lorsque vous flottez un élément, les éléments suivants peuvent se positionner à côté de
lui. Cela peut être utile pour créer des mises en page avec plusieurs colonnes ou pour
positionner des éléments tels que des images à côté du texte.
Formatage du texte : float
.float-left {
float: left; <div class="float-left">Ceci est un élément flottant à gauche.</div>
} <p>Le texte ici s'enroule autour de l'élément flottant.</p>
.float-right {
float: right; <div class="float-right">Ceci est un élément flottant à droite.</div>
} <p>Le texte ici s'enroule autour de l'élément flottant.</p>

La couleur et le fond
❑ Dans cette partie, nous verrons comment modifier :

▪ la couleur du texte,
▪ couleur ou une image de fond,
▪ ajouter des ombres, ajuster les transparence.

La couleur et le fond : color
❑ La propriété CSS color est utilisée pour définir la couleur du texte à
l'intérieur d'un élément HTML. Vous pouvez spécifier la couleur en utilisant
différents formats de couleur, tels que les noms de couleur prédéfinis, les
valeurs hexadécimales ou les valeurs RGB.
p{
color: red; /*#FF0000 */
}
❑ Dans cet exemple, le texte à l'intérieur des balises <p> sera affiché en rouge.
(color: red;
FSO
ou color: #FF0000; rendront le texte en rouge)
Pr. Youssef DOUZI 66
La couleur et le fond : background-color
❑ La propriété background-color permet d’indiquer une couleur de fond à
un élément de la même manière que la propriété color.
❑ Exemple :
body {
/* On travaille sur la balise body, donc sur TOUTE la page */
background-color : black;
color : white; /* le texte de la page en blanc*/
}
La couleur et le fond : background-image
❑ La propriété background-image est utilisée pour définir une image comme

arrière-plan d'un élément HTML. Vous pouvez spécifier l'URL de l'image
que vous souhaitez utiliser en tant qu'arrière-plan.
❑ Voici comment utiliser la propriété background-image :
div {
background-image: url('chemin/vers/votre/image.jpg');
}

La couleur et le fond : background-image
❑url('chemin/vers/votre/image.jpg') : Dans cette partie de la règle CSS,

vous spécifiez le chemin vers l'image que vous souhaitez utiliser
comme arrière-plan. Vous pouvez utiliser une URL relative par rapport
à votre fichier CSS ou une URL absolue vers une image en ligne.
❑ Remarque : Assurez-vous de spécifier les chemins d'image corrects et
de fournir les formats d'image appropriés (par exemple, JPG, PNG,
GIF, etc.) pour que les images d'arrière-plan s'affichent correctement.
❑ Il est important de noter que la propriété background-image ne spécifie que l'image
d'arrière-plan. Pour définir d'autres propriétés d'arrière-plan telles que la couleur de fond, la
répétition de l'image, la position, etc., vous pouvez utiliser les propriétés associées comme
background-color, background-repeat, background-position, etc.
▪ background-repeat contrôle si l'image doit être répétée à l'intérieur de l'élément.
▪ background-size permet de spécifier comment l'image d'arrière-plan doit être
dimensionnée par rapport à l'élément (par exemple, "cover" pour couvrir tout l'élément
ou "contain" pour s'ajuster à l'intérieur de l'élément).
▪ background-position détermine l'emplacement de l'image d'arrière-plan à l'intérieur
de l'élément.
❑ La propriété background-repeat permet d’indiquer la répétition du fond, elle peut
prendre des valeurs comme :
▪ Repeat : le fond sera répété en mosaïque (par défaut).
▪ repeat-x : le fond sera répété uniquement sur la première ligne,
horizontalement.
▪ repeat-y : le fond sera répété uniquement sur la première colonne,
verticalement.
▪ no-repeat : le fond ne sera pas répété. L'image sera donc unique sur la page.

❑ La propriété background-position permet de définir la position de l'image d'arrière-plan
d'un élément HTML. La valeur de la propriété peut être un mot-clé, un pourcentage ou
une valeur en pixels.
❑ Les mots-clés suivants peuvent être utilisés pour définir la position de l'image d'arrière-
plan :
▪ top : l'image est positionnée en haut de l'élément.
▪ left : l'image est positionnée à gauche de l'élément.
▪ bottom : l'image est positionnée en bas de l'élément.
▪ right : l'image est positionnée à droite de l'élément.
▪ center : l'image est centrée à la fois horizontalement et verticalement.72
Pr. Youssef DOUZI
FSO
❑ Les pourcentages peuvent être utilisés pour définir la position de l'image d'arrière-plan
en fonction de la largeur et de la hauteur de l'élément. Par exemple, la valeur 50% 50%
positionnera l'image au centre de l'élément.
❑ Les valeurs en pixels peuvent être utilisées pour définir la position de l'image d'arrière-
plan en fonction du bord supérieur gauche de l'élément. Par exemple, la valeur 10px 10px
positionnera l'image à 10 pixels du bord supérieur et du bord gauche de l'élément.
❑ Il est également possible de combiner les mots-clés, les pourcentages et les valeurs en
pixels pour définir la position de l'image d'arrière-plan. Par exemple, la valeur top center
positionnera l'image au centre horizontalement et en haut de l'élément.

❑ Voici quelques exemples d'utilisation de la propriété background-position :
▪ background-position: left top; /* Image positionnée en haut à gauche */
▪ background-position: center center; /* Image centrée horizontalement et verticalement */
▪ background-position: right bottom; /* Image positionnée en bas à droite */
▪ background-position: 20px 30px; /* Image positionnée 20 pixels à droite et 30 pixels en
bas */
▪ background-position: 50% 25%; /* Image centrée horizontalement et positionnée à 25%
de la hauteur de l'élément */
▪ background-position: right 20% /* Image positionnée à droite et à 20% de la hauteur de
l'élément */

❑ Voici un exemple montrant l'utilisation combinée de background-image avec d'autres
propriétés d'arrière-plan :
div {
background-image: url("chemin/vers/image.jpg");
background-color: #f2f2f2;
background-repeat: no-repeat;
background-position: center;
}
❑ Dans cet exemple, l'arrière-plan de l'élément <div> sera défini avec l'image "image.jpg",
la couleur de fond sera définie sur #f2f2f2, l'image ne se répétera pas (no-repeat) et sera
centrée (center).
❑La propriété CSS opacity est utilisée pour contrôler le degré de transparence
d'un élément HTML et de son contenu. Elle prend une valeur numérique
comprise entre 0 et 1, où 0 signifie complètement transparent (invisible) et 1
signifie complètement opaque (pleinement visible).
div {
opacity: value; /* 0<=valeur<=1*/
}

❑ Il est important de noter que la propriété opacity affecte non seulement l'élément lui-
même, mais aussi tout son contenu, y compris les éléments enfants. Si vous souhaitez
rendre seulement le fond de l'élément transparent sans affecter son contenu, vous pouvez
utiliser la propriété background-color avec une valeur RGBA pour spécifier une
transparence sélective.
❑ Exemple en utilisant rgba() pour spécifier la couleur de fond avec une opacité :
element {
background-color: rgba(255, 0, 0, 0.5); /* Rouge avec 50% d'opacité */
}

Les bordures , les ombres et les marges
❑En CSS, vous pouvez utiliser les propriétés de bordure,

d'ombre et de marge pour contrôler l'apparence et
l'espacement des éléments HTML.

Les bordures , les ombres et les marges : Bordures
❑ Les bordures sont des lignes qui entourent un élément HTML. Elles peuvent être utilisées pour
ajouter un cadre ou une décoration à un élément.
❑ La propriété CSS border permet de définir les propriétés des bordures d'un élément. La valeur de la
propriété peut être une combinaison de trois valeurs, une pour chaque côté de l'élément :
▪ La largeur de la bordure, en pixels ou en pourcentage.
▪ Le style de la bordure, qui peut être solid (une bordure pleine - un trait simple), dashed (tirets),
dotted (pointillés), double (bordure double), groove (en relief), ridge (autre effet relief), inset
(effet 3D enfoncé) ou outset (effet 3D surélevé).
▪ La couleur de la bordure, qui peut être un nom de couleur, un code hexadécimal ou une valeur
RGB ou RGBA.


❑ Le code CSS suivant définira une bordure de 10 pixels de large, de style solide et de couleur rouge pour le
corps de la page :
body {
border: 10px solid red;
}
❑ Vous pouvez également spécifier les propriétés individuelles pour plus de contrôle, telles que border-
width, border-style, et border-color. Par exemple :
div {
border-width: 10px;
border-style: solid;
border-color: red;
❑Il est également possible de définir une bordure différente pour chaque côté
de l'élément. Si vous voulez mettre des bordures différentes, utiliser ces 4
propriétés :
▪ border-top : bordure en haut.
▪ border-bottom : bordure en bas.
▪ border-left : bordure à gauche.
▪ border-right : bordure à droite.

❑ Le code CSS suivant définira une bordure de 10 pixels de large, de style solide et de
couleur rouge pour le bord supérieur et le bord gauche de l'élément, et une bordure de 5
pixels de large, de style pointillé et de couleur bleue pour le bord inférieur et le bord droit
de l'élément :
body {
border-top: 10px solid red;
border-left: 10px solid red;
border-bottom: 5px dotted blue;
border-right: 5px dotted blue;
}
❑ La propriété border-radius permet de définir les arrondis des coins d'un élément HTML, comme des divs,
des boutons, des images, etc. La valeur de la propriété peut être un ou deux rayons, en pixels ou en
pourcentage.
❑ Si un seul rayon est spécifié, il s'appliquera à tous les coins de l'élément. Si deux rayons sont spécifiés, le
premier rayon s'appliquera aux coins supérieur gauche et inférieur droit, et le second rayon s'appliquera aux
coins supérieur droit et inférieur gauche.
❑ Par exemple, le code CSS suivant définira des coins arrondis de 10 pixels pour tous les côtés du corps de la
page :
body {
border-radius: 10px;
}
❑ Il est également possible de définir des coins arrondis différents pour chaque côté de l'élément. Par exemple,
le code CSS suivant définira des coins arrondis de 10 pixels pour le bord supérieur et le bord gauche, et des
coins arrondis de 5 pixels pour le bord inférieur et le bord droit :
body {
border-radius: 10px 5px 5px 10px;
}
element {
border-radius: 10px 20px 30px 40px; /* Coin supérieur gauche : 10px, coin supérieur droit : 20px,
coin inférieur droit : 30px, coin inférieur gauche : 40px */
}
❑ La propriété box-shadow permet de définir une ombre portée autour d'un élément HTML. L'ombre
portée est un effet visuel qui donne l'impression qu'un élément est projeté sur un plan.
❑ La propriété box-shadow prend plusieurs valeurs, qui spécifient l'ombre horizontale(le décalage
horizontal), l'ombre verticale, le flou, la propagation de l'ombre(spread), et la couleur de l'ombre.
❑ Voici comment vous pouvez utiliser box-shadow :
div {
box-shadow: horizontal-offset vertical-offset blur-radius spread-radius color;
}
div {
box-shadow: 5px 10px 5px 10px red ;
}
❑ Les différentes parties de la syntaxe sont les suivantes :
▪ horizontal-offset: spécifie le décalage horizontal de l'ombre par rapport à l'élément. Une valeur positive
indique un décalage vers la droite, tandis qu'une valeur négative indique un décalage vers la gauche.
▪ vertical-offset: spécifie le décalage vertical de l'ombre par rapport à l'élément. Une valeur positive
indique un décalage vers le bas, tandis qu'une valeur négative indique un décalage vers le haut.
▪ blur-radius: définit le flou de l'ombre. Plus la valeur est grande, plus l'ombre sera floue. Une valeur de 0
n'applique aucun flou.
▪ spread-radius: spécifie la propagation de l'ombre. Une valeur positive augmente la taille de l'ombre,
tandis qu'une valeur négative la réduit.
▪ color: détermine la couleur de l'ombre. Vous pouvez utiliser des noms de couleur, des valeurs
hexadécimales ou des valeurs RGB.

.element {
box-shadow: 5px 5px 10px #888; /* Ombre décalée de 5px
horizontalement et 5px verticalement, flou de 10px, couleur grise
*/
}

❑La propriété text-shadow est utilisée pour ajouter une ombre au texte d'un
élément HTML. Elle permet de créer des effets visuels intéressants pour le
texte.
❑Cette propriété prend comme valeurs les décalages horizontal et vertical de
l’ombre, le flou, l’étendue, la couleur et éventuellement le mot-clé inset pour
créer une ombre interne.
h1 {
text-shadow: 2px 2px #FF0000;
FSO
} Pr. Youssef DOUZI 89
Les bordures , les ombres et les marges : margin
❑ Les marges sont utilisées pour contrôler l'espacement autour d'un élément. Vous pouvez définir des marges
supérieure, inférieure, gauche et droite.
❑ La propriété margin accepte plusieurs valeurs pour spécifier ces marges. Par exemple :
▪ margin-top : Marge supérieure (en px ou %).
▪ margin-right : Marge droite (en px ou %).
▪ margin-bottom : Marge inférieure (en px ou %).
▪ margin-left : Marge gauche (en px ou %).
❑ Par exemple, le code CSS suivant définira des marges de 10 pixels pour tous les côtés de l'élément :
body {
margin: 10px;
}
Les bordures , les ombres et les marges : margin
❑ Il est également possible de définir des marges différentes pour chaque côté de l'élément.
Par exemple, le code CSS suivant définira une marge de 10 pixels pour le bord supérieur,
une marge de 5 pixels pour le bord gauche et le bord droit, et une marge de 20 pixels pour
le bord inférieur de l'élément :
div {
margin-top: 10px;
margin-right: 5px;
margin-bottom: 20px;
margin-left: 5px;
}

Les bordures , les ombres et les marges : padding
❑ Le padding est une propriété qui permet d'ajouter de l'espace à l'intérieur d'un élément, entre le contenu de
cet élément et ses bords. Il est souvent utilisé pour créer de l'espace entre le contenu d'un élément et ses
bordures.
❑ Pour définir le padding, on utilise la propriété padding. Cette propriété peut prendre une ou plusieurs
valeurs, qui peuvent être exprimées en pixels, en centimètres, en millimètres, en pouces ou en pourcentage.
❑ La syntaxe générale est la suivante :
div {
padding: top right bottom left;
}
❑ top, right, bottom, et left représentent la quantité de padding à appliquer respectivement à la partie
supérieure, droite, inférieure et gauche de l'élément.

❑Si une seule valeur est spécifiée, elle s'applique à tous les côtés de l'élément.
❑Si deux valeurs sont spécifiées, la première s'applique au haut et au bas (la
partie supérieure et inférieure), et la deuxième à la gauche et à la droite.
❑Si trois valeurs sont spécifiées, la première s'applique au haut (la partie
supérieure), la deuxième à la droite et à la gauche, et la troisième au bas (la
partie inférieure).
❑Si quatre valeurs sont spécifiées, elles s'appliquent dans l'ordre haut, droite,
bas et gauche.( top, right, bottom, left.)
Exemple 1 : Exemple 2 :
div { div {
padding: 10px; padding: 10px 20px;
} }
Exemple 3 : Exemple 4 :
div { div {
padding: 10px 20px 30px; padding: 10px 20px 30px 40px;
} }

Les Listes
❑La propriété list-style-type est utilisée pour spécifier le type de

marqueur ou de numérotation des éléments de liste (comme les
<ul> et <ol>) dans une page web. Cette propriété permet de
personnaliser l'apparence des listes non ordonnées (unordered lists)
et ordonnées (ordered lists).

Les Listes
❑ Pour les listes non ordonnées (<ul>) :
▪ disc : un disque noir (cercle plein ) (pa r défaut).
▪ circle : un cercle (vide).
▪ square : un carré (plein).
▪ none : aucune puce ne sera utilisée.
ul {
list-style-type: square; /* Utiliser des carrés comme marqueurs de liste */
}

Les Listes
❑ Pour les listes ordonnées (<ol>), le choix est vaste :
▪ decimal : des nombres 1, 2, 3, 4, 5...(par défaut)
▪ decimal-leading-zero : des nombres commençant par zéro (01, 02, 03, 04, 05...).
▪ Upper-roman : numérotation romaine, en majuscules (I, II, III, IV, V...)
▪ lower-roman : numérotation romaine, en minuscules (i, ii, iii, iv, v...)
▪ upper-alpha : numérotation alphabétique, en majuscules (A, B, C, D, E...)
▪ lower-alpha : numérotation alphabétique, en minuscules (a, b, c, d, e...)
▪ lower-greek : numérotation grecque.
ol {
list-style-type: decimal; /* Utiliser des numéros décimaux pour les listes ordonnées */
} 97 FSO
Pr. Youssef DOUZI

Technologie Du Web: Université Mohammed Premier Faculté Des Sciences - Oujda

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Technologie Du Web: Université Mohammed Premier Faculté Des Sciences - Oujda

Transféré par

Droits d'auteur :

Formats disponibles

Université Mohammed Premier

Faculté des Sciences - Oujda

Pr. Youssef DOUZI

FSO Pr. Youssef DOUZI 2

❑Le HTML définit la structure de la page, mais n'offre que

FSO Pr. Youssef DOUZI 3

❑Les sélecteurs CSS

❑Les propriétés CSS

❑Mise en page CSS

FSO Pr. Youssef DOUZI 4

FSO Pr. Youssef DOUZI 9

FSO Pr. Youssef DOUZI 10

<!DOCTYPE html> page.html

page.html <body >

FSO Pr. Youssef DOUZI 12

< style >

FSO Pr. Youssef DOUZI 13

FSO Pr. Youssef DOUZI 14

FSO Pr. Youssef DOUZI 17

FSO Pr. Youssef DOUZI 20

page1.html page2.html page3.html

FSO Pr. Youssef DOUZI 22

FSO Pr. Youssef DOUZI 23

FSO Pr. Youssef DOUZI 25

h2{ text-align: center;

FSO Pr. Youssef DOUZI 26

FSO Pr. Youssef DOUZI 27

<p class="text-important">Ceci est un paragraphe important.</p>

FSO Pr. Youssef DOUZI 30

<div id="mon-element-unique"> Contenu de l'élément </div>

FSO Pr. Youssef DOUZI 31

FSO Pr. Youssef DOUZI 32

éléments avec la classe "important," vous utiliseriez le sélecteur de classe .important.

FSO Pr. Youssef DOUZI 33

▪ Sélecteur d'identifiant : Il cible un élément spécifique avec un attribut id unique.

élément avec l'identifiant "header," vous utiliseriez le sélecteur d'identifiant #header.

FSO Pr. Youssef DOUZI 34

d'attributs spécifiques. Il est défini en utilisant la syntaxe [attribut] ou [attribut=valeur]. Par

FSO Pr. Youssef DOUZI 35

FSO Pr. Youssef DOUZI 36

(<h2>), vous utiliseriez le sélecteur d'adjacence h2 + p.

FSO Pr. Youssef DOUZI 37

FSO Pr. Youssef DOUZI 38

FSO Pr. Youssef DOUZI 39

Les pseudo-éléments sont précédés de deux deux-points.

FSO Pr. Youssef DOUZI 40

❑Ces sélecteurs CSS permettent de cibler des éléments de manière

FSO Pr. Youssef DOUZI 41

h1, h2, p { Plusieurs balises à la fois , signifie

/*les propriété et valeurs*/ tous les titres h1, h2 et tous les

.class { signifie touts les balises de la classe

*{ Signifie toutes les balises sans

p em { signifie toutes les balises <em>

/*les propriété et valeurs*/ situées à l'intérieur d'une balise

a [title]{ Signifie tous les liens <a> qui

/*les propriété et valeurs*/ possèdent un attribut title et avoir

} exactement pour valeur val

a [title = "val"]{ Signifie tous les liens <a> qui

/*les propriété et valeurs*/ possèdent un attribut title et avoir

} exactement pour valeur val

/*les propriété et valeurs*/ possèdent un attribut title et

} contient la valeur val

div > img{ Signifie tous les éléments enfant

/les propriété et valeurs/ tous les titres h1, h2 et tous les

/les propriété et valeurs/ situées à l'intérieur d'une balise

/les propriété et valeurs/ possèdent un attribut title et avoir

/les propriété et valeurs/ possèdent un attribut title et avoir

/les propriété et valeurs/ possèdent un attribut title et

/les propriété et valeurs/ <img> appartenant directement