Utilisation des CSS - Webmaestro

Transcription

Feuilles de style en cascade
Utilisation
des
CSS
Cascading Style Sheets
Yan Bodain
([email protected])
Chercheur-développeur
Maison des technologies de l'information et des
communications pour la formation et l'apprentissage
CRIM Formation
http://www.crim.ca
Dernière modification: 18 dec. 2006
Objectifs
– Identifier les principales instructions de mise en page CSS.
– Comprendre le rôle et la fonction particulière de ces
instructions.
– Savoir appliquer ces instructions pour réussir une mise en
page professionnelle.
Sujets
– Principes généraux
• Unités de mesure
• Appels de fichier
• Importation d’instructions CSS
– Principales instructions de mise en page
•
•
•
•
•
•
•
•
•
•
•
Couleur
Arrière-fond
Police
Liste
Marge
Bordure
Espacement
Position
Affichage
Flottement
Validateur CSS / Référence
– Mise en application
Unités de mesure ABSOLUE
• Unité absolue :
– Les mesures absolues prennent l'une des formes suivantes :
•
•
•
•
•
•
px
mm
cm
in
pt
pc
(pixel)
(millimètre)
(centimètre)
(pouce)
(point, un point est égal à 1/72 de pouce)
(pica, un pica est égal à 12 points)
• Attention! Aucun espace ne devrait jamais figurer entre la valeur et
l'unité de mesure.
h1 { font-size: 18 pt; } /* ne fonctionne pas */
p { font-size: 18pt; } /* fonctionne bien */
– Les mesures absolues peuvent aussi prendre la forme de
dimensions préétablies (xx-small, x-small, small, medium, large,
x-large, xx-large).
h1{ font-size: medium; }
Unités de mesure RELATIVE
• Unité relative :
– Les mesures relatives servent à fixer les dimensions d'un
élément en utilisant un rapport de proportion.
•
•
•
•
% (pourcentage)
smaller, larger
em (dimension de la police)
ex (hauteur du caractère x)
em { font-size: 120% ; }
b { font-size: larger ; }
i { font-size: 1.5em ; }
a { line-height : 2.5ex ; }
– Les navigateurs Web utilisent une taille de caractères fixée par
défaut à 16 pixels (i.e 1em=16px).
Fichiers externes
• Il est possible de placer des instructions CSS dans un
fichier externe pour faciliter leur réutilisation entre
différentes pages Web.
• La ligne suivante permet d'appeler une feuille de style
externe à l'intérieur d'une page Web :
<head>
<link rel="stylesheet" type="text/css" href="truc.css" />
</head>
–
–
–
–
Cette directive doit être placée dans la section « HEAD » de la page Web.
Le fichier CSS doit se présenter sous un format texte (i.e non binaire).
La source du fichier doit être indiquée avec l'attribut « href » (hyper référence).
Il est aussi bien possible d'utiliser une URL relative ("truc.css") qu'une URL
absolue ("http://www.crim.ca/truc.css").
– Le nom du fichier externe peut présenter une extension arbitraire (*.htm,*.txt). Il
est toutefois recommandé d'utiliser l'extension CSS (*.css) pour faciliter
l'administration des fichiers sur le serveur Web.
Fichiers externes - Types de médias
• Il est possible d'ajouter l'attribut media pour limiter
l'utilisation d'une feuille de style externe à un certain type
de média seulement.
<link rel="stylesheet" type="text/css" media="print, screen" href="truc.css" />
–
–
–
–
–
–
–
–
–
–
all : pour tous les appareils.
aural : pour les synthétiseurs de parole.
braille : pour les appareils braille à retour tactile.
embossed : pour les appareils à impression braille.
handheld : pour les appareils portatifs.
print : pour les supports paginés opaques (ou pour les documents vus
sur écran en mode aperçu avant impression).
projection : pour les présentations en projection.
screen : pour les moniteurs.
tty : pour les médias utilisant une grille de caractères fixe, tels les
télétypes, les terminaux ou les appareils portatifs aux capacités
d'affichage réduites.
tv : pour les appareils de type télévision.
Fichiers externes - Préséance
• Il est possible d'utiliser plusieurs feuilles de style en
même temps à l'intérieur d'une même page Web.
– Les feuilles de style se rajoutent les unes par-dessus les autres
("cascading style sheet").
– Lorsqu'un conflit de style intervient, la dernière classe appelée a
toujours préséance sur les classes précédentes.
<link rel="stylesheet" type="text/css" href="truc1.css" />
<link rel="stylesheet" type="text/css" href="truc2.css" />
<style type="text/css">
h1 { color: blue; }
/* en cas de conflit, la dernière
classe redéfinit les précédentes */
#particulier { color: red; } /* les styles individuels ont toujours
préséance sur les autres instructions*/
</style>
Importation de CSS
• Il est possible de réaliser l'importation d'une feuille de
style à l'intérieur d'une autre feuille de style au moyen de
directive @import.
– Cette directive doit être placée au début même du fichier CSS
de manière à précéder toutes les autres règles de la feuille de
style locale.
@import "truc1.css";
@import url("truc2.css"); /* deux syntaxes équivalentes */
• Il est possible d'assigner une feuille de style externe à
un média particulier.
@import url("print.css") print;
@import url("main.css") print, screen;
Sujets
•
•
•
•
•
•
•
•
•
•
•
Couleur
Arrière-fond
Police
Liste
Marge
Bordure
Espacement
Position
Affichage
Flottement
Directives de mise en page
• color
• background-image
• background-repeat
• background-color
• font-size
• font-family
• font-weight
• font-style
• list-style-type
• list-style-image
• text-decoration
• text-transform
• text-align
• text-indent
• line-height
• white-space
• margin
• margin-left
• margin-right
• margin-top
• margin-bottom
• position
• left
• top
• width
• height
• paddings
• padding-left
• padding-right
• padding-top
• padding-bottom
• display
• visibility
• border-width
• border-left-width
• border-right-width
• border-top-width
• border-bottom-width
• border-style
• border-color
• float
• clear
Couleur
color
s'applique à tous les éléments
valeur héritée : oui
valeur
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
olive, purple, red, silver, teal, white, yellow ... etc
code
#0000FF, #00FF00 ... etc
pourcentage
rgb(20%, 30%,100%)
em { color: red; }
b { color: #ff0000; }
p { color: rgb(255, 0, 0); }
i { color: rgb(100%, 0%, 0%); }
/* nom de couleur */
/* code de couleur */
/* couleur variant de 0 à 255 */
/* pourcentage */
Note: L'élément souligné indique la valeur par défaut de l'attribut.
Arrière-fond
background-image
valeur
valeur héritée : non
adresse URL de l'image
background-repeat
valeur
no-repeat, repeat, repeat-x, repeat-y
background-color
valeur
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
olive, purple, red, silver, teal, white, yellow ... etc
code
#0000FF, #00FF00 ... etc
pourcentage
rgb(20%, 30%,100%)
em { background-color: blue; }
body { background-image: url("http://www.crim.ca/fond.png"); }
h1 { background-image: url("fond2.gif");
background-repeat: no-repeat;
}
Police
font-size
valeur absolue
xx-small, x-small, small, medium, large, x-large, xx-large
valeur relative
smaller, larger
longueur
1pt, 2pt, 3pt ... etc
pourcentage
1%, 2%, 3% ... etc
font-family
valeur
nom d'une police locale (ex.: helvetica, arial)
valeur générique
serif, sans-serif, cursive, monospace, fantasy
h1 { font-family: helvetica, arial, sans-serif; }
em { font-size: 120%; }
p { font-size: 12pt; }
i { font-size: medium; }
b { font-size: larger; }
Police
font-weight
valeur
normal, bold, bolder, lighter,100-900
font-style
valeur
normal, italic
h1 em { font-style: italic; }
em { font-weight: bold; }
b { font-weight: lighter; }
i { font-weight: 700; }
Liste
list-style-type
s'applique aux éléments de liste
valeur
disc, circle, square, decimal, lower-roman, upper-roman,
lower-alpha, upper-alpha, none
ul.image { list-style-image: url("images/carre.png"); }
ul.alpha { list-style-type: upper-alpha; }
ul.roman { list-style-type: lower-roman; }
Note: la forme visuelle de la liste peut varier en fonction du navigateur.
Texte
text-transform
valeur
capitalize, uppercase, lower-case, none
text-align
s'applique uniquement à un groupe d'éléments
valeur
left, right, center, justify
text-indent
longueur
1em, 2em, 3em ... 0.1in, 0.2in, 0.3in... etc
pourcentage
1%, 2%, 3% ... etc
h1 { text-transform: capitalize; }
h1.maj { text-transform: uppercase; }
all.droite { text-align: right; }
p.gauche { text-align: left; }
p.retrait { text-indent: 25%; }
Texte
line-height
valeur relative
nombre réel par rapport à la grosseur de police (ex.: 1.2)
longueur
1pt, 2pt, 3pt ... 0.1in, 0.2in, 0.3in... etc
pourcentage
1%, 2%, 3% ... etc
text-decoration
valeur
underline, line-through, blink, none
white-space
valeur
normal, pre
p { font-size: 10pt;
line-height: 1.2em;
}
b { text-decoration: underline; }
p.espace { white-space: pre; }
Marge-Bordure-Espacement
• Les éléments visuels possèdent une aire de contenu
entourée d'une aire d'espacement, d'une aire de bordure
et une aire de marge.
margin
border
padding
Marge
margin
margin-left
margin-right
margin-top
margin-bottom
valeur
auto
longueur
pourcentage
1%, 2%, 3% ... etc
body { margin: 10pt 20pt 30pt 40pt; } /* haut droite bas gauche */
p { margin: 40pt; }
/* toutes les marges à 40 pt */
Bordure
border-width
border-left-width
border-right-width
border-top-width
border-bottom-width
valeur
none
longueur
div.info { border-width: 1px 2px 2px 1px; }
div.annonce { border-width: 4px; }
Bordure
border-style
valeur
solid, double, inset, outset, groove, ridge, none
border-color
valeur
none, aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, purple, red, silver, teal, white, yellow, …etc
code
#0000FF, #00FF00 ... etc
pourcentage
rgb(20%, 30%,100%)
body { border-color: blue;
border-width: 1em 2em 1em 2em;
border-style: ridge;
}
h1
{ border-color: #aaaaaa;
border-width: 0.2in;
border-style: groove;
}
Espacement
paddings
padding-left
padding-right
padding-top
padding-bottom
longueur
pourcentage
1%, 2%, 3% ... etc
div.gauche { paddings: 1em 2em 1em 2em; }
div.centre { paddings: 20px; }
Position
position
s'applique à un groupe d'éléments
valeur
static | relative | absolute | fixed
– static : la boîte est placée selon le flux normal.
– relative : la boîte est déplacée relativement à sa position dans le
flux normal.
– absolute : L'emplacement de la boîte est déterminé par les
propriétés left, right, top, et bottom.
– fixed : l'emplacement de la boîte est fixe par rapport à une
référence donnée.
div.pivImage {
position: absolute;
top: 0px;
left: 0px;
}
Note: cette instruction ne fonctionne pas correctement avec tous les navigateurs.
Gauche-Droite
left
valeur
<longueur> | <pourcentage> | auto
longueur
pourcentage
1%, 2%, 3% ... etc
right
valeur
longueur
pourcentage
1%, 2%, 3% ... etc
div.version { position: absolute;
left: 0px;
top: 0px;
width: 18ex;
height: 2ex;
background-color: #0000dd; /* bleu */
}
Largeur-Hauteur
width
valeur
longueur
pourcentage
1%, 2%, 3% ... etc
height
valeur
longueur
pourcentage
1%, 2%, 3% ... etc
div.long { width: 10in; }
div.court { width: 12px; }
div.moitie { width: 50%; }
Affichage
display
s'applique à tous les d'éléments
valeur
block, inline, list-item, none
– block : force un élément à générer une boîte de bloc.
– inline : force un élément à générer une boîte en-ligne.
– list-item : force un élément à générer une liste d'items.
/* ici p est considéré comme un élément de liste */
p{
display: list-item;
list-style-type: circle;
padding-left: 1em;
}
Note: la forme visuelle de la liste peut varier en fonction du navigateur.
Visibilité
visibility
valeur
visible, hidden
div.barreOnglet, div.onglet a {
visibility: hidden;
line-height: 0px;
}
Flottement
float
valeur
left, right, none
img {
float: right;
margin-top: 2em;
}
Espace libre
clear
valeur
left, right, both, none
– Cette propriété indique quels côtés d'un élément ne devraient
jamais être adjacents à une boîte flottante précédente.
img {
float: right;
margin-top: 2em;
}
p { clear: right; }
/* aucun élément flottant à droite */
Validateur CSS
• Validateur de CSS disponible en ligne.
http://jigsaw.w3.org/css-validator/
Référence (www.w3.org)
Sujets
•
•
•
•
•
•
•
•
•
•
•
Couleur
Arrière-fond
Police
Liste
Marge
Bordure
Espacement
Position
Affichage
Flottement
Mise en application
media screen
media print
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<title>Exemple de mise en page</title>
<link rel="stylesheet" type="text/css" media="screen" href="ecran.css" />
<link rel="stylesheet" type="text/css" media="print" href="imprimante.css" />
</head>
<body>

<div class="pivBandeau">
<img class="pivVisuel" src="images/visuel.gif" width="310" height="57" alt="Drapeau du Québec" />
<div class="barreMenuPiv">
<ul class="barreGauchePIV">
<li class="premier"><a href="">Accueil</a></li>
<li><a href="">Nous joindre</a></li>
<li><a href="http://www.gouv.qc.ca">Portail Québec</a></li>
</ul>
<ul class="barreDroitePIV">
<li><a href="">Recherche</a></li>
<li><a href="">English</a></li>
</ul>
</div>
<a href="http://www.gouv.qc.ca"><img class="pivImage" src="images/QUEBw3.gif" width="160" height="95" border="0" alt="Drapeau du Québec" /></a>
</div>

<div class="barreOnglet">
<div class="onglet selected"><a href="">Section un</a></div>
<div class="onglet"><a href="">Section deux</a></div>
<div class="onglet"><a href="">Section trois</a></div>
</div>
<div class="contenu">
<div class="sectionNavigation">
<ul class="listeNavigation">
<li><a href="">Sous-section A</a></li>
<li><a href="" class="selected">Sous-section B</a></li>
<li><a href="">Sous-section C</a></li>
</ul>
</div>
<div class="info">
Voici des informations contextuelles. Voici des informations contextuelles. Voici des informations contextuelles.
Voici des informations contextuelles. Voici des informations contextuelles.
</div>
<div class="sectionContenu">
Voici un exemple de mise en page réussie. Voici un exemple de mise en page réussie. Voici un exemple de mise en page réussie. Voici un exemple de
mise en page réussie. Voici un exemple de mise en page réussie. Voici un exemple de mise en page réussie. Voici un exemple de mise en page réussie.
<p />
<p />
</div>
<div class="pied">
<a href="">Politique de confidentialité</a> | <a href=""> Déclaration de services aux citoyens</a><br />
<a href=""><img src="images/quebec_drapeau.gif" width="87" height="17" alt="Portail du gouvernement du Québec" title="Portail du gouvernement du
Québec" border="0" /></a><br />
<a href="" class="copyright">© Gouvernement du Québec, 2006</a>
</div>
</div>
</body>
</html>
/* ecran.css */
div.pivBandeau { height: 60px; }
div.barreOnglet {
margin-top: 3em;
text-align: center;
border-style: solid;
border-width: 0 0 1px 0;
line-height: 1.1em;
}
img.pivVisuel { float: right; }
div.onglet {
body {
font-family: arial;
margin: 0px;
padding: 0px;
}
img.pivImage {
position: absolute;
top: 0px;
left: 0px;
padding-left: 50px;
background-color: #FFFFFF;
}
div.barreMenuPiv {
position: absolute;
left: 210px;
top: 53px;
background-color: #003399;
height: 1.2em;
}
ul.barreGauchePIV { float: left; }
ul.barreGauchePIV, ul.barreDroitePIV {
margin: 0 1ex 0 1ex;
padding: 0px;
background-color: #003399;
}
ul.barreDroitePIV {
float: right;
text-align: right;
}
ul.barreGauchePIV li, ul.barreDroitePIV li { display: inline; }
ul.barreGauchePIV li a, ul.barreDroitePIV li a {
color: #FFFFFF;
font-size: 0.9em;
text-decoration: none;
margin-left: 1ex;
}
ul.listeNavigation li a.selected {
color: #000000;
font-weight: bold;
}
div.sectionContenu {
background-image: url("images/fond.jpg");
background-repeat: repeat-x;
margin-left: 20ex;
padding: 0.5em;
}
display: inline;
margin: 0 0.3em 0 0.3em;
background-color: #C3D3EE;
border-style: solid;
border-width: 1px 1px 0 1px;
}
div.info {
background-color: #FFFFE0; /* jaune */
margin: 8ex 1ex 1ex 1em;
width: 180px;
float: right;
padding: 1ex;
font-size: 0.8em;
border: 1px solid #AAAAAA;
}
div.onglet a {
padding: 0 0.3em 0 0.3em;
color: #000000;
}
div.selected a {
background-color: #F1F5FC;
color: #000000;
padding-bottom: 2px;
font-weight: bold;
}
/* bleu */
div.onglet a:hover { background-color: #FFFFFF; }
div.contenu {
background-color: #FFFFFF;
width: 100%;
}
div.sectionNavigation {
padding: 0.5ex;
width: 10em;
float: left;
height: 300px; /* hauteur minimale */
}
ul.listeNavigation {
padding-left: 1em;
margin: 0 0.5em 0 1em ;
width: 15ex;
}
div.pied {
clear: both;
margin: 10px;
font-size: 0.7em;
text-align: center;
line-height: 2.5em;
}
/* imprimante.css*/
body { font-family: arial;
margin: 0px;
padding: 0px;
}
div.pivBandeau { height: 100px; }
img.pivImage {
position: absolute;
left: 0px;
top: 0px;
}
ul.barreGauchePIV, ul.barreDroitePIV, img.pivVisuel, div.pied,
div.barreOnglet, div.onglet a, div.sectionNavigation, div.listeTitre, ul.listeNavigation {
visibility: hidden;
line-height: 0px;
padding: 0px;
margin: 0px
}
div.selected a, a.selected {
visibility: visible;
line-height: 1.2em;
font-size: 1.2em;
color: #000000;
font-weight: bold;
}
div.info {
margin-left: 1ex;
padding: 1ex;
width: 180px;
float: right;
font-size: 0.8em;
border: 1px solid #AAAAAA;
}
div.pied { text-align: center; }
a.copyright {
line-height: 1.2em;
visibility: visible;
font-size: 0.7em;
color: #000000;
}

Utilisation des CSS - Webmaestro

Transcription

Documents pareils

studio - ti6 - Placeman Pascal

francois sanchez consultants

calendrier rattrap examens lap sem 5 2015.2016

UE 301 — Exercices CSS (2)

MINISTRE DPS BAF BAF - Ministère de la Fonction Publique, de la

PROGRAMME DE FORMATION Création de sites internet

U.S.L. FOOT

comite bouliste departemental du rhône 99 tournois de pentecôte 11

TP14- Passage HTML5

BON DE COMMANDE CD 25 Ans Div Yezh Landerne