Feuilles de Styles en Cascade

Présentation au sujet: "Feuilles de Styles en Cascade"— Transcription de la présentation:

1 Feuilles de Styles en Cascade
CSS : Cascading Style Sheets Une référence importante : CSS2 : Les feuilles de style en cascade, niveau 2 François Daniel Giezendanner, SEM (Service Ecoles-Medias) - DIP - Genève, 5 rue des Gazomètres, 1205 CH-Genève Tél: / , - Cours « CSS » - Mardi 3 février 2009, 8h00-18h00 et Mardi 17 février 2009, 13h

2 Préambule A Avantages des Feuilles de styles en cascade (CSS)
Séparation de la structure et de la mise en page. Permet de gérer le « look » des pages d’un site de manière centrale, donc maintenance facilitée et moins coûteuse du site. Homogénéisation de l'aspect visuel d'un site web. Mise en page HTML, XHTML et XML sophistiquée. Code HTML de la page allégé et plus « lisible » donc diminution du poids et du temps de chargement. Diversification des feuilles de styles pour s'adapter à plusieurs équipements de sortie : affichage à l'écran, impression, vocal, etc. Mise en page moins facile mais plus précise qu’avec les tableaux. Infinité de mises en pages riches et diversifiées (cf. css Zen Garden)

3 Infinité de mises en pages riches et diversifiées : Cf. css Zen Garden
7 avril 2008 : 209 mises en pages diffférentes

4 … utilisées avec les CSS
Préambule B Rappel sur : Les couleurs et leur « codage » Les unités de mesure … utilisées avec les CSS

5 Il existe cinq manières de spécifier
les valeurs d’une couleur avec les CSS Attention avec les CSS : balises, sélecteurs, classes, identifiant, valeurs … en minuscule #rrggbb r, g et b : hexadécimal = 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f #rgb r, g et b : hexadécimal = 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f rgb(rrr.rr%,ggg.gg%,bbb.bb%) rrr.rr ggg.gg bbb.bb 0 <= <= % rgb(rrr,ggg,bbb) rrr ggg bbb 0 <= <= 255 keyword aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow

6 Unités de couleur CSS #rrggbb #rgb rgb(rrr.rr%,ggg.gg%,bbb.bb%)
Description #rrggbb Un nombre hexadécimal ( ex : #aa00ff ) #rgb Notation abrégée de rrggbb ( ex : #a0f ) rgb(rrr.rr%,ggg.gg%,bbb.bb%) Valeur RGB en % ( ex : rgb(0%, 77.5%,0%) ) rgb(rrr,ggg,bbb) Une valeur RGB (ex : rgb(0,255,128) ) Keyword / mot-clé Un des 16 nom standards de couleur : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow. Attention avec les CSS : balises, sélecteurs, classes, identifiant, valeurs … en minuscule

7 16 couleurs désignées par leur nom en langue anglaise
(code hexadécimal simple) aqua Mots/clés (keywords) et couleurs standards W3C

8 16 couleurs désignées par leur nom en langue anglaise
(code hexadécimal simple) aqua Mots/clés (keywords) et couleurs standards W3C

9 16 couleurs désignées par leur nom en langue anglaise
(code hexadécimal simple) Couleurs web-safe Couleurs non web-safe aqua Mots/clés (keywords) et couleurs standards W3C

10 16 couleurs désignées par leur nom en langue anglaise
(code hexadécimal simple) Couleurs web-safe aqua Mots/clés (keywords) et couleurs standards W3C Couleurs non web-safe

11 16 couleurs désignées par leur nom en langue anglaise
(code hexadécimal simple) Couleurs web-safe aqua Mots/clés (keywords) et couleurs standards W3C Couleurs non web-safe

12 16 couleurs désignées par leur nom en langue anglaise
(code hexadécimal simple) aqua Mots/clés (keywords) et couleurs standards W3C

13 Certains auteurs mentionnent également la couleur orange
16 couleurs désignées par leur nom en langue anglaise (code hexadécimal simple) Valeur Couleur Hexadec Hexa court RGB orange #FF6600 F60 255,102,0 100%,40%,0% Certains auteurs mentionnent également la couleur orange 17 aqua Mots/clés (keywords) et couleurs standards W3C

14 Couleurs « Compatibles Web » :
Celle qui évitent le tramage en 256 couleurs Les couleurs « Compatibles Web », s’expriment avec les valeurs 00, 0, ou 0%, ou des multiples de 33, 3, 51 ou 20% soit : Hexadec : multiples de 33 : triplets de 00, 33, 66, 99, CC, FF Exemples : #66CC99, #FF3366, #0099CC, ... Hexa court : multiples de 3 : triplets de 0, 3, 6, 9, C, F Exemples : #6C9, #F36, #09C, ... RGB : multiples de 51: 0, 51, 102, 153, 204 et 255 Exemples : rgb(51,0,153), rgb(102,204,51), rgb(255,102,153), ... % : multiples de 20% : 0%, 20%, 40%, 60%, 80%, 100% Exemples : rgb(60%,20%,80%), rgb(100%, 40%, 0%), ... … mais en 2008, existe-t’il encore des cartes graphiques limitées à 256 couleurs ?

15 Mots/clés (keywords) et couleurs
NON standards W3C Sur le site Web-Wise-Wizard, à la page « HTML Web Color Names ( Gilbert Hadley fait état : des différences d’affichage de couleurs à l’écran entre une couleur exprimée avec un code hexadécimal et la même couleur exprimée avec le mot clé correspondant (son équivalent) tel que : #FFFF00 = yellow # = purple # = gray etc. = yellow purple gray Différences d’affichage de couleurs à l’écran entre le code hexadécimal et le mot clé correspondant D’autre part, il donne la liste des mots-clés supportés par la plupart des navigateurs, mais qui ne sont pas supportés par le standard W3C pour les CSS. On trouve de nombreuses pages sur le web présentant et discutant cette liste de couleurs « non standards », par exemple w3schools (

16

17

18

19

20

21 … utilisées avec les CSS
Préambule C Rappel sur : Les unités de mesure ... … utilisées avec les CSS

22 Unités de mesure CSS % px em ex pt pc cm mm in Unité Valeurs Exemple
Description Relatives Pourcentage par rapport à une référence (taille de police d’une boîte bloc, fenêtre, calque, cellule, etc.) % 25% entière Pixel (un point sur l’écran de l’ordinateur) px 200px entière L’unité est la largeur de la lettre M (majuscule) em 2.5em réelle L’unité est la hauteur de la lettre x (minuscule) ex 0.5ex réelle Point typo (1 pt = 1/72 inch, 1/12 pica) pt 14pt absolues entière Pica (12 points, 1/6 pouce) pc 12pc réelle Centimètre cm 10cm entière Millimètre mm 5mm entière Inch (1 inch = 1 pouce = 2.54 cm) in 3in réelle Le séparateur décimal est le point et non pas la virgule. Il n'y a pas d'espace entre le nombre et l'unité. Seul le nombre 0 peut être dispensé de son unité. Attention avec les CSS : balises, sélecteurs, classes, identifiant, valeurs, unités … sont écrits en minuscule

23 Définition de Type de Document
Préambule D Doctype –DTD Définition de Type de Document

24 Doctype –DTD – Définition de Type de Document
En HTML, trois DTD possibles prennent en charge la gestion des CSS : 1) DTD Strict : tous les éléments de présentation sont pris en charge par des feuilles de style : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> 2) DTD Transitional : appelée aussi “ loose ”, elle permet d’utiliser un mélange de CSS et de balises ou attributs de présentation du HTML : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> 3) DTD Frameset : utilisée lorsque le document HTML comporte aussi des cadres : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " <html>

25 Doctype –DTD – Définition de Type de Document
Porte bien son nom, Assez difficile à atteindre. En HTML, trois DTD possibles prennent en charge la gestion des CSS : 1) DTD Strict : tous les éléments de présentation sont pris en charge par des feuilles de style : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> 2) DTD Transitional : appelée aussi “ loose ”, elle permet d’utiliser un mélange de CSS et de balises ou attributs de présentation du HTML : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> Préférée pour cause de confort. 3) DTD Frameset : utilisée lorsque le document HTML comporte aussi des cadres : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " <html>

26 Doctype –DTD – Définition de Type de Document
En XHTML, trois DTD possibles prennent en charge la gestion des CSS: 1) DTD Strict : tous les éléments de présentation sont pris en charge par des feuilles de style : <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0//EN" " xhtml1-strict.dtd"> 2) DTD Transitional : appelée aussi “ loose ”, elle permet d’utiliser un mélange de CSS et de balises ou attributs de présentation du XHTML : <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 3) DTD Frameset : utilisée lorsque le document HTML comporte aussi des cadres : <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "

27 CSS : Cascading Style Sheets
Feuilles de styles en cascade CSS : Cascading Style Sheets Pensez aux équivalences, correspondances & inter-relations : Hiérarchie arborescente des balises HTML Fichier HTML Structure logique du document, sémantique Règles CSS Mise en page design Boîtes imbriquées HTML et CSS pour séparer le fond et la forme

28 css Zen Garden: The Beauty in CSS Design [1/6]
Arbre du document et degré de parenté des éléments <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html> <head> <title>css Zen Garden: The Beauty in CSS Design</title> <style type="text/css" title="currentStyle"> @import "/001/001.css"; </style> </head> <body> </body> </html> Extrait d’un code du site css Zen Garden

