Scribd
Importer
62 vues18 pages

CSS3

Le document décrit les feuilles de style CSS, leur utilité pour séparer la structure du contenu sur une page web, et les différentes manières de définir des styles pour les éléments HTML à l'aide de sélecteurs comme les classes et ID. Le document contient également des exemples de code CSS et HTML.

Transféré par

alexander
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 DOCX, PDF, TXT ou lisez en ligne sur Scribd
62 vues18 pages

CSS3

Le document décrit les feuilles de style CSS, leur utilité pour séparer la structure du contenu sur une page web, et les différentes manières de définir des styles pour les éléments HTML à l'aide de sélecteurs comme les classes et ID. Le document contient également des exemples de code CSS et HTML.

Transféré par

alexander
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 DOCX, PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 18

3ième S.I.

Sciences et Technologies de l’Informatique

LES FEUILLES DE STYLE

INTRO :
Le langage CSS (Cascading Style Sheets : Feuilles de Style en Cascade) a été développé par
le W3C (World Wide Web Consortium) à partir de 1996.
Il a pour but de séparer totalement la présentation d'une page Web de son contenu (c'est à dire
du langage HTML), et de faciliter ainsi la maintenance et l'accessibilité d'un site.

I. PRINCIPE :
Le design d'un site évolue toujours au fil du temps. Le problème, lorsqu'on n'utilise pas de
feuilles de style, c'est qu'il faut reprendre toutes les pages html une à une pour modifier une
police de caractère ou une couleur de fond... Avec les "Cascading Style Sheets" (CSS), ce lourd
handicap est résolu.
C'est dans la feuille de style CSS que l'on va déclarer toute la mise en forme des pages :
le positionnement des éléments, l'image de fond, les polices de caractère, les couleurs, etc.
Celle-ci sera liée à chaque page html. Ainsi, lorsqu'on en modifiera un élément, cela se répercutera
immédiatement sur toutes les pages html.

Avantages :
 Obtenir une présentation homogène sur tout un site en faisant appel sur toutes les pages à
une même définition de style
 Simplifie le code.
 Une maintenance de site beaucoup plus facile.
 Meilleure accessibilité : permet de produire des pages web respectueuses des normes du
W3C, les pages seront donc accessibles pour la majorité des navigateurs (ordinateurs,
tablettes, smartphones, smart TV, …).

1
3ième S.I. Sciences et Technologies de l’Informatique

II. Où écrire le code CSS ?


On peut écrire du code en langage CSS à trois endroits différents :
- dans un fichier .css ;
- dans l'en-tête <head> du fichier HTML ;
- directement dans les balises du fichier HTML, à travers un attribut style.
 Nous allons utiliser la première méthode, elle est la plus recommandée. Le code de la feuille de
style se fera dans un fichier à part d’extension « .css ». Le lien entre la feuille de style et le fichier
html se fera dans l’en-tête <head> de la page web en utilisant la balise « link » de la manière
suivante :
<link rel="stylesheet" href="nom_fichier.css">

Exp. :
- Soit le code suivant contenu dans le fichier « style.css » :
p{
color : blue ;
}

- Et la balise suivante dans le fichier « page1.html » :


<head>
<link rel="stylesheet" href="style.css">
</head>

 Résultat : A chaque utilisation de la balise <p> dans la page web page1.html, le contenu de
chaque paragraphe aura le même style : couleur en bleu. Il en sera de même pour toutes les
autres pages utilisant la même feuille de style.

2
3ième S.I. Sciences et Technologies de l’Informatique

 Reprenons l’exemple précédent :


p{
color : blue ;
}

Dans un code CSS comme celui-ci, on trouve trois éléments différents :


 des noms de balises : on écrit les noms des balises dont on veut modifier l'apparence. Par
exemple, si je veux modifier l'apparence de tous les paragraphes <p>, je dois écrire p.
 des propriétés CSS : les « effets de style » de la page sont rangés dans des propriétés. Il y a
par exemple la propriété color qui permet d'indiquer la couleur du texte, font-size qui
permet d'indiquer la taille du texte, etc. Il y en a beaucoup d’autres.
 les valeurs : pour chaque propriété CSS, on doit indiquer une valeur. Par exemple, pour la
propriété color, il faut indiquer le nom de la couleur. Pour font-size, il faut indiquer quelle
taille on veut, etc.

