Css PDF

Développement NFA016
2007-2008
Web
CSS: les feuilles de style
CNAM le 1er octobre 2007
O. Pons S. Rosmorduc M. Simonot
1 / 28
CSS = Cascading Style Sheets
I Ecrit dans un chier .css

exemple : style1.css
I un même chier peut être partagé par plusieurs pages (→
uniformité)
I ajouter dans head de la page HTML qui utilisera le css :
<link rel="stylesheet" media="screen"
type="text/css" title="style1"
href="style1.css" />
I applique des styles (couleur fond, police...) à toute ou partie
d'une page HTML, en dénissant des règles
2 / 28
Structure d'une feuille de style
I suite de règles
I 1 règle =
selecteur {
propriété:valeur;
...
propriété:valeur;
}
I exemple :
body {
color:rgb(183,0,183);
margin:1.5cm;
}
h1,h2{
color:aqua; text-align:center;
}
p{
background-color:yellow;
}
3 / 28
Il faut savoir
Il faut apprendre
1. A qui appliquer un style (sélecteurs)
2. Dénir le contenu d'un style (propriétés)
4 / 28
I : A qui appliquer un style
A une ou plusieurs balises
body {
color:rgb(183,0,183);margin:1.5cm;
}
h1,h2{
color:aqua; text-align:center;
}
p{
background-color:yellow;
}
I tous les éléments du body auront une couleur violette et

marge de 1.5 cm
I tous les paragraphes auront en plus une couleur de fond
Jaune.
I les titres h1 et h2 seront en plus centrés avec une
couleur du texte bleu clair.
• : chaque élément hérite des propriétés des éléments ancètres qui

ne sont pas redénies ! 5 / 28
A qui appliquer un style
I À une classe
.important {color :red ;}
I À une balise d'une certaine classe
p.bleu {color :blue ;}
I À un selecteur descendant d'un autre sélecteur
/* Tous les em dans les paragraphes seront gris */
p em {color :gray ;}
.
/* Tous les elements de classe important a l'intérieur d'un paragraphe seront verts */
p .important {color :green ;}

/* Tous les em descendants d'un element de classe resume seront jaunes */
.resume em {color :yellow ;}

I À un sélecteur enfant d'un autre sélecteur
.resume>em {color :yellow ;}
I À un sélecteur frère immédiat d'un autre sélecteur
h5+p {color :pink ;}
6 / 28
Exercice
Lire la page Html et de la feuille de style qui suivent et répondre

aux questions suivantes :
1. Dessiner la structure de la page HTML sous forme d'arbre.
2. Sur chaque noeud de l'arbre, ajouter les numéros de règles css
qui s'appliquent.
3. en déduire l'achage de la page.
7 / 28
exo : (source html)
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>
<title>Page 1</title>
<link rel="stylesheet" media="screen" type="text/css"
title="style1" href="style2.css" />
</head>
<body>
<h1 >Un gros titre</h1>
<p class="bleu">Voici le paragraphe
associe au titre 1.
</p>
<p class="important" >Voici un bout de texte
mis en evidence avec la balise em:
<em> ceci est a faire remarquer </em>. </p>
<p>
Et voila le resultat de la balise strong :
<strong class="important"> coucou </strong>.
</p>
<h2 class="important">un titre plus petit</h2>
<h3 class="important">encore + petit</h3>
<h4 class="resume">encore + <em>petit</em></h4>
<h5>encore + petit</h5>
<p>toto</p>
</body>
8 / 28
exo : (source css)
body {
color:rgb(183,0,183); /* violet */
margin:1.5cm;
}
h1,h2{
color:aqua;
text-align:center;
}
p{color:black;}
.important {color:red;}
p.bleu {color:blue;}
p em {color:gray;}
p .important {color:green;}
.resume em {color:yellow;}
h5 + p {color:lime;}
9 / 28
exo (resultat)
10 / 28
div, span et feuilles de style
body {
color:rgb(183,0,183);
}
h1,h2{
color:aqua;
}
.important {background-color:grey;}
.important h1 {color:yellow;}
.important p {color:aqua;}
<body>
<h1>chapitre 2: les feuilles de style</h1>
<p>bla bla <span class="important">bla </span> bla</p>
<div class="important">
<h1>Les selecteurs</h1>
<p>Differents types de selecteurs</p>
<h1>Les propriétés</h1>
<p>bla bla bla</p>

