seance3-2 CSS.ppt

1
Techniques du web
LST Informatique
FST 2016-2017
Mohamed OUZARF
Feuilles de styles - CSS

LST informatique 2
Mise en forme de la police
Le texte est présenté avec une police, une taille, un style et
des variantes bien précises.
"font-family" = la famille de polices.
"font-size" = la taille de police (ou corps).
"font-style" = le style de police.
"font-variant" = la variante de police.
"font-weight" = l'étirement de police.

LST informatique 3
font-family: Georgia, prestige, sans-serif
propriété et valeurs servant à définir la police et l'ordre de
présentation est imposé au navigateur pour l'affichage.
Deux familles distinctes
- famille classique : arial, verdana, times, ....
- famille générique : serif, sans-serif, cursive, fantasy, monospace.

4
Exemple:
Codes CSS placés dans HEAD
.... </title>
<STYLE TYPE="text/css">
h4 { font-family: times, verdana, sans-serif ;
color: green ; font-style: italic ;
background-color: #FFFFFF ;
font-size: 16pt ;
}
</style>
Code source dans BODY
<H4> Les feuilles de style en cascade (Cascading Style Sheets - CSS) traitent
le problème du contrôle de la mise en page, en permettant aux auteurs de
créer des feuilles qui affichent des marges précises, différents styles de
polices... etc." </H4>

5
font-size
la taille relative.
la taille absolue.
la valeur numérique.
la valeur en pourcentage.
Taille en valeur relative :
Important : Cette taille se définit par rapport à celle de l'élément parent et
codifiée avec les mots-clés suivants: smaller | medium | larger
(la police origine et par défaut est ici medium).
Taille en valeur absolue:
Un mot-clé parmi les suivants peut être appliqué à une police:
xx-small | x-small | small | medium | large | x-large | xx-large

6
Valeur numérique :
Avec les valeurs numériques relatives : em, ex, px.
Avec les valeurs numériques absolues : in, cm, mm, pc, pt.
Les unités de longueur relatives
em : la valeur de "font-size" pour la police concernée.
ex : la valeur de "x-height" pour la police concernée.
px : une quantité de pixels, en fonction de l'appareil de visualisation.(d'où
les suggestions de ne pas l'utiliser pour définir la taille des polices, car
vous aurez souvent des ennuis de visualisation).
Les unités de longueur absolues
in : pouce (inch) -- un pouce est égal à 2.54 cm.
cm : centimètre
mm : millimètre
pc : pica -- un pica est égal à 12 points.
pt : point -- le point de CSS2 est égal à 1/72 de pouce.

LST informatique 7
Valeur en pourcentage:
Une valeur en pourcentage spécifie une taille de police absolue par rapport
toujours à celle de l'élément parent.
Comme pour les valeurs exprimées en "em", leur emploi autorise la
création de feuilles de style plus fiables.
Une valeur de pourcentage est formée d'un caractère de signe facultatif (+
ou – )( + par défaut), suivi immédiatement par un nombre et suivi
immédiatement par l'identifiant " % ".

8
Font-variant :
"font-variant" est une propriété servant à définir l'affichage d'un texte en
petites capitales.
Dans une police de ce type, les caractères ont un aspect presque similaire
aux lettres majuscules, mais avec une taille réduite et des proportions
légèrement différentes. Cette propriété suit les règles d'héritage.
Les significations des valeurs sont :
normal: Spécifie une police qui ne possède pas de petites capitales dans sa
famille.
small-caps: Spécifie une police pouvant définir des caractères en petites
capitales.

LST informatique 9
Font-style:
Style normal
Style italic (italique)
Style oblique
ce dernier est identique au style "italic" mais il n'est
pas disponible dans toutes les familles de police

10
"font-weight" ou graisse de la police:
En CSS vous avez plusieurs mots-clés disponibles pour ajuster
cette graisse.
On parle souvent de texte en gras pour la balaise <B> du
HTML ou encore de "graisse", de "poids" ou "d'épaisseur" de
police.
Cette propriété suit les règles d'héritage.
Mots-clés ou valeurs
"100" à "900" : Ces valeurs "100 à 900" forment une séquence
ordonnée, où chacun des nombres indique pour la police, une
graisse au moins aussi grasse que celle du nombre précédent.

