Xhtml et Css

<html>
.css
{duo gagnant du web}
Module de formation

© 2008. CFormation (CGroup division) | info@c-group.be | www.c-group.be

Plan
W3C : le web encadré
(X)HTML
CSS
Principes
Syntaxe générale
Valeurs et unités
Sélecteurs



W3C : World Wide Web Consortium (1994)
Mission : promotion de la compatibilité des
technologies du web (XHTML, CSS, PNG...)
Fonctionnement : émission de recommandations (≠
normes, lois)
Poids : valeur de standards industriels (normalisation)


1. Principes
1. Généralités


1. Principes
1. Généralités
• Séparation nette entre structuration et mise en forme/
présentation associée


1. Principes
1. Généralités
• Une information peut être présentée (XHTML) et restituée
(CSS) de manière différente, sur base d’une même
information brute


1. Principes
1. Généralités
• Une information peut être présentée (XHTML) et restituée
(CSS) de manière différente, sur base d’une même
information brute
XHTML CSS
Structuration 1 Rendu 1

Info brute Structuration 2 Rendu 2

Structuration 3 Rendu 3

1. Principes
1. Généralités

XHTML CSS
Rendu 1

Info brute Structuration Rendu 2

Rendu 3


1. Principes
1. Nouveaux concepts amenés par CSS


1. Principes
• Sélecteurs : conditions qu’un élément doit vériﬁer pour se
voir appliquer des règles de style (ex : body, #id, .class)


1. Principes
• Format d’écriture de styles : un attribut unique peut
déﬁnir plusieurs styles (duplication inutile), tant en interne
qu’en externe


1. Principes
• Format d’écriture de styles : un attribut unique peut
déﬁnir plusieurs styles (duplication inutile), tant en interne
qu’en externe
• Cascade : principe de confrontation des styles et de
priorité entre auteur-lecteur-logiciel de restitution ;
l’algorithme de cascade détermine les styles réellement
appliqués au document in ﬁne
Principe : le plus particulier l’emporte


2. Syntaxe générale
Syntaxe générale
body {
color: red;
background: yellow;
}

qui est équivalent à :

body {color: red; background: yellow;}


Syntaxe générale
body {
color: red;
background: yellow;
}



• Un élément CSS est appelé une règle


Syntaxe générale
body {
color: red;
background: yellow;
}



• Un élément CSS est appelé une règle
• Chaque règle se compose de plusieurs parties

Syntaxe d’une règle CSS
body {color : red; background: yellow;}


Sélecteur


Sélecteur Bloc de déclaration


Sélecteur Bloc de déclaration Déclarations



{color : red;}



{color : red;}
Propriété



{color : red;}
Propriété Valeur



{color : red;}
Propriété Valeur

• Sélecteur : partie du document HTML qui sera affectée



{color : red;}
Propriété Valeur

• Sélecteur : partie du document HTML qui sera affectée
• Souvent, un sélecteur est un élément HTML : html,
body, h1, p, img, a...


• Exemple :


• Exemple :
HTML
<body>
Paragraphe 1
<ul>
<li>élément 1</li>
</ul>
Paragraphe 2
</body>

• Exemple :
HTML CSS
<body>
body {color: white;}
Paragraphe 1
<ul>
p {font-size: 12px;}
ul {list-style: square;}
</ul>
Paragraphe 2
li {margin-left: 10px;}
</body>

• Un sélecteur peut aussi faire référence à un identiﬁant
(id=“valeur”) ou une classe (class=“ valeur”)


HTML
<body>
<ul class=“list”>
</ul>
Texte
</ul>
</body>

HTML CSS
<body>
p {font-size: 12px;}
#intro {font-weight:
</ul>
bold;}
Texte
.list {margin-left:
20px;}
</ul>
</body>

Exemples de propriétés CSS


font-weight: bold;
font-style: italic;
text-decoration: underline;
text-align: center;
text-align: right;
border: 1px solid black;
color : red;
font-size: 14px;
background: url(fichier.jpg);
background-color: #ffffff;
font-family: Verdana;


font-weight: bold;

font-style: italic;

text-decoration: underline;
<center>
text-align: center;
<align>
text-align: right;
<border>
border: 1px solid black;
<color>
color : red;
<size>
font-size: 14px;
<background>
background: url(fichier.jpg);
<bgcolor>
background-color: #ffffff;

font-family: Verdana;

Quelques règles CSS :


• Sur une même page, un identiﬁant (id) est toujours unique
(pour les éléments qui se répètent : class)


