Scribd
Importer
7 vues19 pages

Introduction aux feuilles de style CSS

Ce document définit CSS comme un langage permettant de styliser les pages web et complétant le HTML. Il présente les différentes méthodes d'intégration du CSS ainsi que la syntaxe de base avec des balises, propriétés, valeurs. Le document contient également des exemples pratiques.

Transféré par

Marwa Jarray
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
7 vues19 pages

Introduction aux feuilles de style CSS

Ce document définit CSS comme un langage permettant de styliser les pages web et complétant le HTML. Il présente les différentes méthodes d'intégration du CSS ainsi que la syntaxe de base avec des balises, propriétés, valeurs. Le document contient également des exemples pratiques.

Transféré par

Marwa Jarray
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

27/10/2023

Définition

Le langage HTML set à présenter le contenu des sites web mais


il est limité en terme de la mise en forme.
CSS : Cascading Style Sheets (pour Feuilles de style en cascade),
c'est cet autre langage qui vient compléter le HTML. Il s’agit
Cascading Style Sheets d’un langage de style qui permet de gérer la mise en forme de
des site web.
CSS HTML (Pas de CSS) HTML + CSS

Enseignante: Naimi Eyaa


Email : naimieyaa31@[Link]

67

1 2

Utilisation Utilisation

L’intégration de code CSS peut se faire en trois méthodes 2- Dans l'en-tête <head> du fichier HTML entre la balise <style>
différentes : et </style> [Link]
1- Dans un fichier avec l’extension .css ([Link] par exemple) <html>
<head>
(méthode la plus recommandée). Créer le fichier [Link] dans le <title>titre de la page</title>
même dossier que la page HTML, sinon spécifier le chemin du <meta content="text/html; charset=UTF-8" />
fichier (mon_dossier\...\[Link]). mon_dossier_site
<style>
h1 {
color: green;
[Link] }
<html> body {
<head> [Link] background-color: yellow;
<title>titre de la page</title> }
<meta content="text/html; charset=UTF-8" /> h1{ </style>
<link rel="stylesheet" type="text/css" href="[Link]"> color: green;
</head> } </head>
<body> body{ <body>
<h1> voici un titre</h1> background-color: yellow; <h1> voici un titre </h1>
</body> } </body>
</html> 68 </html> 69

3 4

1
27/10/2023

Utilisation Utilisation

3- Directement dans les balises du fichier HTML via un attribut Le même code CSS est indiqué une fois pour toutes dans un
style (méthode la moins recommandée). fichier CSS : c'est plus simple !
[Link]
<html>
La première méthode et Site
<head> beaucoup plus pratique car on
<title>titre de la page</title> peut appliquer la même mise
<meta content="text/html; charset=UTF-8" /> Les paragraphes sont
</head> en forme sur toutes les balises en bleu
<body style="background-color: yellow"> qu’on veut, alors les autres
<h1 style="color: green"> voici un titre </h1>
</body>
méthodes ne le permettent
[Link]
</html> pas. Il faut définir le style pour
Les trois méthodes donnent chaque balise.
même résultat

[Link] [Link] [Link]


70 71

5 6

Syntaxe de base Syntaxe de base

Schématiquement, une feuille de style CSS ressemble donc à ça Exemple(html+css)


[Link] [Link]
:
<html> h1 {
Syntaxe [Link] <head> color : blue ;
balise { h1 { <title>titre de la page</title> }
<meta content="text/html; charset=UTF-8" /> b{
propriété_1 : valeur_1 ; color : green ; <link rel="stylesheet" type="text/css" href="[Link]"> color : blue ;
propriété_2 : valeur_2 ; } </head> }
… body { <body>
propriété_n : valeur_n ; background-color : yellow ; <h1> voici un titre en bleu </h1>
} } <h2> ce mot <b> bonjour</b> sera en bleu </h2>
</body>
</html>
On commence par le nom de la balise (par exemple h1), on met
les propriétés (une ou plusieurs) et valeurs entre deux accolades
« { } ». Chaque propriété est suivie du symbole "deux-points"
« : » puis de sa valeur correspondante. Enfin, chaque ligne se
termine par un point-virgule « ; ». 72 73

7 8

2
27/10/2023

Syntaxe de base Syntaxe de base

Si plusieurs (≥2) balises doivent avoir la même mise en forme. •Les commentaires dans du CSS : pour insérer un commentaire
On déclare les noms des balises et on les sépare par une en CSS Tapez /* suivi de votre commentaire, puis */ pour
virgule « , » comme suit : ces deux fichiers sont équivalents. terminer votre commentaire. Le commentaire ne s'interprète
[Link] pas.
h1 { [Link]
color : blue ;
/* Un commentaire Appliquer un style à une balise
} [Link]
Ce fichier est du CSS (p, h1 ,h2, …) cela implique que
h2 { Equiv. h1, h2, b { */
color : blue ; color : blue ; TOUS les paragraphes soient
} } h1 { écrits par exemple en bleu.
color : blue ; /* Les titres h1 seront
b{
bleus */ Comment appliquer un style
color : blue ;
}
} pour que seulement certains
h2 { paragraphes soient écrits d'une

74
color : blue ; /* Les titres h2 seront
bleus */
}
manière différente
!? 75