29 [2/6] Extrait d’un code du site css Zen Garden css Zen Garden
<div> <h1><span>css Zen Garden</span></h1> <h2><span>The Beauty of CSS Design</span></h2> </div> <p><span> …</span></p> <p><span> …<a>…</a></span></p> <h3><span>…</span></h3> <h3><span>Select a Design:</span></h3> <ul> <li><a>Attitude</a> by <a>Stephane Moens</a></li> <li><a>Urban</a> by <a>Matt Kim & Nicole</a></li> <li><a>Paravion</a> by <a>Emiliano Pennisi</a></li> <li><a>Verdure</a> by <a>Lim Yuan Qing</a></li> </ul> Extrait d’un code du site css Zen Garden

30 [3/6] Extrait d’un code du site css Zen Garden css Zen Garden
<div> <h1><span>css Zen Garden</span></h1> <h2><span>The Beauty of CSS Design</span></h2> </div> <p><span> …</span></p> <p><span> …<a>…</a></span></p> <h3><span>…</span></h3> <h3><span>Select a Design:</span></h3> <ul> <li><a>Attitude</a> by <a>Stephane Moens</a></li> <li><a>Urban</a> by <a>Matt Kim & Nicole</a></li> <li><a>Paravion</a> by <a>Emiliano Pennisi</a></li> <li><a>Verdure</a> by <a>Lim Yuan Qing</a></li> </ul> Extrait d’un code du site css Zen Garden

31 [4/6] css Zen Garden <div>
</html> <html> <body> </body> [4/6] css Zen Garden <div> <h1><span>css Zen Garden</span></h1> <h2><span>The Beauty of CSS Design</span></h2> </div> <p><span> …</span></p> <p><span> …<a>…</a></span></p> <h3><span>…</span></h3> <h3><span>Select a Design:</span></h3> <ul> <li><a>Attitude</a> by <a>Stephane Moens</a></li> <li><a>Urban</a> by <a>Matt Kim & Nicole</a></li> <li><a>Paravion</a> by <a>Emiliano Pennisi</a></li> <li><a>Verdure</a> by <a>Lim Yuan Qing</a></li> </ul> 1 2 3 4 5 7 8 6

32 css Zen Garden: The Beauty in CSS Design [5/6]
1 2 3 4 5 6 7 8 9

33 css Zen Garden: The Beauty in CSS Design [6/6]
<div> <h1><span>css Zen Garden</span></h1> <h2><span>The Beauty of CSS Design</span></h2> </div> <p><span> …</span></p> <p><span> …<a>…</a></span></p> <h3><span>…</span></h3> <h3><span>Select a Design:</span></h3> <ul> <li><a>Attitude</a> by <a>Stephane Moens</a></li> <li><a>Urban</a> by <a>Matt Kim & Nicole</a></li> <li><a>Paravion</a> by <a>Emiliano Pennisi</a></li> <li><a>Verdure</a> by <a>Lim Yuan Qing</a></li> </ul>

34 Notes préliminaires et Définition
Les balises imbriquées ne peuvent jamais être croisées Tous les noms des balises sont écrits en minuscule Toutes les balises sont fermées Elément : Couple ouvert et fermé d’une balise HTML : Exemples : <p> … </p> <h1> … </h1> <span> … </span> <div> … </ div > <pre> … </ pre > … <ul> … </ul> <ol> … </ol> <li> … </li> <img…/> <br /> <hr /> Les balises vides sont explicitées : Exemples : <br> devient <br /> <hr id=« top »> devient <hr id="top" /> , etc.

35 Définition des styles Propriétés ou attributs des styles
Les styles permettent de définir : les alignements de texte les couleurs de texte les couleurs de fond la taille des polices utilisées etc. Ces caractéristiques sont appelées propriétés ou attributs. Exemples de propriétés : text-align color background-color font-size …

36 Propriété, valeur, déclaration, liste et bloc de déclarations
Définir un style consiste à préciser la valeur d'une ou de plusieurs propriétés pour un élément HTML donné. Exemple de valeur pour text-align : text-align: left; text-align: right; text-align: justify; text-align: center; Le binôme propriété:valeur constitue une déclaration ou définition, c’est une instruction de mise en page. L'ensemble propriété1:valeur1; propriété2:valeur2; constitue une liste de déclarations. La liste de déclarations placée entre accolades s’appelle bloc de déclaration : { propriété1:valeur1; propriété2:valeur2; }

37 Règle de style = Sélecteurs + bloc de déclaration(s)
Feuille de style = jeux de Règles de style qui précisent l’affichage des éléments HTML. Chaque règle de style CSS est composée de : un sélecteur qui indique à quel type d ’élément HTML la règle s’applique un bloc de déclaration(s). bloc de déclaration(s) règle de style CSS sélecteur { propriété1: valeur1; propriété2: valeur2; } Le sélecteur peut être : un élément HTML une classe une pseudo-classe un identifiant ID

