MANUEL TP ET COURS DU MODULE SITE WEB STATIQUE PARTIE2 CSS3

Html5 css3 boostrap5

2023-2024
OFPPT NTIC 2 SM
EL MADANI DEV103-DEV104
 I. F EUILLE DE STYLE CSS DE BASE

Sommaire

• Structure de base
• Exemple de feuille de style
• Notion de cascades
• Enregistrement de la feuille de style
•
Lectures complémentaires
Structure de base

Pour chaque déclaration, la structure est toujours la même :

sélecteur {

propriété: valeur;

• Le sélecteur, c'est la balise (X)HTML (body ; h1 ; p, etc.), l'identifiant (id) ou la classe (class) ;
• La propriété, c'est l'attribut qu'on veut appliquer (font ; background ; margin ; etc.)
•
Et enfin la valeur qui précise les caractéristiques de la propriété
Exemple de feuille de style
Fonctionne avec :

•
Tous les navigateurs graphiques
Propriétés utilisées :

• background-color
• color
• font-family ; font-size
• padding
• text-align ; text-decoration

Cet exemple de feuille de style (encore une fois, de base) donnera une page :

• à fond blanc,
• avec une police de caractère par défaut Verdana noire,
• un titre de premier niveau bleu marine centré,
• un titre de deuxième niveau rouge décalé de 15 pixels,
• des liens passant du vert au gris avec un petit effet rouge non souligné au passage de la souris.

1
A noter que les couleur sont ici sous la forme "white, black, blue" etc... pour plus de lisibilité mais qu'il
convient plutôt d'utiliser les valeurs hexadécimales qui vont de #000000 (noir) à #ffffff (blanc)

Les tailles des polices de caractère sont ici exprimées en %, mais on peut aussi utiliser em qui est aussi une
unité de longueur relative à privilégier (pour des raisons d'homogénéité d'affichage et d'accessibilité) aux
unités absolues telles que les pt ou les pc.
À noter que bien que les px soient une unité relative, ils sont aussi à éviter car MSIE les interprète comme
unité absolue...

Pour que les couleurs des liens changent selon leur état (non visité, visité, survolé, actif, ayant le focus), on
utilise des pseudo-classes qui se déclarent par :link, :visited, :hover, :active et :focus. Il est important de
respecter cet ordre de déclarations.

On commence une feuille de style en général par un "reset" pour mettre toutes les marges à zéro
(intérieures padding et extérieures margin). Cela doit permettre d'avoir tous les navigateurs avec, à peu près,
le même état de départ...

Code CSS

html, body {

margin: 0;

padding: 0;

body {

background-color: white;

font-family: Verdana, sans-serif;

font-size: 100%;

h1 {

font-size: 200%;

2
color: navy;

text-align: center;

h2 {

font-size: 150%;

color: red;

padding-left: 15px;

p,ul,li,td {

color: black;

a:link {

color: green;

text-decoration: underline;

a:visited {

color: gray;

a:hover {

3
color: red;

text-decoration: none;

a:active, a:focus {

color: red;

Code (X)HTML

<h1>Titre principal</h1>

<h2>Sous titre</h2>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Duis eget ligula quis libero mollis dapibus.

Suspendisse potenti. Nullam facilisis neque et sem.

Proin placerat adipiscing urna. Aenean sollicitudin.

Mauris lorem erat, fringilla quis, sagittis a, varius sed, nunc.

Pellentesque ligula. Nullam egestas eleifend turpis. Vivamus ac

sapien. Sed venenatis, ligula ut scelerisque vehicula,

4
erat tellus euismod ipsum, eget faucibus tortor arcu et lectus.

Vivamus vel purus. Fusce dignissim tortor quis diam elementum fermentum.

Mauris eleifend lorem vel arcu. Vivamus tempus

faucibus lectus. Curabitur volutpat ornare mi.

Curabitur ac libero. Sed eu elit ac metus egestas iaculis.

</p>

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ul>

<p><a href="http://css.mammoutland.net/">css.mammoutland.net/</a></p>

Voir le résultat

Haut

Notion de cascades

Pourquoi parle-t'on de "feuilles de style en cascade" (Cascading Style Sheets) ? La raison est très simple : on
peut déclarer les styles à différents endroits, et selon ces endroits ils seront plus ou moins prioritaires. On
obtient donc une cascade de styles.

1. Déclaration des styles dans une feuille de style externe : c'est de loin la meilleure chose à faire et la
plus pratique à maintenir (cf le schéma de la page d'accueil), mais c'est celle qui a le moins de poids

5
 2. Déclaration des styles en interne, dans l'en-tête de la page : à ne faire qu'avec des styles particuliers
à une page. Les styles déclarés auront plus de poids que ceux de la feuille de style externe et donc
l'emporteront en cas de conflits.
3. Déclaration des styles en attributs des éléments html : à faire pour des mises en forme ponctuelles.
Ces styles l'emporteront sur tous les autres.

... Il y a une 4ème possibilité, mais celle-ci est indépendante de la volonté du webmestre : ce sont les styles
définis par l'utilisateur, s'il jamais il en déclare. Ils seront interprétés en priorité, et masqueront tous les
autres.

Haut

Enregistrement d'une feuille de style

Il existe donc trois façons d'enregistrer les styles :

1. dans une feuille de style externe

2. dans une feuille de style interne
3. dans le code au sein des balises html
1. Feuille de style externe

Enregistrer le code CSS dans un fichier s'appelant (par exemple) "style.css", et mettre dans l'en-tête de la
page html (entre les balises <head></head>) :

<link href="style.css" rel="stylesheet" media="all" type="text/css">

Avec un doctype HTML 5 l'attribut type est inutile.

Si vous désirez générer simplement une feuille de style un peu plus fournie, un générateur de feuille de style
est à disposition.

Note à propos du média

Il est précisé media="all" dans les attributs de la déclaration de la feuille de style. Cela indique que cette
feuille ne sera lisible par tous les types de médias (écrans, TV, imprimante...). Pour une feuille de style
lisible seulement avec des écrans, on spécifiera media="screen", pour une feuille de style réservée à
l'impression, ce sera media="print".
Pour plus de détails sur tous les médias déclarables, consultez ces spécifications CSS 2.1 sur les types de
médias reconnus.

2. Feuille de style interne

Pour déclarer des styles qui ne s'appliqueront qu'à la page considérée, les styles sont à déclarer entre les
balises suivantes :

6
<style type="text/css" media="screen">

....

</style>

Tout ceci est à placer, comme précédemment, entre les balises <head></head>.

3. Styles CSS dans le code html ("inline")

De façon encore plus ponctuelle, si l'on veut attribuer un style à un seul endroit, on peut déclarer le style à
l'intérieur d'une balise html à l'aide de l'attribut style. Par exemple :

<p style="text-align:center; color:red">

lorem ipsum

</p>

II. M ETTRE EN FORME UN TEXTE EN CSS

Sommaire

• Notions importantes
• Choix des polices de caractères (font-family)
• Unités de taille de caractères (font-size)
• Choix des couleurs (color)
• Autres attributs
• Propriété @font-face (CSS3)
Fonctionne avec :

• Tous les navigateurs graphiques

Attributs utilisés :

• font ; font-family ; font-weight ; font-variant ; font-style

• color
• text-align ; text-decoration ; text-transform
• line-height

7
Notions importantes

Avant de choisir sa, ou plutôt ses, polices de caractères pour sa page web, il faut bien connaître certaines
contraintes :

• Toutes les polices de caractères n'existent pas sur tous les ordinateurs.
Conséquence : si l'ordinateur de votre visiteur ne possède pas la police que vous avez choisie, une
autre s'affichera ruinant probablement le design que vous espériez.
• Mac et PC ne possèdent pas toujours les mêmes noms de polices, ni même la même résolution.
Conséquence : bien vérifier les équivalences entre Mac et PC
• Tous les navigateurs ne gèrent pas le rendu des polices de la même façon.
Conséquence : là encore, n'espérez pas avoir le même rendu partout.

Maintenant que je vous ai bien cassé le moral... Voyons comment gérer au mieux toutes ces contraintes !

Choix des polices de caractères

Polices génériques

Il existe 5 familles de polices de caractères dites "génériques" :

• Serif
• Sans-serif
• Monospace
• Cursive
• Fantasy
Zone de test

• Serif
• Sans-serif
• Monospace
• Cursive
• Fantasy

Je ne sais pas ce que vous obtenez sur votre écran, mais voici 4 captures d'écran réalisées sur mon propre
ordinateur avec 4 navigateurs différents :

Avec Firefox

8
 Avec Microsoft Internet Explorer 7

Avec Opera

Avec SeaMonkey

Et puis une cinquième sur Safari (Mac) :

Vous constatez que s'il n'y a pas de grosses différences avec les familles serif, sans-serif et monospace,
cursive n'a pas le même aspect sous PC et sous Mac. Quant à fantasy, c'est plutôt... fantaisiste ! (oui, oui, je
sais, elle est plutôt facile celle-là :p).

Il vaut mieux donc se contenter des familles serif et sans-serif, les sans-serif étant les plus lisibles à l'écran.

Les familles de polices se déclarent à l'aide de l'attribut font-family, à déclarer dans le body pour que toute la
page en bénéficie (c'est la notion d'héritage). On finit toujours la liste de fontes déclarées par sa famille
générique à laquelle elle appartient. Ainsi, si la police déclarée n'existe pas sur l'ordinateur de votre visiteur,
le navigateur affichera la police appartenant à la même famille.

Famille Serif

Les fontes de caractères de la famille serif assez courantes sont :

• Times new roman (PC)

9
 • Times (Mac)
• Georgia (Mac/PC)
• Palatino Linotype (PC)
• Palatino (Mac)

Elles n'ont pas toutes le même aspect, les associations à respecter pour une homogénéité de rendu pourraient
donc être :

body {

font-family:"times new roman", times, serif;

body {

font-family:georgia, serif;

body {

font-family:"palatino linotype", palatino, serif;

Famille sans-serif

• Verdana (Mac/PC)
• Arial (Mac/PC)
• Trebuchet (PC)
• Helvetica (Mac)
• Tahoma (PC)
• Geneva (Mac)

Pour ces fontes sans-serif, les associations pourraient être :

body {

font-family:arial, sans-serif;
10
}

body {

font-family:verdana, sans-serif;

body {

font-family:trebuchet, helvetica, sans-serif;

body {

font-family:tahoma, geneva, sans-serif;

Ce ne sont que des suggestions bien sûr !

Page de visualisation des différentes polices de caractères

Outils

• Equivalences polices de caractères MAC/PC

• Type Tester, pour tester en ligne le rendu des polices.

Haut

Unités de taille de caractères

Commençons par évacuer ce qu'il ne faut pas utiliser :

1. On n'utilise pas de tailles de caractères fixes comme les points (pt), les picas (pc) ou les centimètres
(cm). Celles-ci ne sont pas redimensionnables à l'écran, or on doit toujours laisser la possibilité au
visiteur de zoomer la page.
Pensez que même si vous avez de bons yeux actuellement, ça ne durera pas. Un jour, vous aussi,
deviendrez presbyte, et vous serez content de pouvoir zoomer un texte. Et je ne parle pas de toutes
les autres déficiences oculaires...

11
 2. On évite aussi d'utiliser les pixels (px) car Internet Explorer les considèrent comme une unité de
taille de caractère fixe, on se retrouve donc avec le même problème que précédemment.

Il faut donc utiliser des unités relatives, telles que les em ou les %. Ces unités sont proportionnelles à la taille
en pixels déclarée dans le navigateur. Par défaut, ceux-ci sont en général réglés à 16px. C'est donc une taille
qui peut être modifiée par l'utilisateur... On n'a aucun pouvoir là-dessus.

La taille des caractères se déclare par l'attribut font-size.

L'héritage

Considérons l'exemple suivant :

body {

font-family:arial, sans-serif;

font-size:90%;

p{

font-size:90%;

Les textes inclus dans les paragraphes n'auront pas une taille de 90% des 16 pixels déclarés par défaut (soit
14,4 pixels), mais 90% des 90% des 16 pixels (soit à peu près 13 pixels... oui, je sais, ce sont des maths, ça
fait mal à la tête).
En effet, le paragraphe hérite des propriétés de son/ses parent(s), donc ici des valeurs déclarées dans le body.

Il faut donc bien faire attention aux valeurs déclarées. Il est donc en général plus sage, et surtout plus simple,
de déclarer la taille à 100%, et de ne la réduire (ou l'augmenter) que ponctuellement.

Exemple

body {

font-family:arial, sans-serif;

font-size:100%;
12
}

h1 {

font-size:200%;

#footer p {

font-size:90%;

Ici, seuls les paragraphes du <div id="footer"> auront une taille plus petite que les autres paragraphes de la
page. (Pour plus de détails sur la fonction de id, voir le tutoriel sur les sélecteurs class et id).

Haut

Le choix des couleurs

On peut éviter des choses comme ça :

Que ce soit l'un ou l'autre choix, surtout avec des tailles de polices aussi petites, c'est vraiment très très
pénible à lire, car pas assez contrasté.

Là encore, ayez à l'esprit que tout le monde n'a pas les yeux de superman et un super écran super lumineux
et super contrasté. La lecture à l'écran, c'est déjà moins facile que sur papier, alors avec des choix comme
ça... C'est peut-être très "design", mais ça ne met pas les internautes dans les meilleures dispositions de
lecture.

Ce genre d'association n'est peut-être pas non plus des plus heureuses :

13
Bref ! les couleurs se déclarent grâce à l'attribut color, et à l'aide de codes hexadécimaux ou rvb (on évite les
noms).

body {

font-family:arial, sans-serif;

font-size:100%;

color:#000000; /*code hexadécimal du noir*/

Liens utiles

• Color Vision qui permet de visualiser le choix de couleur de fond et de texte, avec une vision
normale ou déficiente
• Code-couleur pour avoir les codes hexadécimaux et rvb ainsi que des propositions de choix de
palettes de couleurs.

Haut

Autres attributs

Les autres attributs possibles pour modifier les caractères sont :

• font-style: normal | italic : normale | italique

• font-variant: normal | small-caps : normale | petites capitales
• font-weight: normal | bold : normal ou gras
Zone de test

• Normal
• Italique
• PETITES CAPITALES
• gras

On pourra rajouter :

• text-align: left | right | center | justify : aligné à gauche | aligné à droite | centré | texte justifié
• text-decoration: none | underline | overline | line-through | blink : rien | souligné | surligné | rayé |
clignotant

14
 • text-transform: none | capitalize | uppercase | lowercase : met en majuscule la 1ère lettre d'un mot |
met en majuscules | met en minuscules
Zone de test

• surligné
• souligné
• rayé
• clignotant (à éviter, c'est pénible... et ne fonctionne ni avec Internet Explorer, ni avec Safari)

• capitalize : Tous Ces Mots Sont Entièrement Écrits En Minuscules

• uppercase : CECI EST ÉCRIT EN MINUSCULES
• lowercase : ceci est écrit en majuscules

• line-height: normal | nombre | %

Zone de test

• hauteur de ligne normale

• hauteur de ligne de 50 pixels

• hauteur de ligne de 200%

De façon générale, pensez à aérer les textes, et respectez la sémantique.

• Titrez bien vos différentes sections avec des h1, h2, h3, etc. en veillant à respecter la hiérarchie (pas
de h3 si pas de h2 ; pas de h2 si pas de h1, etc.)
• Utilisez les balises <p></p> pour faire des paragraphes. Pas des div !
• N'utilisez pas la balise blockquote pour faire des retraits, elle est faite pour des blocs de citations

voici quelques exemples de mise en forme de texte avec CSS. Ces exemples incluent différentes
propriétés CSS que vous pouvez utiliser pour styliser le texte sur votre page web.

1. Changer la Couleur du Texte

body {

color: #333; /* Couleur du texte en hexadécimal */

2. Changer la Police du Texte

15
body {

font-family: 'Arial', sans-serif; /* Utilisation d'une police générique avec une sauvegarde */

3. Ajuster la Taille du Texte

h1 {

font-size: 24px; /* Taille du texte pour les balises h1 */

p{

font-size: 16px; /* Taille du texte pour les paragraphes */

4. Mise en Gras

strong {

font-weight: bold; /* Met en gras le texte à l'intérieur des balises strong */

5. Incliner le Texte

em {

font-style: italic; /* Incliner le texte à l'intérieur des balises em */

6. Souligner le Texte

u{

text-decoration: underline; /* Souligner le texte à l'intérieur des balises u */

7. Espacement des Caractères (Espacement Entre les Lettres)

h2 {

16
 letter-spacing: 2px; /* Espacement des lettres pour les balises h2 */

8. Alignement du Texte

p{

text-align: justify; /* Justifie le texte à l'intérieur des paragraphes */

9. Transformations de Texte (Majuscules/Minuscules)

h3 {

text-transform: uppercase; /* Convertit le texte à l'intérieur des balises h3 en majuscules */

10. Ombre de Texte

h4 {

text-shadow: 2px 2px 4px #888; /* Ajoute une ombre de texte avec un décalage horizontal,
vertical, un flou et une couleur */

Ces exemples illustrent diverses propriétés CSS que vous pouvez utiliser pour styliser le texte sur
votre site web. Vous pouvez combiner ces propriétés pour créer des effets textuels plus complexes en
fonction de vos besoins de conception.

III. G ERER LES MARGES EN CSS

Fonctionne avec :

• Tous les navigateurs graphiques

Propriétés utilisées :

• margin
• padding
Sommaire

• Définitions des marges intérieures (padding) et extérieures (margin)

17
 • Exemple
• Le modèles des boites (box model)
• Résoudre des problèmes de marges
Définitions des marges intérieures et extérieures

Pour chaque élément html on peut donc définir l'espacement qui le séparera des autres éléments (margin) et
les espacements intérieurs dont il peut bénéficier (padding).

Par exemple :

<blockquote>

<p>

Lorem ipsum dolor sit amet,

consectetur adipiscing elit. Duis eget ligula quis libero mollis dapibus.

Suspendisse potenti. Nullam facilisis neque et sem.

Proin placerat adipiscing urna.

Aenean sollicitudin.

</p>

</blockquote>

blockquote est l'élément parent, p est l'élément enfant.

(Pour rappel, la balise blockquote doit être utilisée pour des blocs de citation.)

18
Déclaration des tailles

Les tailles de ces marges peuvent se déclarer en pixels (px), en em, en %, etc. Tout dépend si l'on veut
qu'elles soient fixes ou proportionnelles.

On peut détailler les tailles des marges à l'aide des suffixes -top (haut), -right (droite), -bottom (bas), -
left (gauche), ou synthétiser les quatre d'un seul coup (la première valeur étant celle du haut, puis on tourne
dans le sens des aiguilles d'une montre).

margin:2px 5px 2em 0;

revient à :

margin-top:2px;

margin-right:5px;

margin-bottom:2em;

margin-left:0;

Si on ne met que deux valeurs, la 1ère s'appliquera au haut et au bas, la seconde à droite et à gauche.

padding:2px 5px;

revient à :

padding-top:2px;

padding-bottom:2px;

padding-right:5px

padding-left:5px;

Exemple basique

Appliquons des styles à l'exemple de code (x)html donné précédement.

19
Code CSS

blockquote {

margin:0;

padding:1px;

background:#C00000 url(images/quadrillage.png)

p{

margin:20px;

padding:10px;

background-color:#FFFAFA;

Zone de test

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget ligula quis libero mollis dapibus.
Suspendisse potenti. Nullam facilisis neque et sem. Proin placerat adipiscing urna. Aenean
sollicitudin.

Le modèle des boites

D'après le "box model", lorsqu'on attribue une taille à un élément de type block (à l'aide d'un width ou
d'un height), les marges viennent s'ajouter à cette taille.

Notez aussi le très pratique margin:auto qui permet, dans le cas d'un bloc muni d'une largeur, de centrer
horizontalement un élément.

Code CSS

p{

width:200px;
20
padding:40px;

margin:auto;

Le paragraphe aura une largeur totale de 200 + 2*40 = 280 pixels et sera centré dans son élément parent.

Exemples utilisations margin et padding

voici des exemples de l'utilisation de padding et margin en CSS avec des explications pour chaque propriété
:

1. Exemple de padding :
div {
padding: 20px;
}
Explication :
Cette règle applique une marge intérieure (espace intérieur) de 20 pixels à tous les côtés d'un élément <div>.
La valeur unique spécifiée (20px) est appliquée uniformément à tous les côtés (haut, droite, bas, gauche).
2. Exemple de padding avec des valeurs différentes pour chaque côté :
p{
padding-top: 10px;
padding-right: 15px;
21
 padding-bottom: 10px;
padding-left: 15px;
}
Explication :
Cette règle applique des marges intérieures différentes à chaque côté d'un paragraphe.
padding-top : 10 pixels en haut.
padding-right : 15 pixels à droite.
padding-bottom : 10 pixels en bas.
padding-left : 15 pixels à gauche.
3. Exemple de margin :
img {
margin: 10px;
}
Explication :
Cette règle applique une marge extérieure (espace extérieur) de 10 pixels à tous les côtés d'une balise
<img>.
La valeur unique spécifiée (10px) est appliquée uniformément à tous les côtés (haut, droite, bas, gauche).
4. Exemple de margin avec des valeurs différentes pour chaque côté :
h1 {
margin-top: 20px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 15px;
}
Explication :
Cette règle applique des marges extérieures différentes à chaque côté d'un titre de niveau 1 (<h1>).
margin-top : 20 pixels en haut.
margin-right : 15 pixels à droite.
margin-bottom : 20 pixels en bas.
margin-left : 15 pixels à gauche.
5. Exemple de margin négatif :
div {
margin: -10px;
22
}
Explication :
Cette règle applique une marge extérieure négative de 10 pixels à tous les côtés d'un élément <div>.
Les marges négatives peuvent être utilisées pour superposer des éléments les uns sur les autres.
6. Exemple de padding et margin combinés :
article {
padding: 15px;
margin: 10px;
}
Explication :
Cette règle applique une marge intérieure (padding) de 15 pixels et une marge extérieure (margin) de 10
pixels à tous les côtés d'un élément <article>.
Ces exemples démontrent comment utiliser padding et margin pour ajuster l'espace à l'intérieur et à
l'extérieur des éléments HTML sur une page web. La compréhension de ces propriétés est essentielle pour le
positionnement et la mise en forme des éléments sur votre site.

7. Exemple de Box Model complet :

.box {
width: 200px;
height: 100px;
padding: 20px;
margin: 10px;
border: 2px solid #333;
background-color: #f0f0f0;
}
Explication :
Cette règle crée une boîte (<div> avec la classe .box) avec une largeur de 200 pixels, une hauteur de 100
pixels.
padding: 20px; ajoute une marge intérieure de 20 pixels à tous les côtés.
margin: 10px; ajoute une marge extérieure de 10 pixels à tous les côtés.
border: 2px solid #333; ajoute une bordure solide de 2 pixels avec une couleur grise (#333).
background-color: #f0f0f0; défini une couleur de fond gris clair.

23
IV. S ELECTEURS CSS CLASS ET ID

Fonctionne avec :

•
Tous les navigateurs
Propriétés utilisés :

•background-color
• float
• width
• margin
• text-align
Le sélecteur class

Premier exemple : 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 spécial pour cette
mise en forme spécifique, et le sélecteur class va nous y aider. A noter que dans la feuille de style, le nom du
sélecteur class est toujours précédé d'un point.

Code CSS

.haut {

text-align:right;

Code (X)HTML

Pour appeler ce style dans la page html, on indique simplement class="haut" à l'intérieur de la balise voulue.

<p class="haut">

<a href="#haut">Haut de page</a>

</p>

Et voilà, et cette mise en forme peut-être répétée autant de fois que besoin dans la page.

Avec des noms spécifiques, class peut aussi servir à apporter plus de sémantique au code. Ce sont les
microformats. On pourra ainsi spécifier, par exemple, la date de publication d'un article ou tous les éléments
de la carte de visite d'une personne.
Pour plus de détails, je vous invite à lire le tutoriel "microformats" d'Alsacréations.
24
Sélecteur id

Le sélecteur id a presque la même fonction, à la différence importante qu'on ne peut l'utiliser qu'une seule
fois dans la page, contrairement au sélecteur class. C'est pour cela qu'il est plutôt utilisé à la mise en page
qu'à la mise en forme de caractères.

Deuxième exemple : construisons une section de page à deux colonnes. L'une des deux colonnes servira
pour un menu de 100 pixels de large flottant à gauche, l'autre pour un contenu placé à 110 pixels du bord
gauche (pour ne pas empièter sur le menu bien sûr). Cette fois, ce n'est pas d'un point qu'il faudra faire
précéder le nom du sélecteur id, mais d'un #.

Code CSS

#menu {

background-color:silver;

width:100px;

float:left;

#contenu {

margin-left:110px;

Code (X)HTML

Dans le code html, il faudra donc cette fois indiquer un id (id="menu" et id="contenu") à la place de la
syntaxe class.

<h1 id="haut">Exemple des sélecteurs "class" et "id"</h1>

<div id="menu">

<ul>
25
 <li>item 1</li>

<li>item 2</li>

<li>item 3</li>

<li>item 4</li>

<li>item 5</li>

</ul>

</div>

<div id="contenu">

<p>

Lorem ipsum dolor sit amet,

consectetuer adipiscing elit,

sed diam nonummy nibh euismod

tincidunt ut laoreet dolore

magna aliquam erat volutpat.

Ut wisi enim ad minim veniam,

quis nostrud exerci tation

ullamcorper suscipit lobortis

nisl ut aliquip ex ea commodo consequat.

26
 Duis autem vel eum iriure dolor

in hendrerit in vulputate velit

esse molestie consequat,

vel illum dolore eu feugiat

nulla facilisis at vero eros

et accumsan et iusto odio

dignissim qui blandit praesent

luptatum zzril delenit augue duis

dolore te feugait nulla facilisi.

</p>

<p class="haut">

<a href="#haut">Haut de page</a>

</p>

</div>

Il n'aura pas échappé à votre sagacité qu'un id non déclaré dans les styles est venu se glisser dans la balise de
titre h1 (id="haut").

C'est le deuxième effet id ! En effet, cet attribut peut être utilisé en javascript, et aussi servir d'ancre. Ainsi,
le lien interne de haut de page y est rattaché directement. Cela explique aussi pourquoi on ne peut utiliser
qu'un seul nom de id par page.
S'il y avait deux id="haut" dans la page, où irait le lien ?! hein ? je vous le demande !

Resultat

27
 V. M ISES EN PAGE EN COLONNES SANS TABLEAU

Sommaire

• Pourquoi éviter la mise en page par tableaux ?

• Code (x)html
• En positionnement flottant
• En positionnement absolu
• À l'aide de display:table
• En boites flexibles (CSS3) [en travaux]
•
Lectures complémentaires
Pourquoi éviter la mise en page par tableaux ?

Il ne faut pas systématiquement diaboliser la mise en page par tableaux, mais disons qu'elle a "vécu". C'était
une bonne méthode lorsque les navigateurs implémentaient mal les normes CSS 2.1 (aux temps
préhistoriques -à l'échelle du web- de Netscape 4 et d'Explorer 5), mais maintenant...
Faire deux ou trois colonnes en CSS est relativement facile et le langage CSS est fait pour cela. Le code est

28
plus facile à maintenir, cela offre plus de choix de mise en page sans modification du code html, et surtout
c'est plus accessible.

On m'objectera qu'au delà de 3 colonnes, les choses se compliquent et qu'il y a quelques heures d'arrachage
de cheveux pour arriver à faire quelque chose d'uniforme pour tous les navigateurs. Ce n'est pas tout à fait
vrai. Vous devriez (normalement) en être convaincu à la fin de ce tutoriel. Et quoi qu'il en soit le cas le plus
courant se limite au plus à 3 colonnes.

Attention au DocType

Les déboires de rendu entre les différents navigateurs, notamment avec Internet Explorer, sont souvent dus
à une mauvaise déclaration de DocType, ou à la présence du prologue xml qui fait basculer IE en mode
"Quirks" (ce qui lui fait purement et simplement oublier les bonnes normes). Il est donc impératif de bien en
mettre un avant de tester toute méthode décrite ci-après.

Haut

Code (x)html

Le principe est très simple : on divise chaque élément de la page par un div. La page se divise en quatre
sections, chacune correspondant à une zone précise de la page :

• Un en-tête : div id="entete"

• Un menu : div id="menu"
• Le contenu : div id="contenu"
• Un pied de page : div id="footer"

Pour faciliter la suite de la mise en forme, les boites menu et contenu seront englobées dans un autre
cadre main.
Le but de l'opération est donc de placer les cadres menu et contenu l'un à côté de l'autre.

29
Et si vous avez loupé le tutoriel sur les sélecteurs class & id, il vaut mieux aller le voir de plus près avant de
poursuivre...

<div id="entete">

En tête

</div>

<div id="main">

<div id="menu">

Menu

</div>

<div id="contenu">

Contenu
30
</div>

</div>

<div id="footer">

Pied de Page

</div>

En positionnement flottant
Fonctionne avec :

• Firefox / SeaMonkey
• IE 5.x et +
• Opéra
• Safari / Chrome
Attributs utilisés :

• clear
• float
• margin
• max-width ; width
• padding
• text-align

Entre menu et contenu, celui à déclarer en flottant doit être menu, car il est le premier des deux dans le
flux (le code html lu de haut en bas).
Pour éviter le problème de fusion de marges qui empêche les différents blocs de "coller" entre-eux, on
attribuera à chacun d'eux une marge intérieure haute et basse de 1 pixel (padding:1px 0).

Si on désire un menu de 240 pixels de large et que le contenu ne se "rabatte" pas vers le bord gauche sitôt la
hauteur du menu dépassée, on lui attribuera une marge gauche d'autant ou d'un peu plus.
Pour ne pas que le pied de page footer soit concerné par ce phénomène de flottaison (ce qui risque de le faire
anormalement remonter), il faudra lui attribuer un clear qui remet à zéro la sortie du flux.

Pour finir, les écrans ayant tendance à devenir de plus en plus grands et une zone de lecture étant pénible à
lire si elle trop large, on peut aussi attribuer au main une largeur maximum à ne pas dépasser, 960 pixels par
exemple, que l'on peut centrer à l'aide de margin:auto.

31
Code CSS

#entete, #menu, #contenu, #footer {

padding:1px 0;

#entete {

background-color:#FF9900;

text-align:center;

#main {

max-with:960px;

margin:auto;

#menu {

float:left;

width:240px;

background-color:#FF3366;

#contenu {

margin-left:245px;

32
background-color:#9966FF;

#footer {

background-color:#669933;

text-align:center;

clear:both;

On peut aussi positionner le menu à droite sans toucher au code html ! Ce qui est bien sûr impossible avec
une mise en page par tableaux. Cela dit, la logique du flux n'est plus respectée (ce qui est placé en premier
dans le code se trouve après un élément positionné à gauche de l'écran), ce qui est déconseillé par les normes
accessiweb.

#menu {

float:right;

width:240px;

#contenu {

margin-right:245px;

Haut

En positionnement absolu
Fonctionne avec :

• Firefox / SeaMonkey
• IE 5.x et +
33
 • Opéra
• Safari / Chrome
Attributs utilisés :

• min-height
• position

Un élément positionné en position:absolute sort totalement du flux et est donc sujet à provoquer des
superpositions. Pour cela, il sera donc plus prudent de déclarer une hauteur au bloc non positionné. Ne
pouvant pas prévoir la hauteur que prendra le contenu, il vaut mieux, dans notre exemple, positionner le
menu.

L'origine du repère à partir duquel on peut positionner l'élément, à l'aide des

propriétés top, bottom, left ou right, se fait à partir du dernier ancêtre positionné, ou, à défaut, du coin haut à
gauche de la fenêtre.
En d'autre termes, par défaut l'origine O est en haut à gauche. Mais on peut effectuer un changement de
repère en O' à l'aide d'un élément parent aux éléments à positionner. Ici le main (bloc parent
en position:relative) va permettre de changer de repère pour menu et/ou contenu (éléments enfants).

Ce changement de repère va permettre d'aligner verticalement les deux blocs.

Code CSS

#main {

34
max-width:960px;

margin:auto;

position:relative;

#menu {

width:240px;

position:absolute;

#contenu {

margin-left:245px;

min-height:150px;

Il n'y a pas besoin d'indiquer un top et un left puisque le menu, premier dans le flux, est déjà positionné par
défaut en haut à gauche.

Pour le placer à droite, là par contre, il est nécessaire de renseigner une position horizontale :

#menu {

width:240px;

position:absolute;

right:0;

35
VI. B ORDURES EN CSS

Fonctionne avec :

• (Presque) Tous les navigateurs graphiques

36
Propriétés utilisées :

• border-width
• border-style
• border-color
• padding

La propriété permettant d'obtenir une bordure en CSS est tout simplement border. A cet attribut, on pourra
associer une épaisseur de bordure (border-width), un style (border-style) et une couleur (border-color).

Si toutes les bordures doivent être identiques ces trois informations peuvent être synthétisées de la façon
suivante :

border: width style color

Epaisseur des bordures

Les épaisseurs des bordures peuvent être déclarées en de nombreuses unités, mais l'usage est d'utiliser les
pixels (px).

border-width:2px;

Style de bordures (CSS 2.1)

Huit styles sont possibles en CSS 2.1 (la valeur par défaut étant none) :

• dotted (pointillé)
• dashed (tirets)
• solid (solide)
• double (double)
• groove (rainurée)
• ridge (relief)
• inset (relief intérieur)
• outset (relief extérieur)

Petit problème : entre la théorie de rendu et la réalité, il y a un petit fossé. Selon les navigateurs, tel ou tel
style ne produit pas forcément l'effet escompté...

Par exemple, en dessous d'une épaisseur 3 pixels, pas grand chance de voir le rendu de double (ce qui est
logique du reste...).
Avec MSIE 7 et 8 seuls les quatre premiers donnent un rendu correct à tous les coups.
Avec MSIE6... non : laissez tomber, il n'y a que solid et double qui donnent le rendu souhaité !

37
Exemple de code CSS

p{

border-width:1px;

border-style:dotted;

border-color:black;

Ou :

p{

border:1px dotted black;

Résultat attendu

Zone de test

dotted (1 pixel)
38
 dashed (1 pixel)

solid (1 pixel)

double (3 pixels)

groove (2 pixels)

ridge (2 pixels)

inset (2 pixels)

outset (2 pixels)

Applications

Ensuite, tout est permis, ou presque. On peut attribuer ces bordures à n'importe quel élément html, qu'il soit
de type "bloc" (block) ou "en-ligne" (inline), et même différencier chacune d'elle si besoin.
On peut aussi mettre des marges intérieures (padding) pour aérer la présentation.

• Encadrer un élément
• Appliquer des bordures différentes à un même bloc
• Une seule bordure
• Bordures arrondies
Encadrer un élément
Code (x)html

<p>Exemple avec un <span>span</span> qui est de type inline</p>

Code CSS

span {

border:1px solid red;

padding:3px;

39
Zone de test

Exemple avec un span qui est de type inline.

Appliquer des bordures différentes à un même bloc

Lorsqu'on indique plusieurs valeurs différentes à la même propriété, la 1ère est celle qui va être appliquée en
haut, puis on tourne dans le sens des aiguilles d'une montre.
Quand on en indique que deux, la première concerne le haut et le bas, la seconde la droite et la gauche.

Code (x)html

<div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Duis eget ligula quis libero mollis dapibus.</p>

<p>Suspendisse potenti. Nullam facilisis neque et sem.

Proin placerat adipiscing urna. Aenean sollicitudin.</p>

</div>

Code CSS

div {

border-width:1px 2px 3px 2px;

border-style:solid dotted;

border-color:black red;

padding:0 10px;

Et contrairement à ce que je lu je ne sais plus où, on peut déclarer les couleurs avant les tailles, les tailles
après les styles... en fait l'ordre n'a aucune importance.

40
Zone de test

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget ligula quis libero mollis dapibus.

Suspendisse potenti. Nullam facilisis neque et sem. Proin placerat adipiscing urna. Aenean sollicitudin.

Une seule bordure

Si on veut se limiter à une seule bordure (par exemple pour "souligner" un titre), on pourra adopter la
syntaxe suivante :

Code (x)html

<h2>Titre</h2>

<p>Suspendisse potenti. Nullam facilisis neque et sem.

Proin placerat adipiscing urna. Aenean sollicitudin.</p>

Code CSS

h2 {

border-bottom:1px dashed green;

Zone de test
T ITRE

Suspendisse potenti. Nullam facilisis neque et sem. Proin placerat adipiscing urna. Aenean sollicitudin.

Bordures à coins arrondis

Les bordures peuvent à présent, grâce aux CSS3, bénéficier de coins arrondis. Il faut pour cela utiliser la
propriété border-radius.

Exemple Bordure css

Le test se fera sur le tableau suivant :

<!DOCTYPE html>

41
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple de Tableau HTML</title>
<style>

th, td {

border: 1px solid #ddd;

padding: 8px;
text-align: left;
}

th {
background-color: #f2f2f2;
}
</style>
</head>
<body>

<h2>Exemple de Tableau HTML</h2>

<table>
<thead>
<tr>
<th>Nom</th>
<th>Âge</th>
<th>Ville</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Bob Smith</td>
<td>22</td>
<td>Chicago</td>
</tr>
</tbody>
</table>

</body>
</html>
42
1. Bordure en Dégradé :
table{
width: 200px;
height: 100px;
border: 5px solid;
border-image: linear-gradient(to right, #ff8c00, #ffcd00);
border-image-slice: 1;
}
Explication :
Cette règle crée une bordure avec un dégradé de couleur.
border: 5px solid; crée une bordure solide de 5 pixels.
border-image: linear-gradient(to right, #ff8c00, #ffcd00); utilise un dégradé linéaire de couleur du orange
(#ff8c00) au jaune (#ffcd00) comme image de bordure.
border-image-slice: 1; spécifie que la bordure entière est remplie par l'image de bordure.
->Resultat :

43
2. Bordure à Coins Arrondis :
table {
width: 200px;
height: 100px;
border: 5px solid #3498db;
border-radius: 15px;
}
Explication :
Cette règle crée une bordure avec des coins arrondis.
border: 5px solid #3498db; crée une bordure solide de 5 pixels avec une couleur spécifiée (#3498db).
border-radius: 15px; arrondit les coins de la bordure avec un rayon de 15 pixels.
Resultat :

44
3. Bordure avec Ombre Portée :
table {
width: 200px;
height: 100px;
border: 5px solid #e74c3c;
box-shadow: 0 0 10px rgba(231, 76, 60, 0.7);
}
Explication :
Cette règle crée une bordure avec une ombre portée.
border: 5px solid #e74c3c; crée une bordure solide de 5 pixels avec une couleur spécifiée (#e74c3c).
box-shadow: 0 0 10px rgba(231, 76, 60, 0.7); ajoute une ombre portée de couleur rouge avec une opacité de
0.7.

45
4. Bordure en Pointillés :
table{
width: 200px;
height: 100px;
border: 2px dotted #2ecc71;
}
Explication :
Cette règle crée une bordure en pointillés.
border: 2px dotted #2ecc71; crée une bordure pointillée de 2 pixels avec une couleur spécifiée (#2ecc71).

46
5. Bordure Double avec Texte Clipé :
table {
width: 200px;
height: 100px;
border: 6px double #f39c12;
padding: 10px;
text-align: center;
line-height: 80px;
clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
}
Explication :
Cette règle crée une bordure double avec du texte clipé à l'intérieur.
border: 6px double #f39c12; crée une bordure double de 6 pixels avec une couleur spécifiée (#f39c12).
padding: 10px; ajoute un espace intérieur de 10 pixels.
text-align: center; centre le texte à l'intérieur de l'élément.
line-height: 80px; définit la hauteur de ligne pour centrer verticalement le texte.
clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%); découpe le texte pour qu'il s'ajuste à la
forme du polygone.
Ces exemples démontrent diverses utilisations de la propriété border en CSS pour créer des effets de bordure
avancés et attrayants. Vous pouvez expérimenter avec ces propriétés et les ajuster selon vos besoins de
conception.

47
VII. I MAGE DE FOND EN CSS

Fonctionne avec :

• Tous les navigateurs graphiques

Attributs utilisés :
48
 • background-image
• background-repeat
• background-position
Petits avertissements préliminaires :

• L'image de fond d'une page html doit être légère. Comprenez par là qu'une image de 20 ko c'est déjà
beaucoup : cela peut être long à charger et provoquer des problèmes d'affichage.
• Attention aux difficultés de lecture qu'une image de fond trop contrastée peut provoquer.
• Attention aussi à prendre une couleur de fond différente de celle de la police de caractère, car en
attendant que l'image de fond se charge, on n'y verra que pouic.
• On ne met jamais en fond une image porteuse d'information. Celles-là se mettent "en dur" dans le
code html avec un texte alternatif (alt) qui va bien.

Pour illustrer tout cela, visionnez ce mauvais exemple : la photo fait 330 ko ; la couleur utilisée, pour la
police de caractère et le fond, est blanche.

Code CSS de base

L'image de fond se déclare en général pour la balise body (corps de page), mais on peut aussi l'appliquer à
un bloc (<div></div>), ou un titre (<hx></hx>), une citation (<blockquote></blockquote>), etc.

Pour le corps de page, la syntaxe CSS de base sera celle-ci :

body {

color:black;

background-color:white;

background-image:url(fond.jfif);

• color renseigne la couleur de la police de caractère

• background-color est de la couleur de fond de page ;
• background-image:url() est bien sûr l'adresse de l'image choisie pour le fond de page.

Sans plus de renseignements, l'image de fond apparaît en mosaïque et défile en même temps que le texte.

Comme d'habitude, cette syntaxe CSS est à mettre dans l'en-tête de la page (entre les
balises <head></head>) ou dans une feuille de style externe (voir ici pour ceux qui auraient loupé
l'explication)

49
Fond de page fixe

Pour que le fond de page devienne fixe, on rajoutera dans le code :

background-attachment:fixed;

Visionner l'exemple

Positionner une image de fond

Positionnement par défaut

On peut aussi empêcher la mosaïque grâce à l'attribut background-repeat et positionner l'image dans une
partie très précise de l'écran.
Par défaut, l'image se positionne en haut à gauche de l'écran :

body {

color:black;

background-color:white;

background-image:url(fond.jfif);

50
background-repeat:no-repeat;

Positionnement en haut à droite

Si l'on veut qu'elle se place en haut à droite, on rajoutera le code :

background-position:right top;

ou :

background-position:100% 0%;

51
Positionnement au centre

Pour une position au centre de la page, cela donnera :

background-position:center center;

ou :

background-position:50% 50%;

Positionnement en bas à droite

Pour une position en bas à droite :

background-position:right bottom;

ou :

background-position:100% 100%;

52
Remarques

• background-repeat accepte 4 attributs : no-repeat ; repeat-x pour une répétition de l'image

uniquement horizontale ; repeat-y pour une répétition uniquement verticale ; et repeat pour la
mosaïque complète.
• Vous aurez noté, bien sûr, que les pourcentages dans le background-position offrent plus de latitude
que les attributs [right|center|left] [top|center|bottom].
Astuce

Pour avoir l’image sur toute la page :

body {

background-size :cover}}

53
VIII. Z OOMER UNE IMAGE AVEC LES CSS

Sommaire

• Première technique
•
Seconde technique
Première technique
Fonctionne avec :

• FireFox
• MSIE 7 +
• Mozilla / SeaMonkey
• Opéra 7 +
• Safari
Attributs utilisés :

• img:hover
Code (x)html

L'image est déclarée dans le code html sans valeurs de tailles (ni width, ni height) :

<div class="zoom">

<p>

<img src="pensees_1.jpg" alt="pensées de Giverny" />

</p>

</div>

Code CSS

Pour éviter tout saut, ou recouvrement, du texte sous-jacent lors du zoom, on peut déclarer cette image dans
un cadre (ici appelé zoom) de hauteur égale à la photo zoomée (ici 400px). De même, ce cadre servira aussi
à limiter cette propriété grossissante à cette seule image.

Les valeurs de tailles sont déclarées au sein de la feuille de style, tout d'abord dans son état initial (img), puis
dans son état survolé (img:hover)
Ici, les tailles de l'image passeront de 200x267 pixels à 300x400 pixels

.zoom {
54
height:400px;

.zoom p {

text-align:center;

.zoom img {

width:200px;

height:267px;

.zoom img:hover {

width:300px;

height:400px;

55
Zone de test

Haut

Seconde technique
Fonctionne avec :

• Tous les navigateurs graphiques

Attributs utilisés :

• background
• cursor
• display
• height
• margin
• width

Pour cet âne bâté d'Internet Explorer, il va falloir tricher en faisant croire que l'image est un lien, ce qui est
sémantiquement très discutable...
Cette fois l'image ne sera plus déclarée dans la page html mais uniquement dans la feuille de style en fond
d'écran (background).
De plus, il faudra avant tout travailler la photo ou figurera, l'une en dessous de l'autre, l'image initiale et
l'image à apparaître lors du zoom.

Inconvénients de la méthode :

56
 1. L'image sera plus lourde, donc plus longue à charger.
2. En cas d'impression, la photo n'apparaîtra pas si l'internaute a configuré la non-impression des fonds
d'écran.
Code (x)html

<div class="zoom1">

<p>

<a href="#" title="pensées de Giverny"></a>

</p>

</div>

Code CSS

L'image pensees_2.jpg a donc été créée avec un bon logiciel de traitement d'images (PUB : PhotoFiltre est
agréablement performant, et gratuit en cas d'utilisation privée). Elle a une taille finale de 300x800 pixels
pour un poids de 49 ko.

Toute l'astuce va être de faire apparaître les morceaux choisis de cette image : la partie haute par défaut
(300x400 pixels) puis la partie basse (300x400 pixels aussi) au survol de la souris.
Cette dernière devant "remonter" de 400 pixels vers le haut, on indiquera pour la position de fond de
page background-position:0px -400px (condensé dans le code dans la déclaration background) ; le 0 étant
relatif à la position horizontale et le -400px à la position verticale.

Ne pas oublier surtout le très important display:block qui permet ici le "remplacement" de la première
portion d'image par l'autre.

.zoom1 {

width: 300px;

height: 400px;

background: url(pensees_2.jpg) no-repeat;

margin: 0 auto;

}
57
.zoom1 p, .zoom1 a {

height: 400px;

display: block;

margin:0

.zoom1 a:hover {

background: url(pensees_2.jpg) no-repeat 0 -400px;

cursor:help;

Astuces

margin:0 auto déclaré dans .zoom1 permet de centrer horizontalement l'image dans la page. Hélas, encore
une fois, MSIE ne l'implémente pas...

cursor:help déclaré dans zoom1_1 a:hover permet de changer l'apparence du curseur lors du survol de
l'image. D'autres valeurs, comme cursor, crosshair, default sont aussi disponibles.

IX. E FFETS R OLLOVER A L ' AIDE DE : HOVER

Sommaire

• Transformer l'apparence d'un lien

• Changer la couleur de fond du lien
• Faire apparaître une image de fond au survol du lien
• Changer une image de fond au survol du lien
• Cumuler image de fond et caractère
• :hover et plus si affinités
Fonctionne avec :

• Tous les navigateurs graphiques

58
Attributs utilisés :

•
color
• text-decoration
• background-color
• background-image
Transformation d'apparence d'un lien

Le B.A-BA du langage CSS : le lien qui change d'apparence au survol de la souris. Tellement trivial que ça
ne demande pas beaucoup de développement, d'autant qu'il en a déjà été question dans le tutoriel sur la
feuille de style CSS de base.

Code (x)html

<a href="toto.html">Le Site de Toto</a>

Par défaut, les liens sont en bleu soulignés et restent tels quels au passage de la souris.
Pour faire en sorte qu'ils perdent ce soulignement et prennent la couleur rouge au survol, il suffit d'indiquer
la couleur voulue grâce à l'attribut color et le non soulignement à l'aide de la propriété CSS text-
decoration dans a:hover.

Code CSS

a:hover {

color:red;

text-decoration:none;

Bien évidemment les choix de couleurs sont immenses et text-decoration peut prendre d'autres valeurs.
Celles-ci sont : | none | underline | overline | line-through | blink |, ce qui correspond à | rien | souligné |
surligné | barré | clignotant | (ce dernier étant à éviter, rien de plus agaçant et déroutant qu'un texte qui
clignote...)

59
Transformation d'apparence de fond du lien
Couleur de fond

J'ai toujours mon petit lien vers le site du fameux Toto, et cette fois je voudrais que le fond change de
couleur. Un truc qui déchire... du rouge sur fond noir (miam !)

Code CSS

a:hover {

color:red;

text-decoration:none;

background-color:black;

Apparition d'image de fond au survol du lien

Ouch, un peu brutal quand même le rouge sur fond noir, pas très lisible. Une petite image plutôt... Animée ?
Pourquoi pas ! (Ne pas en abuser tout de même, des scintillements trop brusques sont dérangeants)

60
Code CSS

a:hover {

color:red;

text-decoration:none;

background-image:url(serpent.gif);

background-repeat:no-repeat;

L'image (gris_anim.gif), placée dans le répertoire "images", est donc déclarée grâce à background-image.
Par défaut, les images ainsi déclarées se répètent en mozaïque. Si on ne veut pas que ce soit le cas, on
rajoute l'attribut background-repeat auquel on associe no-repeat (pas de répétition), ou repeat-x (répétition
horizontale uniquement), ou repeat-y (répétition verticale uniquement).

Changement d'image de fond au survol du lien

Vous voulez que l'image ne s'anime que lors du survol ? Alors il faut définir plus précisement l'apparence du
lien non visité (en plus du a:hover bien entendu, qui est à placer après).

a:link {

background-image:url(images/serpent.gif);

background-repeat:no-repeat;

text-decoration:none;

Note importante

J'ai précisé ci-dessus que le a:hover est à placer après le a:link. Ceci est important pour que ça fonctionne ! Il
faut en effet respecter un ordre pour les pseudo-classes CSS.
En plus de :link et :hover, il existe aussi :active et :visited (lien actif, lien visité). L'ordre complet à respecter
est :

61
 1. :link
2. :visited
3. :hover
4. :active

Pour s'en souvenir, petit moyen mnémotechnique : LoVe HAte.

Chacune de ces pseudo-classes CSS peuvent se styliser en suivant le même principe qu'expliqué ci-dessus.

:hover et plus si affinités

Comme indiqué en début de tutoriel, le pseudo-élément :hover peut-être appliqué à n'importe quelle sauce...
du moment que le navigateur graphique utilisé ne soit pas MSIE6.

Paragraphe survolé

Question : Que veut dire CSS ? (passer la souris sur le paragraphe grisé ci-dessous pour voir la solution)

Code CSS

p{

border:1px dotted #808080;

background-color:#F5F5F5;

color:#F5F5F5;

padding:5px;

p:hover {

color:black;

Menu déroulant

Ahhh, les menus déroulants. Ici, ce n'est juste d'un aperçu. Pour montrer que c'est possible. Il y a d'ailleurs
d'autres méthodes que celle-ci. Mais c'est plus compliqué que cela en a l'air. Car, hélas, il faut en général
62
rajouter une couche de javascript à cause de... MSIE6 bien sûr. Cela dit, vous trouverez dans ce tutoriel sur
un menu horizontal déroulant, un exemple plus détaillé pour réaliser un menu full CSS sans javascript.

Code (x)html

<ul>

<li><a href="">Item 1</a></li>

<li><a href="">Item 2</a>

<ul>

<li><a href="">Item 2.1</a></li>

<li><a href="">Item 2.2</a></li>

</ul>

</li>

<li><a href="">Item 3</a></li>

</ul>

Le but est donc de dérouler les items 2.1 et 2.2 au survol de l'item 2.

Code CSS

li ul {

display:none;

li:hover ul {

display:block;

63
position:relative;

top:0;

left:-25px;

La liste imbriquée dans l'item 2 (li ul) est "inexistante" grâce au display:none. Dés qu'on passe sur l'élément
de la liste contenant la sous liste, l'attribut display change de statut pour passer du "rien" (none) au "bloc"
(block), et ainsi redevenir visible. Le sous menu apparaît. Les valeurs de positionnements ne sont là que
pour faciliter "l'accrochage" de la sous liste avec la souris.

X. A LIGNER UNE IMAGE ET DU TEXTE A L ' AIDE DE LA PROPRIETE FLOAT

Sommaire

• Avertissements préliminaires
• Aligner une image à gauche du texte
• Aligner une image à droite du texte
• Complément
Fonctionne avec :

•
Tous les navigateurs graphiques
Propriétés utilisées :

•
float
• line-height
Avertissements préliminaires

• Tout élément flottant doit être déclaré en premier dans le flux, c'est à dire dans la lecture de haut en
bas du code html.
64
 • Les images déclarées dans le code html, qui n'ont pas donc vocation à être des images de fond,
doivent contenir l'attribut alt. Cet attribut est le texte alternatif qui doit apparaître si l'image n'est pas
visualisée. Il a donc un rôle important pour l'accessibilité, et pas pour le référencement !
o Si l'image est purement décorative, le contenu du alt doit être vide ;
o
Si l'image est porteuse d'information, le contenu du alt doit être pertinent et reprendre cette
information.
Aligner une image à gauche du texte
Code xhtml

<p class="flotte">

<img src="images/new.png" alt="Nouveau !" />

</p>

<p>

Toutes les nouveautés, rien que des nouveautés.

</p>

Bien sûr, ce code tout seul positionne l'image au dessus du texte, et puis c'est tout...
Mais en indiquant un float:left dans la classe flotte déclarée dans le paragraphe contenant l'image, celle-ci va
dégager un espace libre sur sa droite (puisqu'elle flotte à gauche) où le texte pourra se placer.

Remarque : si vous n'avez pas de notions sur les classes CSS, mieux vaut lire ce tutoriel avant de continuer.

Code CSS

.flotte {

float:left;

Et là vous allez me dire : C'est bien joli votre truc, mais le texte il est tout en haut de l'image, ça ne le fait
pas.

Nan, mais bien sûr... Si le texte occupe un espace moins haut que la hauteur de l'image (ici 65 pixels)
l'alignement peut paraître mal fait. Cela peut se régler de différentes façons.

65
Si le texte est très court, on peut appliquer une hauteur de ligne égale à la hauteur de l'image, par exemple, à
l'aide de line-height. Le texte sera ainsi naturellement aligné au milieu de cette hauteur (attention, ceci ne
sera donc pas valable si vous avez plusieurs lignes car elles vont être toutes espacées de la hauteur de ligne
déclarée. Mais cela ne sera pas forcément nécessaire non plus...).

Code (x)html

<p class="flotte">

<img src="images/new.png" alt="Nouveau !" />

</p>

<p style="line-height:65px;">

Toutes les nouveautés, rien que des nouveautés.

</p>

Toutes les nouveautés, rien que des nouveautés.

Aligner une image à droite du texte

Pour aligner son image cette fois à droite, on ne change rien au code html. C'est juste dans la feuille de style
qu'il faut déclarer un float:right à la place du float:left.

Code CSS

.flotte {

float:right;

66
}

Toutes les nouveautés, rien que des nouveautés.

Bien entendu, si vous désirez bénéficier des deux options, il faudra deux noms de classes différents et
appliquer celle qui ira bien selon vos désirs.

Première technique : version classique

Fonctionne avec :

•Tous les navigateurs graphiques

Attributs utilisés :

•
color
• display
• font-family ; font-size
• list-style-image ; list-style-position
Code (x)html

Le code pour faire une liste à puces se décline de la façon suivante :

67
 • Les balises <ul></ul> pour déclarer la liste à puces
• Les balises <li></li> qui s'insèrent dans les précédentes pour chaque item.

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ul>

Code CSS

Indiquez dans votre feuille de style externe le code suivant :

li {

font-family: Arial, sans-serif;

font-size: 100%;

color: black;

display : list-item;

list-style-image : url(puce.gif);

• font-family, font-size et color stylent la police de caractère utilisée. Ces propriétés ne sont pas
nécessaires si elles ont déjà été déclarées dans un élément parent (le body par exemple).
• display:list-item est nécessaire pour faire comprendre au navigateur les list-style-... ;
•
list-style-image permet évidemment de déclarer l'image à utiliser comme puce.
Résultat

68
Deuxième technique : variante Made-in Sam
Fonctionne avec :

• Tous les navigateurs graphiques

Attributs utilisés :

• background-image ; background-repeat ; background-position

• color
• display
• font-family ; font-size
• list-style-type
• padding

L'inconvénient de méthode précédemment décrite est que les images choisies comme puces ne sont pas
forcement alignées avec le texte, et pire tous les navigateurs ne positionnent pas ces puces de la même
façon...

Pour palier à ce problème, Docteur Sam prescrit de mettre ces images en fond (background-image:url()),
d'ajuster la position de l'image par rapport au texte à l'aide de l'attribut background-position:vertical
horizontal et d'un petit padding-left pour ne pas que l'image se superpose au texte.

Code CSS

li {

font-family: Arial, sans-serif;

69
font-size: 100%;

color: black;

list-style-type: none;

background-image: url(puce.gif);

background-repeat: no-repeat;

background-position: 0 0.32em;

padding-left: 15px;

Astuce

Afin d'optimiser le code, les trois déclarations de background-... peuvent être synthétisées de la façon
suivante :

background: url(puce.gif) no-repeat 0 0.32em;

La potion du Docteur Sam : c'est de l

XI. CSS 3 : R EALISER DES COINS ARRONDIS

Propriétés utilisées :

•
border
• border-radius
Fonctionne avec :

• Chrome 10, Safari 3.2

• Firefox 3.6, SeaMonkey
• MSIE 9+
• Opera 10.5

70
Maintenant que la propriété border-radius est implémentée même par Internet Explorer, il n'y a plus
vraiment de raisons de ne pas l'utiliser. Et pour les vieux navigateurs qui ne la reconnaissent pas, soit on s'en
moque, soit on reste aux vieilles méthodes...

Arrondir les bords d'un cadre

Code (X)HTML

<div id="coin">

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Mauris vulputate laoreet urna. Integer magna.

Donec facilisis lectus sed quam.

Curabitur sit amet lacus id lacus facilisis venenatis.

</p>

</div>

Code CSS

Il n'y a normalement plus besoin d'utiliser des préfixes propriétaires tels -moz ou -webkit pour avoir la
bonne restitution de l'arrondissement des coins. Néanmoins, pour assurer la compatibilité avec des versions
de Firefox antérieures à la 4, ou pour le webkit de vieux smartphones, il vaut mieux encore les laisser.

La propriété border-radius peut accepter 4 valeurs pour l'arrondissement de chaque coins. La 1 ère valeur
correspond au coin haut gauche, puis on tourne dans le sens des aiguilles d'une montre.
On peut n'en indiquer que 2, qui correspondront aux coins opposés (voir l'exemple ci-dessous), ou une seule
pour un même arrondis sur les 4 coins.

.coin {

background-color:#E4EFFF;

border:1px solid #9FC6FF;

padding:5px;
71
/*arrondir les coins en haut à gauche et en bas à droite*/

-moz-border-radius:10px 0;

-webkit-border-radius:10px 0;

border-radius:10px 0;

Zone de test

Haut

Arrondir les coins d'une image

Pour arrondir les coins d'une image, même principe :

Code (X)HTML

<p>

<img src="/pensees.jpg" width="300" height="400" alt="" class="arrondie" />

72
</p>

Codes CSS

/*sans bordure (1ère photo)*/

.arrondie {

-moz-border-radius:7px;

-webkit-border-radius:7px;

border-radius:7px;

73
Cependant, cette technique ne fonctionne pas avec Opera 11.5 par exemple. On peut alors ruser en déclarant
une bordure qui donnera l'impression de masquer les coins. Cela ne sera néamoins valable que pour de petits
rayons d'arrondissement car ce n'est qu'une pure illusion d'optique.

/*avec bordure (2ème photo)*/

74
.arrondie2 {

border:2px solid black;

-moz-border-radius:7px;

-webkit-border-radius:7px;

border-radius:7px;

XII. C REER DES OMBRES SUR DES BOITES ET DU TEXTE

75
Sommaire

• Ombrer des boites

• Ombrer du texte
• Lectures complémentaires
Ombrer des boites
Fonctionne avec :

• Chrome 10, Safari 3.2

• Firefox 3.6, SeaMonkey
• MSIE 9+
• Opera 10.6

La propriété box-shadow doit recevoir plusieurs valeurs (les deux premières étant obligatoires) :

1. Une valeur de décalage horizontal

2. Une valeur de décalage vertical
3. Une valeur pour l'effet flou
4. Une valeur l'étendue de l'ombre
5. La couleur de l'ombre.
Code (x)html

<div id="ombreout">

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Mauris vulputate laoreet urna. Integer magna.

Donec facilisis lectus sed quam.

Curabitur sit amet lacus id lacus facilisis venenatis.

</p>

</div>

76
Codes CSS

Bien qu'inutiles avec les toutes dernières versions des navigateurs gecko et webkit, il vaut mieux cumuler les
déclarations avec des préfixes propriétaires pour assurer la retro-compatibilité.

.ombreout {

background-color:#C0C0C0;

border:1px solid gray;

padding:5px;

box-shadow:2px 2px 10px gray;

-moz-box-shadow:2px 2px 10px gray;

-webkit-box-shadow:2px 2px 10px gray;

77
Comme les background multiples, on peut déclarer plusieurs ombres à un élément.

.ombremultiple {

background-color:#C0C0C0;

padding:5px;

box-shadow:2px 2px 2px gray,

-1px -1px 2px white;

Ombrer du texte

Contrairement à box-shadow, text-shadow n'est pas implémenté dans Internet Explorer...

Sinon, aucun besoin de préfixes propriétaires et, hormis pour l'étendue qui n'existe pas, même principe
que box-shadow pour les valeurs à lui attribuer.

Code (x)html

<h5>Titre ombré</h5>

Code CSS

h5 {

text-shadow:1px 1px 2px gray;

78
XIII. FLEXBOX

Comprenez la logique : un conteneur, des éléments

Pour faire de la mise en page avec Flexbox, il faut :

1. Définir un conteneur.
2. Et placer à l'intérieur plusieurs éléments.
Imaginez un carton dans lequel vous rangez plusieurs objets : c'est le principe !

Sur une même page web, vous pouvez avoir plusieurs conteneurs (plusieurs cartons, si vous préférez). Vous
pouvez en créer autant que nécessaire pour obtenir la mise en page que vous voulez.

Commençons par étudier le fonctionnement d'un carton (euh pardon, d'un conteneur).

Un conteneur (container en anglais) est une balise qui peut renfermer d'autres balises, comme du texte ou
encore des images. Les conteneurs les plus célèbres sont les balises <div> et <span> .

<div class="container">

<div class="element element1">Élément 1</div>

<div class="element element2">Élément 2</div>

<div class="element element3">Élément 3</div>

</div>
Mais si je fais ça, par défaut, mes éléments vont se mettre les uns en dessous des autres, non ? Ce sont des
blocs, après tout !
Oui, tout à fait, c'est le comportement normal dont nous avons l'habitude. Découvrons donc maintenant
l'intérêt de Flexbox !

Alignez les éléments d'un conteneur avec display: flex;

Il suffit d'une seule propriété CSS, et tout change ! Cette propriété, c'est flex et on l'applique au conteneur :

.container {

display: flex;

}
... alors les blocs se placent par défaut côte à côte. Magique !

79
Donnez leur une direction avec la propriété flex-direction
Flexbox permet d'agencer ces éléments dans le sens que l'on veut. Avec flex-direction, on peut les
positionner verticalement ou encore les inverser. Cette propriété CSS peut prendre les valeurs suivantes :
• row : organisés sur une ligne (par défaut) ;
• column : organisés sur une colonne ;
• row-reverse : organisés sur une ligne, mais en ordre inversé ;
• column-reverse : organisés sur une colonne, mais en ordre inversé.
Ici, on fait simplement :

.container {

display: flex;

flex-direction: column;

}
Ce qui donne :

80
81
Les éléments du conteneur sont disposés en colonne
Mais mais... c'est pareil qu'au début, non ? On avait ce résultat sans Flexbox, après tout !
C'est vrai. Mais maintenant que nos éléments sont flex, ils ont tout un tas d'autres propriétés utiles que nous
allons voir juste après, on va y revenir.

Essayez aussi de tester l'ordre inversé, pour voir :

.container {

display: flex;

flex-direction: column-reverse;

}
Et voilà ce que ça donne :

82
83
Les éléments sont en colonne... dans l'ordre inverse !
Regardez bien la différence : les blocs sont maintenant dans l'ordre inverse ! Je n'ai pas du tout changé le
code HTML, qui reste le même depuis le début.

Retournez à la ligne avec la propriété flex-wrap

Par défaut, les blocs essaient de rester sur la même ligne s'ils n'ont pas la place, quitte à "s'écraser", et
provoquer parfois des anomalies dans la mise en page (certains éléments pouvant dépasser de leur
conteneur). Si vous voulez, vous pouvez demander à ce que les blocs aillent à la ligne lorsqu'ils n'ont plus la
place, avec flex-wrap.
Voilà les différentes valeurs de flex-wrap :

1. nowrap : pas de retour à la ligne (par défaut) ;

2. wrap : les éléments vont à la ligne lorsqu'il n'y a plus la place ;
3. wrap-reverse : les éléments vont à la ligne, lorsqu'il n'y a plus la place, en sens inverse.

.container {

display: flex;

flex-wrap: nowrap;

/* OU wrap;

OU wrap-reverse; */

}
Dans les illustrations suivantes, vous pouvez voir les différents comportements de nos blocs en fonction de
la valeur que l'on attribue à flex-wrap :
Avec flex-wrap: nowrap; :

Les éléments se serrent pour tenir sur la même ligne

Avec flex-wrap: wrap; :

Les éléments passent à la ligne s'ils ne rentrent pas tous sur la même ligne
Cette propriété sera particulièrement utile quand nous aurons besoin d'adapter nos pages aux plus petits
écrans. Nous verrons ça dans la prochaine partie de ce cours.

84
Avec flex-wrap: wrap-reverse; :

Les éléments passent à la ligne mais à l'envers

Alignez les éléments sur un axe principal et secondaire
Les éléments sont organisés par défaut de manière horizontale. Mais ils peuvent être organisés de manière
verticale. Selon le choix que vous faîtes, ça va définir ce qu'on appelle l'axe principal. Il y a aussi un axe
secondaire :

• si vos éléments sont organisés horizontalement, l'axe secondaire est l'axe vertical ;
• si vos éléments sont organisés verticalement, l'axe secondaire est l'axe horizontal.
Pourquoi je vous raconte ça ? Parce que nous allons découvrir comment aligner nos éléments sur l'axe
principal et sur l'axe secondaire.

Alignez sur l'axe principal avec la propriété justify-content

Pour faire simple, partons sur des éléments organisés horizontalement (c'est le cas par défaut).
Pour changer leur alignement, on va utiliser justify-content, qui peut prendre ces valeurs :
• flex-start: alignés au début (par défaut) ;
• flex-end: alignés à la fin ;
• center: alignés au centre ;
• space-between: les éléments sont étirés sur tout l'axe (il y a de l'espace entre eux) ;
• space-around: idem, les éléments sont étirés sur tout l'axe, mais ils laissent aussi de l'espace sur les
extrémités.
On écrit alors :

.container {

display: flex;

justify-content: flex-start /* OU flex-end

OU center

OU space-between

OU space-around; */

}
Le mieux est encore de tester toutes les valeurs possibles pour voir ce que ça donne, vous ne pensez pas ?

Manipulez toutes les valeurs possibles de justify-content dans le CodePen P3C3.

85
Vous voyez comment les éléments s'alignent différemment selon les cas ? Avec une simple propriété, on
peut intelligemment agencer nos éléments comme on veut !

Maintenant, voici ce qu'il faut bien comprendre : ça marche aussi si vos éléments sont dans une direction
verticale. Dans ce cas, l'axe vertical devient l'axe principal, et justify-content s'applique aussi :

.container {

display: flex;

flex-direction: column;

justify-content: center;

height: 350px; /* Un peu de hauteur pour que les éléments aient la place de bouger */

}
Avec une direction verticale (“column”), le centrage fonctionne de la même façon, mais cette fois en
hauteur.

Ajoutez flex-direction: column; dans le CodePen P3C3, vous verrez la différence !

Alignez sur l'axe secondaire avec align-items
Si nos éléments sont placés dans une direction horizontale (ligne), l'axe secondaire est... vertical. Et
inversement : si nos éléments sont dans une direction verticale (colonne), l'axe secondaire est horizontal.

La propriété align-items permet de changer leur alignement sur l'axe secondaire, grâce aux valeurs :
• stretch: les éléments sont étirés sur tout l'axe (valeur par défaut) ;
• flex-start: alignés au début ;
• flex-end: alignés à la fin ;
• center: alignés au centre ;
• baseline: alignés sur la ligne de base (semblable à flex-start ).
Pour ces exemples, nous allons partir du principe que nos éléments sont dans une direction horizontale (mais
n'hésitez pas à tester aussi dans la direction verticale !).

.container {

display: flex;

justify-content: center;

align-items: center;

}
Ajoutez align-items: center; dans le CodePen P3C3, vous verrez le résultat !
Saint Graal du développeur web, le centrage vertical et horizontal peut d'ailleurs être obtenu encore plus
facilement. Dites-vous que votre conteneur est une Flexbox, et établissez des marges automatiques sur les
éléments à l'intérieur. C'est tout ! Essayez :

.container {

86
 display: flex;

.element {

margin: auto;

}
Répartissez les blocs sur plusieurs lignes avec align-content
Si vous avez plusieurs lignes dans votre Flexbox, vous pouvez choisir comment celles-ci seront réparties
avec align-content.
Cette propriété n'a aucun effet s'il n'y a qu'une seule ligne dans la Flexbox.
Prenons donc un cas de figure où nous avons plusieurs lignes. J'autorise les éléments à aller à la ligne
avecflex-wrap.
Voyons voir comment les lignes se répartissent différemment avec la nouvelle propriété align-content que
je voulais vous présenter. Elle peut prendre ces valeurs :
• stretch (par défaut) : les éléments s'étirent pour occuper tout l'espace ;
• flex-start : les éléments sont placés au début ;
• flex-end : les éléments sont placés à la fin ;
• center : les éléments sont placés au centre ;
• space-between : les éléments sont séparés avec de l'espace entre eux ;
• space-around : idem, mais il y a aussi de l'espace au début et à la fin.
Amusez-vous avec le CodePen P3C3 pour tester tout cela en remplaçant la propriété justify-
content par align-content !
Et si vous voulez vous entraîner pour vous assurer que vous maîtrisez bien les propriétés de Flexbox, je vous
recommande le jeu Flexbox Froggy. Avec les différentes propriétés, vous devrez replacer les grenouilles
sur les nénuphars.
À vous de jouer !

Maintenant que vous maîtrisez les propriétés de Flexbox, nous allons en profiter pour mettre en forme les
pages du portfolio de Robbie Lens !

À partir de maintenant, la mise en page devient plus élaborée : vous pouvez donc, si vous le voulez, vous
référer à la maquette (le modèle) du site de Robbie Lens.

Pour y accéder, vous avez besoin de créer un compte sur Figma, c'est gratuit.
Des modifications ont été apportées au fichier de code pour que vous ayez davantage d'éléments :

• des images ont été ajoutées dans le dossier "images" ;

• des sections ont été ajoutées dans la page d'accueil ;
• le style du footer a été modifié pour avoir le logo en haut à gauche de la page, et les liens de
navigation à droite.
Allez récupérer le modèle que vous trouverez dans la branche P3C3-exercice.
À partir de cette base de code, vous allez :

• utiliser flex pour avoir le logo en haut à gauche de la page, et les liens de navigation à droite dans
l’en-tête ;
87
 •
réagencer les éléments pour avoir le titre de la page d'accueil, le paragraphe, et le lien ayant la classe
"CTA" à gauche, et la photo à droite ;
• importer les images dans la page d'accueil, et créer une grille d'images avec deux rangées de
3 images chacune.
Vous trouverez dans la base de code, pour démarrer l'exercice, des exercices qui vous aideront à mettre en
place votre code. Et une fois que vous aurez fini, vous pouvez comparer ce que vous avez fait avec la
solution sur la branche P3C3-solution.
En résumé
•
Le principe de Flexbox est d'avoir un conteneur avec plusieurs éléments à l'intérieur. Avec display:
flex; sur le conteneur, les éléments à l'intérieur sont agencés en mode Flexbox (horizontalement, par
défaut).
• Flexbox peut gérer toutes les directions. Avec flex-direction , on peut indiquer si les éléments sont
agencés horizontalement (par défaut) ou verticalement. Cela définit ce qu'on appelle l'axe principal.
• L'alignement des éléments se fait sur l'axe principal avec justify-content et sur l'axe secondaire
avec align-items .
• Avec flex-wrap, on peut autoriser les éléments à revenir à la ligne s'ils n'ont plus d'espace.
• S'il y a plusieurs lignes, on peut indiquer comment les lignes doivent se répartir entre elles
avec align-content.
Alors, la découverte de Flexbox vous a plu ? J'espère, parce que dans le chapitre suivant nous allons voir
les bases d'un outil tout aussi puissant : CSS Grids !

• #

Et si vous obteniez un diplôme OpenClassrooms ?

• Formations jusqu’à 100 % financées

• Date de début flexible
• Projets professionnalisants
• Mentorat individuel

Trouvez la formation et le financement faits pour vous

Être orientéComparez nos types de formation

XIV. ANIMATIONS ET MEDIAQUERIES

Propriétés utilisées :

•
animation
• transition
Sommaire

• Réaliser une transition

• Réaliser une animation
• Lectures complémentaires

88
Avertissement préliminaire : les trucs qui bougent pourtout, qui scintillent, qui clignotent sans arrêt, ont un
haut pouvoir de nuisance sur la concentration et la sérénité du visiteur. Ces techniques sont donc à utiliser
avec raison et parcimonie.

Réaliser une transition

Fonctionne avec :

• Chrome 4, Safari 3.1

• Firefox 4
• MSIE 10
• Opera 10.5

Un changement de couleur de fond au survol de la souris, ou au focus d'un lien, se fait par défaut de façon
binaire : on passe du tout au rien. À l'aide de transition, on peut faire en sorte que ce comportement se fasse
de façon progressive.

L'exemple ci-dessous permet de modifier la transparence de la couleur déclarée en rgba en la faisant passer
de 60% (une opacité de 0,4) à une opacité totale. Cette transition s'effectura en 2 secondes de façon
constante (accélération linéaire).
Pour les navigateurs plus anciens n'interprétant pas les couleurs rgba, on prendra soin de déclarer, juste
avant, le background avec des codes hexadécimaux classiques.

Code HTML

<p id="doigt">

<a href="#doigt">On ne montre pas du doigt !</a>

</p>

Code CSS

#doigt a {

padding: 10px 10px 10px 77px;

/* pour les vieux navigateurs */

background:#FAC27E url(/https/fr.scribd.com/images/main.png) no-repeat 5px 10px;

/* pour les navigateurs récents */

89
background: rgba(255,140,0,0.4) url(/https/fr.scribd.com/images/main.png) no-repeat 5px 10px;

border: 1px solid #FF8C00;

border-radius: 5px;

p#doigt a:hover, p#doigt a:focus {

color: black;

background-color:#ff8c00; /* pour les vieux navigateurs */

background-color: rgba(255,140,0,1);

transition-property: background-color;

transition-duration: 2s;

transition-timing-fonction: linear;

De façon raccourcie, on peut déclarer simplement :

transition: background-color 2s linear;

Au moment de l'écriture de ces lignes, la specification du W3C sur transition n'étant encore qu'à l'état de
brouillon, les navigateurs l'implémentent avec des préfixes propriétaires : -moz pour firefox et autre gecko, -
webkit pour chrome et safari, et enfin -o pour opera. Seul IE10 implémente(ra) la propriété sans préfixe (et
comme c'est au futur, pour l'instant, on met le préfixe).

Le code entier devra donc être :

-webkit-transition: background-color 2s linear;

-moz-transition: background-color 2s linear;

90
-ms-transition: background-color 2s linear;

-o-transition: background-color 2s linear;

transition: background-color 2s linear;

L'accélération peut prendre d'autres effets plus ou moins sophistiqués. Pour les visualiser, je vous invite à
vous rendre sur cette page réalisée par David Catuhe.

Haut

Réaliser une animation

Fonctionne avec :

• Chrome 4, Safari 4
• Firefox 5
• MSIE 10
• Opera 12

Vous vous demandez bien pourquoi j'ai mis cette stupide petite main devant mon texte hein ? Vous allez
comprendre avec cet exemple simpliste qui va tenter d'expliquer le principe d'animation.

Celle-ci se déclare en deux étapes dont l'ordre n'a pas d'importance :

• La première consiste à indiquer, au minimum, le nom que l'on donne à l'animation (animation-name),
sa durée (animation-duration) et le nombre de boucles (animation-iteration-count) ;
• pour la seconde, déclarée à l'aide d'une règle intitulée de @keyframes à laquelle on accole le nom de
l'animation, on notifie les effets voulus aux moments voulus, ces derniers étant indiqués en
pourcentage du temps total déclaré.

L'animation ci-après, qui se déclenche toujours au focus ou au survol de la souris, consiste à faire aller et
venir la petite main devant le lien. Quant à la modification de transparence du background, elle va se payer
le luxe de suivre le déplacement de l'image.

Code CSS

/* première étape */

p#doigt a:hover, p#doigt a:focus {

background-color:#ff8c00; /* pour les vieux navigateurs */

91
color: black;

animation-name: doigt; /* nom de l'animation */

animation-duration: 4s; /* temps de l'animation (4s) */

animation-iteration-count: infinite; /* nombre de boucles (infinie) */

animation-timing-function: linear; /* accelération de l'animation (constant) */

/* deuxième étape */

@keyframes doigt {

0% {background:rgba(255,140,0,0.4) url(/https/fr.scribd.com/images/main.png) no-repeat 5px 10px;}

50% {background:rgba(255,140,0,1) url(/https/fr.scribd.com/images/main.png) no-repeat 50px 10px;}

100% {background:rgba(255,140,0,0.4) url(/https/fr.scribd.com/images/main.png) no-repeat 5px 10px;}

La version raccourcie de la règle pour animation est la suivante :

animation: doigt 4s infinite linear;

Mais là encore il faudra les préfixes propriétaires, ceux du @keyframes s'insérant entre le @ et keyframe.
Exemple : @-moz-keyframe.

LES M EDIA -Q UERIES

Les Media Queries permettent donc de cibler :

92
 • Le type de média
• La taille de l'écran
• La taille de la fenêtre
• La résolution
• Le nombre de couleurs
• L'orientation
• ...

Pour en expliquer le principe, on se limitera à deux exemples :

1. La largeur de la fenêtre avec un contrôle du width ;

2. La largeur de l'écran du terminal avec le contrôle de device-width (ah non, ce n'est pas la même
chose que width tout seul) ;
Fonctionne avec :

•Chrome, Safari
• Firefox, SeaMonkey
• MSIE 9
• Opéra
Cibler la largeur de la fenêtre

Petit exemple très visuel : changer la couleur de fond initialement blanche de la page lorsque la taille de la
fenêtre du navigateur passe au dessous des 800 pixels de large.

Très simplement, alors que la couleur de fond (background-color) du body est déclaré blanche, on déclarera
une couleur noire pour tout écran (screen) ayant une taille maximum (max-width) de 800px, dans une
déclaration @media {}.

Code CSS

body {

background-color:white;

color:black;

@media only screen and (max-width:800px) {

body {

93
background-color:black;

color:white

Tester le résultat du contrôle de width.

Avec un smartphone, dont on ne peut modifier la taille de la fenêtre, le résultat sera différent selon son
"viewport" (partie visible de l'écran). Et de ce côté là, les constructeurs s'en donnent à coeur joie pour
multiplier les configurations.

Un androïd a un viewport de 800px, mais un iphone4 en a un de 980px. Dans le 1er cas le fond sera donc
noir alors que dans le second il sera blanc...

Cibler la largeur de l'écran

Avec device-width, on ne ciblera plus la largeur de la fenêtre, mais la largeur de l'écran. Intéressant pour les
smartphones..

Reprenons donc le même principe que ci-dessus, mais en déclarant un max-device-width:480px à la place
du max-width:800px.

Code CSS

body {

background-color:white;

color:black;

@media only screen and (max-device-width:480px) {

body {

background-color:black;

94
color:white

Avec cet exemple, un androïd aura un fond noir en orientation portrait et blanc en orientation paysage. A
noter que selon le navigateur utilisé, un refresh pourra être nécessaire pour visualiser le résultat.

Tester le résultat du contrôle de device-width.

Appliquer à la taille des caractères

Une application sans doute plus intéressante pour la dimension des polices de caractère souvent trop petite et
donc illisible sans zoom sur un écran de téléphone portable. Couplée à une déclaration sur la taille
du viewport dans les meta de l'en-tête de la page, la redéfinition de la taille des caractères fera des miracles.

Code html

À inclure entre les balises head :

<meta name="viewport" content="width=device-width" />

Code CSS

L'écran ayant un viewport le plus grand étant celui de l'Iphone4 avec ses 980px, c'est cette taille qui sera
choisie :

body {

font-size:100%

@media only screen and (max-device-width:980px) {

body {

font-size:120%;

95
}

Captures

Ces captures d'écran ont été réalisées à partir du site Émulateur Mobile.

Sans meta et media-query

Avec meta et media-query

De même, des éléments positionnés sur une grande largeur de page pourront avantageusement être disposés
de façon plus adaptée à une largeur d'écran moins importante. Les possibilités sont énormes.
En dehors d'un problème d'implémentation encore prégnant, notamment avec ce cher Internet Explorer, plus
aucun site ne devrait à présent dépasser les bornes... pardon : les bords ;-).

96
 TRAVAUX PRATIQUES

TP1 IMAGE GIF

Écrire le code HTML et la feuille de style CSS pour obtenir le rendu ci-dessous, en utilisant l'image ci-
dessous.

• Nyan cat
• Bleu : #0f4d8f

<body>
<h1>Nyancat</h1>
<img src="https://aymeric-auberton.fr/img/css/nyamcatrainbow.gif" alt="Nyan cat" />
</body>
body {
background: #0f4d8f;
text-transform: uppercase;
color: white;
text-align: center;
}
img {
border: 5px white solid;
border-radius: 35px;
padding: 35px;
97
}

TP2 POSITIONNEMENT TABLEAU

Modifier le code HTML et la feuille de style CSS pour obtenir le rendu ci-dessous, en utilisant les images
suivantes.

• Carré noir
• Carré blanc
• Carré rouge

Aperçu du rendu de l'exercice 15

<body>
<table></table>
</body>
img {
display: block;
}

98
table {
margin: auto;
border-collapse: collapse;
border-spacing: 0;
}
td {
padding: 20px;
border: 1px black solid;
}
<body>
<table>
<tr>
<td><img src="https://aymeric-auberton.fr/img/css/white.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/white.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/black.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/black.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/white.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/black.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/black.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/white.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/white.png" /></td>
</tr>
<tr>
<td><img src="https://aymeric-auberton.fr/img/css/white.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/black.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/red.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/red.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/black.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/red.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/red.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/black.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/white.png" /></td>
</tr>
<tr>
<td><img src="https://aymeric-auberton.fr/img/css/black.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/red.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/white.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/red.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/red.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/red.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/red.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/red.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/black.png" /></td>
</tr>
<tr>
<td><img src="https://aymeric-auberton.fr/img/css/black.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/red.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/red.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/red.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/red.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/red.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/red.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/red.png" /></td>

99
 <td><img src="https://aymeric-auberton.fr/img/css/black.png" /></td>
</tr>
<tr>
<td><img src="https://aymeric-auberton.fr/img/css/black.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/red.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/red.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/red.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/red.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/red.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/red.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/red.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/black.png" /></td>
</tr>
<tr>
<td><img src="https://aymeric-auberton.fr/img/css/white.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/black.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/red.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/red.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/red.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/red.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/red.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/black.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/white.png" /></td>
</tr>
<tr>
<td><img src="https://aymeric-auberton.fr/img/css/white.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/white.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/black.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/red.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/red.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/red.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/black.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/white.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/white.png" /></td>
</tr>
<tr>
<td><img src="https://aymeric-auberton.fr/img/css/white.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/white.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/white.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/black.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/red.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/black.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/white.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/white.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/white.png" /></td>
</tr>
<tr>
<td><img src="https://aymeric-auberton.fr/img/css/white.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/white.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/white.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/white.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/black.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/white.png" /></td>

100
 <td><img src="https://aymeric-auberton.fr/img/css/white.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/white.png" /></td>
<td><img src="https://aymeric-auberton.fr/img/css/white.png" /></td>
</tr>
</table>
</body>
img {
display: block;
}
table {
margin: auto;
border-collapse: collapse;
border-spacing: 0;
}
td {
padding: 0;
}

TP3 DES PLANETES

Écrire le code HTML et la feuille de style CSS pour obtenir le rendu ci-dessous, en utilisant les images ci-
après.

• Fond
• Planète 1
• Planète 2
• Planète 3

Aperçu du rendu de l'exercice 16

101
<body>
<p>
<img id="p1" src="planet-1.png" />
<img id="p2" src="planet-2.png" />
<img id="p3" src="planet-3.png" />
</p>
</body>
body {
background-image: url("bg.webp");
}
#p1 {
width: 190px;
}
#p2 {
width: 250px;
}
#p3 {
width: 320px;
}
p{
text-align: center;
margin-top: 110px;
}
TP4 BORDER RADIUS

Écrire le code HTML et la feuille de style CSS pour obtenir le rendu ci-dessous, en utilisant l'image ci-après.

• Image

Pour centrer le contenu d'un élément avec avec la propriété display à block, il faut utiliser la propriété et la
valeur suivante : margin: auto;.

Aperçu du rendu de l'exercice 20

102
<body>
<div id="a1"></div>
<div id="a2"></div>
<div id="a3"></div>
</body>
body {
background: url(snow-black.gif);
}
div {
border-radius: 50%;
width: 50px;
height: 50px;
background: white;
margin: auto;
}
#a1 {
margin-top: 150px;
margin-right: 450px;
}
#a2 {
width: 150px;
height: 150px;
}
#a3 {
margin-top: 50px;
margin-left: 450px;
width: 85px;
height: 85px;
}

TP5 PARTITION PAGE

Écrire le code HTML et la feuille de style CSS pour obtenir le rendu ci-dessous, en utilisant l'image ci-après.

• Image
• Couleur bleu : blue
• Couleur grise : grey

103
<body>
<div id="header">
<img src="https://aymeric-auberton.fr/img/css/css-flag.png" />
</div>
<h1>France</h1>
<p>La France, en forme longue depuis 1875 la République française, est un <a
href="https://fr.wikipedia.org/wiki/France">État</a> souverain transcontinental dont le territoire
métropolitain s'étend en Europe de l'Ouest et dont le territoire ultramarin s'étend dans les océans Indien,
Atlantique, Pacifique, ainsi qu'en Antarctique et en Amérique du Sud. Le pays a des frontières terrestres
avec la Belgique, le Luxembourg, l'Allemagne, la Suisse, l'Italie, l'Espagne, Monaco et l'Andorre en Europe,
auxquelles s'ajoutent les frontières terrestres avec le Brésil, le Suriname et les Pays-Bas aux Amériques. La
France dispose d'importantes façades maritimes sur l'Atlantique, la Méditerranée, le Pacifique et l'océan
Indien, lui permettant de bénéficier de la deuxième plus vaste zone économique exclusive du monde.</p>
<h2>Informations clés</h2>
<ul>
<li>Capitale : <strong>Paris</strong></li>
<li>Langue officielle : <strong>Français</strong></li>
<li>Fête nationale : <strong>14 juillet</strong></li>
</ul>
<h2>Principales villes</h2>
<table>
<tr>
<th>Ville</th>
<th>Superficie</th>
<th>Habitants</th>
</tr>
<tr>
<td>Lyon</td>
<td>47,87 km²</td>
<td>5 132 750</td>
104
 </tr>
<tr>
<td>Bordeaux</td>
<td>49,36 km²</td>
<td>1 215 769</td>
</tr>
<tr>
<td>Lille</td>
<td>34,51 km²</td>
<td>1 184 708</td>
</tr>
</table>
</body>
#header {
text-align: center;
}
#header img {
height: 50px;
}
h1, h2 {
text-transform: uppercase;
color: blue;
}
p, ul, #header {
background: grey;
padding: 20px;
border: 1px blue solid;
}
ul {
padding-left: 35px;
}
table, th, td {
border: 1px blue solid;
}
th {
background: grey;
text-transform: uppercase;
text-align: center;
}

TP6 TABLEAUX AVANCEES

Écrire le code HTML et la feuille de style CSS pour obtenir le rendu ci-dessous, en utilisant l'image ci-après.

• Squeezie
• SolaryFortnite
• Gotaga
• Couleur bleu : #008CBA

105
 • Couleur noire : #555555
• Couleur verte : #4CAF50
• Police : monospace

<body>
<h1>Les streamers Twitch français les plus suivis <span>novembre 2022</span></h1>
<hr />
<p><button id="blue">Le plus populaire</button><button id="green">Le plus regardé</button><button
id="black">Croissance la plus rapide</button></p>
<hr />
<table border="2">
<thead>
<tr>
<th>Rang</th>
<th>Nom</th>
<th>Lien</th>
<th colspan="2">Statistiques</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1.</td>
<td rowspan="2" class="name"><img src="https://aymeric-auberton.fr/img/html-squeezie.png" />
<strong>Squeezie</strong></td>
<td rowspan="2"><a href="https://www.twitch.tv/squeezie">https://www.twitch.tv/squeezie</a></td>
<td><strong>Nombre de followers</strong><br/>3,944,989</td>
<td><strong>Vu la première fois</strong><br/>24 novembre 2013</td>
</tr>
<tr>
<td><strong>Heures de visionnage</strong><br/>4,761,997</td>
<td><strong>Pic de téléspectateurs</strong><br/>1,018,817</td>
</tr>
<tr>
<td rowspan="2">2.</td>

106
<td rowspan="2" class="name"><img src="https://aymeric-auberton.fr/img/html-gotaga.png" />
<strong>Gotaga</strong></td>
<td rowspan="2"><a href="https://www.twitch.tv/gotaga">https://www.twitch.tv/gotaga</a></td>
<td><strong>Nombre de followers</strong><br/>3,750,621</td>
<td><strong>Vu la première fois</strong><br/>17 août 2011</td>
</tr>
<tr>
<td><strong>Heures de visionnage</strong><br/>1,341,942</td>
<td><strong>Pic de téléspectateurs</strong><br/>72,185</td>
</tr>
<tr>
<td rowspan="2">3.</td>
<td rowspan="2" class="name"><img src="https://aymeric-auberton.fr/img/html-solary.png" />
<strong>SolaryFortnite</strong></td>
<td rowspan="2"><a
href="https://www.twitch.tv/solaryfortnite">https://www.twitch.tv/solaryfortnite</a></td>
<td><strong>Nombre de followers</strong><br/>2,075,772</td>
<td><strong>Vu la première fois</strong><br/>26 févirer 2018</td>
</tr>
<tr>
<td><strong>Heures de visionnage</strong><br/>397,443</td>
<td><strong>Pic de téléspectateurs</strong><br/>2,628</td>
</tr>
</tbody>
</table>
</body>
body {
font-family: monospace;
}
button {
color: white;
padding: 15px 30px;
font-size: 16px;
border: none;
border-radius: 8px;
margin-right: 10px;
}
#green {
background: #4CAF50;
}
#black {
background: #555555;
}
#blue {
background: #008CBA;
}
h1 {
color: #008CBA;
}
h1 span {
font-size: 10px;
font-style: italic;
background: #e7e7e7;

107
 color: black;
border-radius: 5px;
padding: 0 5px;
}
th {
background: #e7e7e7;
}
strong {
background: #4CAF50;
color: white;
padding: 0 5px;
}
.name strong {
background: #008CBA;
}

TP A VOUS DE JOUER

1.

Reprendre le formulaire d’authentification crée précédemment. En utilisant Créer un fichier

CSS séparé, produire la mise en forme suivante :

U TILISERLES PROPRIETESSUIVANTES :

BACKGROUND - IMAGE : LINEAR - GRADIENT ( WHITE , #ADD8E6, WHITE )

BORDER - STYLE : GROOVE ;

BORDER - COLOR : …..;

POSITION : ABSOLUTE ;

LEFT : 732 PX ;

TOP : 186 PX ;
108
TEXT - DECORATION : UNDERLINE ; TEXT - DECORATION - COLOR : RED ; COLOR : BLUE

BACKGROUND - COLOR : LIGHTBLUE ;

MAX - WIDTH : 460 PX ;

BORDER - TOP - RIGHT - RADIUS : 120 PX ;

BORDER - RADIUS : 50 PX ;

BORDER - STYLE : SOLID ; BORDER - LEFT - COLOR : RED ;

2. Donnerle code HTML et CSS associé à l’interface ci-dessous:

Critères à prendre en compte :

• Bordure du tableau : couleur #FF0000; largeur 4px ;
• En-tête du tableau : Arrière-plan jaune (#FFFF66) ; texte (bleu (#000099); italique ; centré)
• Lignesimpaires : Arrière-plan #FFCCCC ; texte (taille (14px); police (TimesNew Roman))
• Lignes paires : Arrière-plan #66FFFF) ; texte (taille (14px) ; police (Times New Roman))
• NB : N’oubliez pasles « . » pourles classes et « # » pourlesidentifiants.

3. Consignes: • En utilisant les différentes méthodes de positionnement, créer une page similaire à
l’image ci-dessous sans utiliser les tableaux.

• Utilisez les media queries pourrendre le site responsif

109
 • Ajouter des animations
Bonus : Personnalisez le thème de la maquette en proposant des données et des images liées à un
thème : blog, site e-commerce,….

110