Scribd
Importer
51 vues86 pages

03 Css

Transféré par

Yahya Kyla
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
51 vues86 pages

03 Css

Transféré par

Yahya Kyla
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 86

1 CSS : style de pages Web

La mauvaise façon de donner le style


pour une page Web
2

<p>
<font face="Arial">Slashdot.</font>
News for <b>nerds!!</b> You will <i>never</i>, <u>EVER</u>
be <font size="+4" color="red">BORED</font> here!
</p> HTML5

Slashdot. News for nerds!! You will never, EVER be BORED


here!
output

 Les balises telles que <b>, <i>, <u> et <font> ne


doivent pas utilisées dans HTML5.
Cascading Style Sheets (CSS)
3

 CSS permet de décrire l'apparence, la disposition


et la présentation des informations sur une page
Web.
 HTML décrit le contenu de la page Web.
 CSS définit comment l’information doit être affichée,
pas ce qui est affiché.
 Le style peut être intégré dans le document HTML
ou placé dans un fichier séparé .css.
CSS : syntaxe des règles de base
4

selector {
property: value;
property: value;
...
property: value;
} syntaxe de CSS3
p {
font-family: sans-serif;
color: red;
} CSS

 Un fichier CSS contient une ou plusieurs règles.


 Chaque règle commence par un sélecteur.
 Un sélecteur spécifie un ou plusieurs élément(s) de HTML, puis applique des
propriétés de style pour cet élément.
 un sélecteur * sélectionne tous les éléments.
Joindre un fichier CSS :
5
balise <link>
<head>
...
<link href="filename" type="text/css" rel="stylesheet" />
...
</head> HTML5

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


<link href="http://www.google.com/uds/css/gsearch.css"
rel="stylesheet" type="text/css" />
HTML5

 Une page peut avoir plusieurs liens vers des fichiers de style
différents.
 En cas de conflit (deux fichiers définissent un style pour le même
élément de HTML), les propriétés du dernier fichier seront utilisées.
Intégration de feuilles de style dans un
document HTML : balise <style>
6

<head>
<style type="text/css">
p { font-family: sans-serif; color: red; }
h2 { background-color: yellow; }
</style>
</head>
HTML5

 Le code CSS peut être intégré dans l’en-tête d'une page HTML.
 Mauvais style et doit être évité si possible.
L’attribut de style
7

<p style="font-family: sans-serif; color: red;">


This is a paragraph
</p>
HTML5

This is a paragraph

output

 Une priorité plus élevée que les styles incorporés ou liés.


 Utilisé pour des remplacements ponctuels de style d’un élément
particulier.
 Mauvais style et doit être évité si possible.
CSS : propriétés pour les couleurs
8

p {
color: red;
background-color: yellow;
}
CSS

This paragraph uses the style above output

Propriété : Description :
color couleur du texte de l'élément
couleur qui apparaîtra derrière
background-color
l'élément
Définition des couleurs
9