38 background-color: #FFBEEB; width: 25%; text-align: left; }
Règle CSS Bloc de déclarations Liste de déclarations Sélecteur .colonnegauche { margin: 0px; padding: 0%; float: left; position: static; background-color: #FFBEEB; width: 25%; text-align: left; } Déclaration Propriété Valeur

39 Règle 1 Règle 2 .gauche { margin: 0px; padding: 0%; float: left;
position: static; background-color: #FFBEEB; width: 25%; text-align: left; } .droite { background-color: #FFFF66; float: right; Règle 2

40 Les 4 techniques d'application des styles
Il existe 4 techniques pour appliquer des styles à un document HTML: 1. Style en ligne ou incorporé (Inline Style) : Défini directement dans l'élément concerné par l'attribut "style" dans la balise. 2. Feuille de style incorporée dans le document (Embedded Style Sheet): Liste de règles CSS dans l'en-tête <head> </head> du document à l'intérieur d'une balise <style></style> 3. Feuille de style externe liée (Linked Style Sheet) : Liste de règles CSS dans un fichier séparé à extension CSS; balise <link /> dans le document source. 4. Feuille de style externe importée (Imported Style Sheet) : Liste de règles CSS dans un fichier séparé à extension dans le document source. Le style en ligne englobe définition et utilisation dans une même balise. Dans une feuille de styles, la définition du style est isolée de son appel (utilisation) dans le document.

41 1. Style en ligne (intra-ligne ou incorporé) [1/1]
Le style en ligne est élaboré pour un seul élément. La balise de l'élément est complétée par l'attribut : style ="propriété: valeur" qui précise la définition des propriétés. <élément style="propriété: valeur"> Exemple : <p style="font-size:16pt ; text-align:center ; width:100% ; color:#ff0000; " > Voici un paragraphe de largeur 100% dont le texte est rouge, centré, en 16 pt. </p>

42 2. Feuille de style incorporée (interne ou globale) [1/2]
Les règles de styles des différents éléments sont regroupés dans une balise spécifique <style></style> placée dans l'en-tête ( entre les balises <head> et </head> ) du document HTML. Cela permet de définir globalement les styles de toute la page HTML à l'intérieur même de la page. Cette technique permet de modifier facilement la présentation de toute la page. <style type="text/css"> element1 {propriété1: valeur1; propriété2: valeur2;} element2 {propriété1: valeur1; propriété2: valeur2;} </style> Syntaxe générale : des accolades entourent les déclarations des styles pour chaque élément : Remarque : correspondance « élément1 <--> sélecteur1 » « élément2 <--> sélecteur2 »

43 2. Feuille de style incorporée (interne ou globale) [2/2]
Exemple : feuille de style incorporée qui définit un fond d'écran et la justification des paragraphes. <head> ... < style type="text/css"> body {background-image:URL(image.gif)} p {text-align:justify} </style> </head> <body> <p>Voici un paragraphe justifié.</p> <p>Voici un autre paragraphe justifié.</p> </body>

44 3. Feuille de style externe liée [1/3]
Une feuille de style externe liée est un fichier de texte à extension .css, qui contient la liste des règles CSS. Ce fichier permet de grouper les styles de plusieurs pages HTML, voire d'un site Web entier. Cette dernière technique est donc la plus performante car : Le chargement des informations de style de différentes pages ne se fait qu'une seule fois. La feuille de style liée est mise en mémoire séparément. Les documents sont moins volumineux. Une modification s'applique sur toutes les pages. Le fichier externe à extension css (feuille de style externe) contient uniquement les règles de styles, avec éventuellement des commentaires, mais sans aucun autre code HTML (même minimal).

45 3. Feuille de style externe liée [2/3]
…suite : body {background-image: url(image.gif);} p {text-align: justify;} Par exemple : Une feuille de style globale ou liée peut définir la justification de tout paragraphe, mais ce choix est inopportun dans certains cas. Il faut alors définir une classe spéciale par exemple pour aligner le paragraphe à gauche pour cette classe : p.gauche {text-align:left;} Des commentaires peuvent être ajoutés dans la feuille de style sous la forme : /* commentaires */ Il existe 2 manières d'appliquer une feuille de style externe : sous forme liée ou sous forme importée.

46 3. Feuille de style externe liée [3/3]
…suite : C'est la technique la plus courante. Dans le document HTML, on ajoute à l'intérieur de la partie HEAD : <head> ... <link rel = "stylesheet" type ="text/css" href = "chemin/nom_fichier.css"> </head>

47 4. Feuille de style externe importée (directive @import ou at-rules)
Une permet d'inclure dans une feuille de style (liée, incorporée ou importée) une référence à une autre feuille de style. Les règles de la feuille de style importée seront ajoutées à la feuille d'appel. @import url(url); L'url peut être encadrée ou non de guillemets simples ou doubles. On peut trouver à placer toujours au début des définitions, avant les autres règles CSS. @import url( @import url(dossier/mafeuille2.css); p {text-align: justify};

48 Sélecteurs La règle de style CSS associe un bloc de déclaration(s) à un sélecteur. Le sélecteur peut être : Sélecteurs simples basés sur des éléments de balises HTML Regroupement de sélecteurs simples Sélecteurs contextuels Classes Identifiants Pseudo-classes

49 Sélecteurs d’élément :
Sélecteurs simples basés sur des éléments de balises HTML Un sélecteur simple associe un élément HTML à une règle particulière. Les styles sont souvent associés aux : balises bloc : div, body, h1, h2, h3, h4, h5, ,h6, p, pre, ul, ol, li, ... balises en ligne : span, a, strong, em, img, ... La balise bloc <div> délimite une zone de la page HTML comportant un ou plusieurs paragraphes. alors que La balise en ligne <span> délimite un fragment de texte et/ou de données au sein d’un paragraphe, donc sans saut de paragraphe. Exemples de sélecteurs d’éléments (sélecteurs simples) : h2 {color: red} span {background-color: red; color: white} p {color: blue}

50 Sélecteurs universel * :
Sélecteurs simples basés sur des éléments de balises HTML, et représenté par un astérisque (*) Correspond à n’importe quel éléments HTML, fonctionnant donc de manière générique: un caractère générique. Par exemples, pour que tous les éléments soient en bleu: * {color: blue}

51 Regroupement de sélecteurs simples
Les balises qui ont les mêmes propriétés peuvent être regroupées en les séparant par une virgule. Ces 3 lignes peuvent être groupées en une seule : h1 {color:red} h2 {color:red} strong {color:red} h1, h2, strong {color:red}

52 Regroupement de déclarations
Les déclarations sont généralement regroupées dans une seule règle. h1 {color: purple;} h1 {font: 20px Helvetica;} h1 {backgroud: aqua;} Ces 3 lignes sont généralement groupées en une seule : h1 {color: purple; font: 20px Helvetica backgroud: aqua;}

53 Tout regrouper Regrouper des sélecteurs et des déclarations dans une seule règle permet de définir des styles très complexes avec seulement quelques instructions. h1, h2, h3, h4, h5, h6 {color: blue; background: #F5F5DC; padding: 0.5em; border: 2px solid red; font-family: Impact, san-serif;} ... Préférable à tout écrire, ce qui donnerait : h1, {color: blue;} h2, {color: blue;} h3, {color: blue;} h4, {color: blue;} h5, {color: blue;} h6 {color: blue;} h1, {background: #F5F5DC;} h2, {background: #F5F5DC;} h3, {background: #F5F5DC;} h4, {... ...

54 Sélecteurs de Classes Les éléments des balises HTML peuvent être répartis en catégories appelées classes. On peut alors appliquer un style à une classe d'éléments. Par exemple, on distingue une classe de paragraphes normaux, et une classe de paragraphes d'introduction qui n'auront pas le même formatage. Ici, la classe de paragraphe d'introduction sera nommée intro. Dans le document HTML, à l'endroit où l'on veut appliquer le style du paragraphe d'introduction, on indique : <p class="intro">texte d'introduction</p> Un style peut alors être défini pour cette classe de balise, dans une feuille de style incorporée ou externe. Une classe est toujours précédée d'un point dans la définition du style. Ce point peut être ou non précédé d'un élément. p.intro {color:red} la classe concerne une balise précise, la balise p. la classe peut être appliquée à différentes balises, par exemple : p, div, span. .intro {color:red}

55 Sélecteurs d’Identifiants
Alors qu'une classe peut concerner plusieurs éléments du document, un identifiant concerne un élément unique. Dans un document, une balise précise peut être identifiée par un nom grâce à l'attribut id. Ce nom (ici "nom_id") doit être unique dans tout le document afin de désigner spécifiquement cette balise là. Les identifiants sont utiles pour appliquer du javascript au document. <p id="nom_id">Texte</p> Un style peut alors être défini pour cette balise précise, dans une feuille de style incorporée ou externe. La balise est complétée par le caractère # puis par le nom de l'identifiant. Ce # peut être ou non précédé d'un élément. p#nom_id {color:red} #nom_id {color:red}

56 Sélecteurs de Pseudo-classes et de pseudo-éléments [1/7]
Les pseudo-classes et les pseudo-éléments créent des mécanismes ou des relations qui ne sont pas réalisables en HTML. Ces sélecteurs permettent de créer des règles CSS qui : Déclenchent certaines actions : lors du survol d’un lien, etc. Interviennent finement sur un éléments : stylent le premier caractère ou la première ligne de boîtes bloc tel que les paragraphe, etc. …sans que cela apparaisse dan le code du document HTML.

57 Sélecteurs de Pseudo-classes [2/7]
Un ensemble d'éléments HTML qui répondent à un même critère de contexte peuvent former une pseudo-classe. Ils sont spécifiés par l'ajout de deux points dans la feuille de style : :link {propriété:valeur} lien standard :focus {propriété:valeur} sélection :first-child {propriété:valeur} premier élément-enfant :first-letter {propriété:valeur} première lettre :first-line {propriété:valeur} première ligne Ils peuvent être associés à un élément : a:link {propriété:valeur} lien standard a:visited {propriété:valeur} lien visité (cliqué) a:hover {propriété:valeur} lien survolé par le pointeur de la souris a:active {propriété:valeur} lien pendant le clic

58 Sélecteurs de Pseudo-classes [3/7]
Recommandation : déclarer les pseudo-classes :link, :visited, :hover et :active dans l’ordre précis suivant, seul à garantir leur correcte interprétation : L o V e H A t a:link {propriété:valeur} lien standard a:visited {propriété:valeur} lien visité (cliqué) a:hover {propriété:valeur} lien survolé par le pointeur de la souris a:active {propriété:valeur} lien pendant le clic LoVe HAte (amour-haine) a:link {propriété:valeur} lien standard a:visited {propriété:valeur} lien visité (cliqué) a:hover {propriété:valeur} lien survolé par le pointeur de la souris a:active {propriété:valeur} lien pendant le clic Moyen mnémotechnique :

59 Sélecteurs de Pseudo-classes - Exemples [4/7]
évite le soulignement de l'hypertexte standard. a:link {text-decoration: none} évite le soulignement de tous les types d'hypertexte. a {text-decoration: none} le premier élément enfant (ex: p) sera en italique, mais pas les suivants. div:first-child {font-style: italic} Dans le document, il ne faut rien ajouter de particulier à la balise de l'élément, à la différence des classes ou des identifiants. La pseudo-classe est associée automatiquement à un type d'élément.

60 Sélecteurs de pseudo-éléments [5/7]
:firts-letter et :first-line Ces sélecteurs permettent de créer des règles CSS qui Interviennent finement sur un éléments : :first-letter style le premier caractère :first-line style la première ligne ...des boîtes bloc, soit paragraphe p, titres h1, h2, h3, etc. sans que cela apparaisse dan le code du document HTML. Ces règles ne portent que sur une portion de la balise considérée : :first-letter vous permet de vous transformer en moine enlumineur du moyen-age en mettant en valeur la 1ère lettre d’un texte, d’un chapitre, de paragraphes en jouant sur sa taille, sa graisse, sa couleur, etc. :first-line, idem mais pour la 1ère ligne des éléments sélectionnés.

61 Sélecteurs de pseudo-éléments [6/7]
h1 { color: #cc0000; } p { color: #cc6600; p:first-line { text-transform: uppercase; font-weight: bold; color: #339999; p:first-letter { font-family: "Times New Roman",Times,serif; font-size: 4em; float: left; color: #999999; h1:first-letter { color: red; font-size: 1.6em; <body> <h1>titre principal</h1> <p>texte 1</p> <h3>sous-titre 2</h3> <p>texte 2</p> <h2>sous-titre 2</h2> <p>texte 3</p> </body>

62 Sélecteurs de pseudo-éléments [7/7]
h1 { color: #cc0000; } p { color: #cc6600; } p:first-line { text-transform: uppercase; font-weight: bold; color: #339999; } p:first-letter { font-family: "Times New Roman",Times,serif; font-weight: bold; font-size: 4em; float: left; color: #999999; } h1:first-letter { color: red; font-size: 1.6em; } Sélecteurs de pseudo-éléments [7/7] <body> <h1>titre principal</h1> <p>texte 1</p> <h3>sous-titre 2</h3> <p>texte 2</p> <h2>sous-titre 2</h2> <p>texte 3</p> </body>

63 Classes multiples [1/2] ? .danger {color: blue;}
Partons d’un exemple : Nous voulons que des parties d’un texte expriment un danger, une urgence, un appel à l’aide et une catastrophe. A cette fin nous définissons les règles : .danger {color: blue;} .urgent {font-weight: bold;} .danger.urgent {font-style: italic;} .catastrophe {text-transform: uppercase;} .alaide {color: red;} span.alaide.catastrophe {background: Yellow;} Concerne les éléments dont l’attribut class contient les mots danger et urgent Concerne les éléments dont l’attribut class contient les mots alaide et catastrophe ? <p>Lucie, 5 ans, <span class="danger">joue à la cuisine et <span class="urgent"> une casserole de lait chauffe sur une plaque de la cuisinière.</span></span></p> <p class="danger urgent"> Lucie essaie de saisir le manche de la casserole <span class="catastrophe">au-dessus d’elle </span>. <span class="alaide">Maman se précipite et crie attention, <span class="alaide calme catastrophe"> la casserole se renverse,</span> Ouf, l’eau est à peine tiède.</span></p>

64 Classes multiples [2/2] .danger {color: blue;}
Partons d’un exemple : Nous voulons que des parties d’un texte expriment un danger, une urgence, un appel à l’aide et une catastrophe. A cette fin nous définissons les règles : .danger {color: blue;} .urgent {font-weight: bold;} .danger.urgent {font-style: italic;} .catastrophe {text-transform: uppercase;} .alaide {color: red;} span.alaide.catastrophe {background: Yellow;} <p>Lucie, 5 ans, <span class="danger">joue à la cuisine et <span class="urgent"> une casserole de lait chauffe sur une plaque de la cuisinière.</span></span></p> <p class="danger urgent"> Lucie essaie de saisir le manche de la casserole <span class="catastrophe">au-dessus d’elle </span>. <span class="alaide">Maman se précipite et crie attention, <span class="alaide calme catastrophe"> la casserole se renverse,</span> Ouf, l’eau est à peine tiède.</span></p> Lucie, 5 ans, joue à la cuisine et une casserole de lait chauffe sur une plaque de la cuisinière. Lucie essaie de saisir le manche de la casserole AU-DESSUS D’ELLE. Maman se précipite et crie attention, la casserole se renverse Ouf, l’eau est à peine tiède.

65 Créer des règles qui ne fonctionnent qu’avec certaines structures
Sélecteurs contextuels - Sélecteur de descendant Créer des règles qui ne fonctionnent qu’avec certaines structures Les sélecteurs contextuels associent une règle à un élément en fonction de sa situation dans une ou plusieurs autre(s) balise(s). Les éléments du sélecteur sont alors séparés par un espace. Leur ordre a une importance : Les éléments doivent être imbriqués dans l'ordre décrit dans le sélecteur : p strong {color: red} Les éléments situés dans une balise strong, elle-même contenue dans un paragraphe p, seront mis en rouge. Un élément p isolé ou un élément strong qui n'est pas inséré dans un élément p ne se verra pas appliquer le style.

66 Sélecteur de Descendant, d’Enfant, de Frère
Créer des règles qui ne fonctionnent qu’avec certaines structures Frère : Par exemple appliquer un styles sur chaque élément p qui suit un élément frère h3 et ayant le même parent : h3 + p {color: blue;} Cette règle met en bleu le texte des éléments p qui suivent un élément frère h3 partageant un parent avec p. Enfant : Par exemple appliquer un styles sur chaque élément span enfant d’un élément h3 h3 > span {color: red;} Cette règle met en rouge le texte des éléments span enfants d’un élément h3. Descendant (sélecteur contextuel) : Par exemple appliquer un styles sur chaque élément em qui descend d’un élément p p em {color: fuchsia;} Cette règle met en violet le texte des éléments span descendants d’un élément p.

67 Sélecteurs de Descendant, d’Enfant, de Frère
1 2 3 4 5 6 7 8 9 Frère : h3 + p {color: blue;} Cette règle met en bleu le texte des éléments p qui suivent un élément frère h3 partageant un parent avec p. Enfant : h3 > span {color: red;} Cette règle met en rouge le texte des éléments span enfants d’un élément h3. Descendant : p a {color: violet;} Cette règle met en violet le texte des éléments a descendants d’un élément p. Descendant : div ul li a {color: fuchsia;} Cette règle met en bleu le texte des éléments a descendants d’un élément li, descendant d’un élément ul ,descendant d’un élément div. (ou encore : div ul a {color: blue;} )

68

69 1 2 3 4 5 6 7 8 9

70 9 10 11 12 13 14 15

71 Commentaires CSS Les commentaires CSS sont entourés par /* et */
/* Ceci est un commentaire CSS sur une ligne */ Les commentaires peuvent occuper plusieurs lignes : /* Ceci est un commentaire CSS sur la première ligne Un autre commentaire sur la deuxième ligne Et encore un commentaire sur la troisième ligne. */

72 Background / Arrière-plan
On peut spécifier l’arrière plan d’un élément (boîte) comme étant une couleur ou bien une image. Selon le modèle de la boîte, l'arrière-plan correspond aux aires du contenu, de l'espacement et de la bordure. Les couleurs et styles de bordure sont spécifiées par les propriétés de bordure. Les marges étant transparentes, l'arrière-plan du parent est toujours visible au travers de celles-ci. Bien que les propriétés d'arrière-plan ne s'héritent pas, l'arrière-plan de la boîte du parent transparaîtra par défaut, du fait de la valeur initiale « transparent » de la propriété « background-color ». L'arrière-plan de la boîte générée par l'élément racine recouvre la totalité du canevas. Dans le cas de documents HTML, on recommande aux auteurs de spécifier un arrière-plan à l'élément BODY, plutôt qu'à l'élément HTML. body { background: url( }

73 Background / Arrière-plan
background-color background-image background-repeat background-attachment background-position background

74 Background-color background-color: #FFDFFF;
Cette propriété attribue la couleur du fond de la boîte (élément). Propriété : background-color Valeur : #rrggbb, #rgb, rgb(rrr.rr%,ggg.gg%,bbb.bb%) rgb(rrr,ggg,bbb) mot-clé transparent #cc88ee ou #fa82b3 #c8e rgb(30%,70%,77.5%) rgb(128,255,60) cyan transparent Exemple : background-color: #FFDFFF;

75 Background-image background-image: url(image_Chat/chat_500.png);
Cette propriété insère une image (jpg, gif ou png) en mosaïque dans le fond de la boîte. Propriété : background-image Valeur : url(nom-image.jpg) url(nom-image.gif) url(nom-image.png) none Exemple : background-image: url(image_Chat/chat_500.png);

76 Background-repeat background-repeat: repeat;
Cette propriété permet de contrôler la répétition d’une image (jpg, gif ou png) qui doit être préalablement définie par la propriété background-image. Propriété : background-repeat Valeurs : repeat; repeat-x; repeat-y; no-repeat; Identique à Background-image Répète l’image seulement selon x (ligne d’images en haut) Répète l’image seulement selon y (colonne d’images à gauche) Image affichée une seule fois. Exemples : background-repeat: repeat; background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: no-repeat;

77 Background-attachment
La propriété « background-attachment » permet de fixer une image de fond. Deux valeurs possibles : fixed et scroll Avec la valeur « fixed » : l’image ne défile pas avec l'espace de visualisation. Exemples : background-attachment: fixed; Avec la valeur « scroll » : l’image défile en même temps que le document. Exemples : background-attachment: scroll;

78 Background-position [1/4]
Cette propriété positionne l’image précisément par coordonnées x,y dans le fond de la boîte. L’image est préalablement définie par d’autres propriétés background-… et elle n’est pas répétée (*). Propriété : Background-position Valeurs : deux valeurs séparées par un espace, la première valeur est la position par rapport au bord gauche (axe horizontal x), la deuxième par rapport au bord supérieur (axe vertical y) du bloc conteneur. 1) valeur-x valeur-y; (unité absolue avec valeur négative possible) 2) pourcentage-x pourcentage-y; (en %) 3) x = left ou center ou right et y = top ou center ou bottom Exemple : center right; 4) no-repeat; Trois exemples : 1) Background-position: 30px 50px; 2) Background-position: 25% 40%; 3) Background-position: center right; (*) à précéder de Background-image: url(image1.png); et Background-position: no-repeat;