9 10

Class et Id Class et Id
[Link]
•Class : On peut placer notre code CSS dans un attribut style Notez que la liste doit être placée à .niveau1{
sur la balise que l'on vise (méthode 3), mais c’est moins color : blue ;
l'intérieur de <body> votre code ici </body>. }
recommandé (il vaut mieux utiliser un fichier CSS externe
(méthode 1)).
Je ne mets pas tout le code de la page à .niveau2{
•Pour résoudre ce problème on va utiliser deux attributs partir de maintenant pour rester lisible color : red;
}
spéciaux qui fonctionnent sur touts les balises : class et id. .introduction{
<balise class="un_nom_identifiant _la_balise" > ... </balise> Exemple color : blue ;
[Link] }
<balise class="un_nom_identifiant _la_balise />
<h1 class= "niveau1"> voici un titre en bleu </h1> .conclusion{
les attributs class et id sont presque identiques. Il y a <h1 class= "niveau2"> voici un titre en rouge</h1> color : red;
seulement une petite différence. On va le voir tout de suite. Ils <p class= "introduction"> ...voici un paragraphe en bleu... </p> }
s’appliquent sur n’importe quelle balise HTML. <p class= "conclusion"> ...voici un paragraphe en rouge... </p>
[Link]
Pour appliquer ça en CSS, Ce qui donne : voici un titre en bleu
indiquez le nom de votre classe .un_nom_identifiant _la_balise { Les mêmes balises <h1> et <p> voici un titre en rouge
propriété : valeur ;
en commençant par un point, }
avec une mise en forme ...voici un paragraphe en bleu...
(pas d’espace) comme suit : 76 différente. ...voici un paragraphe en rouge... 77

11 12

3
27/10/2023

Class et Id La sélection

•Id: il fonctionne exactement de la même manière que class, à En CSS, le plus difficile est de savoir cibler le texte dont on veut
un détail près : il ne peut être utilisé qu'une fois dans le code. changer la forme. Pour cibler (sélectionner) les éléments de la
•En pratique, nous ne mettrons des id que sur des éléments page à modifier, on utilise ce qu'on appelle des sélecteurs. Il
qui sont uniques sur votre page, comme par exemple le logo. existe des dizaines d'autres façons de cibler des balises
<balise id="un_nom_identifiant _la_balise" > ... </balise> [Link]
<balise id="un_nom_identifiant _la_balise /> h1 { Une seule balise à la fois , signifie tous
/*les propriété et valeurs*/ les paragraphes
[Link]
Pour appliquer ça en CSS, }
précéder le nom de l'id par un #un_nom_identifiant _la_balise {
propriété : valeur ; [Link]
dièse #, (pas d’espace) comme /*et autres …*/ h1, h2, p { Plusieurs balises à la fois , signifie tous
suit : } /*les propriété et valeurs les titres h1, h2 et tous les paragraphes
}
[Link]
Deux balises peuvent avoir le même nom avec l'attribut class. .class { signifie touts les balises de la classe
Un nom d'id doit en revanche être unique dans la page HTML. /*les propriété et valeurs class
78 79
}

13 14

La sélection La sélection
[Link] [Link]
#id { signifie touts les balises de l’identifiant a [title] { Signifie tous les liens <a> qui
/*les propriété et valeurs*/ id /*les propriété et valeurs*/ possèdent un attribut title
} }

