Css

Langage CSS
Cascading style sheets
D’après
http://www.u-bourgogne.fr/MODCI/ideri/ressources/web/mise%20en%20forme%20et%20language%20css.ppt
2
HTML et CSS
►Pour maîtriser l’aspect final à l’écran on
utilise un autre langage que le HTML: le
langage CSS
►version actuelle : CSS2
 CSS = Cascading Style Sheets
= feuilles de style en cascade
►traduction officielle des spécifications de
référence :
http://www.yoyodesign.org/doc/w3c/css2/cover.html
3
HTML et CSS
►Exemple d'un site sans css ni mise en forme (mise en page par tableau)
4
HTML et CSS
► On veut obtenir quelque chose comme
5
HTML et CSS
►Gestion de la couleur du fond
6
HTML et CSS
► Le code html est modifié
► Il faut coller ce code dans toutes les pages du site

► On recommence pour les fonds de tableaux etc.
► Les espacements, les fontes, les couleurs de texte, …
7
HTML et CSS
► Code html (balise FONT)
Notepad++
8
HTML et CSS
► Comment modifier toutes les polices de caractères de la
page index.htm en une seule opération ?
► Comment appliquer ces modifications automatiquement
aux autres pages ?
► Réponses (imparfaites) :
 En utilisant l'outil de recherche/remplacement automatique de
Dreamweaver sur l'ensemble du site (pas toujours facile)
 En utilisant un logiciel de recherche/remplacement automatique qui
peut travailler avec plusieurs fichiers texte.
► Bonne réponse: utiliser une feuille de style

9
HTML et CSS
► Feuille de style musee.css
10
HTML et CSS
► Feuille de style musee.css
11
HTML et CSS
►Trois méthodes d'application de style CSS:
 ajout d'un attribut "style" dans une balise
donnée
 ajout d'une section <style> au début du
document html : s'applique aux balises du
document courant
 ajout d'une feuille de style externe
(monstyle.css) liée à une ou plusieurs pages
html
12
HTML et CSS
►attribut "style" dans une balise donnée
<BODY>
<H1 style="color:blue">La page personnelle de Bach</H1>
<P >Jean-Sébastien Bach était un compositeur prolifique.
</BODY>
ne s'applique qu'à cette

section H1
13
HTML et CSS
►section <style> s'appliquant aux balises du
document courant
L'indication de style porte
sur tous les titres de
<HEAD> niveau 1 (Heading 1) de
<STYLE type="text/css"> la page html
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>La page personnelle de Bach</H1>
14
HTML et CSS
►feuille de style externe (monstyle.css)
liée à une ou plusieurs pages html.
<head>
<title>page liée à monstyle.css </title>
<link href="monstyle.css" rel="stylesheet" type="text/css">
</head>
indique que cette page web utilise les

