View
4
Download
0
Category
Preview:
Citation preview
1
Chapitre 3 :
CSS : Cascading Style Sheets
2
CSS
CSS : c’est l’abréviation de Cascading Style
Sheets("Feuille de style en cascade").
Ce langage nous sert uniquement à présenter la
page web.
Grâce à ce langage, nous allons pouvoir créer
rapidement et simplement la mise en page du
site.
HTML pour écrire le contenu de nos pages web.
CSS pour présenter ce contenu.
Ces 2 langages sont donc complémentaires.
3
Principe des CSS
• Le design d'un site évolue toujours au fil du temps.
• Le problème, lorsqu'on n'utilise pas de feuilles de style,
c'est qu'il faut reprendre toutes les pages une à une pour
modifier une police de caractère ou une couleur de fond.
• Avec les "Cascading Style Sheets" (CSS), ce lourd
handicap est résolu.
• C'est dans la feuille de style que l'on va déclarer toute la
mise en forme des pages : la couleur de fond, les polices
de caractère, leurs couleurs, etc.
Celle-ci sera liée à chaque page html.
• Ainsi, lorsqu'on en modifiera un élément, cela se
répercutera immédiatement sur toutes les pages web.
4
Principe des CSS
5
Format CSS
• On écrit le code CSS dans un fichier à part (à
l’extension .css au lieu de .html).
• C’est un fichier dans lequel on écrit l’apparence
que notre site doit avoir :
la couleur et la police du texte, la taille des titres, la
position des menus, la couleur ou l’image de fond
etc…
6
<link rel="stylesheet" type="text/css"href="design.css" />
Appel d’un fichier .css
<!DOCTYPE html>
<html >
<head>
<title>Exemple d’utilisation de CSS externe</title>
<metahttp-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
</head>
<body>
</body>
</html>
7
<link rel="stylesheet" type="text/css“ href="design.css" />
La balise <Link> avertit le navigateur qu’il doit chercher
un document situé à l’extérieur de la page HTML.
L’attribut rel="stylesheet"précise que le document en
question est une feuille de style externe.
L’attribut type="text/css" précise le type de feuille de
style.
L'attribut href indique l’emplacement du fichier CSS à
utiliser.
Appel d’un fichier .css
8
Directement dans le header du fichier HTML
Il est aussi possible de taper du CSS directement à l’intérieur même du fichier
HTML, entre les balises <head> </head>.
Vous devrez y mettre une balise <style> </style>à l’intérieur, comme ceci :
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Exemple de CSS dans le header</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* Vous taperez votre code CSS ici */
</style>
</head>
<body>
</body>
</html>
9
Appliquer un style à des balises (dans un fichier
CSS)
Dans un CSS, on trouve 3 éléments différents :
Des noms de balises : on écrit les noms des balises dont on veut
modifier l’apparence.
Par exemple, si je veux modifier l’apparence de tous les titres <h1>,
je dois écrire h1.
Des propriétés CSS : les "effets de style" de la page sont rangés
dans des propriétés.
Il y a par exemple la propriétécolor qui permet d'indiquer la couleur
du texte, font-size qui permet d'indiquer la taille du texte etc...
Les valeurs :à chaque propriété CSS on doit indiquer une valeur.
Par exemple, pour la couleur, il faut indiquer le nom de la couleur.
Pour la taille, il faut indiquer quelle taille on veut etc etc...
10
Exemple CSS
Supposons par exemple que je veuille modifier tous mes
paragraphes pour qu'ils soient écrits en bleu, avec une
taille de 18 pixels.
Je sais que tous les textes de mes paragraphes sont entre des balises <p> </p>, je vais donc écrire le code CSS suivant :
p {
color: blue; font-size: 18px;
}
11
Appliquer un style à plusieurs balises
h1 {
color:red;
}
h2 {
color:red;
}
h1, h2 {
color:red;
}
12
Des commentaires dans du CSS
Pour faire un commentaire, vous tapez /*, suivi de
votre commentaire, puis */ pour terminer votre
commentaire.
p {
color:blue; /* Les paragraphes seront bleus*/
font-size:18px; /* La taille de 18 pixels me semble
pas mal*/
}
13
Utiliser les classes
Les class vous permettent de définir un style personnalisé.
Exemple: Supposons que vous vouliez définir un style appelé"important" pour écrire le texte en rouge / 18 pixels. Vous rajouterez l'attribut class="important"à chacune des balises que vous voulez modifier.
<h1 class=" "> </h1>
<p class=" "></p> paragraphe <img class=" " /> image
titre
14
Utiliser les classes
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Page d'exemple pour tester le CSS</title>
<metahttp-equiv="Content-Type" content="text/html"; charset=iso-8859-1" />
<link rel="stylesheet"type="text/css" href="essai.css" />
</head>
<body> <p class="important"> Bonjour tout le monde </p>
</body>
</html> Fichier CSS :
.important
{ color:red;
font-size:18px; }
15
L'attribut id
Il fonctionne exactement de la même manière que class, à un
détail prêt :
il ne peut être utilisé qu’une fois.
En pratique, nous ne mettrons des "id"que sur des éléments qui
sont uniques sur votre page, comme par exemple le logo : <img
src="images/logo.png"id="logo" /> Dans le CSS, ce n'est pas un
point que vous devez mettre avant le nom de l'id, mais un dièse
(#) :
#logo {
/* Mettez les propriétés CSS ici */
}
16
Les balises universelles
Appliquer une class (ou un id) à certains mots qui ne sont pas
entourés par des balises.
Exemple: modifier uniquement “grand père” dans le
paragraphe suivant :
<p>Comme l’a dit grand père un certain 20 juillet 1969...</p>
<span> </span> : c'est une balise de type inline, c'est une
balise qui se met à l'intérieur d'un paragraphe, comme <strong>,
<em>, <q>.
<div> </div> : c'est une balise de type block. Comme <p>,
<h1> etc... Elle crée un nouveau "bloc" dans la page, et
provoque donc obligatoirement un retour à la ligne.
inline
block
17
Exemple
Code HTML:
<p>Comme l'a dit <span class="nom">Neil
Armstrong</span>un certain
20 juillet 1969...</p>
Code CSS :
.nom {
color:blue;
}
Donc pour définir un style applicable seulement à une
partie de la page et non plus à une balise <HTML> précise,
vous pouvez placer un attribut style dans une balise <DIV>
(division) ou <SPAN> ( fusion).
Ces balises définissent une zone de texte donnée, donc
tout ce qui se trouve entre la balise de début et la balise de
fin adopte le style défini.
18
Imbrications de balises
Définir un style uniquement pour les balises <em>
qui se trouvent à l'intérieurd’un titre <h3>.
h3 em
{
color: blue;
}
19
Taille du texte
En pixels : c'est une façon très précise d'indiquer la taille du texte.
p
{ font-size:14px; /* Paragraphes de 14 pixels */ }
h1
{ font-size:22px; /* Titres de 22 pixels */ }
En pourcentage :
Si vous indiquez "100%", le texte aura une taille "normale".
Si vous mettez "130%", le texte aura une taille
correspondant à 130% de la taille normale.
20
Taille du texte
En donnant une valeur
relative :
xx-small :minuscule
x-small :très petit
small :petit
medium :moyen
large :grand
x-large :très grand
xx-large : plus grand que le
x-large
En em : c’est une autre façon d’indiquer
de manière relative la taille du texte.
On doit indiquer la taille du texte par
rapport à la taille normale de la police.
"1em" signifie "Taille normale".
.petit_em {
font-size:0.7em;
}
.grand_em {
font-size:1.3em;
}
21
Polices
La propriété CSS qui permet d'indiquer la police est :
font-family
Vous devez indiquer le nom de la police comme ceci :
font-family:police;
Pour éviter qu'il n'y ait de problème si l'internaute n'a pas
la même police que vous, on met en général plusieurs
noms de police, séparés par des virgules :
font-family:police1, police2, police3, police4;
Le navigateur essaiera d'abord de mettre la police1.
S'il ne l'a pas, il essaiera de mettre la police2. S'il ne l'a
pas, il essaiera la police3 et ainsi de suite.
22
Polices
Voici une liste de polices qui fonctionnent bien sur la plupart
des navigateurs :
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana
23
Exemple
h1 {
font-family:"Arial Black", Arial, Verdana, serif;/* On
essaie d'avoir Arial Black en priorité */
}
p {
font-family:"Comic Sans MS", "Trebuchet MS", Georgia,
serif;
}
24
Alignement simple
On utilise la propriété text-align, et on indique
l’alignement désiré :
left :le texte sera aligné à gauche (c'est le réglage par
défaut).
center: le texte sera centré.
right: le texte sera aligné à droite.
justify: le texte sera "justifié".
Exemple :
.signature
{ text-align:right;/* Pour aligner à droite ma signature */ font-family: "Comic Sans MS", Georgia, "Times New Roman", serif; font-size: 80%;
}
25
L'indentation: la mise en retrait du texte
Cela permet par exemple de faire commencer un
paragraphe un peu plus à droite.
On utilise la propriété text-indent
On doit indiquer quelle est la taille du retrait : on peut le
faire en pixels, en centimètres, en millimètres...
p {
text-indent: 30px; /* Les paragraphes commenceront 30
pixels sur la droite */ text-align: justify; /* Ils seront justifiés
*/ font-size: large;
}
26
Effets de style
Mettre en italique :
h2 {
font-style: italic;/* Les titres h2 seront en
italique ! */
}
Mettre en gras :
p {
font-weight: bold;
}
27
Les majuscules en CSS
La propriété text-transform. Elle peut prendre ces valeurs :
uppercase :tout le texte sera écrit en majuscules.
lowercase :tout le texte sera en minuscules.
capitalize :la première lettre de chaque mot sera en
majuscules.
none :pas de transformation (par défaut).
h1
{
text-align:center; font-family:Arial, "Times New Roman", Verdana, serif; text-transform: capitalize; /* Les premières lettres des mots du titre seront en majuscules */
}
28
La décoration
La propriété text-decoration
underline :souligné.
line-through :barré.
overline :ligne au-dessus.
blink :clignotant. Attention, cette propriété ne marche
pas sous Internet Explorer. Elle fonctionne en revanche
bien sur tous les autres navigateurs, dont Mozilla Firefox.
none :normal (par défaut).
29
text-decoration: line-through;
}
.ligne_dessus {
text-decoration: overline;
}
La décoration
<h1>A ne pas manquer !</h1>
<p>La propriété CSS <em>text-decoration</em>
permet de décorer un peu son texte :<br /> <span
class="souligne">en le soulignant</span>...<br />
<span class="barre">en le barrant</span>...<br
/> ...ou encore <span class="ligne_dessus">en
mettant une ligne au-dessus</span>.</p>
Code HTML
Code CSS
h1 {
text-align: center;
font-family:"Arial Black", Arial, "Times New Roman", serif;
text-decoration: blink; }
.souligne
{
text-decoration: underline; }
.barre {
30
Les couleurs
La propriété qui permet de changer la
couleur du texte est color.
16 couleurs que vous pouvez utiliser en
tapant simplement leur nom :
31
Exemple
h1 {
text-align:center; font-family:Arial, "Arial Black", "Times New Roman", serif; text-decoration: underline; color: green;/* Le titre en vert */
}
p {
text-indent: 20px; color: blue;/* Les paragraphes en bleu */
}
strong /* ... et les mots importants en rouge clignotant ! */ {
color: red; text-decoration: blink;
}
32
La notation hexadécimale
• Un nom de couleur en hexadécimal, c’est une combinaison de
lettres et de chiffres qui indiquent une couleur.
• On doit toujours commencer par écrire un dièse (#), suivi de 6
lettres ou chiffres allant de 0 à 9 et de A à F.
• Ces lettres ou chiffres fonctionnent deux par deux. Les 2
premiers indiquent une quantité de rouge, les 2 suivants une
quantité de vert, et les 2 derniers une quantité de bleu.
• En mélangeant ces quantités (qui sont les composantes Rouge-
Vert-Bleu de la couleur) on peut obtenir la couleur qu’on veut.
33
La notation hexadécimale
34
La méthode RGB (Red-Green-Blue) • On doit définir une quantité de rouge, de vert et de bleu pour
choisir une couleur.
• Utiliser la palette des couleurs.
•Dans la zone qui apparaît à droite, faites bouger les curseurs
pour sélectionner la couleur qui vous intéresse.
On relève les quantités de Rouge-
Vert-Bleu correspondantes indiquées
en bas à droite de la fenêtre (ici243-
65-243). Je recopie ces valeurs
dans cet ordre dans le fichier CSS,
comme ceci :
h1 {
text-align:center;
color:rgb(243,65,243); }
35
Le fond
• Le fond ne désigne pas forcément le fond de toute une page
web.
• On peut aussi appliquer un fond uniquement aux titres, ou aux
paragraphes, ou encore à certains mots d’un paragraphe.
• Il existe 2 types de fonds :
• Les fonds comportant une couleur.
• Les fonds comportant une image de fond.
36
La couleur de fond
• Pour indiquer une couleur de fond, on utilise la propriété CSS
background-color.Vous pouvez taper le nom d'une couleur, l'écrire
en notation hexadécimale ou encore utiliser la méthode RGB.
• Pour indiquer la couleur de fond de la page web, il faut travailler sur
la balise <body> qui correspond à toute la page web.
body {
background-color : black;
color:white;
}
• Si on applique une couleur de fond noire et une couleur de texte blanche à la balise <body>, tous les titres et paragraphes auront eux aussi une couleur de fond noire et un texte de couleur blanche.
37
Exemple
body { background-color: black; color: white; /* Toutes les balises contenues dans body verront leur texte coloré en blanc... */
} h1 {
color: red; /* ... sauf si je demande expressément de
changer la couleur par la suite */
} .surligne /* Un style qui permet par exemple de surligner certains mots d'un texte */ { background-color:yellow; color: black; /* Le texte surligné sera écrit en noir*/
}
38
L'image de fond
• La propriété permettant d'indiquer une image de fond est
background-image
•Comme valeur, on doit lui mettre url("nom_image.png")
• Votre fond n'est pas forcément en PNG, il peut aussi être
en JPEG ou en GIF.
• L'adresse indiquant où se trouve l'image de fond peut
être en absolu (http://...) ou en relatif (fond.png).
• Si on veut appliquer une image de fond à toute la page,
on doit utiliser la balise <body>
body {
background-image:url("../images/neige.png");
}
39
Effets sur les liens
a {
text-decoration: none;/* Les liens ne seront plus
soulignés */ color:red;/* Les liens seront en rouge au lieu
de bleu */ font-style:italic;/* Les liens seront en italique */
}
40
Les pseudo-formats
Au passage de la souris :
a:hover {
}
"a:hover" signifie : "Quand la souris est sur le lien" (quand on
pointe dessus).
a { text-decoration: none; /* Les liens ne seront plus soulignés */ color: red;/* Les liens seront en rouge au lieu de bleu */ font-style:italic;/* Les liens seront en italique */
} a:hover /* Quand le visiteur pointe sur le lien */ { text-decoration: underline; /* Le lien deviendra souligné quand on pointera dessus */ color: green;/* Le lien sera écrit en vert quand on pointera dessus */
}
41
Les pseudo-formats
p:hover /* Quand on pointe sur un paragraphe */ {
background-color: #CFE1EB; /* Le fond du
paragraphe change de couleur */ text-indent: 20px;
}
42
Au moment du clic
• Le pseudo-format :active permet d’appliquer un style
particulier au moment du clic.
• Le lien gardera cette apparence très peu de temps : juste
pendant que vous cliquez avec le bouton de la souris.
a:active /* Quand le visiteur clique sur le lien */ { background-color: #FFCC66; } a:hover /* Quand le visiteur pointe sur le lien */ { text-decoration:underline; color:green; } a /* Lien normal */ { text-decoration:none; color:red; font-style:italic; }
43
Première lettre et première ligne
En CSS, il est possible de modifier automatiquement
l’apparence de la première lettre et de la première ligne
du texte contenu dans une balise.
La première lettre
p:first-letter /* La première lettre de chaque paragraphe
*/ {
font-weight:bold;/* En gras */ font-size:1.2em;/* Ecrit
légèrement plus gros que la normale */ color:blue;/* En
bleu */
}
p {
text-indent:20px;
}
44
Première lettre et première ligne
La première ligne
p:first-line /* La première ligne de chaque paragraphe
*/ {
font-variant: small-caps; /* En petites capitales */
}
p {
text-indent: 20px;
}
45
Retrait des listes
La propriété list-style-position permet d'indiquer si on
veut que la liste soit mise en retrait ou non.
list-style-position peut prendre 2 valeurs :
inside : la liste n'est pas mise en retrait.
outside : la liste est mise en retrait (par défaut).
46
Exemple
.pas_de_retrait {
list-style-position:inside;
}
.retrait {
list-style-position:
outside;
}
47
Représentation de la puce
La propriété list-style-type vous permet de changer
l’apparence de la puce.
Pour les listes non ordonnées (<ul>):
disc : un disque noir (par défaut).
circle : un cercle.
square : un carré.
none :aucune puce ne sera utilisée.
48
Représentation de la puce
Pour les listes ordonnées (<ol>) :
decimal :des nombres 1, 2, 3, 4, 5... (par défaut)
decimal-leading-zero :des nombres commençant par zéro (01, 02, 03, 04,
05...). Ne fonctionne pas sur Internet Explorer
upper-roman :numérotation romaine, en majuscules (I, II, III, IV, V...)
lower-roman :numérotation romaine, en minuscules (i, ii, iii, iv, v...)
upper-alpha :numérotation alphabétique, en majuscules (A, B, C, D, E...)
lower-alpha : numérotation alphabétique, en minuscules (a, b, c, d, e...)
lower-greek :numérotation grecque. Ne fonctionne pas sur Internet
Explorer
49
Changer l’image de la puce
La propriété list-style-image vous permet d'utiliser
n'importe quelle image à la place d’une puce.
ul {
list-style-image: url (image.png);
}
50
Dimensionnement et positionnement
Tout élément CSS se comporte comme une imbrication successive
de 4 boîtes :
• La boîte externe est l’aire de marges. Elle occupe l’espace
transparent entre le bord de l’écran (ou d’un autre élément) et
l’élément actif. Gérée par la propriété margin.
• À l’intérieur de l’aire de marges se trouve l’aire de bordures.
Gérée par la propriété border, elle représente les bordures
affectées à l’élément actif.
• Ensuite, l’aire d’espacement : la surface entre le contenu et la
limite intérieure de la bordure. Elle est gérée par la propriété
padding.
• Enfin, la boîte la plus intérieure est la boîte de contenu. Elle
renferme le contenu de l’élément actif.
51
Dimensionnement et positionnement
52
Dimensionnement et positionnement
53
Dimensionnement et positionnement
p.un
{
padding:10px;
border:1px solid red;
}
<body>
<p class="un">
padding:10px;
border:1px solid red;
</p>
</body>
Exemple
54
Dimensionnement et positionnement
Exemples
55
Dimensionnement et positionnement
• Flux : ordre d’affichage des éléments
• Un bloc peut être positionné de façon normale, relative,
absolue, fixe ou flottante.
• Position normale : Lorsque sa position n’est pas précisée, un
bloc se place dans le flux normal de la page web.
• Position relative, absolue ou fixe : Il est possible de placer un
élément en indiquant un décalage (en haut, en bas, à gauche, à
droite)
• par rapport à sa position dans le flux normal : c’est la
«position relative» (propriété position: relative;) ;
• par rapport au bloc conteneur : c’est la «position absolue»
(propriété position: absolute;) ;
• par rapport à l’écran : c’est la « position fixe » (propriété
position: fixed;).
56
Dimensionnement et positionnement
Dans chacun de ces trois cas, il faut indiquer un ou deux
décalage(s) :
• un décalage à partir du haut (par exemple : top:
2px;) ou du bas (par exemple : bottom: 10%;) ;
• un décalage à partir de la gauche (par exemple : left:
5em;) ou de la droite (par exemple : right: 10ex;).
• Position flottante : Un élément peut être déclaré « flottant » à
gauche ou à droite, avec la propriété float qui s’écrit espectivement
: float: left; ou float: right;
Le bloc est placé le plus à gauche ou le plus à droite possible, tout
en gardant sa position verticale dans la boîte de son conteneur.
57
Positionnement relatif
1) l'élément prend sa place dans le flux courant
2) on le décale avec les propriétés top, right, bottom, left
Remarques : permet des superpositions – attention !
l'élément reste dépendant des éléments frères.
p#second {
position: relative
left: 20px;
bottom: 15px;
margin-top=0;
margin-left: 3em
width: 150px;
height: 50px;
background: green;
}
p#premier {
margin-bottom: 0;
margin-top: 0px;
margin-left: 3em;
width:100px;
background: orange;
}
20px
15px
Dimensionnement et positionnement
58
Positionnement absolu
L'élément sort du flux, il se place par rapport au premier ancêtre
positionné (en relatif, absolu ou fixe)
p#second {
position: absolute;
top: 0;
right: 0;
width: 150px;
height: 50px;
background: green;
} p#premier {
width:100px;
background: orange;
}
div {
position: relative;
width: 300px
height: 200px
background: yellow;
}
Dimensionnement et positionnement
59
Positionnement fixe
Cas particulier du positionnement absolu : l'élément ne se déplace
pas lors du défilement (pas pris en charge par I.E. 6)
La profondeur
Par défaut, en cas de superposition, le dernier élément positionné
s'affiche par-dessus les autres avec z-index => c'est celui qui a le plus
grand z-index s'affiche par-dessus les autres
p#premier{
position: absolute;
top: 0;
left: 0;
z-index:10;
width: 100px;
background: #ccc;
}
p#second{
position: absolute;
top: 40px;
left: 50px;
z-index:0;
width: 150px;
background: green;
}
Dimensionnement et positionnement
60
Positionnement flottant
L'élément sort du flux normal pour prendre place à droite ou à
gauche du bloc qui le contient. L'élément suivant occupe l'espace libre en
épousant sa forme.
p#premier {
float: right;
width: 100px;
background: orange;
}
p#second {
background: green;
}
div {
width:300px;
background:
yellow;
}
1 2
Dimensionnement et positionnement
61
Dimensionnement et positionnement
62
Mise en page
• Outre les bloc div, HTML5 propose d’autres blocs :
‣ header
‣ footer
‣ article
‣ nav
‣ section
‣ figure
• Par défaut un bloc prend toute la largeur possible
63
Mise en page
Exemple 1 :
<header>...texte de l'en-tête...</header>
<article>
<aside>
<nav> <a href="lien1.php">lien1</a>
<a href="lien2.php">lien2</a>
<a href="lien3.php">lien3</a>
<a href="lien4.php">lien4</a>
<a href="lien5.php">lien5</a>
</nav>
</aside>
....contenu du corps de page...
</article>
<footer>...contenu du pied de page...</footer>
64
Mise en page
Le style css :
article, aside, header, footer, nav {
display: block;
}
body header {
width:600px;
height:50px;
background-color:hotpink;
}
body article {
width:600px;
height:400px;
background-color:aquamarine;
}
65
Mise en page
body footer {
width:600px;
height:50px;
background-color:yellow;
}
article aside {
width:200px;
height:400px;
background-color:lightgreen;
float: left;
padding: 2px;
}
article aside nav a {
display: block;
}
article aside nav a:hover {
background-color: white;
}
66
Mise en page
Exemple 2 :
<header id="bandeau"> <h1>Un site web</h1>
<h2>Artiste du Web (!)</h2> </header>
<div id="content">
<div id="centre">
<p>Envie d'un site qui change?…</p>
<figure id="gallery"> <img src="slide5.jpg" />
<figcaption>Un travail de jeunesse</figcaption> </figure>
<section id="agenda">
<header><h3>Agenda</h3></header>
<article>
<header>
<time datetime="2012-02-03T10:30">
3 Février 2012 à 10:30.</time>
</header>
<p>Le jour J, l'heure H. Ou le début
du modal web…</p>
</article>
67
Mise en page
(…)
</section>
</div>
<nav id="menu">
<h3>Menu</h3>
<ul>
<li><a href="#home">Home</a></li>
(…)
</ul>
</nav>
</div>
<footer>
© Le site–
<a href="mailto:site@dom.com">site@dom.com</a>
</footer>
68
Mise en page
Le style :
#bandeau {
width: 1024px;
margin: 15px auto;
height: 200px;
}
#content {
width: 1024px;
margin: 0 auto;
}
#centre {
width: 900px;
display: inline-block;
margin: 0;
padding: 0;
}
#gallery img {
width: 300px;
}
69
Mise en page
#gallery {
display: inline-block;
width: 370px;
vertical-align: top;
}
#agenda {
display: inline-block;
width: 420px;
vertical-align: top;
}
#menu {
margin: 0;
padding: 0;
display: inline-block;
width: 100px;
vertical-align: top;
text-align: right;
}
70
Tableaux
Le tableau dans HTML :
<table>
<caption>Tableau de données</caption>
<tr> <th>Titre colonne 1</th>
<th>Titre colonne 2</th>
</tr>
<tr> <td>cellule A1</td>
<td>cellule B1</td>
</tr>
<tr> <td>cellule A2</td> <td>cellule B2</td>
</tr>
</table>
Toute la mise en forme du tableau et de ses cellules est à
déclarer par le biais des CSS.
71
Tableaux
Le code CSS n°1 :
table {
border: medium solid #000000; width: 50%; }
td, th {
border: thin solid #6495ed; width: 50%; }
• Les options d'un cadre de tableau en trait continu (solid), noir
(#000000) et d'épaisseur moyenne (medium) ;
• et des bordures de cellules en traits continus (solid) fins (thin) et bleus
ciel (#6495ed).
• Le code CSS, à indiquer dans une feuille de style externe ou dans
l'en-tête de la page entre des balises <style type="text/css"></style>,
sera celui-ci :
Le résultat obtenu :
72
Tableaux
Le code CSS n°2 :
table {
border: medium solid #6495ed;
border-collapse: collapse;
width: 50%; }
th {
font-family: monospace;
border: thin solid #6495ed;
width: 50%;
padding: 5px;
background-color: #D0E3FA;
background-image: url(sky.jpg); }
td {
font-family: sans-serif;
border: thin solid #6495ed;
width: 50%;
padding: 5px;
text-align: center;
background-color: #ffffff; }
caption {
font-family: sans-serif; }
Le résultat obtenu :
73
Tableaux
• On utilise pour fusionner ou non deux bordures adjacentes la
propriété border-collapse.
• Cette propriété peut prendre les valeurs suivantes :
• collapse : "Colle" les deux bordures en une
• separate : Affiche les deux bordures distinctement.
• On utilise pour modifier l'espacement entre les cellules et les
bordures la propriété border-spacing.
• Pour afficher ou non les bordures des cellules ne contenant
aucun contenu visible on utilise la propriété empty-cells. Elle
peut prendre deux valeurs :
• show : Les bordures sont affichées.
• hide : Les bordures ne sont pas affichées.
Exemple :
table{
empty-cells:show;}
74
Tableaux
• On utilise la propriété caption-side pour modifier la position de
la légende du tableau. Elle peut prendre plusieurs valeurs :
top : La légende est affichée en haut
bottom : La légende est affichée en bas
left : La légende est affichée à gauche
right : La légende est affichée à droite
Exemple :
table{
caption-side:top;
}
75
Formulaires
<form>
<label>Nom complet :</label>
<input type="text" id="nom" name="nom" required>
<label>Adresse e-mail :</label>
<input type="email" id="email_addr" name="email_addr" required>
<label>Confirmez l'adresse e-mail :</label>
<input type="email" id="email_addr2" name="email_addr2"
required>
<label>Date d'arrivée :</label>
<input type="date" id="arrival_dt" name="arrival_dt" required>
<label>Nombre de nuitées (99 Dt par nuit) :</label>
<input type="number" id="nights" name="nights" value="1" min="1"
max="30" required>
76
Formulaires
<label>Nombre d'invités (10 Dt par invité supplémentaire) :</label>
<input type="number" id="guests" name="guests" value="1"
min="1" max="4" required>
<br>
<label>Code de promotion :</label>
<input type="text" id="promo" name="promo">
<input type="submit" value="Effectuer la réservation" />
</form>
77
Formulaires
body{
font-family: 'Open Sans',sans-serif; font-weight: 400;
font-size: 13px; }
:invalid {
background-color: #F0DDDD;
border-color: #e88;
box-shadow:0 0 5px rgba(255, 0, 0, .8); }
:required {
border-color: #88a;
box-shadow: 0 0 5px rgba(0, 0, 255, .5); }
form {
width:300px;
margin: 20px auto;
border-color: #99a; }
78
Formulaires
input {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
border:1px solid #ccc;
font-size:20px;
width:300px;
min-height:30px;
display:block;
margin-bottom:15px;
margin-top:5px;
outline: none;
box-shadow: 0 0 5px rgba(0, 0, 255, .2); }
79
Formulaires
input[type=submit] {
background:none;
padding:10px;
cursor: pointer;
}
label{
cursor: pointer;
}
Recommended