11
Normal : Equivaut à la valeur "400"
Bold : Equivaut à la valeur "700"
bolder: Spécifie la graisse supérieure à celle assignée à une police, cette
graisse étant plus grasse que celle héritée par la police. S'il n'y en a pas, la
valeur de graisse de la propriété prend simplement la valeur numérique
supérieure (l'aspect de la police ne changeant pas), sans pouvoir dépasser la
valeur "900".
Lighter: Spécifie la graisse inférieure à celle assignée à une police, cette
graisse étant moins grasse que celle héritée par la police. S'il n'y en a pas, la
valeur de graisse de la propriété prend simplement la valeur numérique
inférieure (l'aspect de la police ne changeant pas), sans pouvoir descendre
sous la valeur "100".

Mise en forme de Texte
"color" ou couleur du texte :
Pour définir la couleur d'un texte avec l'attribut COLOR vous
pouvez choisir entre différents types de valeurs( vous pouvez
aussi entendre parler de ("couleur de premier plan").
Il n'existe pas de couleur par défaut, sauf celle du navigateur
qui en principe est noire. L' élément enfant hérite de la couleur
de l'élément parent.
- nom de la couleur : white, black, blue...
- code RGB (Red, Green, Blue = rouge, vert, bleu) de 0 à 255
- valeur hexadécimale : #FFFFFF , #FF33CC

LST informatique 15
Code Couleur

Code Couleur
LST informatique 16

Propriété "Letter-Spacing " :
Cette propriété précise le comportement de l'espacement entre
les caractères du texte. Les valeurs applicables sont : normal,
longueur.
Cette propriété "letter-spacing" suit les règles d'héritage.
Valeurs applicables :
Normal : cette valeur par défaut correspond à l'espacement
normal de la police utilisée.
Longueur : cette valeur indique la quantité d'espacement qui
s'ajoute à l'inter-lettrage par défaut c'est-à-dire
normal. Valeur numérique ou Valeur en pourcentage.
Celle-ci peut être négative.

LST informatique 19
Propriété "Word-Spacing"
Cette propriété est utilisée pour définir le comportement de
l'espacement entre les mots. suit les règles d'héritage.
Les valeurs applicables sont :
Normal : cette valeur correspond à l'espacement normal de la
police utilisée.
Longueur : cette valeur indique la quantité d'espacement qui
s'ajoute à l'espace mot par défaut c'est-à-dire
normal. Celle-ci peut être négative.

LST informatique 20
Propriété "Text-transform"
Cette propriété permet de choisir un texte tout en minuscules ou tout en
majuscules, ou encore la première lettre seulement de chaque mot en
majuscules.
Cette propriété "text-transform" suit les règles d'héritage..
None : cette valeur est sans effet sur le texte.
Lowercase : toutes les lettres de chaque mot sont en minuscules.
Uppercase : toutes les lettres de chaque mot sont en majuscules.
Capitalize : la première lettre de chaque mot seulement est en majuscule.

LST informatique 21
Propriété "Text-decoration"
la propriété text-decoration sert à définir les parties du texte qui sont soulignées,
surlignées ou barrées et clignotent.
Cette propriété ne suit pas les règles d'héritage.
overline : souligné dessus
line-through : barré
underline : souligné dessous
blink : clignote (avec Netscape et Firefox)
none : soulignement annulé et valeur par défaut

Application
LST informatique 22

LST informatique 23
Mise en forme des paragraphes
Propriété "Text-align" pour aligner du texte
Cette propriété accompagnée d'une valeur Left, Right, Center, Justify, sert à définir
l'alignement horizontal du texte d'un élément ou le positionnement d'une image.
Cette propriété "Text-align" bénéficie des règles d'héritage.
Valeurs, avec par défaut l'alignement à gauche.

LST informatique 24
Propriété "Line-Height" :
Permet de définir l'interlignage dans un bloc de texte, c'est-à-dire l'espacement
qui sépare les lignes qui est calculé en fonction du corps choisi (taille des
caractères).
La valeur "normal" correspond à l'interlignage de base calculé par le
navigateur en fonction de la taille de police utilisée.
Il n'est donc pas utile de la spécifier si vous souhaitez utiliser cette valeur par
défaut.
La hauteur des interlignes peut être définie par un "nombre", et cette hauteur
est fonction de la taille de la police utilisée, qui est simplement multipliée par
le nombre choisi.

LST informatique 25
Propriété "White-Space"
Cette propriété détermine la gestion des blancs et des sauts de ligne dans le
texte d'un élément. "white-space" bénéficie des règles d'héritage.
Les valeurs de cette propriété
NORMAL Le texte passera à la ligne en fonction de son contenant, pour
s'ajuster à celui-ci et rester dans ses limites. Valeur par défaut.
NOWRAP: Sauf les retours à la ligne "br"; aucun autre balise n'est interprété.
Le texte dans ce cas défile à perte de vue, sauf à rencontrer un "br".

LST informatique 26
letter-spacing et word-spacing
line-height

27
Mise en forme de l'arrière-plan
Couleur du fond de page:
Cette propriété "background-color" sert à définir la couleur du fond de la
page ou du contenu de texte d'un ou plusieurs éléments.
On parle de "couleur d'arrière-plan".
body { background-color: #FFFFCC ; }
Image dans un fond de page :
La propriété background-image sert à placer une image en fond de la page ou
en fond de texte d'un ou plusieurs éléments. on dit aussi qu'elle sert à spécifier
"image d'arrière-plan".
En même temps qu'une image, il est fortement recommandé aussi de spécifier
une couleur normale d'arrière-plan, qui sera utilisée en remplacement une
image indisponible.
body { background-image: url(« Chemin/image.jpg" }

LST informatique 28
Répétition d'une image horizontalement
Cette propriété "background-repeat" permet de placer une image en fond de
page qui va être définie suivant les valeurs adoptées :
Repeat: L'image d'arrière-plan se répète à la fois horizontalement et
verticalement.
no-repeat:L'image d'arrière-plan n'est affichée qu'une seule fois.
repeat-x:L'image d'arrière-plan ne se répète qu'horizontalement.
repeat-y:L'image d'arrière-plan ne se répète que verticalement.

29
Background-attachment
avec répétition ou pas d'une image d'arrière-plan. Cette propriété permet de
définir si une image reste fixe ou suit le mouvement de la page lors du
scroll, et aussi suivant les valeurs adoptées de répétition ou non-répétition
Valeurs
Scroll: L'image défile avec la page.
Fixed: L'image reste fixe à son emplacement lors du défilement de la page.
Repeat: L'image d'arrière-plan se répète à la fois horizontalement et
verticalement.
no-repeat: L'image d'arrière-plan n'est affichée qu'une seule fois.
repeat-x: L'image d'arrière-plan ne se répète qu'horizontalement.
repeat-y: L'image d'arrière-plan ne se répète que verticalement.

30
Positionnement d'une image d'arrière-plan
"background-position" est la propriété qui permet de définir avec précision
l'emplacement d'une image dans une page ou encore dans des éléments de type
bloc. Quand on spécifie une image d'arrière-plan, cette propriété indique la
position initiale de celle-ci.
Cette propriété ne suit pas les règles d'héritage.
Valeurs supportées
Les mots-clés
top = image au centre/haut de la page ou du bloc.
center = image au centre/centre de la page ou du bloc.
bottom = image au centre bas de la page ou du bloc..
right = image au centre/droit de la page ou du bloc.
left = image au centre/gauche de la page ou du bloc

31
Généralités
La mise en forme des paragraphes (blocs de texte),
vient naturellement après la mise en forme du texte
qui passait essentiellement par le formatage de la
police et ne concernait que des éléments de texte.
Un des avantages majeurs des feuilles de styles, est
de pouvoir mettre en forme des éléments, c'est-à-
dire des blocs de textes ou des images, avec
précision et dirons-nous au pixel près.

Le mot boîte est le terme utilisé, avec le mot
contenu qui lui concerne la partie se trouvant
positionnée dans la boîte.
Un boiter est toujours rectangulaire :
Modèle des boites en CSS

Le Contenu en bleu représente la partie du texte de paragraphe.
-Padding (intervalle) est la partie qui entoure le texte, lorsque cette
valeur est nulle vous avez le texte qui coïncide avec lui.
-Border est la partie qui entoure ensuite la zone padding, et ici encore si
la valeur Border est nulle vous avez cette zone qui va coïncider avec la
zone padding.
- Margin est une nouvelle zone qui entoure la boîte, et encore une fois si
cette valeur est nulle vous avez cette zone qui va coïncider avec Border.
Le périmètre de chacune des quatre aires (contenu, padding/espacement,
border/bordure et marging/marge) s’appelle un "bord", et chaque boîte a
donc quatre bords

LST informatique 34
Gros avantage, il est possible de fixer les valeurs des quatre "bords" du
rectangle que forme la boîte, comme indiqué ci-dessous:
Vous pouvez donner les valeurs par exemple de
margin-top= 60; margin-right= 40; margin-bottom= 10; margin-left= 30;
et en abrégé vous pouvez écrire: margin=60 40 10 30; c'est-à-dire à partir de
"top" dans le sens des aiguilles d'une montre.
De plus avec Width et Height vous allez pouvoir délimiter les dimensions de la
boîte compte-tenu de la dimension du texte.

<body>
<div>
<h1>Le modèle des
boîtes</h1>
<p class="para1">Un
premier paragraphe.</p>
<p class="para2">Un autre
paragraphe</p>
</div>
</body>
</html>
div{
background-color: #088;
width: 500px;
}
h1{
width:300px;
background-color: white;
height: 100px;
border: 1px solid black;
}
.para1{
width: 400px;
background-color: red;
padding: 60px;
border: 5px solid #A04;
}

37
<body>
<div>
<h1>Le modèle des boîtes</h1>
<p>Un premier paragraphe.</p>
<p>Un autre paragraphe</p>
</div>
</body>
</html>
div{
/*Couleur de fond (bleu-vert)*/
background-color: #088;
/*Largeur de l'élément en soi*/
width: 300px;
/*Marge intérieure*/
padding: 20px;
/*Bordure (vert)*/
border: 20px solid #0C0;
/*Marge extérieure*/
margin: 50px;
}

EXERCICES
LST informatique 38
Exo1

<body>
<h1>Un tableau simple</h1>
<table>
<tr class="ligne-impaire">
<td>Nom</td>
<td>Prénom</td>
<td>Age</td>
</tr>
<tr class="ligne-paire">
<td>Giraud</td>
<td>Pierre</td>
<td>25 ans</td>
</tr>
<td>Joly</td>
<td>Pauline</td>
<td>23 ans</td>
</tr>
</table>
</body>
td{
border : 1px solid black;
padding: 10px 15px;
}
table{
border-collapse: collapse;
}
.ligne-impaire{
background-color: #BBB;
}
.ligne-paire{
background-color: #EEE;
}
Tableaux en CSS

<body>
<h1>Un tableau
structuré</h1>
<table>
<thead>
<tr>
<th>Mois</th>
<th>Dépense</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Somme</td>
<td>1350€</td>
</tr>
</tfoot>
<tbody>
<td>Janvier</td>
<td>450€</td>
</tr>
<td>Février</td>
<td>520€</td>
</tr>
<td>Mars</td>
<td>380€</td>
</tr>
</tbody>
</table>
</body>
Tableaux en CSS

table{
}
thead, tfoot{
background-color: RGB(168,
197, 36);
color: #FFF;
text-transform: uppercase;
}
.ligne-impaire{
background-color: #BBB;
}
.ligne-paire{
background-color: #EEE;
}
th{
font-weight: normal;
}
td, th{
padding: 10px 15px;
}

<body>
<h1>Combiner des cellules</h1>
<table>
<caption>Liste et
coordonnées des inscrits</caption>
<tr>
<th>Nom</th>
<th>Prénom</th>
<th>Adresse e-mail</th>
</tr>
<tr>
<td>Giraud</td>
<td rowspan="2">Pierre</td>
<td>pierre.giraud@edhec.com</td>
</tr>
<tr>
<td>Durand</td>
<td>pierre.durand@gmail.com</td>
</tr>
</table>
</body>
<body>
<h1>Combiner des cellules</h1>
<table>
<tr>
<th colspan="3">Prénom(s)</th>
<th
colspan="2">Adresse(s) e-mail</th>
</tr>
<tr>
<td>Pierre</td>
<td colspan="2">Victor</td>
<td
colspan="2">pierre.giraud@edhec.co
m</td>
</tr>
<tr>
<td>Pauline</td>
<td>Jeanne</td>
<td>Mireille</td>
<td>pauline.j@gmail.com</td>
<td>p.joly@gmail.com</td>
</tr>
</table>
</body>

43
table{
}
th{
font-weight: normal;
}
td, th{
padding: 10px 15px;
}
Enrichir les tableaux avec du CSS

seance3-2 CSS.ppt

Contenu connexe

Similaire à seance3-2 CSS.ppt

Plus de AmineReal

Dernier

seance3-2 CSS.ppt

Notes de l'éditeur