View
109
Download
0
Category
Preview:
Citation preview
Procédés de Mise en Procédés de Mise en forme forme
Les Feuilles de style en CascadeLes Feuilles de style en Cascade
C.S.SC.S.S
((CCascading ascading SStyle tyle SSheet)heet)
Alain Gély (gely@isima.fr) – Stage CIES « Initiation au web » - 2005
Les Feuilles de style en CascadeLes Feuilles de style en Cascade
C.S.SC.S.S
((CCascading ascading SStyle tyle SSheet)heet)
référencesréférences
www.w3c.orgwww.w3c.org
www.pompage.netwww.pompage.net www.openweb.eu.orgwww.openweb.eu.org
Les C.S.SLes C.S.S
Permettent de séparer le fond de la formePermettent de séparer le fond de la forme Assurent une compatibilité plus grandeAssurent une compatibilité plus grande Permettent une maintenance facilitéePermettent une maintenance facilitée
Les CSS par l’exempleLes CSS par l’exemple
Exemple 1Exemple 1 - - Exemple 2Exemple 2 - - ExempleExemple 3 3
3 pages web au contenu identique…3 pages web au contenu identique…
… … mais à la présentation différentemais à la présentation différente
Code de la page HTML Code de la page HTML (presque)(presque) identique dans les trois casidentique dans les trois cas
Les C.S.S gèrent la mise en pageLes C.S.S gèrent la mise en page
Quelques exemples de mise en page :Quelques exemples de mise en page :
http://www.csszengarden.com/http://www.csszengarden.com/
C.S.S : Une cascade de styleC.S.S : Une cascade de style
Dans les balisesDans les balises
Mais aussi…Mais aussi… Dans la pageDans la page Dans un fichier de style Dans un fichier de style
<p style="text-align: right; color: black" > Les feuilles de style permettent de gérer la mise en page des divers éléments d’une page web </p>
La balise <style>La balise <style><p style="text-align: right; color: black" > Les feuilles de style permettent de gérer la mise en page des divers éléments d’une page Web </p>
<p style=" text-align: right; color: black" > Bien sur, une page Web peut être composée de nombreux paragraphes, comme n’importe quel texte.</p>
<p style=" text-align: right; color: black" > Mais alors, il devient fastidieux de devoir saisir à nouveau toutes les informations de style ! </p>
<p style=" text-align: right; color: black" > Heureusement, les CSS nous permettent d’éviter ce travail inutile… </p>
Mettons le style une fois pour toute dans la page : Mettons le style une fois pour toute dans la page :
La balise La balise <style><style>
La balise <style>La balise <style><html> <head> <style type=" text/css" title=" mes_styles" media="all" > p { text-align: right; color: black } </style> </head>
<body> <p> Les feuilles de style permettent de gérer la mise en page des divers éléments d’une page Web </p> <p> Bien sur, une page Web peut être composée de nombreux paragraphes, comme n’importe quel texte.</p> <p> Mais alors, il devient fastidieux de devoir saisir à nouveau toutes les informations de style ! </p> <p> Heureusement, les CSS nous permettent d’éviter ce travail inutile… </p> </body></html>
La balise <style>La balise <style><style
type="text/css"
title="mes_styles"
media="all" >
p
{
text-align : right;
color : black
}
</style>
Voyons Voyons <style><style>
plus plus
en en
détaildétail
La balise <style>La balise <style><style
type="text/css"
title="mes_styles"
media="all" >
p
{
text-align : right;
color : black
}
</style>
Les informations de la Les informations de la balise sont de type balise sont de type textetexte
(optionnel)(optionnel)
La balise <style>La balise <style><style
type="text/css"
title="mes_styles"
media="all" >
p
{
text-align : right;
color : black
}
</style>
Nom donné (choisi) Nom donné (choisi) aux informations de aux informations de stylestyle
(optionnel)(optionnel)
La balise <style>La balise <style><style
type="text/css"
title="mes_styles"
media="all" >
p
{
text-align : right;
color : black
}
</style>
Indique à quel média Indique à quel média s’applique la feuille s’applique la feuille de style.de style.
(optionnel)(optionnel)
allall screenscreen printprint projectionprojection tvtv braillebraille
La balise <style>La balise <style><style
type="text/css"
title="mes_styles"
media="all" >
p
{
text-align : right;
color : black
}
</style>
élément pour lequel on défini le style
délimiteurs de début et de fin de style
La balise <style>La balise <style><style
type="text/css"
title="mes_styles"
media="all" >
P
{
text-align : right ;
color : black
}
</style>
propriété
valeur pour cette propriété
La balise <style>La balise <style><style
type="text/css" title="mes_styles" media="all" >
P { text-align : right ; color : black}
h1{ text-align : center ;}
</style>
Il est possible de définir le style de plusieurs éléments
feuille de style externefeuille de style externe
et si le site possède plusieurs pages ?et si le site possède plusieurs pages ?
On crée une feuille de style externe, On crée une feuille de style externe,
liée à chaque page Web qui l’utiliseliée à chaque page Web qui l’utilise
<html> <head> < link rel="stylesheet" href="style.css" type="text/css" media="screen" > </head>
Lier une feuille de style externeLier une feuille de style externe
<html>
<head>
< link rel="stylesheet"
href="style.css"
type="text/css"
media="screen" >
</head>
c’est une feuille de style qui est liée
Lier une feuille de style externeLier une feuille de style externe
<html>
<head>
< link rel="stylesheet"
href="style.css"
type="text/css"
media="screen" >
</head>
Ou se trouve la feuille de style ?
Ici, dans le fichier style.css
du répertoire courant
Lier une feuille de style externeLier une feuille de style externe
<html>
<head>
< link rel="stylesheet"
href="style.css"
type="text/css"
media="screen" >
</head>
Une feuille de style, c’est un fichier texte
Lier une feuille de style externeLier une feuille de style externe
<html>
<head>
< link rel="stylesheet"
href="style.css"
type="text/css"
media="screen" >
</head>
Pour quel média la feuille de style est-elle valable ?
(optionnel, par défaut : tous)
le fichier le fichier style.cssstyle.css
Il comporte les informations de style sur Il comporte les informations de style sur les différents élémentsles différents éléments
P { text-align : right ; color : black}
h1{ text-align : center }
Fichier « style.css »
des styles en cascadedes styles en cascade
Mais au fait, pourquoi Mais au fait, pourquoi
« en cascade » « en cascade »
??
11èreère Cascade Cascadestyles définis en cascade styles définis en cascade
du plus éloigné au plus prochedu plus éloigné au plus proche
Que se passe-t-il en cas de redéfinition en cascade ?Que se passe-t-il en cas de redéfinition en cascade ?
feuille de style externe
balise <style> s’une page
attribut style dans une balise
du – prioritaire
au + prioritaire
Quelques propriétés pour Quelques propriétés pour commencer ?commencer ?
Après cette présentation générale, Après cette présentation générale,
voyons quelques exemples…voyons quelques exemples…
bodybody pp h1, h2, h3, h4, h5, h6h1, h2, h3, h4, h5, h6
bodybody
Couleur du texte & du fondCouleur du texte & du fond
Placer une image de fondPlacer une image de fond
Rajouter des margesRajouter des marges
Un peu de couleur…Un peu de couleur…
colorcolor
la propriété la propriété colorcolor permet de fixer la couleur du permet de fixer la couleur du texte.texte.
Comment manipuler les couleurs ?Comment manipuler les couleurs ? liste de couleur standardliste de couleur standard Un code hexadécimal longUn code hexadécimal long #00FF45#00FF45 Un code hexadécimal court Un code hexadécimal court #0F3#0F3 Un code rgb, de 0 à 255 Un code rgb, de 0 à 255 rgb(0,0,100)rgb(0,0,100) un code rgb, en pourcentage un code rgb, en pourcentage rgb(10%,10%,30%)rgb(10%,10%,30%) transparenttransparent
Un peu de couleur (suite)Un peu de couleur (suite)
Liste des couleurs standard :Liste des couleurs standard :
aqua, black, blue, fuchsia, gray, green, aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow silver, teal, white, yellow
Un peu de couleur (de fond)Un peu de couleur (de fond)
background-colorbackground-color
la propriété la propriété background-colorbackground-color permet de fixer la permet de fixer la couleur de fond de la page.couleur de fond de la page.
body { background-color : rgb(0,0,0) ; color : white}
Une image de fondUne image de fond
background-imagebackground-imagepermet de spécifier une image de fondpermet de spécifier une image de fond
background-repeatbackground-repeatl’image de fond doit-elle être répétée ?l’image de fond doit-elle être répétée ?
background-positionbackground-positionOù placer l’image de fond ?Où placer l’image de fond ?
background-attachmentbackground-attachmentL’image de fond bouge-t-elle en même temps que la page ?L’image de fond bouge-t-elle en même temps que la page ?
background-image• none• url()
background-repeat• repeat• no-repeat• repeat-x• repeat-y
background-position
background-attachment
background-repeatno-repeat
repeat-x
repeat-y
repeat
background-attachment: scrool;(valeur par défaut)
background-attachment: fixed;
bla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla bla
bla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla bla
positionnement fixe ou mobilepositionnement fixe ou mobilebackground-attachment
Mais au fait, comment avoir une image au milieu ?
background-position : x y
Détermine la position de l’image de fond
par rapport au coin supérieur gauche
background-position: 50% 50% ; background-position: 100% 100%;
background-position: 10px 10px;
background-position: 0% 100%;
Exemples de positionnementExemples de positionnement
background-position: 50% 50% ; background-position: 100% 100%;
background-position: 10px 10px;
background-position: 0% 100%;
Exemples de positionnementExemples de positionnement
?
Mesures en C.S.SMesures en C.S.S
% (pourcentage)% (pourcentage) la taille / position de l’élément est calculée de la taille / position de l’élément est calculée de
façon relativefaçon relative px (pixel)px (pixel)
Le pixel est la plus petit unité de l’écranLe pixel est la plus petit unité de l’écran em em
1em = 100%, 1.2em = 120%, …1em = 100%, 1.2em = 120%, … ptpt
correspond à une unité d’imprimerie correspond à une unité d’imprimerie
Mesures en C.S.SMesures en C.S.S
! Préciser l’unité de mesure est obligatoire !! Préciser l’unité de mesure est obligatoire !
sauf pour la valeur 0, identique quelque sauf pour la valeur 0, identique quelque soit l’unité utiliséesoit l’unité utilisée
background-position: 50% 50% ; // Valide
background-position: 10px 50% ; // Valide
background-position: 0 50% ; // Valide
background-position: 10 50% ; // Non Valide
En C.S.S, en cas d’erreur, la propriété erronée est ignorée
bla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla bla
Un peu de marge…Un peu de marge…
margin : 1em ;
margin-right : 1em ;margin-left : 2em ;margin-right : 0.9em ;margin-bottom : 2em;
Nous reviendrons sur les marges un peu plus tard…
Quelques propriétés sur les fontesQuelques propriétés sur les fontes font-sizefont-size
permet de fixer la taille de la policepermet de fixer la taille de la police les unités de mesures vues précédemment sont utilisablesles unités de mesures vues précédemment sont utilisables
il existe aussi des tailles relatives prédéfinies :il existe aussi des tailles relatives prédéfinies :• xx-smallxx-small• x-smallx-small• smallsmall• medium, medium, • large, large, • x-large, x-large, • xx-large, xx-large, • larger, larger, • smaller smaller
Quelques propriétés sur les fontesQuelques propriétés sur les fontesfont-familyfont-family
permet de spécifier le type de police que l’on permet de spécifier le type de police que l’on souhaite affichersouhaite afficher
! Toutes les polices ne sont pas disponibles ! Toutes les polices ne sont pas disponibles sur tous les ordinateurs !sur tous les ordinateurs !
Il est possible de spécifier plusieurs polices, Il est possible de spécifier plusieurs polices, dans l’ordre ou l’on souhaite les utiliserdans l’ordre ou l’on souhaite les utiliser
Quelques propriétés sur les fontesQuelques propriétés sur les fontesfont-familyfont-family
familles de polices génériques :familles de polices génériques :• serif, serif, • sans-serif,sans-serif,• monospace, monospace, • cursive, cursive, • fantasy. fantasy.
font-family : "times new roman", serif, sans-serif
exemple :
Quelques propriétés sur les fontesQuelques propriétés sur les fontes font-weightfont-weight
précise le niveau de gras de la police :précise le niveau de gras de la police :• normal, normal, • bold, bold, • 100, 200, ...100, 200, ...
font-stylefont-style précise le style de fonte :précise le style de fonte :
• normalnormal• italicitalic• oblicoblic
font-weight : bold ;font-style : italic ;
exemple : afficher du texte en italique et en gras
Quelques propriétés sur les fontesQuelques propriétés sur les fontesfont-variantfont-variant
utilise une fonte normale ou en petite capitale :utilise une fonte normale ou en petite capitale :• normal, normal, • small-caps. small-caps.
fontfont raccourci permettant de tout spécifierraccourci permettant de tout spécifier
font : italic bold 1em cursive ;
exemple : utilisation du raccourci font
Quelques propriétés sur les textesQuelques propriétés sur les textes text-aligntext-align
permet de gérer l’alignement du textepermet de gérer l’alignement du texte• right, right, • left,left,• center,center,• justify. justify.
text-decorationtext-decoration comment doit apparaître le textecomment doit apparaître le texte
• nonenone (aucun)(aucun)• underlineunderline (souligné)(souligné)• overlineoverline (surligné)(surligné)• line-through line-through (barré)(barré)• blink blink (clignotant)(clignotant)
Quelques propriétés sur les textesQuelques propriétés sur les textes text-transformationtext-transformation
on peut appliquer des transformations au texteon peut appliquer des transformations au texte• capitalize capitalize (1ere lettre de chaque mot en majuscule)(1ere lettre de chaque mot en majuscule)
• uppercase uppercase (transformer en majuscule)(transformer en majuscule)
• lowercaselowercase (transformer en minuscule)(transformer en minuscule)
• none none (aucune)(aucune)
text-indenttext-indent Indentation de début de paragrapheIndentation de début de paragraphe
P { text-transformation : lowercase ; text-indent : 1em; }
exemple :
Ah oui, au fait …Ah oui, au fait …
h1 {text-decoration : underline }h2 {text-decoration : underline }h3 {text-decoration : underline }h4 {text-decoration : underline }h5 {text-decoration : underline }
h1,h2,h3,h4,h5,h6 {text-decoration : underline }
peut s’écrire …
22èmeème Cascade Cascadestyles définis en cascade styles définis en cascade Imbrication des élémentsImbrication des éléments
<html> <head> </head> <body><h3>Un titre</h3>la, un petit texte exemple, mais sans paragraphe<p>La, un autre petit texte, <strong>mais qui fait parti d’un paragraphe</strong></p></body></html>
<html>
<head><body>
<h3>
<p>
<strong>
les styles non redéfinis sont répercutés dans tous les éléments contenus
D.O.M : Document Object Model
Changer le styleChanger le style
p {text-decoration : underline }strong {text-decoration : underline }
p,strong {text-decoration : underline }
peut s’écrire …
Comme dit précédemment …
p strong {text-decoration : underline }
Mais attention …
possède un autre sens :
Le style n’est appliqué à strong que s’il est imbriqué dans une balise p
p>strong {color : red}
Exemple …
<p>La couleur<strong>rouge</strong> est appliquée ici, mais aussi <del><strong>la</strong></del></p><strong>Mais pas la</strong>
<p>
<strong>
<del>
<strong>
p>strong {text-decoration : underline }
Le style n’est appliqué à strong que s’il est descendant direct de p
De même …
p>strong {color : red}
Exemple …
<p>La couleur<strong>rouge</strong> est appliquée ici, mais pas <del><strong>la</strong></del></p>
<p>
<strong>
<del>
<strong>
p+strong {text-decoration : underline }
Le style n’est appliqué à strong que s’il suit immédiatement une balise p
De même …
p {text-indent : 1em}p+p {text-indent : 0}
Exemple …
Le premier paragraphe d’un texte sera indenté,
mais pas les suivants
Pseudo-éléments & Pseudo-éléments & Pseudo-classesPseudo-classes
Un pseudo-élément est une Un pseudo-élément est une caractéristique qui permet de rajouter du caractéristique qui permet de rajouter du détail de style.détail de style.
On reconnaît un pseudo-élément à On reconnaît un pseudo-élément à l’utilisation de « : » dans la définition du l’utilisation de « : » dans la définition du style correspondantstyle correspondant
Quelques exemples ?Quelques exemples ?
Les Pseudo-élémentsLes Pseudo-éléments
Quelques pseudo-élémentsQuelques pseudo-éléments:first-letter:first-letter
ne s’applique que sur la première lettre de ne s’applique que sur la première lettre de l’ensemblel’ensemble
:first-line:first-line ne s’applique que sur la première ligne de ne s’applique que sur la première ligne de
l’ensemblel’ensemble
:first-letter { color : red; font-size : large };
P:first-letter { color : red; font-size : large };
On peut préciser (ou pas) à quel élément appliquer le pseudo-élément
Une pseudo-classe est très similaire à un Une pseudo-classe est très similaire à un pseudo-élément.pseudo-élément.
On parle de pseudo-classe quand un objet On parle de pseudo-classe quand un objet peut avoir différents étatspeut avoir différents états
Un exemple ?Un exemple ?
Les Pseudo-classeLes Pseudo-classe
Un lien peu avoir plusieurs étatsUn lien peu avoir plusieurs états Visité Visité ActifActif Pointé par la souris Pointé par la souris
Les pseudo-classes permettent de donner Les pseudo-classes permettent de donner des styles différents à ces différentes des styles différents à ces différentes classes de liens.classes de liens.
Les Pseudo-classe liensLes Pseudo-classe liens
:link:link s’applique à un lien actif (avant visite)s’applique à un lien actif (avant visite)
:visited:visited s’applique à un lien visités’applique à un lien visité
:active:active au moment ou le lien est activéau moment ou le lien est activé
:hover:hover lorsque la souris est sur le lienlorsque la souris est sur le lien
:focus:focus lorsque le focus est sur le lien (tabulation par exemple)lorsque le focus est sur le lien (tabulation par exemple)
Des classes et des IDDes classes et des ID(parce que s’il y a des pseudo-classes,
c’est bien qu’il doit y avoir des classes…)
Les classesLes classes
Et si certains types d’éléments devaient Et si certains types d’éléments devaient être affichés différemment ?être affichés différemment ?
exemple :exemple : Le chapeau d’un article Le chapeau d’un article
(Où certains éléments veulent se la jouer différent…)
Ceci est le premier paragraphe de l’article, qui nous sert de chapeau. C’est un paragraphe, on ne peut lui ôter ça, mais on aimerait bien pouvoir l’afficher différement, histoire que ça soit plus drôle.
Et puis ceci est un paragraphe tout ce qu’il y a de plus banal, rien de bien exaltant
Et celui-ci aussi est un autre paragraphe plutôt ennuyeux
Et bien, c’est possible !Et bien, c’est possible !
il existe un attribut classil existe un attribut class Applicable à tous les élémentsApplicable à tous les éléments permettant de spécifier un style particulierpermettant de spécifier un style particulier
(Et c’est la classe !)
<p class="chapeau">Ceci est le premier paragraphe de l’article, qui nous sert de chapeau. C’est un paragraphe, on ne peut lui ôter ça, mais on aimerait bien pouvoir l’afficher différement, histoire que ça soit plus drôle.</p>
<p> Et puis ceci est un paragraphe tout ce qu’il y a de plus banal, rien de bien exaltant</p>
<p> Et celui-ci aussi est un autre paragraphe plutôt ennuyeux</p>
et du coté du style…et du coté du style…P { color : black; background-color : white;}
P.chapeau { font-size : smaller ; text-align : justify; }
P.chapeau:first-letter { font-size : 1.2em ; font-weight : bold ;}
.petit { font-size : 0.7em }
et du coté du style…et du coté du style…P { color : black; background-color : white;}
P.chapeau { font-size : smaller ; text-align : justify; }
P.chapeau:first-letter { font-size : 1.2em ; font-weight : bold ;}
.petit { font-size : 0.7em }
Il est possible de cumuler classe et pseudo-classe
on peut définir une classe sans préciser à quel élément elle s’applique
Encore une fois, le style cascade de la classe la plus générale vers une classe particulière
Les identifiantsLes identifiants
On peut définir un identifiant On peut définir un identifiant uniqueunique pour pour un élémentun élément
On peut associer un style à cet identifiantOn peut associer un style à cet identifiant
(Appelez moi par mon nom !)
<p id="chapeau1">Ceci est le premier paragraphe de l’article, qui nous sert de chapeau. C’est un paragraphe, on ne peut lui ôter ça, mais on aimerait bien pouvoir l’afficher différement, histoire que ça soit plus drôle.</p>
<p> Et puis ceci est un paragraphe tout ce qu’il y a de plus banal, rien de bien exaltant</p>
<p> Et celui-ci aussi est un autre paragraphe plutôt ennuyeux</p>
et du coté du style…et du coté du style…P { color : black; background-color : white;}
P#chapeau1 { font-size : smaller ; text-align : justify; }
et du coté du style…et du coté du style…P { color : black; background-color : white;}
P#chapeau1 { font-size : smaller ; text-align : justify; }
. pour classe
# pour identifiant
Mais alors, classe ou identifiant ?Mais alors, classe ou identifiant ?
Un identifiant doit être uniqueUn identifiant doit être unique Utilisé pour se référer à un élément particulierUtilisé pour se référer à un élément particulier informations de position informations de position (on y vient, patience…)(on y vient, patience…)
Une classe peut servir plusieurs foisUne classe peut servir plusieurs fois on peut y mettre les propriétés de styleon peut y mettre les propriétés de style
Il est possible de cumuler Il est possible de cumuler classclass et et idid
Modèles d’affichage en C.S.SModèles d’affichage en C.S.SMise en boite…
Les types de blocsLes types de blocs<h3>Titre</h3><P>ceci est le premier paragraphe. <em>Cette phrase peut être très importante</em>, mais <strong>celle-ci l’est plus encore</strong></P><h3>Autre titre</h3><h4>titre (encore)</h4><h4>titre (toujours)</h4>
Titre
Ceci est le premier paragraphe Cette phrase peut être très importante
Mais, Celle-ci l’est plus encore
Autre titre
Titre (encore)
Titre (toujours)
Deux types d’élémentsDeux types d’éléments
Les éléments « bloc »Les éléments « bloc » Les éléments blocs s’empilent les uns sur les autresLes éléments blocs s’empilent les uns sur les autres Un élément bloc peut contenir d’autres éléments blocsUn élément bloc peut contenir d’autres éléments blocs Un élément bloc peut contenir des éléments en ligneUn élément bloc peut contenir des éléments en ligne exemples :exemples : p, h1, h2, h3, h4, h5, h6, div p, h1, h2, h3, h4, h5, h6, div
Les éléments « en ligne »Les éléments « en ligne » Les éléments en ligne se placent les uns à coté des autresLes éléments en ligne se placent les uns à coté des autres Un élément en ligne peut contenir d’autres éléments en Un élément en ligne peut contenir d’autres éléments en
ligneligne Un élément en ligne ne peut pas contenir d’éléments bloc.Un élément en ligne ne peut pas contenir d’éléments bloc. exemples :exemples : em, strong, b, i, span em, strong, b, i, span
Deux types d’élémentsDeux types d’éléments
Les éléments « bloc »Les éléments « bloc » Les éléments blocs s’empilent les uns sur les autresLes éléments blocs s’empilent les uns sur les autres Un élément bloc peut contenir d’autres éléments blocsUn élément bloc peut contenir d’autres éléments blocs Un élément bloc peut contenir des éléments en ligneUn élément bloc peut contenir des éléments en ligne exemples :exemples : p, h1, h2, h3, h4, h5, h6, div p, h1, h2, h3, h4, h5, h6, div
Les éléments « en ligne »Les éléments « en ligne » Les éléments en ligne se placent les uns à coté des autresLes éléments en ligne se placent les uns à coté des autres Un élément en ligne peut contenir d’autres éléments en Un élément en ligne peut contenir d’autres éléments en
ligneligne Un élément en ligne ne peut pas contenir d’éléments bloc.Un élément en ligne ne peut pas contenir d’éléments bloc. exemples :exemples : em, strong, b, i, span em, strong, b, i, span
DIV & SPANDIV & SPAN
Containers génériques.Containers génériques.
<div><div> permet de structurer le document permet de structurer le document <span><span> permet de changer la mise en permet de changer la mise en
page de quelques mots dans un textepage de quelques mots dans un texte
<div><div> est très utilisé pour la mise en est très utilisé pour la mise en pagepage
exemple d’utilisation de DIVexemple d’utilisation de DIV<div id="menu" >Ici, on peut mettre tout ce qui concerne les menus de navigation.</div>
<div id="principal" >Ici, c’est le contenu principal de la page (par exemple)</div>
<div id ="pied_page" >Et la, c’est le pied de page, ou on peut mettre les informations légales…</div>
les propriétés des boitesles propriétés des boites(voyons ce qu’il y a en marge…)
prenons l’exemple de cette boite. Elle contient du texte, mais que peut-on dire de plus ?
prenons l’exemple de cette boite. Elle contient du texte, mais que peut-on dire de plus ?
Elle possède une certaine marge avec les boites qui la suive et la précèdepropriété
margin
prenons l’exemple de cette boite. Elle contient du texte, mais que peut-on dire de plus ?
Elle possède une bordure blanche, mais qui aurait aussi bien pu être verte, en pointillé ou invisible
propriété border
prenons l’exemple de cette boite. Elle contient du texte, mais que peut-on dire de plus ?
Et cette bordure peut être plus ou moins rapprochée du contenu
propriété padding
border-colorborder-color gère la couleur de la borduregère la couleur de la bordure
border-widthborder-width thinthin, , mediummedium, , thickthick taille spécifiéetaille spécifiée
border-styleborder-style NoneNone, , hiddenhidden, , dotteddotted, , dasheddashed, , solidsolid, , doubledouble, , groovegroove, , ridgeridge, , insetinset, , outsetoutset
propriétés de bordurepropriétés de bordure
on peut aussi régler individuellement les on peut aussi régler individuellement les différentes borduresdifférentes bordures
border-top-widthborder-top-width border-bottom-widthborder-bottom-width border-left-widthborder-left-width border-right-widthborder-right-width
Comme pour font, font, il existe un raccourci borderborder
propriétés de bordure (suite)propriétés de bordure (suite)
margin margin permet de régler la taille de la margepermet de régler la taille de la marge
• margin-topmargin-top• margin-bottommargin-bottom• margin-leftmargin-left• margin-rightmargin-right
paddingpadding permet de régler la taille du paddingpermet de régler la taille du padding
• padding-toppadding-top• padding-bottompadding-bottom• padding-leftpadding-left• padding-rightpadding-right
taille des margestaille des marges
margin : auto margin : auto
permet normalement de régler les marges au mieux permet normalement de régler les marges au mieux pour centrer l’élément.pour centrer l’élément.
Malheureuseument, Internet Explorer n’est pas de cet Malheureuseument, Internet Explorer n’est pas de cet avisavis
Des marges automatiquesDes marges automatiques
Positionnement C.S.SPositionnement C.S.S(Qu’est ce qu’on en fait de toutes ces boites ?)
Les propriétés de dimensionLes propriétés de dimension widthwidth
Permet de spécifier la largeur d’une boitePermet de spécifier la largeur d’une boite heightheight
Permet de spécifier la hauteur d’une boitePermet de spécifier la hauteur d’une boite
width
heig
ht
Les propriétés de placementLes propriétés de placement
positionposition absoluteabsolute Le bloc est placé de façon absolueLe bloc est placé de façon absolue relativerelative Le bloc est placé relativement à la Le bloc est placé relativement à la
position qu’il aurait du occuperposition qu’il aurait du occuper static static placement par défautplacement par défaut fixedfixed le bloc est épinglé à l’écran (ne le bloc est épinglé à l’écran (ne
fonctionne pas sous Internet Explorer)fonctionne pas sous Internet Explorer)
Les propriétés de placement (2)Les propriétés de placement (2) positionposition
absoluteabsolute Le bloc est placé de façon absolueLe bloc est placé de façon absolue
pour les positions pour les positions absolute absolute etet relative relative, il existe , il existe deux propriétésdeux propriétés
toptop leftleft
qui permettent de spécifier où doit se placer le coin qui permettent de spécifier où doit se placer le coin haut gauche du blochaut gauche du bloc
div#toto { position : absolute; top : 50% ; left : 100px;} width
heig
ht
top, left
Le placement flottantLe placement flottant
la propriété la propriété floatfloat peut prendre trois peut prendre trois valeursvaleurs nonenone leftleft rightright
cette propriété indique comment le bloc cette propriété indique comment le bloc flotte par rapport aux suivants.flotte par rapport aux suivants.
toto
bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla
bloc flottant
div#toto { float : right }
toto
bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla
bloc flottant
div#toto { float : left }
toto
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla
bloc non flottant
div#toto { float : none }
Visualisation C.S.SVisualisation C.S.S(Un autre point de vue ?)
La propriété La propriété visibilityvisibility
visibilityvisibility peut prendre deux valeurs : peut prendre deux valeurs : visible hidden
un élement hidden devient invisible, mais la place qu’il occupe à l’écran est tout de même réservée.
propriété visibility : propriété visibility : visiblevisible
bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla
propriété visibility : propriété visibility : hiddenhidden
bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla
La propriété La propriété displaydisplay
DisplayDisplay indique le comportement que indique le comportement que doit adopter l’élémentdoit adopter l’élément nonenone inlineinline blockblock list-itemlist-item ......
none none indique qu’il ne faut pas réserver de indique qu’il ne faut pas réserver de la place pour cet élémentla place pour cet élément
Javascript :Javascript :
Un peu d’interactivitéUn peu d’interactivité
Javascript, c’est quoi ?Javascript, c’est quoi ?
Langage de script exécuté Langage de script exécuté coté clientcoté client Son fonctionnement dépend du navigateurSon fonctionnement dépend du navigateur Problèmes de portabilitéProblèmes de portabilité
Mais, Javascript reste un moyen simple Mais, Javascript reste un moyen simple d’ajouter un peu d’intéractivité à un site d’ajouter un peu d’intéractivité à un site web.web.
Script dans le <HEAD>Script dans le <HEAD>
<head>…<script type="text/javascript"> <!– /* Votre script ici */// --> </script> …</head>
Script dans le <HEAD>Script dans le <HEAD>
<head>…<script type="text/javascript"> <!– /* Votre script ici */// --> </script> …</head>
Balise précisant l’utilisation d’un script
Script dans le <HEAD>Script dans le <HEAD>
<head>…<script type="text/javascript"> <!– /* Votre script ici */// --> </script> …</head>
Type du script utilisé
(ici, javascript)
Script dans le <HEAD>Script dans le <HEAD>
<head>…<script type="text/javascript"> <!– /* Votre script ici */// --> </script> …</head>
Début et fin d’un bloc de commentaire HTML
Marque de commentaire en javascript
Script dans le <HEAD>Script dans le <HEAD>
<head>…<script type="text/javascript"> <!– /* Votre script ici */// --> </script> …</head>
Corps du script HTML
Script dans un fichier séparéScript dans un fichier séparé
<head>…<script
type="text/javascript" src="monscript.js">
</script> …</head>
Et c’est le fichier monscript.js qui contiendra le code javascript
Un premier script simple…Un premier script simple…
window.status = "Stage d'initiation à la création de pages web";
Le script peut être écrit
• Dans l’entête de la page, dans la section <head>, comme vu précédemment.
• Dans un fichier séparé
(par exemple "premier_script.js")
Les fonctions en javascriptLes fonctions en javascript
function affiche(texte){ window.status = texte;}
Les fonctions en javascriptLes fonctions en javascript
function affiche(texte){ window.status = texte; }
Mot-clé function(ça s’invente pas…)
Les fonctions en javascriptLes fonctions en javascript
function affiche(texte){ window.status = texte; }
Nom de la fonction
Les fonctions en javascriptLes fonctions en javascript
function affiche(texte){ window.status = texte; }
Paramètre(s) de la fonction
Les fonctions en javascriptLes fonctions en javascript
function affiche(texte){ window.status = texte; }
Paramètre(s) de la fonction
Les gestionnaires d’évènementsLes gestionnaires d’évènements
On peut associer un comportement à On peut associer un comportement à certaines balises, via un gestionnaire certaines balises, via un gestionnaire d’évènement.d’évènement.
onMouseOveronMouseOver onMouseOutonMouseOut onClickonClick onLoad onLoad (appliqué à BODY)(appliqué à BODY)
Où que fait-on de nos fonctions…
Evènements & fonctionsEvènements & fonctions
Le gestionnaire d’évènement peut Le gestionnaire d’évènement peut exécuter une fonction javascriptexécuter une fonction javascript
Il existe une balise HTML pour les <dfn onMouseOver="affiche("un texte");">
onMouseOut="affiche("");">définitions</dfn>
Un exemple un peu plus complexeUn exemple un peu plus complexe
On veut afficher certains éléments au On veut afficher certains éléments au passage de la sourispassage de la souris
function affichedef(id_element) { var boite = document.getElementById(id_element); boite.style.visibility = "visible"; }
function cachedef(id_element) { var boite = document.getElementById(id_element); boite.style.visibility = "hidden"; }
Pendant ce temps, dans la page Pendant ce temps, dans la page HTML…HTML…
Prenons l’exemple d’une <dfn onMouseOver="afficheElement(mon_element);"
onMouseOver="cacheElement(mon_element);">définition</dfn>qui va faire apparaître un autre cadre.
<div id="mon_element" >Ici, tout ce que je veux afficher ou masquer…</div>
Liens utilesLiens utiles
Il existe de nombreux scripts déjà prêts Il existe de nombreux scripts déjà prêts
http://http://www.editeurjavascript.comwww.editeurjavascript.com// - Editeur - Editeur JavascriptJavascript
http://www.toutjavascript.com/ - Tout http://www.toutjavascript.com/ - Tout JavascriptJavascript
Recommended