Schématiquement, une feuille de style CSS ressemble donc à cela :

balise1
{
propriété1 : valeur1 ;
propriété2 : valeur2 ;
propriéte3 : valeur3 ;
}
balise2
{
propriété1 : valeur1 ;
propriéte2 : valeur2 ;
propriété3 : valeur3 ;
propriété4 : valeur4 ;
}
balise3
{
propriété1 : valeur1 ;
}

3
3ième S.I. Sciences et Technologies de l’Informatique

Rques :
 Lorsqu’on a, par exemple, le cas suivant :
h1 {
color : blue;
}
em (<em> = mise en emphase, pour insister)
{
color : blue;
}
 On peut l’écrire de cette manière :
h1 , em {
color : blue;
}
 Comme en HTML, il est possible de mettre des commentaires. Les commentaires ne seront
pas affichés, ils servent simplement à indiquer des informations : /* Votre commentaire */
Exp :
p{
color : blue ; /* les paragraphes de couleur bleu */
}

III. Sélecteurs : class et id


Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises.
Pour cela les spécifications CSS ont introduit le concept de classe. Pour que certains paragraphes
seulement soient écrits d'une manière différente on utilise des attributs spéciaux qui fonctionnent
sur toutes les balises :
- L'attribut class.
- L’attribut id.

1. L'attribut class :
La définition des classes est aussi simple que celles des styles. Elle consiste
à écrire un point (.) et le nom que l'on souhaite donner à la classe.
Rque : Le nom de la classe peut-être composé de lettres (accentuées ou non), de chiffres et de
tirets.

.Nom-de-la-classe {
propriété-de-style: Valeur;
propriété-de-style: Valeur;
...; }

Où « Nom-de-la-classe » représente le nom donné à la classe.

4
3ième S.I. Sciences et Technologies de l’Informatique

Exp. :
.Rouge {font-family: Verdana ; color: red; }

 Pour appeler ce style dans la page HTML, on indique simplement class="Rouge" à l'intérieur de
la balise voulue :

<b class="Rouge"> Texte à mettre en rouge et en gras </b>

Activité 1 :
Les pages web sont souvent ponctuées d'ancres permettant de remonter en haut de page, et
celles-ci sont souvent placées à droite de la page. Il va donc falloir déclarer un style à cette mise en
forme.
 Code CSS :
.haut
{ text-align: right; }

 Code HTML :
<p class="haut">
<a href="#signet_haut">Haut de page</a>
</p>

2. L'attribut id :
L'attribut id fonctionne exactement de la même manière que class mais il ne peut être utilisé
qu'une fois dans le code. C'est pour cela qu'il est plutôt utilisé à la mise en page qu'à la mise en
forme de caractères.

Dans le fichier CSS, il faudra faire précéder le nom de l'id par un dièse (#) :
Exp. :
#introduction
{ color: blue; }
 Pour appeler ce style dans la page HTML, on indiquera id="introduction" à l'intérieur de la
balise voulue :

<div id="introduction > Ce bloc de texte sera de couleur bleu. </div>

5
3ième S.I. Sciences et Technologies de l’Informatique

Activité 2 :
Construisons une section de page à deux
colonnes. L'une des deux colonnes servira pour un
menu de 110 pixels de large flottant à gauche,
l'autre pour un contenu placé à 120 pixels du bord
gauche (pour ne pas empiéter sur le menu bien
sûr).
 Code CSS :

#menu {
background-color: silver;
width: 110px;
float: left; }

#contenu {
margin-left: 120px; }

 Code HTML :

…
<div id="menu">
<ul>
<li>élément 1</li>
<li>élément 2</li>
<li>élément 3</li>
<li>élément 4</li>
<li>élément 5</li>
</ul>
</div>

<div id="contenu">
<p> bla bla bla bla bla bla bla </p>
</div>
…

IV. Les Balises Universelles div et span :


Les éléments HTML div et span ont été créés principalement pour simplifier la mise en page des
pages HTML en CSS c’est-à-dire pour simplifier l’application de certains styles CSS.

1. La balise <div> </div> :


C'est une balise de type block, qui entoure un bloc de texte. Les balises <p>, <h1>, etc. sont de la
même famille. Ces balises ont quelque chose en commun : elles créent un nouveau « bloc » ou «
section » dans la page et provoquent donc obligatoirement un retour à la ligne.

6
3ième S.I. Sciences et Technologies de l’Informatique