[Link] [Link]
*{ Signifie toutes les balises sans a [title= "valeur"] { Signifie tous les liens <a> qui
/*les propriété et valeurs exception /*les propriété et valeurs possèdent un attribut title et avoir
} } exactement pour valeur valeur
[Link] [Link]
p em { signifie toutes les balises <em> situées a [title*= "valeur"] { Signifie tous les liens <a> qui
/*les propriété et valeurs à l'intérieur d'une balise <p> /*les propriété et valeurs possèdent un attribut title et avoir la
} } contient la valeur valeur
[Link] [Link]
h1 + p{ div > img { Signifie tous les éléments enfant
signifie toutes les premières balises <p> /*les propriété et valeurs
/*les propriété et valeurs <img> appartenant directement au
située après un titre <h1>. }
} 80 parent <div> 81

15 16

4
27/10/2023

Formatage du texte Formatage du texte

Dans cette partie on va voir comment modifier la taille du •Une taille relative : en pourcentage, "em" , "%" ou "ex",
texte, changer la police, aligner le texte.. cette technique a l'avantage d'être plus souple, elle
• La taille : la propriété font-size permet d’indiquer la taille recommandée car le texte s'adapte alors plus facilement
du texte : aux préférences de tous les visiteurs. Elle s’indique en
•Une taille absolue : en pixels, en centimètres ou utilisant les mots suivants:
p{
millimètres. • xx-small : minuscule
/* paragraphes de petite taille*/
• x-small : très petit font-size : small ;
[Link]
• small : petit }
• medium : moyen
<p > voici un paragraphe de 16 pixels, Les lettres auront une taille de 16 pixels </p> h1 {
• large : grand /* titres de taille moyenne*/
[Link]
• x-large : très grand font-size : medium;
p{
font-size : 16px ;
• xx-large : gigantesque. }
}
Ce qui donne : On peut utiliser l’unité em p{
(sans espace) font-size : 1.8em;
voici un paragraphe de 16 pixels, Les lettres auront une taille de 16 pixels 82
} 83

17 18

Formatage du texte Formatage du texte

• La police : la propriété font-family permet d’indiquer la • La police : la propriété font-family permet d’indiquer la
police du texte (type de texte). police du texte (type de texte).
[Link]
balise { balise {
font-family : police ; ou font-family : police1, police2, police3, plice4 ; <p > voici un paragraphe de police Impact ou autres </p>
} } [Link]
p{
Pour éviter qu'il n'y ait de problème si l'internaute n'a pas la font-family: Impact, "Arial Black", Arial, Verdana, serif ;
même police que vous, on précise en général plusieurs }
noms de police, séparés par des virgules. En voici une liste Cela signifie : "Mets la police Impact, ou, si elle n'y est pas, Arial
des polices les plus courantes : Black, ou sinon Arial, ou sinon Verdana, ou si rien n'a
marché mets une police standard (serif)".
Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Si la police se compose de deux mots, mettez la entre
Impact, Times New Roman, Trebuchet MS, Verdana, Courier guillemets ("la police").
New, Lucida Console Ce qui donne :
84
voici un paragraphe de police Impact ou autres 85

19 20

5
27/10/2023

Formatage du texte Formatage du texte

• Mettre en italique : la propriété font-style permet de • Mettre en gras : la propriété font-weight permet de mettre
mettre le texte en italique, elle peut prendre 3 valeurs : le texte en gras, elle peut prendre 2 valeurs :
• italic : le texte sera mis en italique. • bold : le texte sera en gras.
• oblique : le texte sera aussi mis en italique (en penchant • normal : le texte sera écrit normalement (par défaut).
les lettres).
• normal : le texte sera normal (par défaut).
[Link] [Link] [Link] [Link]
<h1 > voici un titre en italique </h1> h1{ <h1 > voici un titre en gras</h1> h1{
<h2 > voici un titre en oblique</h2> font-style: italic ; <h2 > voici un titre normal </h2> font-weight: bold;
<h3 > voici un titre normal </h3> } }
h2{ h2{
Ce qui donne : font-style: oblique ; Ce qui donne : font-weight: normal;
} }
voici un titre en italique h3{ voici un titre en gras
font-style: normal;
voici un titre en oblique } voici un titre normal
voici un titre normal 86 87

21 22

Formatage du texte Formatage du texte

• Transformer le texte: la propriété text-transform permet de • L’indentation d’un texte: la propriété text-indent permet de
transformer le texte en 5 valeurs possibles : décaler le texte vers la droite et vers la gauche, soit en pixels
• Lowercase : en minuscules. (Xpx) (-Xpx) ou en pourcentage (%).
• Uppercase : en majuscules ; .droite{
• Capitalize : la première lettre de chaque mot en majuscule. <h2 class="droite"> voici un texte indenté vers la text-indent : 50px;
droite </h2> }
• Inherit : Hérite de la valeur de l’élément parent ; .gauche{
<h2 class="gauche"> voici un texte indenté vers la
• None : sans de transformation. gauche</h2> text-indent : -40px;
<h2 class="maj"> voici un titre en majuscule </h2> .maj{ }
<h2 class="min"> VOICI UN TITRE EN MINUSCULE </h2> text-transform : uppercase;
<h2 class="cap"> voici un titre en « Capitalize » </h2> }
.min{
text-transform : lowercase;
}
.cap{
text-transform : capitalize ;
}

88 89

23 24

6
27/10/2023

Formatage du texte Formatage du texte

• Soulignement et autres décorations: la propriété text- •L'alignement: la propriété text-align indique l'alignement
decoration permet entre autres de souligner le texte, elle désiré, elle peut prendre 4 valeurs :
peut prendre 4 valeurs : left : le texte sera aligné à gauche (par défaut).
underline: souligné , line-through : barré center : le texte sera centré.
overline: ligne au-dessus , None : normal (par défaut) right : le texte sera aligné à droite.
[Link]
<h1 class="souligne" > voici un titre souligné</h1> justify : le texte sera justifié.
p{
<h1 class="barre" > voici un titre barré</h1> [Link] text-align : justify;
<h1 class="ligne-dessus" > voici un titre avec une ligne au-dessus</h1>
<h3 > Cours HTML </h3> }
.souligne{ <p> est l’abréviation de HyperText Markup h3 {
text-decoration: underline; Language, soit en français « langage text-align : left;
Ce qui donne :
} hypertexte de balisage ». Ce langage a été color : red;
.barre{ voici un titre souligné créé en 1991 et a pour fonction de }
text-decoration: line-through; structurer et de donner du sens à du h6 {
} contenu. Ils nous permet de créer des sites text-align : right;
voici un titre barré web. color : blue;
.ligne-dessus{
text-decoration: overline; </p> text-decoration: underline;
} voici un titre avec une ligne au-des90sus <h6 > Réaliser par : Mr [Link] </h6> } 91

25 26

Formatage du texte Formatage du texte

•Les flottants: la propriété float permet de flotter un élément


autour du texte (habillage), elle peut prendre 2 valeurs :
• left : l'élément flottera à gauche.
• right : l'élément flottera à droite.
[Link] [Link]
<p> <img src="[Link]" .imageflottante {
class="imageFlottante" alt="image html" /> float : right;
Html est l’abréviation de HyperText Markup width: 100;
Language, soit en français « langage height: 60;
hypertexte de balisage ». Ce langage a été }
Remarque créé en 1991 et a pour fonction de
l'alignement du texte ne s’applique pas sur une balise inline structurer et de donner du sens à du p{
contenu. Ils nous permet de créer des sites text-align: justify;
( <span>, <a>, <em>, <strong>...). Il s’applique seulement sur des web. }
balises de type block (<p>, <div>, <h1>, <h2>, ...), car on ne peut </p>
pas par exemple modifier l'alignement de quelques mots au
milieu d'un paragraphe ! 92 Ce qui donne : (page suivante) 93