p { color: red; }
h2 { color: rgb(128, 0, 196); }
h4 { color: #FF8800; }
CSS

This paragraph uses the first style above

This h2 uses the second style above.

This h4 uses the third style above.


output

 Les noms de couleurs : aqua, black, blue, fuchsia, gray, green, lime,
maroon, navy, olive, purple, red, silver, teal, white (white), yellow.
 Les codes RGB : red, green, blue : les valeurs de 0 à 255.
 Les codes hexadécimaux : valeurs RGB de 00 (0) à FF (255).
Regroupement de styles
10

p, h1, h2 {
color: green;
}
h2 {
background-color: yellow;
} CSS

This paragraph uses the above style.


This h2 uses the above styles.
output

 Un style peut être appliqué à plusieurs éléments séparés par


des virgules.
 Les éléments individuels peuvent aussi avoir leurs propres styles.
CSS : commentaires /*…*/
11

/* This is a comment.
It can span many lines in the CSS file. */
p {
color: red; background-color: aqua;
} CSS

 CSS (comme HTML) n'est généralement pas commenté aussi


rigoureusement que les langages de programmation tels que
Java.
 // et <-! ... -> ne sont pas pris en charge par CSS.
CSS : propriétés pour les polices
12

Propriété : Description :
font-family la police qui sera utilisée
font-size la taille des lettres
utilisé pour activer / désactiver le
font-style
style italique
utilisé pour activer / désactiver le
font-weight
style gras

Liste complète des propriétés pour les polices :


http://www.w3schools.com/css/css_reference.asp#font
font-family (1/2)
13

p {
font-family: Georgia;
}
h2 {
font-family: "Courier New";
} CSS

This paragraph uses the first style above.

This h2 uses the second style above.


output
font-family (2/2)
14

p {
font-family: Garamond, "Times New Roman", serif;
} CSS

This paragraph uses the above style.


output

 Nous pouvons spécifier plusieurs polices (priorité décroissante).


 Des noms de polices génériques :
 serif, sans-serif, cursive, fantasy, monospace

 Si la première police ne se trouve pas sur l'ordinateur de l'utilisateur, la


suivante est recherchée pour être utilisée.
 Placer un nom de police générique à la fin de font-family. Cela garantit
que chaque ordinateur utilise une police valide.
font-size
15

p {
font-size: 24pt;
} CSS

This paragraph uses the style above.


output
 unités : pixels (px) vs. point (pt) vs. m-size (em)
16px, 16pt, 1.16em
 tailles de polices vagues :

xx-small , x-small , small , medium, large, x-large, xx-large, smaller, larger


 tailles de police en pourcentage :
 90%, 120%
font-size
16

p {
font-size: 24pt;
} CSS

This paragraph uses the style above.


output

 pt spécifie le nombre de points, où un point est 1/72


d'un pouce d’écran.
 px spécifie un nombre de pixels sur l'écran.
 em spécifie un nombre de m-size, où 1 em est égale à
la taille actuelle de la police.
font-weight, font-style
17

p {
font-weight: bold;
font-style: italic;
} CSS

This paragraph uses the style above.


output
CSS : propriétés de texte
18

Propriété : Description :
text-align alignement du texte dans son élément
décoration du texte telle que texte
text-decoration
souligné
line-height,
les écarts entre les différentes parties
word-spacing,
du texte
letter-spacing
indente la première lettre de chaque
text-indent
paragraphe

Liste complète des propriétés de texte :


http://www.w3schools.com/css/css_reference.asp#text
text-align
19

blockquote { text-align: justify; }


h2 { text-align: center; }
CSS

The Gollum’s Quote

We wants it, we needs it. Must have the precious. They stole it from us.
Sneaky little hobbitses. Wicked, tricksy, false!
output

 text-align peut être left, right, center, or


justify
text-decoration
20

p {
text-decoration: underline;
} CSS

This paragraph uses the style above.


output

 peut également être overline, line-through,


blink, or none
 les effets peuvent être combinés :
text-decoration: overline underline;
list-style-type
21

ol { list-style-type: lower-roman; }
CSS
 Les valeurs possibles :
i. none : aucun marqueur
ii. disc (défaut), circle, square
iii. decimal: 1, 2, 3, etc.
iv. decimal-leading-zero: 01, 02, 03, etc.
v. lower-roman: i, ii, iii, iv, v, etc.
vi. upper-roman: I, II, III, IV, V, etc.
vii. lower-alpha: a, b, c, d, e, etc.
viii. upper-alpha: A, B, C, D, E, etc.
x. lower-greek: alpha, beta, gamma, etc.
autres : hebrew, armenian, georgian, cjk-ideographic, hiragana…
Styles de <body>
22

body {
font-size: 16px;
}
CSS

 Applique un style à l'ensemble du corps de votre page.


 Permet d'économiser l'application manuelle d’un style pour
chaque élément.
Cascading Style Sheets
23

 Les propriétés d'un élément sont appliquées en


cascade dans cet ordre :
 les styles par défaut du navigateur,
 fichiers de feuille de style externes (spécifiés par la
balise <link>)
 feuilles de style internes (à l'intérieur d'une balise
<style> dans l'en-tête de la page)
 style définit par l'attribut style de l'élément HTML.
Styles hérités
24

body { font-family: sans-serif; background-color: yellow; }


p { color: red; background-color: aqua; }
a { text-decoration: underline; }
h2 { font-weight: bold; text-align: center; }
CSS

This is a heading
A styled paragraph. Previous slides are available on the website.
• A bulleted list output
 Lorsque plusieurs styles s'appliquent à un élément, ils sont
hérités.
 Une règle correspondant plus étroitement à un élément HTML
peut remplacer une règle héritée (et donc plus générale).
Styles qui entrent en conflit
25

p, h1, h2 { color: blue; font-style: italic; }


h2 { color: red; background-color: yellow; }
CSS

This paragraph uses the first style above.


This heading uses both styles above.
output

 Lorsque deux styles définissent des valeurs contradictoires pour


la même propriété, le style qui a été défini en dernier est
prioritaire.
Validator du W3C pour CSS
26

<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" /></a>
</p> CSS

output

 jigsaw.w3.org/css-validator/
 Vérifie votre CSS pour s'assurer qu'il répond aux spécifications
officielles CSS.
CSS : propriétés pour les fonds
27

Propriété : Description :
background-color couleur de remplissage de fond
background-image l'image à placer en arrière-plan
placement image de fond dans
background-position
l'élément
comment l'image d'arrière-plan doit
background-repeat
être répétées
background-attachment si l'image de fond défile avec la page
raccourci pour définir toutes les
background
propriétés de fond
background-image
28

body {
background-image: url("images/draft.jpg");
}
CSS

 l’image de fond ou la couleur de fond remplit la zone de


contenu de l'élément.
background-repeat
29

body {
background-image: url("images/draft.jpg");
background-repeat: repeat-x;
}
CSS

 peut être répétée (par défaut), repeat-x, repeat-y ou no-


repeat
background-position
30

body {
background-image: url("images/draft.jpg");
background-repeat: no-repeat;
background-position: 370px 20px;
} CSS

 la valeur se compose de deux éléments, dont chacun peut être


: top, left, right, bottom, center, un pourcentage ou une valeur
de longueur en px, pt, etc.
 La valeur peut être négative pour décaler à gauche.
Icône Favoris ("favicon")
31

<link href="filename" type="MIME type" rel="shortcut icon"


/> HTML

<link href="yahoo.gif" type="image/gif" rel="shortcut


icon" />
HTML

 La balise <link>, placée dans l’en-tête de la page HTML, peut


spécifier une icône :
 cette icône sera placée dans la barre de titre du navigateur.
32 Sélecteurs
HTML : attribut id
33

<p>Coding Horror! Coding Horror!</p>


<p id="mission">
Our mission is to combine programming and
<q>human</q> factors!
</p>
HTML5

Coding Horror! Coding Horror!

Our mission is to combine programming and “human” factors!


output
 Un identifiant unique pour un élément d'une page HTML.
 Chaque ID doit être unique ;
 Un ID ne peut être utilisé qu'une seule fois dans la page.
Liens vers les sections d'une page Web
34

<p>Visit <a href=


"http://www.textpad.com/download/index.html#downloads">
textpad.com</a> to get the TextPad editor.</p>
<p><a href="#mission">View our Mission Statement</a></p>
HTML

Visit textpad.com to get the TextPad editor.

View our Mission Statement


output

 A la fin du lien nous pouvons inclure l’ID d’un élément HTML, qui
doit être précédé par #.
 Le navigateur va charger cette page et faire défiler jusqu'à
l'élément avec l'ID donné.
CSS : sélecteurs d’ID
35

#mission {
font-style: italic;
font-family: "Garamond", "Century Gothic", serif;
} CSS

Coding Horror! Coding Horror!

Our mission is to combine programming and “human” factors with geekiness!


output

 Applique le style uniquement au paragraphe avec l’ID


« mission ».
HTML : attribut class
36

<p class="shout">Coding Horror! Coding Horror!</p>


<p class="special">See our special deal on Droids!</p>

<p class="special">Today only!</p> HTML

Coding Horror! Coding Horror!

See our special deal on Droids!

Today only! output

 Une façon de regrouper certains éléments et donner un style


uniquement à ce groupe.
 Contrairement à un identifiant, une classe peut être réutilisée
autant que vous voulez sur la page.
CSS : sélecteurs de classe
37

.special {
background-color: yellow;
font-weight: bold;
}
p.shout {
color: red;
font-family: cursive;
} CSS

<p class="shout">Coding Horror! Coding Horror!</p>


<p class="special">See our special deal on Droids!</p>

<p class="special shout">Today only!</p> HTML

Coding Horror! Coding Horror!


See our special deal on Droids!

Today only!
CS380
output
CSS : sélecteurs spéciaux d’ID (1/2)
38

a:link { color: #FF0000; } /* unvisited link */


a:visited { color: #00FF00; } /* visited link */
a:hover { color: #FF00FF; } /* mouse over link */
CSS

Buy Early Buy Often!


output
CSS : sélecteurs spéciaux d’ID (2/2)
39

Classe : Description :
:active un élément sélectionné ou activé
:focus un élément qui a le focus du clavier
:hover un élément qui a la souris dessus
:link une liaison qui n'a pas été visitée
:visited un lien qui a déjà été visité
la première lettre du texte à l'intérieur
:first-letter
d'un élément
la première ligne de texte à l'intérieur
:first-line
d'un élément
un élément qui est le premier à
:first-child
apparaître dans un autre
40 Style de sections d’une page Web
Pourquoi avons-nous besoin de sections
de page ?
41

 Nous pouvons créer le style pour un élément individuel, un


groupe d'éléments, une section de texte ou de la page.
 Cela permet de créer des mises en page complexes.
Sections d'une page : balise <div>
42

<div class="shout">
<h2>Coding Horror! Coding Horror!</h2>
<p class="special">See our special deal on Droids!</p>
<p>We'll beat any advertised price!</p>
</div> HTML

Coding Horror! Coding Horror!


See our special deal on Droids!

We’ll beat any advertised price!


output

 La balise <div> est utilisée pour indiquer une section logique ou une zone
d'une page.
 La balise <div> n'a pas d'apparence par défaut, mais vous pouvez lui
appliquer des styles.
Autres sections : balise <span>
43

<h2>Coding Horror! Coding Horror!</h2>


<p>See our <span class="special“>spectacular</span> deal
on Droids!</p>
<p>We'll beat <span class="shout“> any advertised
price</span>!</p>
HTML

Coding Horror! Coding Horror!

See our spectacular deal on Droids!

We’ll beat any advertised price!


output
 La balise <span> n'a pas d'apparence par défaut, mais vous
pouvez lui appliquer des styles.
CSS : sélecteurs contextuels
44

selector1 selector2 {
properties
} CSS
 Les propriétés sont appliquées à sélecteur 2 que si elles sont à
l'intérieur d'un sélecteur 1 sur la page Web.

selector1 > selector2 {


properties
} CSS

 Les propriétés sont appliquée à sélecteur 2 que si elles sont


directement à l'intérieur d'un sélecteur 1 sur la page Web.
CSS : sélecteurs contextuels
exemples (1/2)
45

<p>Eat at <strong>Greasy's Burger</strong>...</p>


<ul>
<li>The <strong>greasiest</strong> burgers in town!</li>
<li>Yummy and greasy at the same time!</li>
</ul> HTML

li strong { text-decoration: underline; }


CSS

Eat at Greasy’s Burger…

• The greasiest burgers in town!


• Yummy and greasy at the same time!
output
CSS : sélecteurs contextuels
exemples (2/2)
46

<div id="ad">
<p>Eat at <strong>Greasy's Burger</strong>...</p>
<ul>
<li class="important">
The <strong>greasiest</strong> burgers in town!
</li>
<li>
Yummy and <strong>greasy at the same time </strong>!
</li>
</ul>
</div> HTML

#ad li.important strong { text-decoration: underline; }


CSS

Eat at Greasy’s Burger…

• The greasiest burgers in town!


• Yummy and greasy at the same time!
output
CSS : modèle de boîte (1/2)
47

 Chaque élément HTML est


composé de :
 Un contenu (content) ;
 Une bordure autour de l'élément
(border) ;
 Un rembourrage entre le contenu
et la bordure (padding) ;
 Une marge entre la bordure et
les autres contenus (margin).
CSS : modèle de boîte (2/2)
48

 largeur =
largeur du contenu +
rembourrage gauche et droit +
bordure gauche et droite +
marge gauche et droite
 hauteur =
hauteur du contenu +
rembourrage haut et bas +
bordure haute et basse +
marge haute et basse
Document HTML : éléments de bloc
49
Document HTML : éléments de ligne
50
Document HTML : exemple
51
CSS : propriétés pour les bordures (1/2)
52

h2 { border: 5px solid red; }


CSS

This is a heading.
output

Propriété : Description :
épaisseur / style / taille de la
border
bordure sur les 4 côtés

 Epaisseur : px, pt, em ou thin, medium, thick


 Style : none, hidden, dotted, dashed, double, groove,
inset, outset, ridge, solid
 Couleur
CSS : propriétés pour les bordures (2/2)
53

Propriété : Description :
border-color, border-width, propriétés spécifiques de bordure sur
border-style les 4 côtés
border-bottom, border-left, toutes les propriétés de bordure sur un
border-right, border-top côté particulier
border-bottom-color, border-bottom-
style,
border-bottom-width, border-left-
color, propriétés de bordure sur un côté
border-left-style, border-left-width, particulier
border-right-color, border-right-style,
border-right-width, border-top-color,
border-top-style, border-top-width
Liste complète des propriétés de bordure :
http://www.w3schools.com/css/css_reference.asp#border
Bordure : exemple
54

h2 {
border-left: thick dotted #CC0088;
border-bottom-color: rgb(0, 128, 128);
border-bottom-style: double;
}
CSS

This is a heading.
output

 Les propriétés de bordure de chaque côté peuvent être réglées


individuellement.
 Si vous omettez certaines propriétés, elles reçoivent les valeurs par défaut.
CSS : propriétés de rembourrage
55

Propriété : Description :
padding rembourrage sur les 4 côtés
padding-bottom rembourrage sur le côté inférieur uniquement
padding-left rembourrage sur le côté gauche uniquement
padding-right rembourrage sur le côté droit uniquement
padding-top rembourrage sur le dessus uniquement
Liste complète des propriétés de rembourrage :
http://www.w3schools.com/css/css_reference.asp#padding
Rembourrage : exemple (1/2)
56

p { padding: 20px; border: 3px solid black; }


h2 { padding: 0px; background-color: yellow; }

CSS

This is a first paragraph.

This is a second paragraph.

This is a heading
output
Rembourrage : exemple (2/2)
57

p {
padding-left: 200px; padding-top: 30px;
background-color: fuchsia;
} CSS

This is a first paragraph


paragraph.

This is a second paragraph

output

 Le rembourrage de chaque côté peut être réglé individuellement.


 Remarque : le rembourrage utilise la couleur de fond de l'élément.
CSS : propriétés pour les marges
58

Propriété : Description :
margin marge sur les 4 côtés
margin-bottom marge sur le côté inférieur uniquement
margin-left marge sur le côté gauche uniquement
margin-right marge sur le côté droit uniquement
margin-top marge sur le dessus uniquement
Liste complète des propriétés de marge :
http://www.w3schools.com/css/css_reference.asp#margin
Marge : exemple (1/2)
59

p {
margin: 50px;
background-color: fuchsia;
} CSS

This is a first paragraph

This is a second paragraph


output

 Remarque : les marges sont toujours transparentes.


Marge : exemple (2/2)
60

p {
margin-left: 8em;
background-color: fuchsia;
} CSS

This is a first paragraph

This is a second paragraph


output

 La marge de chaque côté peut être réglée individuellement.


CSS : propriétés pour les dimensions
61

p { width: 350px; background-color: yellow; }


h2 { width: 50%; background-color: aqua; }
CSS

This paragraph uses the first style above

An h2 heading
output

Propriété : Description :
largeur et hauteur de l’élément
width, height (uniquement pour les éléments de
bloc)
max-width, max-height, la taille maximale/minimale de cet
min-width, min-height élément dans la dimension donnée.
Centrer un élément de bloc :
les marges automatiques
62

p {
margin-left: auto;
margin-right: auto;
width: 750px;
} CSS

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
output

 Fonctionne mieux si la largeur est activée (sinon, peut occuper toute la


largeur de la page) .
 Pour centrer des éléments de ligne dans un élément de bloc, utilisez : text-
align: center.
63 Eléments flottants
CSS : propriété float (référence)
64

img.headericon {
float: right; width: 130px;
} CSS

Ghostbusters is a 1984 American science fiction comedy


film written by co-stars Dan Aykroyd and Harold Ramis
about three eccentric New York City
parapsychologists-turned-ghost capturers.

output

Propriété : Description :
Les valeurs possibles : left, right, none
float
(par défaut)
Eléments flottants : diagramme
65
Erreur générale : absence de largeur
66

 Souvent les éléments flottants de bloc doivent avoir une valeur


de propriété « width ».
Propriété clear (1/2)
67

p { background-color: fuchsia; }
h2 { clear: right; background-color: yellow; }
CSS

Mario
Mario isis aa fictional
fictional character
character in
in his
his video
video game
game series.
series.
Serving
Serving asas Nintendo's
Nintendo's mascot
mascot and
and the
the main
main protagonist
protagonist of
of
thethe series,
series, Mario
Mario hashas appeared
appeared in in over
over 200
200 video
video games
games since
since his his creation.
creation

Super Mario Fan Site!


CS380 output
Propriété clear (2/2)
68

Propriété : Description :
Empêche les autres éléments de
chevaucher cet élément flottant.
clear
Les valeurs possibles : left, right, none
(par défaut).
Propriété clear : diagramme
69

div#sidebar { float: right; }


p { clear: right; } CSS
Erreur générale : le conteneur est trop court
70

<p><img src="images/mario.png" alt=“super mario" />


Mario is a fictional character in his video game
series.....</p> HTML

p { border: 2px dashed black; }


img { float: right; } CSS

Mario is a fictional character in his video game series.


Serving as Nintendo's mascot and the main protagonist
of the series, Mario has appeared in over 200 video
games since his creation.

output
Propriété overflow (1/2)
71

p { border: 2px dashed black;


overflow: hidden; } CSS

Mario is a fictional character in his video game series.


Serving as Nintendo's mascot and the main protagonist
of the series, Mario has appeared in over 200 video
games since his creation.

output
Propriété overflow (2/2)
72

Propriété : Description :
Précise ce qu'il faut faire si le contenu
d'un élément est trop grand.
overflow
Les valeurs possibles : auto, visible,
hidden, scroll
Mises en page multi-colonnes
73

<div>
<p>first paragraph</p>
<p>second paragraph</p>
<p>third paragraph</p>
Some other text that is important
</div> HTML
p { float: right; width: 25%; margin: 0.5em;
border: 2px solid black; }
div { border: 3px dotted green; overflow: hidden; }
CSS

Some other text that is important


third paragraph second paragraph first paragraph

output
74 Dimension et position
Propriété position
75

div#ad {
position: fixed;
right: 10%;
top: 45%;
} CSS

Propriété : Valeur : Description :


static position par défaut
décalage de sa position statique
relative
normale
position une position fixe à l'intérieur de l'élément
absolute
contenant
une position fixe à l'intérieur de la
fixed
fenêtre du navigateur
top, bottom,
positions des coins de la boîte
left, right
Position absolue
76

#sidebar {
position: absolute;
left: 400px;
top: 50px;
} CSS

 L’élément est :
 retiré du flux normal,
 positionné par rapport à l'élément de bloc
contenant cet élément.
 La position courante est déterminée par
top, bottom, left, right
 Pour garantir le bon fonctionnement, nous
devons spécifier la valeur pour la propriété
width.
Position relative
77

#area2 { position: relative; }


CSS

 Les éléments avec une position absolue,


sont placés (avec un décalage) dans le
coin de la page web.
 Pour permettre à un élément dont la
position est absolue de se positionner lui-
même par rapport à un autre élément de
coin, encapsulez l’élément absolu dans un
élément dont la position est relative.
Position fixe
78

#area2 { position: fixed; }


CSS

 L’élément est retiré totalement du flux.


 Il est positionné uniquement par rapport
aux limites de la zone de visualisation,
autrement dit la fenêtre du navigateur.
 Le défilement de la page n'a aucun effet
sur l’élément en position fixe.
Alignement vs. éléments flottants vs.
position
79

1. Si possible, positionner un élément HTML en alignant son


contenu :
 alignement horizontal : text-align
 Si cette propriété est définie pour l’élément de bloc, le contenu du cet
élément sera aligné horizontalement (pas l’élément lui même).
 alignement vertical : vertical-align
 Si cette propriété est définie pour un élément de ligne, le contenu de cet
élément sera aligné verticalement.
2. Si l'alignement ne fonctionne pas, essayez d’utiliser les
éléments flottants.
3. Si les éléments flottants ne fonctionnent pas, essayez d’utiliser
le positionnement d’un élément.
 Les positionnement absolu/fixe sont un dernier recours et ne doivent
pas être surutilisés.
Boîtes de ligne (inline box)
80

 Propriétés ignorées :
 width, height, min-width, etc.
 margin-top, margin-bottom
 Propriétés non ignorées :
 margin-left, margin-right
 La propriété text-align de l’élément de bloc contenant une
boîte de ligne permet de positionner cette boîte à l’intérieur de
l’élément.
 La propriété vertical-align de la boîte de ligne permet
d’aligner cette boîte verticalement dans l’élément de bloc
contenant cette boîte.
Propriété vertical-align
81

Propriété : Description :
précise où un élément de ligne doit
être aligné, par rapport à d'autres
vertical-align
contenus sur la même ligne dans la
boîte de son élément de bloc
 Les valeurs possibles :
 top, middle, bottom, baseline (par défaut), sub, super, text-
top, text-bottom,
 une valeur de la longueur
 pourcentage
 Remarque :
 baseline : il faut aligner avec le bas des lettres
non-suspendues
Propriété vertical-align: exemple
82

<p style="background-color: yellow;">


<span style="vertical-align: top; border: 1px solid red;">
Don't be sad! Turn that frown
<img src="images/sad.jpg" alt="sad" /> upside down!
<img style="vertical-align: bottom" src="images/smiley.jpg" alt="smile" />
Smiling burns calories, you know.
<img style="vertical-align: middle" src="images/puppy.jpg" alt="puppy" />
Anyway, look at this cute puppy; isn't he adorable! So cheer up, and have
a nice day. The End.
</span>
</p> HTML
Erreur générale : espace sous l'image
83

<p style="background-color: red; padding: 0px; margin: 0px">


<img src="images/smiley.png" alt="smile" />
</p> HTML

 Présence de l’espace rouge même si les valeurs des propriétés « padding »


et « marging » sont égales à 0.
 C'est parce que l'image est alignée verticalement au niveau « baseline » du
paragraphe (pas la même chose que « bottom »).
 Le réglage de la valeur de « vertical-align » à « bottom » corrige le
problème.
Propriété display (1/3)
84

h2 { display: inline; background-color: yellow; }


CSS

output

Propriété : Description :
définit le type de modèle de boîte CSS d'un
display
élément HTML

 Valeurs : none, inline, block, run-in, compact, ...


 A utiliser avec précaution, car cette propriété peut modifier radicalement la
mise en page.
Propriété display (2/3)
85

p.secret {
display: hidden;
} CSS

output

 Les éléments cachés prennent de l'espace sur l'écran, mais ils ne sont pas
affichés.
 Si vous souhaitez ne pas avoir de blanc sur l’écran, il faut réglé la propriété
« display » à « none ».
 Cette propriété peut être utilisée pour afficher/masquer le contenu de la
page HTML dynamique.
Propriété display (3/3)
86

<ul id="topmenu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul> HTML
#topmenu li {
display: inline;
border: 2px solid gray;
margin-right: 1em;
} CSS

output
 Les listes et d'autres éléments de bloc peuvent être affichés comme les
éléments de ligne.
 Leur largeur est déterminée par le contenu.

Vous aimerez peut-être aussi