</div>
</body>
11 / 28
Attribut id et feuille de style
p#resume {color :green ;}

#toto {color :blue ;}
et dans page Html :
<body>
<h1 id="toto">celui la est bleu </p>
<p id="resume"> Celui la est vert </p>
</body>
• l'attibut id doit être unique !
12 / 28
Selecteur d'attribut plus général
1. .important {color :red ;}

2. p.bleu {color :blue ;}
Abbréviations de :
1. *[class="important"] {color :red ;}
2. p[class="bleu"] {color :red ;}
I * désigne n'importe quelle balise
I On peut mettre n'importe quel attribut à la place de class
On eut aussi ecrire :
I p[class] {color :red ;}
tous les paragraphes ayant l'attribut class déni, quelque soit
la valeur de cet attribut.
13 / 28
Contenu d'un style (les propriétés)
Impossible de voir en détail toutes les propriétés. On va decrire les

grandes catégories.
Pour le détail :
http://www.yoyodesign.org/doc/w3c/css1/index.html
http://www.yoyodesign.org/doc/w3c/css2/cover.html
autres sites web interessant :
http://pompage.net/ et http://fr.selfhtml.org
et surtout leur chapitre sur les propriétés css :
http://fr.selfhtml.org/css/proprietes/index.htm
Validateur css :
http://jigsaw.w3.org/css-validator/
14 / 28
Couleurs
3 façons de désigner les couleurs
I par son nom (16 seulement) :

white, silver,gray,black,red,maroon,lime, green, yellow,blue,
navy,fushia,purple,aqua,teal
I shéma rgb :
on donne une valeur entre 0 et 256 pour le rouge, le vert , le
bleu
ou bien 3 pourcentages.
rgb(51,0,102) ou rgb(60%,90%,75%)
I valeur hexadecimale :
#OOOOOO (noir), # (blanc) ...
deux premiers caractères :valeur du rouge
deux caractères suivants :valeur du vert
deux derniers caractères :valeur du bleu
chires hexadécimaux : 1,..,9,A(10),B(11),..F(15)
15 / 28
Couleur
I propriété color : xe la couleur de la police.