79 Background-position [2/4]
longueur longueur Pour la paire de valeur '2cm 2cm', le coin en haut et à gauche de l'image se place sur le point, situé à 2cm vers la droite et 2cm vers le bas en partant du coin en haut et à gauche de l'aire d'espacement de la boîte conteneur.

80 Background-position [3/4]
longueur longueur top left et left top Identique à '0% 0%' ; top, top center et center top Identique à '50% 0%'; right top et top right Identique à '100% 0%' ; left, left center et center left Identique à '0% 50%' ; center et center center Identique à '50% 50%' ; right, right center etcenter right Identique à '100% 50%' ; bottom left et left bottom Identique à '0% 100%' ; bottom, bottom center et center bottom Identique à '50% 100%' ; bottom right et right bottom Identique à '100% 100%'.

81 Background-position [4/4]
Quand on ne donne qu'une seule valeur, en pourcentage ou en longueur, celle−ci ne concerne que la position horizontale, la position verticale sera 50%. Quand on donne deux valeurs, la première concerne la position horizontale. Les combinaisons de valeurs de pourcentage et de longueur sont admises (ex. '50% 2cm'). Les positions négatives le sont également. On ne peut pas combiner des mots-clés avec des valeurs de pourcentage ou de longueur. Exemples : background-image: url(image_Chat/chat_500.png); background-repeat: no-repeat; background-position: 200px 150px;

82 Background (propriété raccourcie)
Cette propriété raccourcie sert à regrouper les propriétés individuelles « background-color », « background-image », « background-repeat », « background-attachment » et « background-position » en une seule déclaration dans une règle de style : body { background: url(puzzle.png) gray no-repeat left top fixed } Cette règle correspond à la règle explicite : body { background-image: url(puzzle.png); background-image: gray; background-repeat: no-repeat; background-position: left top; background-attachment: fixed; } p { background: url(chess.gif)} cyan 50% repeat fixed } Exemple 2 :