Activité 3 :
En saisissant le code suivant, on constatera la différence entre la présence d’un paragraphe dans
un bloc généré avec <div> et l’existence d’un paragraphe en dehors d’un bloc :
 Page.html :
…
<h1>Un titre de niveau 1</h1>
<div>
<p>Un premier paragraphe</p>
<p>Un autre paragraphe</p>
<ul>
<li>Un élément de liste</li>
<li>Un autre élément de liste</li>
</ul>
</div>
<p>Un troisième paragraphe</p>
<div>
<p>Un dernier paragraphe</p>
</div>
…

 Style.css :
body { background-color: lightBlue ; }

div { color: white ;


background-color: purple ;
width : 80% ; /*Définit la largeur des div à 80% de leur parent (body ici)*/
margin : 0 auto ; /*Permet de centrer les div dans leur élément parent (body ici)*/ }

2. La balise <span> </span> :


C'est une balise de type inline, c'est-à-dire une balise que l'on place au sein d'un paragraphe de
texte, pour sélectionner certains mots uniquement. Les balises <strong> (rendre du texte
important) et <em> (insister sur du texte) sont de la même famille.
Ainsi, on va pouvoir placer une certaine partie du texte d’un titre ou d’un paragraphe dans un
élément span pour ensuite pouvoir lui appliquer un style CSS particulier, chose qu’il nous était
impossible de faire jusqu’à présent.

Activité 4 :
En modifiant le code des fichiers de l’activité précédente, mettre le texte « autre élément » et
« troisième » en gras, le fond jaune et couleur de police noir.

7
3ième S.I. Sciences et Technologies de l’Informatique

V. Les sélecteurs avancés :


1. Le sélecteur universel *:
Pour sélectionner les éléments de la page à modifier, on utilise ce qu'on appelle des
sélecteurs.

Activité 5 :
En modifiant le code de l’activité précédente, définir une style de police par défaut à
l’ensemble de la page : couleur Blanc et police Calibri.
*{
font-family : calibri;
color : white; }

Le sélecteur étoile * permet de sélectionner tous les éléments HTML d’une page d’un
coup, c’est pourquoi il est également appelé sélecteur CSS universel.

2. Une balise contenue dans une autre :


Activité 6 :
Saisir le code suivant dans un fichier page1.html :
…
<h1>Un titre de niveau 1</h1>
<p>Un premier paragraphe</p>
<p>Un autre paragraphe avec un <a href="#">lien</a></p>
<ul>
<li><a href="#">Elément de liste (lien) 1</a></li>
<li>Elément de liste 2</li>
</ul>
…
Rque :
Utiliser href="#" permet de créer un lien HTML valide mais qui ne mène nulle part, qui est "vide".
Dans un fichier style.css, saisir le code suivant :
pa{
background-color: yellow;
}
Constatation : seule la balise <a> contenue dans une balise <p> a été modifiée.
 L’écriture suivante :
XY
{ (X et Y sont deux balises quelconques.)
}
Permet de sélectionner toutes les balises <Y> situées à l'intérieur d'une balise <X>. Notez qu'il n'y
a pas de virgule entre les deux noms de balises.

8
3ième S.I. Sciences et Technologies de l’Informatique

3. A + B : une balise qui en suit une autre


Activité 7 :
Dans le code du fichier page1.html de l’activité précédente, déplacer la balise <a> en dehors de
la balise <p> pour obtenir le code suivant :
…
<p>Un autre paragraphe avec un </p>
<a href="#">lien</a>
…
Dans le fichier style.css, saisir le code suivant :
p+a{
background-color: yellow;
}
Constatation : seule la balise <a> située après une balise <p> a été modifiée.
 L’écriture suivante :
X+Y
{
}
Permet de sélectionner la première balise <Y> située après une balise <X> grâce au caractère +.

4. Une balise qui possède un attribut :


Activité 8 :
Dans le code du fichier page1.html de l’activité précédente, ajouter à la balise <a> un attribut
title ayant pour valeur "Infobulle" pour obtenir le code suivant :
…
<p>Un autre paragraphe avec un </p>
<a href="#" title="Infobulle">lien</a>
…
En utilisant le fichier style.css, on veut cibler les balises <a> ayant un attribut title pour donner
une taille de police au lien de 50 px :
a[title]
{ font-size: 50px; }
L’écriture suivante :
Balise [Attribut]
{
}
Permet de cibler des balises précises ayant un attribut précis.