• CSS repose sur la cascade : hiérarchiquement, les
éléments inférieurs (enfants) héritent par défaut des
propriétés des éléments supérieurs (parents)


• Si une valeur CSS est erronée ou n’existe pas, la propriété
est inopérante (aucun effet visible sur le sélecteur)
Exemple : { color : ultraviolet; } ou {typo : verdana;}


• Si une valeur CSS est erronée ou n’existe pas, la propriété
est inopérante (aucun effet visible sur le sélecteur)
Exemple : { color : ultraviolet; } ou {typo : verdana;}
• Les commentaires en CSS s’écrivent :
/* valeur commentée */

Quelques avantages CSS :


• Centralisation des balises : 1 balise peut déﬁnir les
propriétés d’un élément pour tout un site


• Allégement des pages html


• Facilité de maintenance


• Possibilités de multiplier les variantes


• Possibilités de multiplier les variantes
• Facilité du langage


3. Valeurs et unités
1. Nombres


1. Nombres

• CSS gère les valeurs numériques


1. Nombres

• Les valeurs numériques sont de type :


1. Nombres

• Entiers : 12, +375, -17


1. Nombres

• Entiers : 12, +375, -17
• Réels : 0.157, +2.1849, -5.2


1. Nombres

• Entiers : 12, +375, -17
• Réels : 0.157, +2.1849, -5.2
• /! pas de virgule


2. Pourcentages


2. Pourcentages

• Nombre entier ou réel (+ ou -)


2. Pourcentages

• Un pourcentage doit toujours être déﬁni par rapport à
une valeur de propriété


2. Pourcentages

• Un pourcentage doit toujours être déﬁni par rapport à
une valeur de propriété
• /! pas d’espace entre le nombre et l’unité : 1 %


3. Longueurs


3. Longueurs

• Les unités de longueur interviennent sur les propriétés
exprimant une distance (position ou taille)


3. Longueurs

• Une longueur est un entier ou un réel (+ ou -)


3. Longueurs

• Ex : h1 {margin-top: 1cm;}


3. Longueurs

• Ex : h1 {margin-top: 1cm;}
• /! pas d’espace entre le nombre et l’unité : 1 cm


3. Longueurs

• Deux types d’unités de longueur

em

ex

px


3. Longueurs

ABSOLUES

em
cm
mm
ex
in
pt
px
pc


3. Longueurs

ABSOLUES RELATIVES

em
cm
mm
ex
in
pt
px
pc


3. Longueurs

ABSOLUES RELATIVES

em
cm centimètre
mm
ex
in
pt
px
pc


3. Longueurs

ABSOLUES RELATIVES

em
cm centimètre
mm millimètre
ex
in
pt
px
pc


3. Longueurs

ABSOLUES RELATIVES

em
cm centimètre
mm millimètre
in inch (1pouce = 2,54cm) ex
pt
px
pc


3. Longueurs

ABSOLUES RELATIVES

em
centimètre
cm
millimètre
mm
inch (1pouce = 2,54cm) ex
in
point (1pt = 1/72è de in)
pt
px
pc


3. Longueurs

ABSOLUES RELATIVES

em
centimètre
cm
millimètre
mm
in
pt
pica (1pc = 1/6è de in) px
pc


3. Longueurs

ABSOLUES RELATIVES

em cadratin
centimètre
cm
millimètre
mm
in
pt
pc


3. Longueurs

ABSOLUES RELATIVES

em cadratin
centimètre
cm
millimètre
mm
ex hauteur de x
inch (1pouce = 2,54cm)
in
pt
pc


3. Longueurs

ABSOLUES RELATIVES

em cadratin
centimètre
cm
millimètre
mm
ex hauteur de x
inch (1pouce = 2,54cm)
in
pt
px relatif au moyen de
pica (1pc = 1/6è de in)
pc
restitution


3. Longueurs

• Avantage des unités absolues :
• Fixation au point près d’un élément
• Avantage des unités relatives :
• Calcul du positionnement par rapport à une autre
longueur
• Plus grande souplesse, ﬂexibilité et adaptabilité


3. Longueurs

1. Unité em
• Correspond au cadratin français (espace blanc dont côté
= taille des caractères)
• Ex : p {margin-left: 2em;}
• Marge gauche du paragraphe = double de la taille de
fonte utilisée pour la restitution du paragraphe


3. Longueurs