27 28

7
27/10/2023

Formatage du texte 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.

▪ Couleur du texte : la propriété color permet d’indiquer


une couleur à un élément, soit en utilisant le nom de la
couleur(en anglais) soit en notation hexadécimale
(#xxxxxx), ou la méthode RGB(rgb(rouge, vert, bleu)).

balise {
color : couleur ;
}

94 95

29 30

La couleur et le fond La couleur et le fond


[Link] [Link]
Pour choisir une couleur en utilisant la méthode RGB, aller <h3 class="titre"> Cours HTML </h3> .introduction {
dans le logiciel Paint puis dans Modifier les couleurs et faites <h3 class="introduction" > Introduction</h3> color : maroon;
bouger les curseurs pour sélectionner la couleur qui vous <p class="paragrapheIntro"> }
Html est l’abréviation de HyperText Markup .paragrapheIntro {
intéresse. Ici la couleur est : rgb(61, 45, 208). En ce qui Language, soit en français « langage hypertexte color : blue;
concerne la méthode hexadécimale vous pouvez installer le de balisage ». Ce langage a été créé en 1991 et a text-align: justify;
logiciel boîte à couleurs. pour fonction de structurer et de donner du }
sens à du contenu. Ils nous permet de créer des .conclusion {
sites web. color : #0000FF;
</p> }
<h3 class="conclusion" > Conclusion </h3> .paragrapheConclu {
<p class="paragrapheConclu"> color : maroon;
Html est l’abréviation de HyperText Markup text-align: justify;
Language, soit en français « langage hypertexte }
de balisage ». Ce langage a été créé en 1991 et a
pour fonction de structurer et de donner du .titre{
sens à du contenu. Ils nous permet de créer des color : rgb(238,186,3);
sites web. text-align :center;
</p> }
96 97
Ce qui donne : (page suivante)

31 32

8
27/10/2023

La couleur et le fond La couleur et le fond

• Couleur du texte • Couleur de fond: 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. balise {
background-color : couleur ;
}
[Link] [Link]
<h3 > body {
Un titre blanc au sein du noir /* On travaille sur la balise body, donc sur TOUTE
</h3> la page */
<h3 > background-color : black;
L’arrière plan est en noir !!! color : white; /* le texte de la page en blanc*/
</h3> }

98 99

33 34

La couleur et le fond La couleur et le fond


• Couleur de fond: la valeur linear-gradient de propriété
background permet d’indiquer un fond à un élément en • En CSS, si vous donnez un style à une balise, tous les sous
dégradé de couleur. Elle admet 3 paramètres : éléments qui se trouvent à l'intérieur auront le même
• direction du dégradé: to bottom (Par défaut) (vers le bas), to style.
left (vers la gauche), to left bottom (incliné vers la gauche et • Si vous donnez un style à une balise qui se trouve à
vers le bas) etc... l’intérieur d’une autre, ce style aura la priorité.
• couleur de début: la couleur du début (spécifiée grâce à [Link] [Link]
l'une des 4 méthodes). <p> body {
• couleur de fin: la deuxième couleur du dégradé. L’arrière plan est en <em> background-color : yellow;
body { jaune</em> !!! /* le texte de la page en bleu*/
background:linear-gradient(red , yellow , blue ,orange ); </p> color : blue;
/* on peut spécifier les % de chaque zone */ }
/*background:linear-gradient(red 0% , yellow 20% , blue 30% ,orange 20% );*/ em{
} background-color : red;
/* La couleur de fond de <em> est prioritaire à celle de
toute la page*/
}
100 101

35 36

9
27/10/2023

La couleur et le fond La couleur et le fond


• Image de fond: la propriété background-image permet • Image de fond
d’indiquer une image de fond à un élément, Comme valeur, on
doit lui donner url("nom_de_l_image.extension").
[Link]
balise {
<p > background-image :url("[Link]");
<!--L’arrière plan de cette paragraphe }
est une image -->
Html est l’abréviation de HyperText [Link]
Markup Language, soit en français « body {
langage hypertexte de balisage ». Ce background-image : url("[Link]");
langage a été créé en 1991 et a color : white;
pour fonction de structurer et de }
donner du sens à du contenu. Ils p{
nous permet de créer des sites web. background-image : url("[Link]");
</p> text-align : justify;
}

102 103
Ce qui donne : (page suivante)

37 38

La couleur et le fond La couleur et le fond


•Options disponibles pour le fond: la propriété CSS •Options disponibles pour le fond: la propriété CSS
background-attachment permet de "fixer" le fond, elle peut background-repeat permet d’indiquer la répétition du fond,
prendre 2 valeurs : elle peut prendre 4 valeurs :
• fixed : l'image de fond reste fixe. • no-repeat : le fond ne sera pas répété. L'image sera donc
• scroll : l'image de fond défile avec le texte (par défaut). unique sur la page.
body { body { • repeat-x : le fond sera répété uniquement sur la première
background-image : url("[Link]"); background-image : url("[Link]"); ligne, horizontalement.
background-attachment : fixed; background-attachment : scroll;
} }
• repeat-y : le fond sera répété uniquement sur la première
colonne, verticalement.
• repeat : le fond sera répété en mosaïque (par défaut).

balise {
background-image : url("[Link]";
background-repeat : no-repeat ;
}
104 105

39 40

10
27/10/2023

La couleur et le fond La couleur et le fond


body { body {
background-image : url("[Link]"); background-image : url("[Link]"); •Options disponibles pour le fond: la propriété CSS background-
background-repeat: no-repeat; background-repeat: repeat; position permet d’indiquer la position de l’image du fond, cette
} }
propriété est intéressante si un fond ne se répète pas, on indique
deux valeurs en pixels ou en anglais (top, bottom, left, center,
right(aussi la combinaison)) pour indiquer la position du fond par
rapport au coin supérieur gauche de la page (ou paragraphe).
balise { 0
background-image : url("[Link]") ;
body { body { background-repeat : no-repeat ; 30px
background-image : url("[Link]"); background-image : url("[Link]"); background-position: 30px 50px; fond
background-repeat: repeat-x; background-repeat: repeat-y; }
} }
balise { top
background-image : url("[Link]") ; fond(top,right)
left center right
background-repeat : no-repeat ;
background-position: top right;
} bottom
106 107

41 42

La couleur et le fond La couleur et le fond


body { body {
background-image : url("[Link]"); background-image : url("[Link]"); •Plusieurs images de fond: on peut indiquer plusieurs images de
background-repeat: no-repeat; background-repeat: no-repeat; fond à un élément, il suffit de séparer les déclarations par une
background-position: top right; background-position: 100px 50px;
} } virgule « , » et on combine les valeurs. La première image de cette
liste sera placée par-dessus les autres.
body{
background : url("[Link]") fixed no-repeat 400px 30px, url("[Link]")
no-repeat ;
}
p{ body{
background-image : url("[Link]"); background-image : url("[Link]");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: left;
} }

108 109

43 44

11
27/10/2023

La couleur et le fond Les bordures , les ombres et les marges


•La transparence : la propriété CSS opacity permet d’indiquer •Options disponibles pour les bordeurs : la propriété CSS border
permet de jouer très facilement avec les niveaux (entre 0 et 1) de permet d’indiquer la bordures pour décorer à un élément, elle peut
transparence des éléments. Avec une valeur de 1, l'élément sera prendre 3 valeurs :
totalement opaque : c'est le comportement par défaut. Avec une •La largeur : une valeur en pixels (comme 2px).
valeur de 0, l'élément sera totalement transparent. •La couleur : un nom de couleur ("black", "red"...), soit (#FF0000),
p{ p{ soit une valeur rgb (rgb(198, 212, 37)). balise {
background-color : black ; background-color : black ; •Le type de bordure : peut être : border : largeur couleur type ;
color : white; color : white; • none : pas de bordure (par défaut) }
opacity : 0.3; opacity : 0.9;
} } • solid : un trait simple.
• dotted : pointillés.
• dashed : tirets.
• double : bordure double.
• groove : en relief.
• ridge : autre effet relief.
• inset : effet 3D enfoncé.
110
• outset : effet 3D surélevé 111

45 46

Les bordures , les ombres et les marges Les bordures , les ombres et les marges
body{ h3{
border : 2px blue solid; border: 2px orange dashed ; •Options disponibles pour les bordures : en utilisant la propriété CSS
} } border à un élément, ce dernier aura la même bordure aux 4 côtés.
si vous voulez mettre des bordures différentes, utiliser ces 4
propriétés :
• border-top : bordure en haut. p{
border-top : 5px solid black;
• border-bottom : bordure en bas. border-bottom : 5px solid maroon;
• border-left : bordure à gauche. border-left : 4px solidred;
• border-right : bordure à droite. border-right : 4px solid green;
p{ table,td{ }
border: 4px yellow double; border: 2px yellow groove;
} }

112

47 48

12
27/10/2023

Les bordures , les ombres et les marges Les bordures , les ombres et les marges
•Options disponibles pour les bordures : la propriété CSS border- •Options disponibles pour les ombres : la propriété CSS box-shadow
radius permet d'arrondir les angles de n'importe quel élément en permet d'ajouter un ombre à élément en indiquant en pixels trois
indiquant la taille en pixels pour tous les coins (Xpx) ou bien pour valeurs et une couleure de cet ordre 1px 2px 3px 4.
chaque coin (Xpx Xpx Xpx Xpx). • 1. Le décalage horizontal de l'ombre.
p{ • 2. Le décalage vertical de l'ombre.
p{ border: 3px blue solid; • 3. L'adoucissement du dégradé.
border: 3px orange solid; border-radius : 8px 20px 8px 20px ;
border-radius : 15px ; background-color: orange;
• 4. La couleur de l'ombre. p{
text-align: justify; text-align: justify; p{ order: 3px black dashed;
} } border : 3px blue solid; box-shadow: 10px 6px 0px blue;
box-shadow : 6px 6px 1px maroon; border-radius: 10px;
border-radius : 10px; background-color: orange;
} }

114

49 50

Les bordures , les ombres et les marges Création d'apparences dynamiques


•Options disponibles pour les ombres : la propriété CSS text-shadow le CSS nous permet aussi de modifier l'apparence des éléments de
permet d'ajouter un ombre sur les lettres de votre texte. Les valeurs façon dynamique lors du survol, clic …
fonctionnent exactement de la même façon que box-shadow. •Au survol : pseudo-formats CSS : hover permet de modifier
p{ h2{
l’apparence quand la souris est sur un élément.
a{ /* Liens non survolés*/
text-shadow: 1px 2px 5px black; text-shadow: 1px 2px 5px black; <h2> Quelques sites utiles </h2> text-decoration: none;
text-align: justify; text-align: justify; color: red;
Visiter le site de <a
border: 3px blue dashed; background: orange; }
href="[Link] a:hover{/* Liens survolés*/
} } Classrooms </a> <br> text-decoration: underline;
Visiter le site de <a color: blue;
href="[Link] }
</a> <br> p{/* paragraphe non
survolés*/
Visiter le site de <a text-decoration: none;
href="[Link] color: red;
</a> text-align: justify;
<h2> Cours HTML</h2> }
<p> HTML est l’abréviation de HyperText Markup p:hover{/* paragraphe
survolés*/
Language, soit en français « langage hypertexte de
color: blue;
balisage ». Ce langage a été créé en 1991. background: orange;
116 </p> 117
}

51 52

13
27/10/2023

Création d'apparences dynamiques Création d'apparences dynamiques


• Au survol • Au clic : pseudo-formats CSS : active permet d'appliquer un style
particulier au moment du clic.
<h2> Quelques sites utiles </h2> a{ /* Liens sans clic*/
text-decoration: none;
Visiter le site de <a color: red;
href="[Link] }
Classrooms </a> <br> a:active{/* Liens lors clic*/
Visiter le site de <a text-decoration: underline;
href="[Link] color: blue;
}
</a> <br>
p{/* paragraphe sans clic*/
Visiter le site de <a text-decoration: none;
Au survol
href="[Link] color: black;
</a> text-align: justify;
<h2> Cours HTML</h2> }
Au survol
<p> HTML est l’abréviation de HyperText Markup p:active{/* paragraphe
Au survol sélectionné */
Language, soit en français « langage hypertexte de color: blue;
balisage ». Ce langage a été créé en 1991. background: gray;
</p> }

118 119

53 54

Création d'apparences dynamiques Création d'apparences dynamiques


• Au clic • Lors de la sélection: pseudo-formats CSS : focus permet
d'appliquer un style particulier au moment de la sélection.
<h3> Nom </h3> .prenom:focus {
<input class="nom" value="Vert si focus"> background: orange;
<h3> Prénom </h3> color: blue;
<input class="prenom" value="Rouge si focus"> }
.nom:focus {
background: yellow;
color: lime;
}
Au clic

Au clic

120 121

55 56

14
27/10/2023

Création d'apparences dynamiques


• Lorsque le lien a déjà été visité: pseudo-formats CSS : visited
permet d'appliquer un style particulier à un lien vers une page qui
a déjà été vue.
<h2> Quelques sites utiles </h2> a{ /* Liens pas visité*/
Visiter le site de <a text-decoration: none;

Partie 2
href="[Link] Classrooms color: red;
</a> <br> }
Visiter le site de <a a:visited{/* Liens visité*/
href="[Link] text-decoration: underline;
</a> <br> color: blue;
Visiter le site de <a
href="[Link] </a>
}
Mise en page du site
Déjà visité

122

57 58

Structurer sa page Structurer sa page


Nous avons appris à construire des pages basiques en HTML, à
modifier la mise en forme avec CSS... Intéressons-nous maintenant à
la mise en page de notre site. En général, une page web est
constituée d'un en-tête (tout en haut), de menus de navigation (en
haut ou sur les côtés), de différentes sections au centre... et d'un
pied de page (tout en bas).

Dans un premier temps il


faut structurer notre page
et après on passe au
développement (code
html) et à la mise en forme
avec le CSS.

124 125

59 60

15
27/10/2023

Structurer sa page Structurer sa page


•L'en-tête<header> : l’en-tête de page se trouve en général tout en •Principaux liens de navigation <nav> : La balise <nav> doit
haut du document. on y trouve le plus souvent un logo, une regrouper tous les principaux liens de navigation du site. Vous y
bannière, le slogan de votre site., etc. Vous devrez placer ces placerez par exemple le menu principal de votre site. Généralement,
informations à l'intérieur de la balise <header>. le menu est réalisé sous forme de liste à puces à l'intérieur de la
balise <nav> : <nav>
<header> <!-- Placez ici le contenu de l'en-tête de votre page --> </header> <ul>
<li><a href="[Link]">Accueil</a></li>
<li><a href="[Link]">Forum</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
•le pied<footer> : A l'inverse de l'en-tête, le pied de page se trouve </nav>
en général tout en bas du document. On y trouve des informations
comme des liens de contact, le nom de l'auteur, les mentions légales, • Une section de page <section> : La balise <section> sert à
etc. Vous devrez placer ces informations à l'intérieur de la balise regrouper des contenus en fonction de leur thématique. Elle
<footer>. englobe généralement une portion du contenu au centre de la page.
<section>
<h1>Ma section de page</h1>
<footer> <!-- Placez ici le contenu du pied de votre page --> </footer> <p> Un paragraphe</p>
126 127
</section>

61 62

Structurer sa page Structurer sa page


Exemple concret d'utilisation des balises
• Informations complémentaires <aside> : La balise <aside> est
conçue pour contenir des informations complémentaires au
document que l'on visualise. Ces informations sont généralement
placées sur le côté (bien que ça ne soit pas une obligation).

<aside> <!-- Placez ici des informations complémentaires --> </aside>


Du texte
simple
•Un article indépendant <article> : La balise <article> sert à puisqu'il n'y a
englober une portion généralement autonome de la page. C'est une pas de CSS
portion de la page qui pourrait (par exemple) être reprise ailleurs sur
un autre site. C'est le cas par exemple des actualités (articles de
journaux ou de blogs).
!!??
<article>
<h1>Mon article</h1>
<p>Un paragraphe</p>
</article> 128 129