83 Background-image .background { background-color: #FFFFFF;
background-image: url(image_Chat/chat_500.png); font-family: Georgia, "Times New Roman", Times, serif; font-size: 36px; font-style: italic; font-weight: bolder; color: #00FF00; } .text-jaune { color: #FFFF00; font-size: 30px; } <body class="background"> <div> <p> Couleur et Image de fond sont placées avec les déclarations : <pre class="text-jaune"> .background { background-color: #D782FB; background-image: url(image_Chat/chat_500.png); } </pre> L'image de fond est répétée si l'on ne précise pas : background-repeat: no-repeat; </p> </div> </body>

84 Background-repeat: no-repeat;
background-color: #FFDFFF; background-image: url(image_Chat/chat_200.png); font-family: Georgia, "Times New Roman", Times, serif; font-size: 36px; font-style: italic; font-weight: bolder; color: #00FF00; background-repeat: no-repeat; } .text-bleu { font-family: "Courier New", Courier, mono; color: #0000FF; font-size: 30px; font-style: normal; font-weight: bolder; } Background-repeat: no-repeat;

85 Background-repeat: repeat x;
background-color: #FFDFFF; background-image: url(image_Chat/chat_200.png); font-family: Georgia, "Times New Roman", Times, serif; font-size: 36px; font-style: italic; font-weight: bolder; color: #00FF00; background-repeat: repeat-x; } .text-bleu { font-family: "Courier New", Courier, mono; color: #0000FF; font-size: 30px; font-style: normal; font-weight: bolder; } Background-repeat: repeat x;

86 Background-repeat: repeat y;
background-color: #FFDFFF; background-image: url(image_Chat/chat_200.png); font-family: Georgia, "Times New Roman", Times, serif; font-size: 36px; font-style: italic; font-weight: bolder; color: #00FF00; background-repeat: repeat-y; } .text-bleu { font-family: "Courier New", Courier, mono; color: #0000FF; font-size: 30px; font-style: normal; font-weight: bolder; } Background-repeat: repeat y;

87 Background-position: 200px 200px;
background-color: #FFDFFF; background-image: url(image_Chat/chat_500.png); font-family: Georgia, "Times New Roman", Times, serif; font-size: 36px; font-style: italic; font-weight: bolder; color: #00DF00; background-repeat: no-repeat; background-position: 200px 150px; } .text-bleu { font-family: "Courier New", Courier, mono; color: #0000FF; font-size: 30px; font-style: normal; font-weight: bolder; } Background-position: 200px 200px;

88 Background-attachment: fixed;
background-color: #FFDFFF; background-image: url(image_Chat/chat_500.png); font-family: Georgia, "Times New Roman", Times, serif; font-size: 36px; font-style: italic; font-weight: bolder; color: #00DF00; background-repeat: no-repeat; background-position: 200px 150px; background-attachment: fixed; } .text-bleu { font-family: "Courier New", Courier, mono; color: #0000FF; font-size: 30px; font-style: normal; font-weight: bolder; }

89 Background-attachment: fixed;
background-color: #FFDFFF; background-image: url(image_Chat/chat_500.png); font-family: Georgia, "Times New Roman", Times, serif; font-size: 36px; font-style: italic; font-weight: bolder; color: #00DF00; background-repeat: no-repeat; background-position: 200px 150px; background-attachment: fixed; } .text-bleu { font-family: "Courier New", Courier, mono; color: #0000FF; font-size: 30px; font-style: normal; font-weight: bolder; }

90 Textes Police et famille de police : font-family
font-family, font-style, font-variant, font-weight, font-size, font, color word-spacing, letter-spacing, text-decoration, text-transform, text-align, text-indent, vertical-align, line-height list-style, list-style-image, list-style-position, list-style

91 Police et famille de police : font-family
Nous sommes dépendants des polices de caractères disponibles sur les machines des internautes. Pour tenter de surmonter ce problème, les CSS proposent plusieurs polices dans les déclarations. (Les CSS-3 proposeront peut-être un système fiable de polices téléchargeables avec le document HTML). Les noms de polices contenant des espaces doivent être encadrés par des quotes simples ou doubles, voici 6 exemples : .policearial {font-family: Arial, Helvetica, sans-serif;} .policetimes {font-family: "Times New Roman", Times, serif;} .policecourier {font-family: "Courier New", Courier, mono;} .policegeorgia {font-family: Georgia, "Times New Roman", Times, serif;} .policeverdana {font-family: Verdana, Arial, Helvetica, sans-serif;} .policegeneva {font-family: Geneva, Arial, Helvetica, sans-serif;} Pour chacun de ces 6 exemples, le navigateur utilise la première police nommée, si elle n ’est pas présente dans le système de l’internaute il passe à la suivante, etc. Si aucune police désignée n’existe sur le système, le navigateur utilise la police par défaut.

92 font-family, font-style, font-variant, font-weight, font-size, font
color nom|| serif | sans-serif | cursive | fantasy | monospace normal | italic | oblique normal | small-caps normal | bold | bolder | lighter | 100 | 200 | 300 |…| 700 | 800 |900 xx-small | x-small |small| medium | large | x-large | xx-large | larger | smaller | n | p% font-variant font-weight font-size / line-height font-family couleur | #RRVVBB | rgb(a,b,c) | rgb(a%,b%,c%) Nom (gill, helvetica…) ou famille de la police Style normal, italique et oblique Style normal ou petites capitales Epaisseur de la police (normal=400 ; bold=700) Taille de la police Regroupe les propriétés de police (l'interligne line-height se met après la taille de police font-size avec / devant ex: 12pt / 14pt Couleur de texte

93 word-spacing, letter-spacing, text-decoration, text-...
text-transform text-align text-indent vertical-align line-height normal | n | -n none | underline | overline | line-through | blink none | uppercase | lowercase | capitalize left | right | center | justif n | p% baseline | text-top | middle | text-bottom | p% top | bottom | sub | super normal | n | p% Espacement entre mots Espacement entre caractères Non, souligné, surligné, barré, clignotant Non, majuscule, minuscule, majuscule au 1er caractère Gauche, droite, centré, justifié Indentation de la première ligne (positive ou négative) Alignement vertical du texte / parent alignement vertical du texte / élément de la ligne sub (indice) super (exposant) Valeur entre deux lignes adjacentes

94 list-style, list-style-image, list-style-position, list-style
disc|circle|square|decimal| lower-roman|upperroman| lower-alpha|upper-alpha| none| url(url) Type de numéro, puce ou image dans une liste list-style-image url(url) Image servant de puces list-style-position inside|outside Alignement des puces dans ou devant la liste list-style list-style-type list-style-image list-style-position Regroupe les catégories de list-style

95 Mise en forme des textes... (qq adresses Web) [1/3]
CSSDEBUTANT CSS : font-family, font-size, font-variant, font-weight » Les polices en CSS CSS : letter-spacing, text-align, text-decoration » Mettre en forme un texte en CSS CSS : text-indent, text-transform, white-space, word-spacing

96 Mise en forme des textes... (qq adresses Web) [2/3]
FR.HTML.NET Leçon 3 : Les couleurs et les arrières-plans Color, background-color, background-image, background-repeat, background-attachment, background-position, background Leçon 4 : Les polices font-family, font-style, font-variant, font-weight, font-size, font Leçon 5 : Le texte text-indent, text-align, text-decoration, letter-spacing, text-transform Leçon 6 : Les liens

97 Mise en forme des textes... (qq adresses Web) [3/3]
SITEDUZERO Formatage du texte en CSS (partie 1/2) Formatage du texte en CSS (partie 2/2) Les pseudo-formats

98 Boîtes Eléments constitutifs content padding border margin Types
Boîtes bloc Boîtes en ligne ...

99 Boîtes : éléments constitutifs
Modèles et types de boîtes « attachées » aux balises HTML TOUS les éléments HTML s'inscrivent dans une boîte Une boîte possède 4 aires 1. Contenu - content 2. Espacement - padding 3. Bordure - border 4. Marge - margin

100 Boîtes : éléments constitutifs
TOUS les éléments HTML s'inscrivent dans une boîte dont on peut définir : Contenu : content : width, height, max-width, max-height, min-width, min-height, la couleur de fond (padding et border inclus ou non). Marges : padding et margin : intérieure, extérieure, top, right, bottom, left. Bordures : border: width, color, style, top, right, bottom, left. Positionnement : position : static, relative, absolute, fixe, float, clear, top, right, bottom, left, clear, overflow, z-index.

101 Boîtes : éléments constitutifs

102 Boîtes : éléments constitutifs
1 top 2 right 4 left margin border 3 bottom padding content Boîte symétrique La Marge externe est incolore margin Boîte asymétrique Les valeurs sont attribuées : En partant du haut Dans le sens des aiguilles d’une montre. content padding border

103 Boîtes de type bloc (block box)
body, html, p, div, h1 à h6, pre, ol, ul, li, hr, etc. Commence et se termine par un retour de ligne. Disposées l’une sous l’autre (enchaînement vertical de boîtes). Superposition des marges margin-top et margin-bottom, la plus grande l’emporte (fusion des marges). Peut contenir des boîtes bloc et des boîtes en ligne.

104 Boîtes de type bloc (block box)
Les principaux éléments créant des boîtes blocs (block) conteneur appelées aussi boîtes paragraphe sont :

105 Boîtes de type bloc (block box)

106 Boîtes de type bloc (block box)
Balise div Vient du mot division. Cette balise de type bloc introduit une division, un bloc à l’intérieur de la page, une boîte bloc à laquelle on peut appliquer un style particulier. Entraîne un retour de chariot avant et après le bloc qu’elle définit. Usage fréquent dans les CSS, accepte tout ce que l’on veut à l ’intérieur : boîtes bloc, boîtes en lignes, boîte remplacée, ...

107 Boîtes de type en-ligne (inline box)
span, a, strong, em, img, etc Ni précédée ni suivie par un retour de ligne. Disposées l’une à côté de l’autre sur la même ligne tant qu’elles disposent de la place nécessaire (bord à bord, enchaînement horizontal de boîtes), remplissant le conteneur de gauche à droite et de haut en bas. Accolement bout à bout des marges : margin-right d’une boîte et margin-left de la boîte suivante (pas de fusion des marges). Toujours utilisée à l’intérieur de boîtes blocs. Peut contenir des boîtes en ligne.

108 Boîtes de type en-ligne (inline box)
Les principaux éléments créant des boîtes en ligne (inline) sont :

109 Boîtes de type en-ligne (inline box)
Balise span Cette balise de type boîte en-ligne n’introduit pas de division mais simplement une zone à l’intérieur d’un fragment alphanumérique (partie de paragraphe) auquel on peut appliquer un style particulier. Usage fréquent dans les CSS.

110 Boîtes - Aire de Contenu : content [1/3]
Largeur de content width : n, p%, auto Largeurs et hauteurs de content : width et height Exemple : width: 50px; width: 25%; width: auto; Hauteur de content height: n, p%, auto Exemple : height: 50px; height: 25%; height: auto width et height Incluent ou non padding et border suivant les navigateurs

111 Boîtes - Aire de Contenu : content [2/3]
Contraindre les largeurs et hauteurs maximale de content max-width et max-height Largeur max de content max-width : n, p%, auto Exemple : max-width: 50px; max-width: 25%; max-width: auto; Hauteur max de content max-height: n, p%, auto Exemple : max-height: 50px; max-height: 25%; max-height: auto max-width et max-height Incluent ou non padding et border suivant les navigateurs

112 Boîtes - Aire de Contenu : content [3/3]
Contraindre les largeurs et hauteurs minimales de content min-width et min-height Largeur min de content min-width : n, p%, auto Exemple : max-width: 50px; max-width: 25%; max-width: auto; Hauteur min de content min-height: n, p%, auto Exemple : max-height: 50px; max-height: 25%; max-height: auto min-width et min-height Incluent ou non padding et border suivant les navigateurs

113 Boîtes - Aire d’Espacement, Marge Interne : padding
padding-top padding-right padding-bottom padding-left Padding n | p% padding-top padding-right padding-bottom padding-left Remplissage haut Remplissage droite Remplissage bas Remplissage gauche Regroupe les propriétés de remplissage

114 Une aire de contenu (ex. un texte, une image, etc
Une aire de contenu (ex. un texte, une image, etc.) est entourée en option par une aire d'espacement, - padding -, qui est constituée par les 4 marges internes (haute, droite, basse, gauche) réglables séparément, par exemple : <p style="padding-top: 20px; padding-right: 50px; padding-bottom:30px; padding-left: 40px;"> Boîte p avec les 4 marges internes différentes </p> Selon les valeurs attribuées aux padding, il y a plusieurs possibilités d'abréger l'écriture : padding: 20px 50px 30px 40px; c'est-à-dire en tournant à partir de "top" dans le sens des aiguilles d'une montre : 20px 40px content 50px padding 30px L'aire d'espacement prend toujours la couleur de l'aire de contenu.

115 On procède de même pour border et margin padding: 30px 40px 10px;
est équivalent à padding: 30px 40px 10px 40px; padding 30px 40px content 40px 10px L'aire d'espacement prend toujours la couleur de l'aire de contenu.

116 On procède de même pour border et margin padding: 20px 50px;
est équivalent à padding : 20px 50px 20px 50px; 20px 50px content 50px padding 20px L'aire d'espacement prend toujours la couleur de l'aire de contenu.

117 On procède de même pour border et margin padding: 50px;
est équivalent à padding: 50px 50px 50px 50px; 50px 50px 50px content padding 50px L'aire d'espacement prend toujours la couleur de l'aire de contenu.

118 Boîtes - Aire de Bordure : border [1/3]
border-color border-style border-width border-top border-top-color border-top-style border-top-width border-left border-left-color border-left-style border-left-width border-right border-right-color border-right-style border-right-width border-bottom border-bottom-color border-bottom-style border-bottom-width

119 Boîtes - Aire de Bordure : border [2/3]
border border-width border-style border-color border-color couleur couleur couleur couleur border-style none | dotted | dashed | solid | double| groove | ridge | inset | outset border-width border-top-width border-right-width border-bottom-width border-left-width border-top border-width border-style border-color border-top-color couleur couleur couleur couleur border-top-style none | dotted | dashed | solid | double | groove | ridge | inset | outset border-top-width thin | medium | thick | n border-right border-width border-style border-color border-right-color couleur couleur couleur couleur border-right-style none | dotted | dashed | solid | double | groove | ridge | inset | outset border-right-width thin | medium | thick | n

120 Boîtes - Aire de Bordure : border [3/3]
border-bottom border-width border-style border-color border-bottom-color couleur couleur couleur couleur border-bottom-style none | dotted | dashed | solid | double | groove | ridge | inset | outset border-bottom-width thin | medium | thick | n border-left border-width border-style border-color border-left-color couleur couleur couleur couleur border-left-style none | dotted | dashed | solid | double | groove | ridge | inset | outset border-left-width thin | medium | thick | n

121 La marge « margin » est incolore et transparente
Boîtes - Aire de Marge externe : margin margin-top margin-right margin-bottom margin-left margin n | p% | auto margin-top margin-right margin-bottom margin-left Marge haut Marge droite Marge bas Marge gauche Regroupe les propriétés de marge La marge « margin » est incolore et transparente

122 La marge « margin » est incolore et transparente
Boîtes - Combinaison des Marge externe : margin Boîtes en ligne : pas de fusion des marges En CSS2, les marges horizontales ne fusionnent jamais La marge « margin » est incolore et transparente

123 La marge « margin » est incolore et transparente
Boîtes - Combinaison des Marge externe : margin Boîtes bloc : Fusion Les marges verticales de deux boîtes, ou plus, d'éléments de type bloc, placés dans un flux normal fusionnent. La largeur de la marge finale devient la valeur la plus grande entre celles des marges adjacentes. La marge « margin » est incolore et transparente

124 La marge « margin » est incolore et transparente
Boîtes - Combinaison des Marge externe : margin Boîtes bloc : Fusion Dans le cas de marges négatives, on soustrait la plus grande des valeurs des marges négatives adjacentes, en valeur absolue, de la plus grande des marges positives adjacentes. Et s'il n'y pas de marges positives, on déduit de zéro la plus grande des marges négatives, en valeur absolue. La marge « margin » est incolore et transparente

125 La marge « margin » est incolore et transparente
Boîtes - Combinaison des Marge externe : margin Boîtes bloc : Fusion Remarque Les boîtes limitrophes peuvent être générées par des éléments qui n'ont aucune parenté en tant que frères ou ancêtres: Les marges verticales entre une boîte qui flotte et toute autre boîte ne fusionnent pas ; Les marges entre des boîtes absolument et relativement positionnées ne fusionnent pas. La marge « margin » est incolore et transparente

126 La marge « margin » est incolore et transparente
Boîtes bloc - Marges interne et externe margin padding content padding et margin de tous les éléments bloc sont non nuls Par défaut : Par défaut : Bloc : Padding et margin = 0 content … sauf pour <div> padding = 0 et margin = 0 A l’exception de la balise neutre <div>, tous les éléments de type bloc possèdent par défaut des marges internes (padding) et externes (margin) non nulles. Les différents navigateurs leur donnent des valeurs différentes. Soyez donc attentifs à les annuler ou à les expliciter pur éviter les surprises de rendu visuel. La marge « margin » est incolore et transparente

127 Boîtes en ligne - Marges interne et externe
Par défaut : Par défaut : content padding et margin de tous les éléments en ligne sont nuls padding = 0 et margin = 0 En ligne : Padding et margin = 0 Par défaut tous les éléments en ligne ont des marges internes (padding) et externes (margin) nulles. margin padding content Boîtes en ligne, par défaut : pas de padding et pas de margin, donc pas de marge.

128 width et height Comportement des navigateurs avec
la Largeur et la Hauteur de « content » Conditions de Largeur et Hauteur des boîtes selon W3C, respectées par tous les navigateurs sauf par Internet Explorer

129 Appliquons la règle : Constat :
width: 300px; padding: 30px; border: 10px; Constat : Avec tous les navigateurs sauf pour Internet Explorer : Width = 300px = largeur de « content » Avec Internet Explorer : Width = 300px = border-left + border-right + padding-left + pading-right + largeur de « content »

130 Ne marche pas avec Internet Explorer !
margin padding content border 300 px 360 px 380 px Normes et largeur W3C respectées par tous les navigateurs sauf par Internet Explorer Ne marche pas avec Internet Explorer ! Normes et largeur W3C non respectées par les navigateurs Internet Explorer margin padding content 300 px 280 px 220 px width: 300 px; padding: 30px; border: 10px;

131 Une solution parmi d’autres...
Placer la boîte dans une boîte ayant : width: 300px; border: 0px; padding: 0px; ... ou une autre valeur pour width ...

132 Contrôle des Boîtes Flux Position Contrôle du flux Couche Débordement
Rognage ...

133 Le flux du document Les différents éléments HTML (appelés aussi balises ou tag) d’une page Web sont lus séquentiellement par le navigateur du début à la fin de la page HTML, et placés par défaut successivement à l’affichage (écran, imprimante, …) dans le même ordre. Les boîtes correspondantes sont donc placées à l’écran selon le flux de lecture du document.

134 Contrôle des Boîtes : flux, position, couche, débordement, ...
Positionnement position: relative; position: absolute; position: fixed; top right bottom left position: static; float: left; float: right; float: none; float: inherit; Contrôle du flux autour des flottants clear: left; clear: right; clear: both; clear: inherit; clear: none; position: inherit; Couches z-index: auto; z-index: 3; Débordement overflow: hidden; overflow: scroll; overflow: visible; overflow: auto; Rognage clip: rect(haut, droite, bas, gauche); clip: rect(10px, 5px, 20px, 15px);

135 Positionnement, les boîtes sont :
position: static; Positionnée dans le flux courant … float: none; float: inherit; Sortie du flux avec float: left; et float: right; sur la gauche ou sur la droite Contrôle du flux autour des flottants : clear: left; clear: right; clear: both; clear: inherit; clear: none; position: absolute; Sortie du flux Déplacée sélectivement selon les propriétés top, right, bottom et left position: fixed; Sortie du flux Positionnement idem au positionnement absolute. Différence fondamentale : ...la boîte bloc reste immobile sur l’écran lors du défilement de la page avec les ascenseurs. Déplacée sélectivement selon les propriétés top, right, bottom et left position: relative; Positionnée dans le flux courant Déplacée sélectivement selon les propriétés top, right, bottom et left, et reste dans le flux

136 Positionnement, les boîtes sont :
position: static; Positionnée dans le flux courant … float: none; float: inherit; Sortie du flux avec float: left; et float: right; sur la gauche ou sur la droite Contrôle du flux autour des flottants : clear: left; clear: right; clear: both; clear: inherit; clear: none; position: absolute; Sortie du flux Déplacée sélectivement selon les propriétés top, right, bottom et left position: fixed; Sortie du flux Positionnement idem au positionnement absolute. Différence fondamentale : ...la boîte bloc reste immobile sur l’écran lors du défilement de la page avec les ascenseurs. Déplacée sélectivement selon les propriétés top, right, bottom et left position: relative; Positionnée dans le flux courant Déplacée sélectivement selon les propriétés top, right, bottom et left, et reste dans le flux

137 Positionnement des boîtes
position: static; Par défaut le positionnement statique (position: static;) est celui du flux courant. En position static, les boîtes bloc s’affichent l’une sous l’autre et les boîtes en ligne s’affichent l’une à côté de l’autre sur la même ligne. La propriété float associée à position: static; sort la boîte de son flux sur la gauche ou sur la droite : float: left; float: right;

138 Positionnement des boîtes position: static;
1 position: static; 2 3 Soit cinq boîtes bloc (1), (2), (3), (4) et (5) static placées dans le flux, elles sont donc les cinq disposées successivement l’une au-dessous de l’autre. 4 5

139 Positionnement des boîtes position: static;
1 position: static; 2 Soit cinq boîtes bloc (1), (2), (3), (4) et (5) static placées dans le flux, elles sont donc les cinq disposées successivement l’une au-dessous de l’autre. 3 4 5

140 Positionnement des boîtes position: static; float: left;
1 position: static; float: left; 2 Attribuons les déclarations suivantes à la boîtes (2) : 3 position: static; /* valeur par défaut */ float: left; La boîte bloc (2) concernée prend d’abord sa place dans le flux courant, sous la boîte bloc (1) puis est plaquée à gauche. Pour les boîtes (3), (4) et (5) qui la suivent, la boîte bloc (2) est extraite du flux. 4 La boîte bloc (3) est placée au-dessous de la boîte bloc (1) et sous la boîte bloc (2), les boîtes (4) et (5) lui « emboîtent le pas ». 5

141 Observez l’écoulement autour du flan droit de la boîte (2)
Positionnement des boîtes 1 position: static; float: left; 2 3 Observez l’écoulement du texte de la boîte (3) autour du flan droit de la boîte (2) 4 5

142 Observez l’écoulement autour du flan droit de la boîte (2)
Positionnement des boîtes 1 position: static; float: left; 2 3 Rappel : position: static; /* valeur par défaut */ float: left; 4 La boîte bloc (2) concernée prend d’abord sa place dans le flux courant, sous la boîte bloc (1) puis est plaquée à gauche. Pour les boîtes (3), (4) et (5) qui la suivent, la boîte bloc (2) est extraite du flux. 5 Observez l’écoulement du texte de la boîte (3) autour du flan droit de la boîte (2) La boîte bloc (3) est placée au-dessous de la boîte bloc (1) et sous la boîte bloc (2), les boîtes (4) et (5) lui « emboîtent le pas ».

143 Pour la boîte (2) fixons :
position: static; float: left; Margin-left: 50%; (2) (3) Pour la boîte (2) fixons : width: 50%; Pour la boîte (3) ajoutons : Margin-left: 50%; 1 3 Conséquence : le « content » de la boîte (3) est déplacé à droite d’une longueur égale à la largeur de la boîte (2). 2 4 5

144 Pour la boîte (2) fixons :
position: static; float: left; Margin-left: 50%; (2) (3) Pour la boîte (2) fixons : width: 50%; Pour la boîte (3) ajoutons : Margin-left: 50%; 1 Conséquence : le « content » de la boîte (3) est déplacé à droite d’une longueur égale à la largeur de la boîte (2). 2 3 4 Observer le débordement à droite du texte de la boîte (4). Pour traiter ce problème, il faut utiliser la propriété « overflow ». 5

145 … pour la boîte (4), ajoutons la déclaration :
position: static; float: left; Margin-left: 50%; (2) (3) clear: both; (4) 1 … pour la boîte (4), ajoutons la déclaration : clear: both; ce qui place la boîte (4) sous les boîtes (2) et (3). 3 2 4 5

146 position: static; float: left; Margin-left: 50%; clear: both;
(2) (3) clear: both; (4) 1 … pour la boîte (4), ajoutons la déclaration : clear: both; ce qui place la boîte (4) sous les boîtes (2) et (3). 2 3 4 5

147 Positionnement, les boîtes sont :
position: static; Positionnée dans le flux courant … float: none; float: inherit; Sortie du flux avec float: left; et float: right; sur la gauche ou sur la droite Contrôle du flux autour des flottants : clear: left; clear: right; clear: both; clear: inherit; clear: none; position: absolute; Sortie du flux Déplacée sélectivement selon les propriétés top, right, bottom et left position: fixed; Sortie du flux Positionnement idem au positionnement absolute. Différence fondamentale : ...la boîte bloc reste immobile sur l’écran lors du défilement de la page avec les ascenseurs. Déplacée sélectivement selon les propriétés top, right, bottom et left position: relative; Positionnée dans le flux courant Déplacée sélectivement selon les propriétés top, right, bottom et left, et reste dans le flux

148 position: relative; Positionnement des boîtes top: 50px; left: 40px;
1) top: 30px; right: 60px; 2) bottom: 70px; left: 20px; 3) 4) bottom: 40px; right: 80px; Avec la déclaration « position: relative; » et l’une des quatre déclarations ci-dessus, la boîte prend d’abord sa place dans le flux courant, elle est ensuite déplacée sélectivement selon les propriétés top, right, bottom et left et reste dans le flux.