9
3ième S.I. Sciences et Technologies de l’Informatique

A[attribut="Valeur"] : une balise, un attribut et une valeur exacte


a[title="Cliquez ici"]
{
}
Idem, mais l'attribut doit en plus avoir exactement pour valeur « Cliquez ici ».
Exemple : <a href="http://site.com" title="Cliquez ici">
A[attribut*="Valeur"] : une balise, un attribut et une valeur
a[title*="ici"]
{
}
Idem, l'attribut doit cette fois contenir dans sa valeur le mot « ici » (peu importe sa position).
Exemple : <a href="http://site.com" title="Quelque part par ici">
Formatage du texte
Pour modifier la taille du texte, on utilise la propriété CSS font-size.
Exemple :
p
{
font-size: 14px; /* Paragraphes de 14 pixels
*/ }
Pour modifier la police utilisée, on utilise la propriété CSS font-family.
p{
font-family: Impact, "Arial Black", Arial, Verdana, sans-serif; }
Le navigateur essaiera d'abord d'utiliser la police Impact ou, si elle n'y est pas, Arial Black, ou sinon
Arial, ou sinon Verdana, ou si rien n'a marché, mets une police standard (sans-serif).
Mettre enitalique : font-style: italic;
Mettre engras
: font-weight: bold;
Soulignement et autres décorations : propriété CSS text-decoration qui peut prendre différentes
valeurs :
• underline : souligné.
• line-through : barré.
• overline : ligne au-dessus.
• blink : clignotant.
• none : normal (par défaut).
L'alignement : propriété CSS text-align et on indique l'alignement désiré :
• left : le texte sera aligné à gauche (c'est le réglage par défaut).
• center : le texte sera centré.
• right : le texte sera aligné à droite.
• justify : le texte sera « justifié ».
Habillage
Le CSS permet de faire flotter un élément autour d'un
texte grâce à la propriété CSS float.
• left : l'élément flottera à gauche.
• right : l'élément flottera à droite.

10
3ième S.I. Sciences et Technologies de l’Informatique

<p><img src="flash.gif" class="imageflottante" alt="Image flottante" />

.imageflottante
{
float: left;
}
Pour ne plus faire flotter l'élément, il faut utiliser la propriété
clear, qui peut prendre ces trois valeurs :
• left : le texte se poursuit en-dessous après un float: left;
• right : le texte se poursuit en-dessous après un float: right;
• both : le texte se poursuit en-dessous, que ce soit
après un float: left; ou après un float: right;.
<p><img src="flash.gif" class="imageflottante" alt="Image flottante" /></p>
<p>Texte écrit à côté de l'image.</p>
<p class="dessous">Texte écrit sous l'image.</p>
.imageflottante
{
float: left;
}
.dessous
{
clear: both;
}
Couleur du texte
Il y a différentes façons d'indiquer la couleur :
1. Indiquer le nom de la couleur
Propriété color, suivie d'un des seize noms de couleurs utilisables en CSS (white, black,
red, yellow, blue, …). Exemple : color: maroon
2. Indiquer le code couleur
R GB
Propriété color, suivie des codes couleur 1.
Exemple : color: rgba(240, 96, 204, 0);
Certains logiciels de retouche d'image permettent de trouver la couleur désirée (ex : paint).
Remarque : le dernier paramètre indique la transparence et a une valeur comprise entre 0
et 1 (ainsi, pour une valeur de 0.6, le texte sera opaque à 60%).

Couleur de fond
Pour indiquer une couleur de fond, utiliser la propriété CSS background-color et elle s'utilise de la
même manière que la propriété color. Pour indiquer la couleur de fond de la page web, il faut
travailler sur la balise <body>.
Exemple :

1 Red Green Blue (Rouge Vert Bleu)

11
3ième S.I. Sciences et Technologies de l’Informatique