1. Unité em
• Lorsqu’elle déﬁnit la taille de fonte d’un élément, elle
dépend de la taille de fonte déﬁnie dans l’élément parent
• Ex : li li {font-size: 0.8em;}
• Taille de fonte dans li li correspond à 80% de la taille de
fonte utilisée dans li
• Unité très souple


3. Longueurs

2. Unité ex
• Hauteur du caractère x dans la fonte courante
• Utile pour le calcul des “petites majuscules”
• Dépassé car pratiquement inutile


3. Longueurs

3. Unité px
• Dépend du moyen de restitution
• Conserve un rapport ﬁxe entre déﬁnition locale du pixel
et densité du périphérique de restitution
• Unité relative conservant une précision de
positionnement plus rigide que em


4. Sélecteurs
1. Généralités

Syntaxe générale
body est le sélecteur

h1+p {margin-left: 2em;}
h1+p est le sélecteur


4. Sélecteurs
1. Généralités

Syntaxe générale


• Condition ou série de conditions qui, si vériﬁées, voient la
déclaration du sélecteur appliquée à l’élément


4. Sélecteurs
1. Généralités

Syntaxe générale

/! Inopérant sous IE6

• Condition ou série de conditions qui, si vériﬁées, voient la
déclaration du sélecteur appliquée à l’élément


4. Sélecteurs
2. Sélecteurs de type d’élément

Syntaxe générale
h1 {color: green;}


4. Sélecteurs

Syntaxe générale
h1 {color: green;}

• Composé d’un nom d’élément


4. Sélecteurs

Syntaxe générale
h1 {color: green;}

• Composé d’un nom d’élément
• La déclaration est appliquée si l’élément a le type indiqué


4. Sélecteurs
3. Sélecteur universel

Syntaxe générale
* {margin: 0; padding: 0;}


4. Sélecteurs

Syntaxe générale

• Sélectionne indifféremment tous les types d’élément


4. Sélecteurs

Syntaxe générale

• Sélectionne indifféremment tous les types d’élément
• Ses déclarations sont appliquées à tous les éléments du
document (sauf spéciﬁcation contraire)


4. Sélecteurs
4. Sélecteur d’attribut


4. Sélecteurs
HTML


Paragraphe



Paragraphe

4. Sélecteurs
HTML CSS


Paragraphe
 #only {color: orange;}

 .a12 {background: black;}
Paragraphe

4. Sélecteurs
5. Combinaison de sélecteurs

Exemple
p.emphase {font-weight: bold;}

Résultat HTML
Okay!

4. Sélecteurs

• Les sélecteurs peuvent être combinés pour former des
sélecteurs complexes

Exemple

Résultat HTML


4. Sélecteurs

• Les éléments peuvent ainsi être ciblés très précisément
Exemple

Résultat HTML


4. Sélecteurs

• Les éléments peuvent ainsi être ciblés très précisément
Exemple

• Pour être en gras, l’élément doit avoir pour type p et
également pour classe emphase.
Résultat HTML


4. Sélecteurs
Variantes qui fonctionnent
Okay
<div class=quot;emphasequot;>Okay</div>

Ce test est okay.

Afﬁchage
Okay
Okay
Ce test est okay.

4. Sélecteurs
6. Sélecteurs contextuels

Rendu
Exemple
h1 {color: green;}
Ce titre est important
em {color: green;}


4. Sélecteurs

• Un sélecteur contextuel tient compte de son contexte
pour s’appliquer ou non
Rendu
Exemple
h1 {color: green;}
em {color: green;}


4. Sélecteurs

• Un sélecteur contextuel tient compte de son contexte
pour s’appliquer ou non
Rendu
Exemple
h1 {color: green;}
em {color: green;}

• Supposons que l’on veuille mettre une emphase sur em
dans le titre ; dans le cas ci-dessus, c’est impossible


4. Sélecteurs


4. Sélecteurs
HTML
<h1>Ce titre est très important.</h1>

4. Sélecteurs
HTML

CSS
h1 {color: green;}
em {text-decoration:underline;}
h1 em {color: red;}


4. Sélecteurs
HTML

CSS
h1 {color: green;}
h1 em {color: red;}

Rendu


4. Sélecteurs
HTML

CSS
h1 {color: green;}
h1 em {color: red;}

Rendu
Ce titre est très important.


Xhtml et Css

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Similaire à Xhtml et Css

Similaire à Xhtml et Css (20)

Plus de Fred Colantonio

Plus de Fred Colantonio (20)

Xhtml et Css

Notes de l'éditeur