styles du fichier monstyle.css
15
HTML et CSS
►feuille de style externe (monstyle.css)
liée à une ou plusieurs pages web.
body { sélecteur (ici une balise)
background-color: #FFFFCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
valeur
line-height: 24px;
color: #336699; propriété
}
a{
font-size: 11px;
color: #336600;
}
16
HTML et CSS
Pour appliquer un style ...
► .... à tous les éléments de la page:
le sélecteur universel * agit sur tous les éléments
HTML. Pour définir par exemple une couleur
rouge par défaut : * { color: #ff0000; } ;
► ... à toutes les sections correspondant à
une balise donnée :
p { color: #0000ff; } ;
le contenu de toutes les balises <p> sera bleu,
sauf si une autre couleur leur est attribuée par
ailleurs de façon plus spécifique (class ou id, voir
plus loin)
17
HTML et CSS
► ... à certaines élément portant un attribut
"class=...." :
 code css
►p.vert { color: #008000; }
 code html
► Le contenu de toutes les balises
<p class="vert"> sera vert.
► Le contenu des autres balises <p> restera bleu (si p {
color: #0000ff; } est présent)
18
HTML et CSS
► à une instance unique (dans la page html)
d'un élément portant un attribut du type
"id=..."
 p#vert { color: #008000; } ;
 le contenu de la seule balise
<p id="vert"> sera vert.
 Le contenu des autres balises <p> restera
bleu ;
Une seule balise <p id="vert"> par page html

19
HTML et CSS
►Héritage :
body {
background-color: #FFFFCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 24px;
color: #336699; la balise <a> est dans la section
} <body>. Elle en hérite le style :
a{ couleur, police, ...
font-size: 11px;
color: #336600;
}
sauf pour font-size et color qui
corrigent les propriétés de body.
20
HTML et CSS
► (CSS = cascading sheets style)
► ordre de priorité dans la "cascade"
1. L'auteur: produit des feuilles de style pour
un document source. Prioritaire sur ...
2. ... l'utilisateur: peut modifier la taille des
caractères, la couleur de fond par défaut
(=couleur des fenêtres windows par ex.),
l'affichage ou non de certains éléments
(images). Prioritaire sur ...
3. ... l'agent utilisateur: (= navigateur = IE,
Mozilla Firefox, Opera ...) : applique sa
feuille de style par défaut
21
HTML et CSS
► Résumé :
Les règles des feuilles de style de l'auteur
ont, par défaut, plus de poids que celles de
l'utilisateur.
Les règles d'un auteur et d'un utilisateur sont
prioritaires sur celles de la feuille de style par
défaut de l'agent utilisateur.
Les feuilles de style importées suivent aussi la
cascade, leur poids dépendant de leur ordre
d'importation. (c'est la dernière qui
l'emporte)
22
le positionnement CSS
►remplace le positionnement par les tableaux
html
►garde la structure logique des balises html
contrairement aux tableaux html.
►mise en page "liquide" (liquid layout),
absolue ou fixe.
►plus difficile à maîtriser que les tableaux
html
►différence entre les navigateurs  css
hacks.
23
►mise en page "liquide" (liquid layout) :
boîte flottante (le texte coule autour de la
boîte) ou ...
boîte à positionnement relatif (la position
s'adapte à la taille de la fenêtre)
►mise en page fixe
boîte à positionnement absolu : position
fixe par rapport au coin supérieur gauche
de page affichée fenêtre, ou ...
boîte à positionnement fixe par rapport à
la barre de titre de la fenêtre du navigateur
(menus ..) : toujours visible.
24
le modèle des boîtes : les boîtes en bloc
►sauf mention contraire :
 elles sont alignées en succession verticale
 elles occupent la largeur de la fenêtre
25
le modèle des boîtes : les boîtes en bloc
code html :
<p class="jaune">boîte jaune</p>
<p class="verte">boîte verte</p>
26
Principales balises générant de boîtes en
bloc :
►l'élément générique div
►les titres h1, h2, h3, h4, h5, h6
►le paragraphe p
► Les listes et éléments de liste ul, ol, li, dl,dd
27
le modèle des boîtes : les boîtes en ligne
►sauf mention contraire :
elles se succèdent horizontalement
elles occupent la largeur de leur contenu
28
le modèle des boîtes : les boîtes en ligne
code html :
<span class="jaune">section span </span>
<a class="verte">lien hypertexte</a>
<p class="rouge">paragraphe</p>
29
Principales balises générant des boîtes en
ligne:
►l'élément générique span ;
►le lien hypertexte a ;
►L'image img ;
►les ornements :
u (underline),
b (bold),
s (strong)
i (italic)
em (emphasize)
30
les dimensions des boîtes
(http://www.brainjar.com/css/positioning/)
31
les dimensions des boites
(traduction officielle du w3C : http://www.yoyodesign.org/doc/w3c/css2/box.html)
32
les dimensions des boites
33
.jaune {
background-color: #FFFF66;
height: 20px;
border: 5px dashed #006699;
margin: 30px;
padding: 50px;
}
<span class="jaune">section span </span>
34
.verte {
background-color: #00CC99;
height: 30px;
width: 200px;
margin: 20px;
padding: 20px;
}
<a class="verte">lien hypertexte</a>
35
.rouge {
background-color: #FF3300;
height: 50px;
width: 100px;
border: 30px solid #CCCC66;
padding: 30px;
}
<p class="rouge">paragraphe</p>
36
Positionnement relatif : la boîte est décalée par rapport à la
place qu'elle aurait occupée dans le flux normal
#verte {
background-color: #00CC99;
margin: 10px;
padding: 10px;
position: relative;
top: 10px;
}
<span class="jaune">jaune</span> <span
id="verte">vert</span> <span class="jaune">jaune</span>
37
boîte flottante :
►la boîte flottante est décalée complètement à gauche (ou à
droite) sur sa ligne
►les boîtes suivantes "s'écoulent" autour de la boite flottante
38
boîte flottante : code html
<style>
#maboîte {float: left; }
</style>
<img id="maboîte" src="rose.jpg" width="200"
height="150">
Lorem ipsum dolor sit
amet, consectetuer adipiscing elit. Phasellus suscipit
nisl. Sed imperdiet
pour aller plus loin :
► http://openweb.eu.org/articles/initiation_float/
►http://www.brainjar.com/css/positioning/
39
positionnement absolu :
le bloc est positionné par
rapport au coin supérieur
gauche de la fenêtre
40
codes css (positionnement absolu)
#maboîte { position: absolute;
left: 387px;
top: 59px;
}
code html
<img id="maboîte" src="rose.jpg" width="200" height="150">
41
code css
#p1 {
position: absolute;
left: 51px;
top: 62px;
width: 313px;
}
code html
<p id="p1">Lorem ipsum dolor sit amet, consectetuer

adipiscing elit. Phasellus suscipit nisl. Sed imp (...)
42
code css
#p2 {
position: absolute;
width: 543px;
height: 70px;
left: 50px;
top: 222px;
}
code html
<p id="p2">Donec at velit vel purus (...)

Css

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Css

Transféré par

Droits d'auteur :

Formats disponibles

Langage CSS

Cascading style sheets

► Il faut coller ce code dans toutes les pages du site

► Bonne réponse: utiliser une feuille de style

ne s'applique qu'à cette

indique que cette page web utilise les

Une seule balise <p id="vert"> par page html

<p id="p1">Lorem ipsum dolor sit amet, consectetuer

<p id="p2">Donec at velit vel purus (...)

Vous aimerez peut-être aussi