63 64

16
27/10/2023

Le modèle de boîte Le modèle de boîte


Une page web peut être vue comme une succession et un empilement de boîtes, • Les dimensions: un bloc a des dimensions précises. Il a une largeur et une
qu'on appelle "blocs". La plupart des éléments vus précédemment sont des blocs hauteur. Par défaut, un bloc prend 100% de la largeur disponible.
: <header>, <article>, <nav>, <p>, les titres <h1> , etc. Dans cette partie, nous • width : c'est la largeur du bloc. A exprimer en pixels (px) ou en pourcentage
allons apprendre à manipuler ces blocs comme de véritables boîtes. Nous allons (%).
leur donner des dimensions, les agencer en jouant sur leurs marges, mais aussi • height : c'est la hauteur du block. Là encore, on l'exprime soit en pixels (px),
apprendre à gérer leur contenu... pour éviter que le texte ne dépasse de ces soit en pourcentage (%).
blocs !. • pour que notre site s'adapte aux différentes résolutions d'écran de nos
Les balises inline : c'est le cas par exemple des liens <a></a>. visiteurs, on fixe les dimensions : min-width : largeur minimale, min-height :
Les balises block : c'est le cas par exemple des paragraphes <p></p>. hauteur minimale, max-width : largeur maximale, max-height : hauteur
maximale