p {color=blue ;}
p {color=rgb(51,0,102) ;}
p {color=#ffffff ;}
I propriété background-color : xe la couleur du fond.
p { background-color=blue ;}
p { background-color=rgb(51,0,102) ;}
p { background-color=#ffffff) ;}
16 / 28
polices
On ne peut utiliser que des polices présentes chez le client

→ utiliser les plus courantes.
→ proposer une liste (alternatives) de la même famille.
→ nir la liste par le nom d'une famille de fonte generiques :
serif, sans-serif, cursive, fantasy, monospace
I font-family
I font-family : arial, verdana, sans-serif ;

/* arial est pris en premier, sinon, verdana, sinon n'importe laquelle de la famille
sans-serif. */
I font-family : Georgia, "Times New Roman", Times,
serif ;
/* les noms de police composés doivent être entre guillemets : "Times New
Roman" */
I font-family : Courrier, "Courrier New", Lucida,
monospace ;
I font-family : "Comic Sans Ms", cursive ;
17 / 28
I font-style
valeur : italic | oblique | normal
I font-wheight
valeur : bold |bolder | lighter | normal
I font-size
• valeur numerique absolue : 12pt, 10mm, 1cm, 10px
• valeur numerique relative 1.5em ou 150% (normal=1em ou
100%)
• taille relative predenie :xx-small, x-small
normal,medium,large,x-large
I text-decoration
valeur underline |overline | line-through (barré) |
blink (clignotant) | none
I text-align : alignement de texte dans une balise block
valeur : left |right| center |justify
18 / 28
Propriétés de boites
I height, width
valeur : % ou px, ou cm..
p {height :4cm, width :30% }
I border
valeur : (% ou px)
p {border :medium solid black}
h1 {border :4px dotted green}
on a aussi border-top, border-bottom, border-left,
border-right
I margin :espace entre la bordure de l'élément et les autres
éléments.
valeur numerique ou %
I padding : espace entre le texte et la bordure de l'élément.
valeur numérique ou %
on a aussi
margin-top,..., margin-left
padding-top,...,padding-left
19 / 28
<body>
p.un
<p class="un">
{
padding:10px;
padding:10px;
border:1px solid red;
border:1px solid red;
</p>
}
</body>
20 / 28
Autres exemples de boites
21 / 28
Exercice
On décide de mettre en ligne un livre de découverte de la

grammaire : Verbes, Sujets et Compagnie de D. Gostain,
J.Dreidemy.
Se présente comme une histoire : suite de chapitres : Chaque

chapitre a la même structure :
1. Résumé
2. L'histoire du chapitre
3. Eventuellement un encadré exposant les règles découvertes
dans le chapitre.
Ecrire la page HTML correspondant au chapitre :La vie a 2 et la
feuille de style qui s'appliquera a tous les chapitres de ce livre.
On veut obtenir la présentation suivante :
22 / 28
23 / 28
Propriétés de listes
I list-style-type contrôler l'apparence des signes d'une liste.

Une des valeurs suivantes est permise.
I Pour ol :
decimal = 1.,2.,3.,4. etc...

lower-roman = i.,ii.,iii.,iv. etc...
upper-roman = I.,II.,III.,IV. etc...
lower-alpha = a.,b.,c.,d. etc...
upper-alpha = A.,B.,C.,D. etc...
ol {list-style-type : lower-alpha ;}
I Pour ul :
disc = rond plein comme puce

circle = puce ronde
square = puce rectangulaire
ul {list-style-type : circle ;}
none = pas de puce, pas de numérotation
I list-style-image un graphique pour vos propres puces
list-style-image :url([nom de fichier])
24 / 28
Exercice
Dans le livre précédent, tous les 3 ou 4 chapitres, il y a des

chapitres particuliers : des récréations. Les récréations contiennent
des jeux et exercices, et on une présentation diérente.
Ecrire la page HTML correspondant à la première recré et modier
la feuille de style en conséquence.
25 / 28
26 / 28
Exercice
adopter plutot la représentation suivante :
27 / 28
Exercice
Ajouter :
1. des liens entre les deux pages.
2. des liens interne à la page recréation qui donne accès a chacun
des 2 exercices
3. un lien pour obtenir la correction pour duos et pour le quizz.
28 / 28

Css PDF

Transféré par

Droits d'auteur :

Formats disponibles

Css PDF

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 PDF

Transféré par

Droits d'auteur :

Formats disponibles

Développement NFA016

CSS: les feuilles de style

CNAM le 1er octobre 2007

O. Pons S. Rosmorduc M. Simonot

I Ecrit dans un chier .css

A une ou plusieurs balises

I tous les éléments du body auront une couleur violette et

couleur du texte bleu clair.

• : chaque élément hérite des propriétés des éléments ancètres qui

p .important {color :green ;}

.resume em {color :yellow ;}

Lire la page Html et de la feuille de style qui suivent et répondre

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<p>bla bla <span class="important">bla </span> bla</p>

<p>Differents types de selecteurs</p>

<p>bla bla bla</p>

p#resume {color :green ;}

1. .important {color :red ;}

Impossible de voir en détail toutes les propriétés. On va decrire les

3 façons de désigner les couleurs

I par son nom (16 seulement) :

I propriété color : xe la couleur de la police.

On ne peut utiliser que des polices présentes chez le client

I font-family : arial, verdana, sans-serif ;

valeur : left |right| center |justify

On décide de mettre en ligne un livre de découverte de la

Se présente comme une histoire : suite de chapitres : Chaque

I list-style-type contrôler l'apparence des signes d'une liste.

decimal = 1.,2.,3.,4. etc...

disc = rond plein comme puce

Dans le livre précédent, tous les 3 ou 4 chapitres, il y a des

adopter plutot la représentation suivante :

Vous aimerez peut-être aussi

I Ecrit dans un chier .css

I propriété color : xe la couleur de la police.