Procédés de Mise en forme Les Feuilles de style en Cascade C.S.S (Cascading Style Sheet) Alain Gély ([email protected]) – Stage CIES « Initiation au web »

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 ([email protected]) – 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


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)


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



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.


allall screenscreen printprint projectionprojection tvtv braillebraille


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


type="text/css"

title="mes_styles"

media="all" >

P

{

text-align : right ;

color : black

}

</style>

propriété

valeur pour cette propriété


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


<html>

<head>


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


<html>

<head>


href="style.css"

type="text/css"

media="screen" >

</head>

Une feuille de style, c’est un fichier texte


<html>

<head>


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


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


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 }


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>


P#chapeau1 { font-size : smaller ; text-align : justify; }


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 ?


Elle possède une certaine marge avec les boites qui la suive et la précèdepropriété

margin


Elle possède une bordure blanche, mais qui aurait aussi bien pu être verte, en pointillé ou invisible

propriété border


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



propriété visibility : propriété visibility : hiddenhidden



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>



Balise précisant l’utilisation d’un script



Type du script utilisé

(ici, javascript)



Début et fin d’un bloc de commentaire HTML

Marque de commentaire en javascript



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;}


function affiche(texte){ window.status = texte; }

Mot-clé function(ça s’invente pas…)



Nom de la fonction



Paramètre(s) de la fonction



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

Documents

Procédés de Mise en forme Les Feuilles de style en Cascade C.S.S (Cascading Style Sheet) Alain Gély ([email protected]) – Stage CIES « Initiation au web »