h3 {
<h1> un titre (block) </h1> width: 50%;
background: orange;
text-align: justify;
}
<p> un paragraphe (block)
p{
<a > un lien inline </a> width: 50%;
</p> background: orange;
text-align: center;
130 } 131

65 66

Le modèle de boîte Le modèle de boîte


p{
• Les marges: tous les blocs possèdent des marges. Il existe 2 types de marges: • Les marges: (Exemples) width: 60%;
• Les marges intérieurs et les marges extérieurs . p{ border: 1px solid blue;
• padding : indique la taille de la marges intérieures. A exprimer en général width: 60%; text-align: justify;
border: 1px solid blue; padding: 8px;
en pixels (px).
text-align: justify; margin:8px;
•margin : indique la taille de la marge extérieure. Là encore, on utilise le plus } }
souvent des pixels.
➢ Les propriétés margin et padding s'applique aux 4 côtés du bloc. Si vous
voulez indiquer une marge en haut, en bas, à gauche et à droite utiliser
ces propriétés :
➢ margin:auto pour centrer le bloc
Pour la marge extérieure :
margin-top : marge extérieure en haut.
margin-bottom : marge extérieure en bas. 2
margin-left : marge extérieure à gauche.
margin-right : marge extérieure à droite 2 une
marge
Pour la marge intérieurs : s’ajoute
Le texte à coté
padding-top : marge intérieure en haut. de la bordure
padding-bottom : marge intérieure en bas.
padding-left : marge intérieure à gauche.
132 133
padding-right : marge intérieure à droite.

