Chapitre 3 : CSS : Cascading Style Sheets · 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

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


52


53


p.un

{

padding:10px;

border:1px solid red;

}

<body>

<p class="un">

padding:10px;

border:1px solid red;

</p>

</body>

Exemple

54


Exemples

55


• 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


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


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;

}


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;

}


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


61


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>




</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:[email protected]">[email protected]</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 {


width: 370px;

vertical-align: top;

}

#agenda {


width: 420px;


}

#menu {

margin: 0;

padding: 0;


width: 100px;


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;

}

Documents

Chapitre 3 : CSS : Cascading Style Sheets · 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