body
{
background-color: black; /* Le fond de la page sera noir
*/ color: white; /* Le texte de la page sera blanc */ }
Images de fond
La propriété permettant d'indiquer une image de fond est background-image.
Exemple : background-image: url("neige.png");
La propriété CSS background-attachment permet de « fixer » le fond. Deux valeurs sont
disponibles :
• fixed : l'image de fond reste fixe ;
• scroll : l'image de fond défile avec le texte (par défaut).
La propriété CSS background-repeat permet de « répéter » le fond. Quatre valeurs sont
disponibles :
• no-repeat : le fond ne sera pas répété. L'image sera donc unique sur la page.
• 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.
• repeat : le fond sera répété en mosaïque (par défaut).
La propriété CSS background-position permet d'indiquer où doit se trouver l'image de fond . Deux
valeurs sont disponibles :
• en pixels pour indiquer la position du fond par rapport au coin supérieur gauche de la page
• utiliser les valeurs : top, bottom, left, center, right Exemple :
body
{
background-image: url("soleil.png"); background-
attachment: fixed; /* Le fond restera fixe */ background-
repeat: no-repeat; /* Le fond ne sera pas répété */
background-position: top right; /* Le fond sera placé en haut à droite
*/ }
Depuis CSS3, il est possible de donner plusieurs images de fond à un élément. Pour cela, il suffit de
séparer les déclarations par une virgule, comme ceci : body {
background: url("soleil.png") fixed no-repeat top right, url("neige.png")
fixed; }

12
3ième S.I. Sciences et Technologies de l’Informatique

La première image de cette liste sera placée par-dessus les autres. Attention donc, l'ordre de
déclaration des images a son importance : si vous inversez le soleil et la neige dans le code CSS
précédent, vous ne verrez plus le soleil !
Les Bordures
Pour modifier l'apparence des bordures il faut utiliser la propriété border qui combine plusieurs
valeurs.
1. la largeur en pixels
2. la couleur (cf §couleur du texte)
3. le type de bordure avec différentes valeurs disponibles :
• none : pas de bordure (par défaut) ;
• solid : un trait simple ;
• dotted : pointillés ; • dashed : tirets ; • etc...

Exemple : border: 3px blue dashed;


Pour ne modifier qu'une bordure, utiliser les propriétés :
• border-top : bordure du haut ;
• border-bottom : bordure du bas ; • border-left : bordure de gauche ;
• border-right : bordure de droite.
Pour obtenir des bordures arrondies, utiliser la propriété border-radius en indiquant la taille de
l'arrondi en pixels.
Exemple : border-radius: 10px;
Le modèle des boîtes
Dans une mise en page réalisée en CSS, tous les éléments sont considérés comme des boîtes.
Chacune de ces boîtes est constituée d’un contenu, d’un espacement intérieur, d’une bordure, et
d’une marge externe.
Voici les propriétés CSS qui permettent de déterminer les dimensions, la couleur, le style de
chacun de ses constituants :
Propriété CSS Ce qui est concerné :
width et height largeur et hauteur du contenu (texte, image, etc.)
padding espacement intérieur, entre le contenu et la bordure
border bordure (ou encadrement)
margin marge externe, espace (transparent) entourant le tout

13
3ième S.I. Sciences et Technologies de l’Informatique

• width : c'est la largeur du bloc exprimé en pixels (px) ou en pourcentage (%).


• height : c'est la hauteur du bloc exprimé en pixels (px) ou en pourcentage (%).
• padding : indique la taille de la marge intérieure en pixels (px).
• margin : indique la taille de la marge extérieure en pixels (px).
1. Un bloc peut avoir des dimensions minimales et maximales :
• min-width : largeur minimale ;
• min-height : hauteur minimale ;
• max-width : largeur maximale ;
• max-height : hauteur maximale.
2. Les marges extérieures peuvent avoir des valeurs différentes :
• margin-top : marge extérieure en haut ;
• margin-bottom : marge extérieure en bas ; • margin-left : marge extérieure à gauche ;
• margin-right : marge extérieure à droite.
3. Idem pour les marges intérieures !
Exemple :
p
{
width: 350px; border:
1px solid black; text-
align: justify; padding:
12px;
margin: 50px; /* Marge extérieure de 50px */
}
Remarque : utiliser la propriété margin: auto pour centrer des blocs. Pour cela, il faut
obligatoirement donner une largeur au bloc (avec la propriété width).

14
3ième S.I. Sciences et Technologies de l’Informatique