67 68

17
27/10/2023

Le modèle de boîte Le modèle de boîte


• couper un bloc : Si vous voulez que le texte ne dépasse pas des limites du • couper un bloc (exemple):
paragraphe, il va falloir utiliser la propriété overflow. Voici les valeurs qu'elle
peut accepter : p{ p{ p{ p{
width: 250px; width: 250px; width: 250px; width: 250px;
height: 110px; height: 110px; height: 110px; height: 110px;
•visible (par défaut) : si le texte dépasse les limites de taille, il reste visible text-align: justify; text-align: justify; text-align: justify; text-align: justify;
et sort volontairement du bloc. border: 1px solid black; border: 1px solid black; border: 1px solid black; border: 1px solid black;
• hidden : si le texte dépasse les limites, il sera tout simplement coupé. overflow: visible; overflow: hidden; overflow: auto; overflow: scroll;
On ne pourra pas voir tout le texte. } } } }
•scroll : là encore, le texte sera coupé s'il dépasse les limites. Sauf que cette
fois, le navigateur mettra en place des barres de défilement pour qu'on
puisse voir tout le texte. C'est un peu comme un cadre à l'intérieur de la
page.
•auto : c'est le mode "pilote automatique". En gros, c'est le navigateur
qui décide ou pas de mettre des barres de
•défilement (il n'en mettra que si c'est nécessaire). C'est la valeur que je
conseille d'utiliser le plus souvent.