149 position: relative; Soit cinq boîtes bloc (1), (2), (3), (4) et (5) static dans le flux, elles sont donc disposées les cinq successivement l’une au-dessous de l’autre.

150 position: relative; top: 80px; left: 60px;
1 top: 80px; left: 60px; 2 Attribuons les déclarations suivantes à la boîte (3) : position: relative; left: 60px; top: 80px; La boîte bloc (3) concernée prend d’abord sa place dans le flux courant, au-dessous de la boîte bloc (2) dans le flux qui la précède puis est déplacée 60 pixels vers la droite et 80 pixels vers le bas, mais elle reste dans le flux. Les boîtes (4) et (5) qui la suivent, conservent leur position initiale. 3 4 5

151 position: relative; top: 80px; left: 60px;
1 top: 80px; left: 60px; 2 Attribuons les déclarations suivantes à la boîte (3) : position: relative; left: 60px; top: 80px; La boîte bloc (3) concernée prend d’abord sa place dans le flux courant, au-dessous de la boîte bloc (2) dans le flux qui la précède puis est déplacée 60 pixels vers la droite et 80 pixels vers le bas, mais elle reste dans le flux. Les boîtes (4) et (5) qui la suivent, conservent leur position initiale. 3 4 5

152 Positionnement, les boîtes sont :
position: static; Positionnée dans le flux courant … float: none; float: inherit; Sortie du flux avec float: left; et float: right; sur la gauche ou sur la droite Contrôle du flux autour des flottants : clear: left; clear: right; clear: both; clear: inherit; clear: none; position: absolute; Sortie du flux Déplacée sélectivement selon les propriétés top, right, bottom et left position: fixed; Sortie du flux Positionnement idem au positionnement absolute. Différence fondamentale : ...la boîte bloc reste immobile sur l’écran lors du défilement de la page avec les ascenseurs. Déplacée sélectivement selon les propriétés top, right, bottom et left position: relative; Positionnée dans le flux courant Déplacée sélectivement selon les propriétés top, right, bottom et left, et reste dans le flux

