Qu`est-ce que CSS?

Qu'est-ce que CSS?
CSS: Cascading Style Sheets
CSS : comment afficher les éléments HTML
Ajoutés à HTML 4.0 pour résoudre un problème
Les feuilles de style externes permettent d'économiser beaucoup de travail
Les feuilles de style externes sont stockées dans des fichiers CSS
1/33
Feuilles de style pour résoudre un gros problème
HTML n'a jamais été destiné à contenir des balises pour le formatage d'un document.
HTML a été destiné à définir le contenu d'un document, comme:
<h1>Ceci est un titre</h1>
<p>Ceci est un paragraphe.</p>
Lorsque les balises comme <font>, et les attributs de couleur ont été ajoutées à la spécification
HTML 3.2, -> cauchemar pour les développeurs.
Processus long et coûteux.
Pour résoudre ce problème, le World Wide Web Consortium (W3C) a créé CSS.
En HTML 4.0, la mise en forme peut être retiré du document HTML, et stockée dans un fichier
CSS séparé.
Tous les navigateurs prennent en charge CSS aujourd'hui.
CSS permet d'économiser beaucoup de travail!
2/33
Syntaxe CSS
Une règle CSS comporte deux parties principales: un sélecteur et une ou plusieurs déclarations:
h1 {color:blue;font-size:12px}
Le sélecteur est normalement l'élément HTML que vous voulez mettre en forme.
La propriété est l'attribut de style que vous souhaitez modifier. Chaque propriété a une valeur.
3/33
Commentaires en CSS
Les commentaires sont utilisés pour expliquer votre code, et peuvent vous aider lorsque vous
modifiez le code source à une date ultérieure. Les commentaires sont ignorés par les navigateurs.
Un commentaire commence par CSS "/*", et se termine par "*/", comme ceci:
/*Ceci est un commentaire*/
p
{
text-align:center;
/*Un autre comentaire*/
color:black;
font-family:arial;
}
4/33
CSS id et class
En plus de définir un style pour un élément HTML, CSS vous permet de spécifier vos propres
sélecteurs appelés id et class.
Le sélecteur d'ID est utilisé pour spécifier un style pour un seul élément unique.
Le sélecteur d'ID utilise l'attribut id de l'élément HTML, et est définie par un "#".
La règle de style ci-dessous sera appliquée à l'élément avec un id = "para1":
#para1
{
text-align:center;
color:red;
}
Le sélecteur de classe est utilisé pour spécifier un style pour un groupe d'éléments. Contrairement
au sélecteur d'ID, le sélecteur de classe est le plus souvent utilisé sur plusieurs éléments.
Cela vous permet de définir un style particulier pour les éléments HTML avec la même classe.
Le sélecteur de classe utilise l'attribut HTML class, et est définie par un "."
Dans l'exemple ci-dessous, tous les éléments HTML avec class = "center" seront alignés au centre:
5/33
.center {text-align:center;}
p.center {text-align:center;}
td.center {text-align:center;}
...
Regroupement des sélecteurs
.texte {
margin-left:
}
p {
margin-left:
}
h1 {
margin-left:
}
h2 {
margin-left:
}
0;
0;
0;
0;
Sera équivalent à :
.texte, p, h1, h2 {
margin-left: 0;
}
6/33
Regroupement des propriétés
p {
font-family: Arial, sans-serif;
font-style: italic;
font-weight: bold;
font-size: 120%;
line-height: 140%;
}
peut se remplacer en :
p {
font : italic bold 120%/140% Arial, sans-serif;
}
7/33
Autres sélecteurs hiérarchiques
Les normes CSS 2 et CSS 3 (actuellement en préparation) prévoient d’autres formes de sélection
hiérarchique. On peut ainsi ne désigner que le premier enfant d’un élément, ne pointer que des
éléments directement adjacents à un autre, etc.
Il est même possible de prendre en compte les attributs des éléments pour les sélectionner.
Motif
*
e
ef
e>f
e:first-child
e:link, e:visited
e:active, e:hover, e:focus
e:lang(c)
e+f
e[foo]
e[foo="warning"]
e[foo~="warning"]
e[lang|="en"]
div.warning
e#myid
8/33
Description
n'importe quel élément.
les éléments de type e
les éléments f descendants de e
les élements f qui sont des fils de e
les éléments e qui sont les premiers fils de leur parent
les éléments e s'ils sont les sources d'une ancre ou d'un hyperlien (pas encore visité ou visité)
les éléments e suivant une action
les éléments e dont la langue est c.
les éléments f tel que l'élément frère qui précède est un élément e
les éléments e avec un attribut "foo"
les éléments e avec un attribut "foo" dont la valeur est "warning"
les éléments e avec un attribut "foo" dont l'une des valeurs est "warning"
les éléments e avec un attribut "foo" dont l'une des valeurs (séparé par un trait d'union) est
"en"
identique à div[class~="warning"]
l'élément e ayant pour id "myid"
Trois façon d'insérer une feuille de style
Feuille de style externe
Une feuille de style externe est idéal lorsque le style est appliqué à plusieurs pages.
Avec une feuille de style externe, vous pouvez modifier l'apparence d'un site Web tout en
changeant un seul fichier.
Chaque page doit être liée à la feuille de style en utilisant la balise <link> à l'intérieur de la section
d'entêre:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
9/33
Trois façon d'insérer une feuille de style
Feuille de style interne
Une feuille de style interne doit être utilisée quand un seul document a un style unique. Vous
définissez les styles internes dans la section head d'une page HTML, en utilisant la balise <style>,
comme ceci:
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
10/33
Trois façon d'insérer une feuille de style
Inline Styles
Utilisez cette méthode avec parcimonie!
Pour utiliser des styles inline vous utilisez l'attribut de style dans la balise considérée.
L'attribut style peut contenir n'importe quelle propriété CSS.
L'exemple qui suit montre comment changer la couleur et la marge de gauche d'un paragraphe:
<p style="color:sienna;margin-left:20px">Ceci est un paragraphe.</p>
11/33
Plusieurs feuilles de style
Feuille de style externe
h3
{
color:red;
text-align:left;
font-size:8pt;
}
Feuille de style interne
h3
{
text-align:right;
font-size:20pt;
}
Alors une feuille contenant les deux définitions aura comme propriétés:
color:red;
text-align:right;
font-size:20pt;
12/33
Plusieurs feuilles de style en cascade
Les styles peuvent être spécifiées à plusieurs endroits
A l'intérieur d'un élément HTML
Dans la section entête du document HTML
Dans un fichier externe
Remarque: Plusieurs feuilles de style externes peuvent être utilisées
Priorité:
1.
2.
3.
4.
Navigateur par défaut
Feuille de style externe
Feuille de style interne (section head)
Style en ligne
Note: Si le lien vers la feuille de style externe est placée après la feuille de style interne en HTML,
la feuille de style externe remplace la feuille interne.
Hack CSS: !important permet de définir une propriété de style qui sera obligatoirement utilisé.
13/33
Toutes les propriétés de fond en CSS
Propriété
14/33
Description
background
fixe toutes les propriétés en une seule
background-attachment
l'image est fixe ou bouge avec le reste de la
page
background-color
couleur de fond d'un élément
background-image
définit l'image de fond d'un élément
background-position
définit la position de départ d'une image de
fond
background-repeat
définit la répétition de l'image
Valeurs
background-color
background-image
background-repeat backgroundattachment background-position
scroll,fixed
color-rgb (eg. rgb(255,255,255))
color-hex(eg. #00ff00)
color-name(eg. red,blue)
transparent
url(url)
none
left top, left center, left bottom, right
top, right center, right bottom,
center top, center center, center
bottom
x% y%
xpos ypos
repeat
repeat-x
repeat-y
no-repeat
CSS (1 ou 2)
1
1
1
1
1
1
Toutes les propriétés de texte en CSS
Propriété
color
direction
Description
définit la couleur d'un texte
définit l'orientation du texte
line-height
définit la distance entre les lignes
couleur
ltr, rtl
normal
number
length
%
normal
length
left, right, center, justify
none, underline, overline,
line-through, blink
length
%
none
color
length
none, capitalize, uppercase,
lowercase
baseline, sub, super, top, text-top,
middle, bottom, text-bottom
length
%
CSS (1 ou 2)
1
2
1
text-align
augmenter ou diminuer l'espace entre les
caractères
aligne le texte dans un élément
text-decoration
ajoute une décoration au texte
text-indent
retrait de la première ligne de texte dans un
élément
text-shadow
ombre d'un texte
text-transform
contrôles des lettres dans un élément
vertical-align
définit l'alignement vertical d'un élément
white-space
définit comment sont traités les espaces à
l'intérieur d'un élément
normal, pre, nowrap
1
word-spacing
augmenter ou diminuer l'espace entre les mots
normal
length
1
letter-spacing
15/33
Valeurs
1
1
1
1
1
1
Toutes les propriétés de fonte en CSS
Propriété
font
définit toutes les propriétés de police en une
déclaration
font-family
spécifie la famille de polices pour le texte
font-size
spécifie la taille de la police du texte
font-style
indique le style de police pour le texte
indique si un texte doit être affiché dans une
police small-caps
font-variant
font-weight
16/33
Description
indique l'épaisseur d'une police
Valeurs
CSS (1 ou 2)
font-style, font-variant, font-weight,
font-size/line-height, font-family,
1
caption, icon, menu, message-box,
small-caption, status-bar,
family-name
1
generic-family
xx-small, x-small, small, medium,
large, x-large, xx-large, smaller,
1
larger, length
%
normal, italic, oblique
1
normal, small-caps
1
normal,bold, bolder, lighter
100, 200, 300, 400, 500, 600, 700,
800, 900
1
Toutes les propriétés de liste en CSS
Propriété
list-style
list-style-image
list-style-position
list-style-type
17/33
Description
définit toutes les propriétés d'une liste en une
déclaration
spécifie une image comme marqueur d'élément
de liste
indique si le point de marqueurs liste doit
apparaître à l'intérieur ou à l'extérieur du flux
de contenu
indique le type de marqueur
Valeurs
list-style-type
list-style-position
list-style-image
url
none
CSS (1 ou 2)
1
1
inside, outside
1
none, disc, circle, square, decimal,
decimal-leading-zero, armenian,
georgian, lower-alpha, upper-alpha,
lower-greek, lower-latin, upperlatin, lower-roman, upper-roman
1
Boîtes en CSS
margin
border
padding
contenu
Marge externe (margin) : efface une zone autour de la frontière. La marge est complètement
transparente
Bordure (border) : Une frontière qui délimite la marge extérieure de la marge intérieure.La
bordure est affectée par la couleur de fond de la boîte
Marge interne (padding) : Efface une zone autour du contenu. La marge intérieure est affectée
par la couleur de fond de la boîte
Contenu : zone où le texte et les images apparaissent
La largeur d'un élément se calcule comme suit : largeur totale = largeur + padding gauche +
padding right + bordure gauche + bordure droite + marge gauche + marge droite
La hauteur d'un élément se calcule comme suit : hauteur totale = hauteur + padding haut + padding
bas + bordure haute + bordure basse + marge haute + marge basse
18/33
Boîtes en CSS
margin
border
padding
contenu
Compatibilité avec IE : IE inclut le padding et le border dans la largeur, lorsque la propriété
width est fixée, sauf si un DOCTYPE est déclaré.
19/33
Toutes les propriétés de la bordure en CSS
Propriété
border
toutes les déclaration en une
border-bottom-color
border-bottom-style
border-bottom-width
toutes les déclarations pour border-bottom en
une
définit la couleur pour la bordure basse
définit le style de la bordure basse
définit l'épaisseur de la bordure basse
border-color
définit la couleur des quatre bordures
border-left
toutes les déclarations pour border-left en une
border-left-color
border-left-style
border-left-width
définit la couleur de la bordure gauche
définit le style de la bordure gauche
définit l'épaisseur de la bordure gauche
border-right
toutes les déclarations pour border-right en une
border-right-color
border-right-style
border-right-width
définit la couleur de la bordure droite
définit le style de la bordure droite
définit l'épaisseur de la bordure droite
border-style
définit le style pour les quatre bordures
border-top
toutes les déclarations pour border-top en une
border-top-color
border-top-style
border-top-width
définit la couleur pour la bordure haute
définit le style pour la bordure haute
définit l'épaisseur de la bordure haute
border-width
définit l'épaisseur pour les quatre bordures
border-bottom
20/33
Description
Valeurs
border-width, border-style,
border-color
border-bottom-width, borderbottom-style, border-bottom-color
border-color
border-style
border-width
color_name, hex_number,
rgb_number, transparent
border-left-width, border-left-style,
border-left-color
border-color
border-style
border-width
border-right-width, border-rightstyle, border-right-color
border-color
border-style
border-width
none, hidden, dotted, dashed, solid,
double, groove, ridge, inset, outset
border-top-width, border-top-style,
border-top-color
border-color
border-style
border-width
thin, medium, thick
length
CSS (1 ou 2)
1
1
2
2
1
1
1
2
2
1
1
2
2
1
1
1
2
2
1
1
Toutes les propriétés du contour en CSS
Un contour est une ligne dessinée autour des éléments, en dehors de la bordure, afin de
démarquer cet élément.
un exemple avec la propriété {outline-style:dotted;border:1px solid red;}
Propriété
outline
21/33
Description
définit toutes les propriétés du contour en une
déclaration
outline-color
définit la couleur du contour
outline-style
définit le style du contour
outline-width
définit l'épaisseur du contour
Valeurs
outline-color, outline-style,
outline-width
color_name, hex_number,
rgb_number, invert
none, dotted, dashed, solid, double,
groove, ridge, inset, outset
thin, medium, thick
length
CSS (1 ou 2)
2
2
2
2
Toutes les propriétés de la marge extérieure en
CSS
Propriété
margin
22/33
Description
définit toutes les propriétés de la marge
extérieure en une déclaration
margin-bottom
définit la marge extérieure basse
margin-left
définit la marge extérieure gauche
margin-right
définit la marge extérieure droite
margin-top
définit la marge extérieure haute
Valeurs
margin-top, margin-right, marginbottom, margin-left
auto
length
%
auto
length
%
auto
length
%
auto
length
%
CSS (1 ou 2)
1
1
1
1
1
Toutes les propriétés de la marge intérieure en
CSS
Propriété
padding
23/33
Description
définit toutes les propriétés de la marge
intérieure en une déclaration
padding-bottom
définit la marge intérieure basse
padding-left
définit la marge intérieure gauche
padding-right
définit la marge intérieure droite
padding-top
définit la marge intérieure haute
Valeurs
padding-top, padding-right,
padding-bottom, padding-left
auto
length
%
auto
length
%
auto
length
%
auto
length
%
CSS (1 ou 2)
1
1
1
1
1
Affichage et visibilité en CSS
display:none
du texte
<div> style="display:none;width:100px;height:100px;color:red">
</div>
du texte en dessous du div
du texte du texte en dessous du div
visibility:hidden
du texte
<div style="visibility:hidden;width:100px;height:100px;color:red">
</div>
du texte en dessous du div
du texte
du texte en dessous du div
La propriété display permet de modifier la propriété d'afichage par défaut des éléments (block ou
inline)
24/33
Positionnement des éléments en CSS
Le positionnement statique : les éléments HTML sont par défaut en position statique (par rapport
au flux normal d'affichage). Les éléments en position statique ne sont pas affectés par les
propriétés top,left,right et bottom.
Le positionnement fixe : les éléments HTML en position fixe sont positionnés relativement par
rapport à la fenêtre du navigateur. Ces éléments ne bougeront pas même si l'on se déplace dans la
page.
Le positionnement relatif : positionnement par rapport à sa position normale (positionnement
statique)
Le positionnement absolu : un élément en position absolu est positionné relativement par rapport à
un élément parent dont la position est autre que statique. Si un tel élément parent n'existe pas le
block conteneur est <html>
Les éléments en position absolue sont retirés du flux normal (comme la propriété display:none).
Ces élément peuvent se chevaucher. On règle la priorité de chevauchement (par défaut le flux
normal) en utilisant la propriété z-index en CSS. L'élément possédant la valeur la plus grande en
z-index sera affiché au dessus des autres éléments.
25/33
Positionnement des éléments en CSS
Propriété
bottom
clip
Description
définit le positionnement bas d'un élément
clip un élément possédant la position absolue.
cursor
spécifie le type de curseur à afficher
left
définit le positionnement gauche d'un élément
définit ce que l'on doit faire si un élément sort
de la boîte parente
définit le positionnement d'un élément
définit le positionnement droit d'un élément
définit le positionnement haut d'un élément
définit l'empilement des éléments
overflow
position
right
top
z-index
Valeurs
CSS (1 ou 2)
auto, length, %
2
shape, auto
2
url, auto, crosshair, default, pointer,
move, e-resize, ne-resize, nw-resize,
2
n-resize, se-resize, sw-resize,
s-resize, w-resize, text, wait, help
auto, length, %
2
auto, hidden, scroll, visible
2
absolute, fixed, relative, static,
auto, length, %
auto, length, %
number, auto
2
2
2
2
Une liste dans le flux normal :
1. élément 1
2. élément 2
3. élement 3
26/33
La même liste en position relative avec un décalage à gauche de 1 cm et de 0.5 cm en haut :
1. élément 1
2. élément 2
3. élement 3
La propriété flottant en CSS
Par défaut, les éléments de type block occupent toute la largeur de la page, même si l'on spécifie
une largeur.
Pour positionner deux éléments de type block l'un à côté de l'autre, on utilise la propriété
float(left,right,none).
Exemple : deux éléments de type block de largeur 3cm dans le flux normal
Les mêmes avec la propriété {float:left;margin-left:2mm} :
Pour repositionnner les éléments HTML dans le flux normal, on utilise la propriété
clear(left,right,none,both)
Même avec un <br/>, le texte continue à côté du div flottant.
Maintenant on revient dans le flux normal d'affichage.
27/33
Pseudo-classes en CSS
Nom
:active
:first-child
:focus
:hover
:lang
:link
:visited
28/33
Description
ajoute un style à un élément qui est activé
ajoute un style à un élément qui est le premier enfant d'un autre élément
ajoute un style à un élément qui a le focus clavier
ajoute un style à un élément lorsque l'on passe la souris dessus
ajoute un style à un élément avec un attribut lang spécifiques
ajoute un style à un lien non visité
ajoute un style à un lien visité
CSS (1 ou 2)
1
2
2
1
2
1
1
Pseudo-éléments en CSS
Nom
:after
:before
:first-letter
:first-line
29/33
Description
ajoute un contenu après un élément
ajoute un contenu avant un élément
ajoute un style sur le premier caractère d'un texte (lettrine)
ajoute un style à la première ligne d'un texte
CSS (1 ou 2)
2
2
1
1
Maladies exotiques des CSS ?
La divite chronique
Symptômes : crise de la perception du monde sensé, le malade ne jurant plus que par une seule
balise : l’élément <div>, par lequel il remplace toutes les structures utilisées auparavant (tableaux
imbriqués, paragraphes, titres, citations, etc.). Le patient transforme donc tout ce qu’il a connu en
<div>. Il s’exprime souvent de la sorte : « Sus aux tableaux ! Je les remplace par des <div>) ».
Conséquences : transformer cent cellules de tableaux imbriquées en autant de <div> imbriqués ne
résout rien. La structure, plus complexe, est devenue incompréhensible et inutilisable.
Pire : remplacer toutes les balises logiques (<p>, <h1>, <cite>, <blockquote>, …) par la balise
unique et générique <div> fait perdre aux documents tout leur sens et toute leur sémantique, les
rendant inintelligibles aux navigateurs non graphiques et aux moteurs de recherche.
Traitement : un traitement lourd est nécessaire. Il faut (ré)apprendre au patient qu’un document
HTML doit avoir du sens et qu’il faut y utiliser chaque balise à bon escient : <p> structure des
paragraphes, <div> délimite les grandes zones du document, <h1>… <h6> dénotent les niveaux
de titres, <ul> introduit les listes et menus, etc. Le risque de rechute est alors faible.
30/33
Maladies exotiques des CSS ?
La classite aiguë
C’est une admiration exacerbée des classes CSS, proche de la dévotion. Certaines thèses y voient
un rapprochement religieux.
Symptômes : la classite se manifeste par une utilisation à outrance des propriétés class sur chaque
balise rencontrée. Ce besoin d’identifier chaque élément par une classe (souvent répétée) témoigne
d’un soudain manque de confiance en soi provoqué par une connaissance évasive des sélecteurs
CSS et de leur héritage parent-enfant.
<div id="menuglobal">
<ul class="menu">
<li class="menuitem"><a
<li class="menuitem"><a
<li class="menuitem"><a
<li class="menuitem"><a
</ul>
class="bouton"
class="bouton"
class="bouton"
class="bouton"
href="#">Lien
href="#">Lien
href="#">Lien
href="#">Lien
1</a></li>
2</a></li>
3</a></li>
4</a></li>
Conséquences : prise de poids soudaine et excessive (exprimée en octets). Le code est inutilement
alourdi et la répétition de ces propriétés le rend parfois difficile à interpréter.
Traitement : une cure d’apprentissage des sélecteurs CSS et de leurs propriétés d’héritage est
nécessaire pour venir à bout de cette affection.
31/33
<ul id="menu">
<li><a href="#">Lien
<li><a href="#">Lien
<li><a href="#">Lien
<li><a href="#">Lien
</ul>
1</a></li>
2</a></li>
3</a></li>
4</a></li>
Maladies exotiques des CSS ?
La cellulite ravageuse
Cette forme de maladie est une réminiscence de nos anciennes habitudes de conception de sites
web à l’aide de tableaux et de cellules. Cette technique impliquait de multiples découpes des
éléments en petites cellules, contenant chacune un morceau d’image de l’arrière-plan ou une partie
du contenu.
Symptômes : on reconnaît le patient atteint de cellulite ravageuse à son obsession à vouloir tout
découper, imbriquer et « celluliser ».
Par exemple, le site d’Alsacréations sera immédiatement perçu comme un enchevêtrement
élémentaire de multiples cellules auxquelles seront appliqués des équivalents des propriétés
rowspan et colspan. Autre symptôme fréquent : le patient continue de tronçonner toutes ses images
d’arrière-plan en plusieurs fichiers, se compliquant la tâche pour l’intégration de son code.
Conséquences : à l’instar de la classite, la cellulite ravageuse implique une prise de poids
conséquente chez le malade. Elle produit surtout une structure inextricable et illogique, opaque
même aux yeux d’un utilisateur averti. Avec le temps et l’évolution de la maladie, le patient ne
comprendra plus son propre code. Quant aux navigateurs, la complexité du site les incitera à mal
interpréter les documents.
Traitement : cette pathologie lourde nécessite une complète remise en cause de ses propres
conceptions et de son expérience de webmaster.
32/33
Maladies exotiques des CSS ?
La négativite virulente
C’est l’obstination à nier en bloc l’existence des maladies précédentes. Le malade reste cloîtré
dans son monde et refuse de s’ouvrir à la réalité. Il feint de croire aux promesses des standards
CSS tout en réfutant chaque argument proposé en leur faveur.
La strictite aveugle
Cette nouvelle forme de contagion fait croire aux débutants que tous les sites web doivent être
validés en XHTML Strict.
Méfiez-vous de ces charlatans de la médecine qui vous submergent de remèdes (règles, doctypes,
prologues). Le débutant est alors noyé de doctrines à respecter, alors qu’il est souvent préférable
d’aller à son rythme, de commencer en transitionnel, voire de conserver un squelette minimal en
tableaux et d’y insérer les mises en forme CSS par à-coups.
33/33