134 135

69 70

Le positionnement en CSS Le positionnement en CSS


<!DOCTYPE html> nav
• Après avoir structurer la page en plusieurs éléments, il est temps <html>
<head>
{
float: left;
<meta content="text/html; charset=utf-8" />
de bien positionner chaque élément. (rappel) <title> Notre site </title>
<link rel="stylesheet" type="text/css" href="[Link]">
width: 150px;
border: 1px solid black;
</head> }
<body> section
<header>
{
<h1> un titre </h1>
<h2> un autre titre </h2> margin-left: 170px;
</header> border: 1px solid blue;
}
<nav>
rappel <ul>
<li> <a href="#"> Accueil </a> </li>
<li> <a href="#"> Blog </a> </li>
<li> <a href="#"> CV </a> </li>
Du texte </ul>
</nav>
simple
<section>
puisqu'il n'y a <aside>
<h1> A propos de l'auteur </h1>
pas de CSS <p> un paragraphe </p>
</aside>
<article>
<h1> Le voyageur </h1>
<p> paragraphe de voyage </p>

!!??
</article>

</section>

<footer> 170px
<p> Copyright Zozor - Tous droits réservés <br/>
<a href="nomPrenom@[Link]"> Me contacter ! </a> </p>
</footer>

</body>
136 </html> 137

71 72

18
27/10/2023

Le positionnement en CSS Le positionnement en CSS


<!DOCTYPE html> nav
• Transformez vos éléments: la propriété display est capable de transformer <html>
<head>
{
display: inline-block;
n'importe quel élément de votre page d'un type (bloc et inline) vers un autre. <meta content="text/html; charset=utf-8" />
<title> Notre site </title> width: 150px;
border: 1px solid black;
Elle accepte 4 valeurs possibles : <link rel="stylesheet" type="text/css" href="[Link]">
</head> vertical-align: top;
<body> }
<header>
<h1> un titre </h1>
section
<h2> un autre titre </h2> {
</header> display: inline-block;
border: 1px solid blue;
<nav> vertical-align: top;
<ul>
<li> <a href="#"> Accueil </a> </li>
}
<li> <a href="#"> Blog </a> </li>
<li> <a href="#"> CV </a> </li>
</ul>
</nav>

<section>
<aside>
<h1> A propos de l'auteur </h1>
<p> un paragraphe </p>
</aside>
<article>
• vertical-align: cette propriété permet de modifier l’alignement vertical <h1> Le voyageur </h1>
<p> paragraphe de voyage </p> le corps (la
deséléments. Voici quelques-unes des valeurs possibles pour cette propriété : </article>
<section>)
• baseline : aligne la base de l'élément avec celle de l'élément parent (par </section> ne prend
pas toute
défaut) <footer>
<p> Copyright Zozor - Tous droits réservés <br/> la largeur
• top : aligne en haut <a href="nomPrenom@[Link]"> Me contacter ! </a> </p>
</footer>
• middle : aligne au milieu </body>
• bottom : aligne en bas 138 </html> 139

73 74

Le positionnement en CSS Le positionnement en CSS


nav nav nav
• Les positionnements absolu, fixe et relatif: la propriété position permet de { { {
width: 120px; width: 120px; width: 120px;
positionner avec précision des éléments sur la page, elle accepte 3 valeurs : border: 1px solid black; border: 1px solid black; border: 1px solid black;
• absolute: il nous permet de placer un élément n'importe où sur la page position: absolute; position: fixed;
right: 5px;
position: relative;
right: 5px;
right: 5px;
(en haut à gauche, en bas à droite, tout au centre, etc..). bottom: 5px; bottom: 5px; bottom: 5px;
} }
•fixed: identique au positionnement absolu, mais cette fois l'élément reste }
section section section
{ {
toujours visible, même si on descend plus bas dans la page. {
th: 150px; th: 150px;
th: 150px;
• relative: permet de décaler l'élément par rapport à sa position normale. border: 1px solid blue; border: 1px solid blue; border: 1px solid blue;
} } }

Il faut donc utiliser la propriété position et au moins une des 4 propriétés ci-
dessus (top, left, right ou bottom).

Les éléments positionnés en absolu


sont placés par-dessus le reste des
éléments de la page ! Par ailleurs, si
vous placez deux éléments en
absolu vers le même endroit, ils
risquent de se chevaucher. Dans ce
cas, utilisez la propriété z-index
pour indiquer quel élément doit
apparaître par-dessus les autres 140 141

75 76

19

Vous aimerez peut-être aussi