153 position: absolute; Positionnement des boîtes top: 50px; left: 40px;
1) top: 30px; right: 60px; 2) bottom: 70px; left: 20px; 3) 4) bottom: 40px; right: 80px; Avec la déclaration « position: absolute; » et l’une des quatre déclarations ci-dessus, la boîte est sortie du flux et placée sélectivement selon les propriétés top, right, bottom et/ou left.

154 position: absolute; top: 30px; left: 40px;
Les quatre boîtes bloc (1), (2), (4) et (5) static sont placées dans le flux, elles sont donc disposées les quatre successivement l’une au-dessous de l’autre. La boîte bloc (3) est sortie du flux avec la déclaration : position: absolute; Elle est placée à 40 pixels de la gauche et 30 pixels du haut de son bloc conteneur avec les déclarations : left: 40px; top: 30px;

155 position: absolute; top: 30px; left: 40px;
1 position: absolute; 3 top: 30px; left: 40px; 2 Attribuons les déclarations suivantes à la boîte (3) : position: absolute; left: 40px; top: 30px; La boîte bloc (3) concernée est sortie du flux et placée à 40 pixels de la gauche et 30 pixels du haut de son bloc conteneur. Les boîtes (4) et (5) qui la suivent se placent dans le flux. 4 5

156 position: absolute; top: 30px; left: 40px;
1 position: absolute; top: 30px; left: 40px; 3 Attribuons les déclarations suivantes à la boîte (3) : position: absolute; left: 40px; top: 30px; La boîte bloc (3) concernée est sortie du flux et placée à 40 pixels de la gauche et 30 pixels du haut de son bloc conteneur. Les boîtes (4) et (5) qui la suivent se placent dans le flux. 2 4 5