Exemple :
p
{
width: 350px; /* On a indiqué une largeur (obligatoire) */
margin: auto; /* On peut donc demander à ce que le bloc soit centré avec auto
*/ }
Dépassement de texte
Si vous voulez que le texte ne dépasse pas des limites du bloc, il va falloir utiliser la propriété
overflow. Voici les valeurs qu'elle peut accepter :
• visible (par défaut) : si le texte dépasse les limites de taille, il reste visible et sort
volontairement du bloc.
• hidden : si le texte dépasse les limites, il sera tout simplement coupé. On ne pourra pas
voir tout le texte.
• scroll : 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 lire l'ensemble du texte.
• auto : le navigateur décide de mettre ou non des barres de défilement.
Remarque : la propriété word-wrap: break-word permet de forcer la césure des très longs mots
(généralement des adresses un peu longues).
Le positionnement
Les positionnements absolu, fixe et relatif
La propriété CSS position permet de positionner avec précision des éléments sur la page. Pour
cela, on lui donne une de ces valeurs :
• absolute : positionnement absolu ; il permet de placer un élément n'importe où sur la page (en
haut à gauche, en bas à droite, tout au centre, etc.).
• fixed : positionnement fixe ; identique au positionnement absolu mais, cette fois, l'élément
reste toujours visible, même si on descend plus bas dans la page.
• relative : positionnement relatif ; ce positionnement permet d'effectuer des « ajustements » :
l'élément est décalé par rapport à sa position initiale.
Si un bloc est positionné en absolu, il faut indiquer au navigateur où le positionner sur la page à
l'aide des quatre propriétés CSS :
 left : position par rapport à la gauche de la
page
 right : position par rapport à la droite de la
page
 top : position par rapport au haut de la page ;
 bottom : position par rapport au bas de la
page.
Exemple :
element
{ position: absolute;
right: 0px; bottom: 0px; }

15
3ième S.I. Sciences et Technologies de l’Informatique

Remarque : 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
audessus des autres.
L'élément ayant la valeur de z-index la plus élevée
sera placé par dessus les autres, comme le montre la
figure ci-contre.
Le positionnement inline-block
En CSS la propriété display permet de transformer
n'importe quel élément de la page d'un type vers un
autre et les faire apparaître sous forme de blocs. À
ce moment-là, les éléments vont se positionner les
uns en-dessous des autres et il devient possible de
modifier leurs dimensions !
Voici quelques-unes des principales valeurs que peut
prendre la propriété display :
Valeur Exemples Description
inline <a>, <em>, <span>… Eléments d'une ligne. Se placent les uns à côté des
autres.
block <p>, <div>, <section>… Eléments en forme de blocs. Se placent les uns
endessous des autres et peuvent être redimensionnés.
inline-block <select>, <input> Eléments positionnés les uns à côté des autres (comme
les inlines) mais qui peuvent être redimensionnés
(comme les blocs).
none <head> Eléments non affichés.
Les éléments en inline-block nous permet d'utiliser la propriété vertical-align. Cette propriété
permet de modifier l'alignement vertical des éléments. Voici quelques-unes des valeurs possibles
pour cette propriété :
• baseline : aligne de la base de l'élément avec celle de l'élément parent (par défaut) ;
• top : aligne en haut ;
• middle : centre verticalement ;
• bottom : aligne en bas ;
• (valeur en px ou %) : aligne à une certaine distance de la ligne de base (baseline).
NB : les éléments inline-block se positionnent sur une même ligne de base (appelée baseline), en
bas.
Exemple : nous voulons réaliser la page suivante.

16
3ième S.I. Sciences et Technologies de l’Informatique

Donnons le code HTML correspondant...


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title> Le Site Web</title>
</head>
<body>
<header>
<h1>voyageur</h1>
<h2>Carnets de voyage</h2>
</header>
<nav>
<ul>
<li><a href="accueil.html">Accueil</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="cv.html">CV</a></li>
</ul>
</nav>
<section>
<aside>
<h1>À propos de l'auteur</h1>
<p>C'est moi, voyageur ! Je suis né en Tunisie </p>
</aside>

17
3ième S.I. Sciences et Technologies de l’Informatique

<article>
<h1>Je suis un grand voyageur</h1>
<p> (texte de l'article)</p>
</article>
</section>
<footer>
<p>Copyright voyageur - Tous droits réservés
<a href="mailto: [email protected]">Me contacter !</a></p>
</footer>
</body>
</html>

...et le code CSS associé.


nav
{
display: inline-block;
width: 150px; border:
1px solid black;
vertical-align: top;
}
section
{
display: inline-block;
border: 1px solid blue;
vertical-align: top;
}

18

Vous aimerez peut-être aussi