157 Positionnement, les boîtes sont :
position: static; Positionnée dans le flux courant … float: none; float: inherit; Sortie du flux avec float: left; et float: right; sur la gauche ou sur la droite Contrôle du flux autour des flottants : clear: left; clear: right; clear: both; clear: inherit; clear: none; position: absolute; Sortie du flux Déplacée sélectivement selon les propriétés top, right, bottom et left position: fixed; Sortie du flux Positionnement idem au positionnement absolute. Différence fondamentale : ...la boîte bloc reste immobile sur l’écran lors du défilement de la page avec les ascenseurs. Déplacée sélectivement selon les propriétés top, right, bottom et left position: relative; Positionnée dans le flux courant Déplacée sélectivement selon les propriétés top, right, bottom et left, et reste dans le flux

158 Ne marche pas avec Internet Explorer !
Positionnement des boîtes Ne marche pas avec Internet Explorer ! position: fixed; top: 60px; left: 50px; Reprenons les 5 boîtes précédentes. Ce positionnement fixed est le même que pour le positionnement absolute vu précédemment, … avec comme différence fondamentale : ...la boîte bloc (3) reste immobile sur l’écran lorsque l’on fait défiler la page avec l’ascenseur vertical.

159 Ne marche pas avec Internet Explorer !
Positionnement des boîtes Ne marche pas avec Internet Explorer ! position: fixed; top: 60px; left: 50px; Les quatre boîtes bloc (1), (2), (4) et (5) static sont placées dans le flux, elles sont donc disposées les quatre successivement l’une au-dessous de l’autre. La boîte bloc (3) est sortie du flux avec la déclaration : position: fixed; Elle est placée à 50 pixels de la gauche et 60 pixels du haut de son bloc conteneur avec les déclarations : left: 50px; top: 60px;

160 Lors du défilement vertical de la page, la boîte (3) reste immobile !
position: fixed; Ne marche pas avec Internet Explorer ! top: 60px; left: 50px; Appliquons les déclarations suivantes à la boîte (3) : position: fixed; left: 50px; top: 60px; 1 3 la boîte bloc (3) concernée est sortie du flux et est placée à 50 pixels de la gauche et 60 pixels du haut de son bloc conteneur. 2 Les boîtes (4) et (5) qui la suivent se placent dans le flux. Lors du défilement vertical de la page, la boîte (3) reste immobile ! 4

161 Lors du défilement vertical de la page, la boîte (3) reste immobile !
position: fixed; Ne marche pas avec Internet Explorer ! top: 60px; left: 50px; Appliquons les déclarations suivantes à la boîte (3) : position: fixed; left: 50px; top: 60px; 2 3 la boîte bloc (3) concernée est sortie du flux et est placée à 50 pixels de la gauche et 60 pixels du haut de son bloc conteneur. Les boîtes (4) et (5) qui la suivent se placent dans le flux. 4 Lors du défilement vertical de la page, la boîte (3) reste immobile ! 5

162 Lors du défilement vertical de la page, la boîte (3) reste immobile !
position: fixed; Ne marche pas avec Internet Explorer ! top: 60px; left: 50px; Appliquons les déclarations suivantes à la boîte (3) : position: fixed; left: 50px; top: 60px; 1 la boîte bloc (3) concernée est sortie du flux et est placée à 50 pixels de la gauche et 60 pixels du haut de son bloc conteneur. fixed; Les boîtes (4) et (5) qui la suivent se placent dans le flux. 3 2 Lors du défilement vertical de la page, la boîte (3) reste immobile ! 4 5

163 Lors du défilement vertical de la page, la boîte (3) reste immobile !
position: fixed; Ne marche pas avec Internet Explorer ! top: 60px; left: 50px; Appliquons les déclarations suivantes à la boîte (3) : position: fixed; left: 50px; top: 60px; 1 la boîte bloc (3) concernée est sortie du flux et est placée à 50 pixels de la gauche et 60 pixels du haut de son bloc conteneur. 2 fixed; Les boîtes (4) et (5) qui la suivent se placent dans le flux. 3 4 Lors du défilement vertical de la page, la boîte (3) reste immobile ! 5

164 Positionnement de boîtes bloc pour un site au design FLUID (%)
"En-tête, 3 colonnes, Pied de page"

165 Positionnement des boîtes bloc élémentaires
Site au design FLUID : En-tête, 3 colonnes, Pied de page Positionnement des boîtes bloc élémentaires

166 <!-- .entete { position: static; padding: 0px; margin: 0px; height: auto; width: 100%; background-color: #CCFFCC; } .gauche { width: 25%; background-color: #FFBEEB; .droite { background-color: #FFFF66; .centre { width: 50%; background-color: #33FFFF; .pieddepage { background-color: #9BDAA7; --> </style>

167 <body> <div class="entete"> <pre> .entete { position: static; padding: 0px; margin: 0px; height: auto; width: 100%; background-color: #CCFFCC; } </pre> </div> <div class="gauche"> .gauche { width: 25%; background-color: #FFBEEB; <div class="centre"> .centre { width: 50%; background-color: #33FFFF; <div class="droite"> <pre> .droite { position: static; margin: 0px; padding: 0px; width: 25%; background-color: #FFFF66; } </pre> </div> <div class="pieddepage"> .pieddepage { height: auto; width: 100%; background-color: #9BDAA7; </body>

168

169

170 <div class="entete">
<pre> </pre> </div>

171 <div class="gauche">
<pre> </pre> </div>

172 <div class="droite">
<pre> </pre> </div>

173 <div class="centre">
<div class="contenu"> <pre> </pre> </div>

174 <div class="pieddepage">
<pre> </pre> </div>

175 <div class="entete">
<pre> </pre> </div> <div class="centre"> <div class="contenu"> <pre> </pre> </div> <div class="gauche"> <pre> </pre> </div> <div class="droite"> <pre> </pre> </div> <div class="pieddepage"> <pre> </pre> </div>

176 Positionnement des boîtes bloc élémentaires
Inclusions de boîtes Propriété overflow : hidden, scroll, visible ou auto

177 <div class="entete">
<pre> </pre> </div>

178 <div class="gauche">
<div class="contenugauche"> <pre> </pre> </div>

179 <div class="droite">
<div class="contenudroite"> <pre> </pre> </div>

180 <div class="centre">
<div class="contenucentre"> <pre> </pre> </div>

181 <div class="pieddepage">
<pre> </pre> </div>

182 <div class="entete">
<pre> </pre> </div> <div class="droite"> <div class="contenudroite"> <pre> </pre> </div> <div class="gauche"> <div class="contenugauche"> <pre> </pre> </div> <div class="centre"> <div class="contenucentre"> <pre> </pre> </div> <div class="pieddepage"> <pre> </pre> </div>

183 aux plans du HTML et des CSS
Résumé du Template 3 colonnes de Michael Meadhra Les points essentiels aux plans du HTML et des CSS

184 body margin: 0px; padding: 0px;

185 header navcol main sidecol foot

186 header height: 60px; Margin: 0px; navcol main sidecol width: 130px; float: left; margin-left: 160px; margin-right: 160px; width: 130px; float: right; foot clear: both;

187 header height: 60px; Margin: 0px; navcol main sidecol width: 130px; float: left; margin-left: 160px; margin-right: 160px; width: 130px; float: right; <body> <div id="header">En tete</div> <div id="navcol">Colonne gauche</div> <div id="sidecol">Colonne droite</div> <div id="main"> Colonne centrale</div> <div id="foot">Pied de Pge</div> </body> foot clear: both;

188 aux plans du HTML et des CSS
Variante 1 du Template 3 colonnes de Michael Meadhra Les points essentiels aux plans du HTML et des CSS

189 margin-top: 0px; margin-left: 250px; margin-right: 250px; width: 220px; float: right; width: 220px; float: left; clear: both;

190

191 margin-top: 0px; width: 220px; float: left; margin-left: 250px; margin-right: 250px; width: 220px; float: right; clear: both;

192 aux plans du HTML et des CSS
Variante 2 du Template 3 colonnes de Michael Meadhra Les points essentiels aux plans du HTML et des CSS

193

194

195 Div 1 Div 2 Div 3 Div 4 Div 5

196 Div 1 Div 2 Div 3 Div 4 Div 5 margin: 0px; height: auto; width: 100%
position: static; margin: 0px; float: left; position: static; width: 25%; margin: 0px; 25%; float: right; width: 220px; position: static; Div 4 Div 5 clear: both; height: auto; width: 100%

197 overflow: scroll; width: auto; Div 4

198 overflow: scroll; width: auto; overflow: scroll; width: auto; overflow: scroll; width: auto;