Feuilles de Styles en Cascade CSS : C ascading S tyle S heets CSS2 : Les feuilles de style en...

Feuilles de Styles en Cascade

CSS : Cascading Style Sheets

CSS2 : Les feuilles de style en cascade, niveau 2http://www.yoyodesign.org/doc/w3c/w3c.html#css2

Une référence importante :

François Daniel Giezendanner, SEM (Service Ecoles-Medias) - DIP - Genève, 5 rue des Gazomètres, 1205 CH-GenèveFrançois Daniel Giezendanner, SEM (Service Ecoles-Medias) - DIP - Genève, 5 rue des Gazomètres, 1205 CH-Genève

Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch - http://icp.ge.ch/sem/cms-spip/Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch - http://icp.ge.ch/sem/cms-spip/

Cours « CSS » - Mardi 3 février 2009, 8h00-18h00 et Mardi 17 février 2009, 13h30-1800Cours « CSS » - Mardi 3 février 2009, 8h00-18h00 et Mardi 17 février 2009, 13h30-1800

Préambule A

Avantages des Feuilles de styles en cascade (CSS)

• Diversification des feuilles de styles pour s'adapter à plusieurs équipements de sortie : affichage à l'écran, impression, vocal, etc.

• Code HTML de la page allégé et plus « lisible » donc diminution du poids et du temps de chargement.

• Homogénéisation de l'aspect visuel d'un site web.

• Mise en page HTML, XHTML et XML sophistiquée.

• 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.

• 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)

Infinité de mises en pages riches et diversifiées : Cf. css Zen Gardenhttp://www.mezzoblue.com/zengarden/alldesigns/ 7 avril 2008 : 209 mises en pages diffférentes

• Les couleurs et leur « codage »• Les unités de mesure

Rappel sur :

… utilisées avec les CSS

Préambule B

Il existe cinq manières de spécifier les valeurs d’une couleur avec les CSS

#rrggbb 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 <= <= 100.00%

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

#rgb r, g et b : hexadécimal = 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f

Attention avec les CSS : balises, sélecteurs, classes, identifiant, valeurs … en minuscule

Unités de couleur CSS

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.

rgb(rrr,ggg,bbb) Une valeur RGB (ex : rgb(0,255,128) )

rgb(rrr.rr%,ggg.gg%,bbb.bb%) Valeur RGB en % ( ex : rgb(0%, 77.5%,0%) )

#rrggbb Un nombre hexadécimal ( ex : #aa00ff )

Unité Description

#rgb Notation abrégée de rrggbb ( ex : #a0f )

Attention avec les CSS : balises, sélecteurs, classes, identifiant, valeurs … en minuscule

Valeur Couleur Hexadec Hexa court RGB % black Noir #000000 #000 0,0,0 0%,0%,0% silver Argent #C0C0C0 192,192,192 75.5%,75.4%,75.4% gray Gris #808080 128,128,128 50%,50%,50% white Blanc #FFFFFF #FFF 255,255,255 100%,100%,100% maroon Marron #800000 128,0,0 50%,0%,0% red Rouge #FF0000 #F00 255,0,0 100%,0%,0% purple Violet #800080 128,0,128 50%,0%,50% fuchsia Lilas #FF00FF #F0F 255,0,255 100%,0%,100% Valeur Couleur Hexadec Hexacourt RGB % green Vert #008000 0,128,0 0%,50%,0% lime Vertclair #00FF00 #0F0 0,255,0 0%,100%,0% olive Vertolive #808000 128,128,0 50%,50%,0% yellow Jaune #FFFF00 #FF0 255,255,0 100%,100%,0% navy Bleumarine #000080 0,0,128 0%,0%,50% blue Bleu #0000FF #00F 0,0,255 0%,0%,100% teal Cyanfoncé #008080 0,128,128 0.50%,50% cyan Cyan #00FFFF #0FF 0,255,255 0,100%,100%

16 couleurs désignées par leur nom en langue anglaise (code hexadécimal simple)

Mots/clés (keywords) et couleurs standards W3C

Mots/clés (keywords) et couleurs standards W3C Couleurs non web-safeCouleurs non web-safe

Couleurs web-safeCouleurs web-safe

Couleurs non web-safeCouleurs non web-safe

ValeurCouleur Hexadec Hexa court

orange

#FF6600F60

255,102,0100%,40%,0%

Certains auteurs mentionnent également la couleur orange

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, FFExemples : #66CC99, #FF3366, #0099CC, ...Hexadec : multiples de 33 : triplets de 00, 33, 66, 99, CC, FFExemples : #66CC99, #FF3366, #0099CC, ...

RGB : multiples de 51: 0, 51, 102, 153, 204 et 255Exemples : rgb(51,0,153), rgb(102,204,51), rgb(255,102,153), ...RGB : multiples de 51: 0, 51, 102, 153, 204 et 255Exemples : 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%), ...% : multiples de 20% : 0%, 20%, 40%, 60%, 80%, 100%Exemples : rgb(60%,20%,80%), rgb(100%, 40%, 0%), ...

Hexa court : multiples de 3 : triplets de 0, 3, 6, 9, C, FExemples : #6C9, #F36, #09C, ...Hexa court : multiples de 3 : triplets de 0, 3, 6, 9, C, FExemples : #6C9, #F36, #09C, ...

… mais en 2008, existe-t’il encore des cartes graphiques limitées à 256 couleurs ?

Mots/clés (keywords) et couleurs NON standards W3C

Sur le site Web-Wise-Wizard, à la page « HTML Web Color Names (http://web-wise-wizard.com/html-tutorials/html-web-rgb-hex-color-names.html), Gilbert Hadley fait état :

On trouve de nombreuses pages sur le web présentant et discutant cette liste de couleurs « non standards », par exemple w3schools (Http://www.w3schools/css/css_colorname.asp)

Différences d’affichage de couleurs

à l’écran

entrele code hexadécimal etle 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.

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#800080 = purple#808080 = grayetc.

yellowpurplegray

http://web-wise-wizard.com/html-tutorials/html-web-rgb-hex-color-names.html

Http://www.w3schools/css/css_colorname.asp

• Les unités de mesure ...

Rappel sur :

… utilisées avec les CSS

Préambule C

Valeurs Description

Unités de mesure CSS

Unité Exemple

esPourcentage par rapport à une référence (taille de

police d’une boîte bloc, fenêtre, calque, cellule, etc.)% 25%entière

Inch (1 inch = 1 pouce = 2.54 cm)in 3inréelle

Centimètrecm 10cmentière

Millimètremm 5mmentière

L’unité est la largeur de la lettre M (majuscule)em 2.5emréelle

L’unité est la hauteur de la lettre x (minuscule)ex 0.5exréelle

Point typo (1 pt = 1/72 inch, 1/12 pica)pt 14pt

entière

Pica (12 points, 1/6 pouce)pc 12pcréelle

Pixel (un point sur l’écran de l’ordinateur)px 200pxentière

Attention avec les CSS : balises, sélecteurs, classes, identifiant, valeurs, unités …

sont écrits en minuscule

• 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é.

Préambule D

Doctype –DTD

Définition de Type de Document

Doctype –DTD – Définition de Type de Document

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""http://www.w3.org/TR/html4/strict.dtd"><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""http://www.w3.org/TR/html4/lose.dtd"><html>

3) DTD Frameset : utilisée lorsque le document HTML comporte aussi des cadres :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""http://www.w3.org/TR/html4/frameset.dtd"><html>

En HTML, trois DTD possibles prennent en charge la gestion des CSS :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><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""http://www.w3.org/TR/html4/lose.dtd"><html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""http://www.w3.org/TR/html4/frameset.dtd"><html>

Préférée pour cause de confort.

Porte bien son nom,Assez difficile

à atteindre.

Porte bien son nom,Assez difficile

à atteindre.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0//EN""http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0//EN""http://www.w3.org/TR/xhtml1/DTD/ 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""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

En XHTML, trois DTD possibles prennent en charge la gestion des CSS:

Pensez aux équivalences, Pensez aux équivalences, correspondances & inter-relations :correspondances & inter-relations :

Boîtes Boîtes imbriquéesimbriquées

Hiérarchie Hiérarchie arborescente des arborescente des balises HTMLbalises HTML

Feuilles de styles en cascade

CSS : Cascading Style Sheets

Fichier HTMLFichier HTMLStructure logique du

document, sémantique

Règles CSSRègles CSSMise en page

design

HTML et CSS pour séparer le fond et la forme

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"><html>

<head> <title>css Zen Garden: The Beauty in CSS Design</title>

<body>

</body></html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"><html>

<head> <title>css Zen Garden: The Beauty in CSS Design</title>

<body>

</body></html>

css Zen Garden: The Beauty in CSS Design [1/6]

Arbre du document et degré de parenté des élémentshttp://p7app.geneve.ch:8007/spip/article.php3?id_article=160

Extrait d’un codedu site

css Zen Garden

<div><div><div><h1><span>css Zen Garden</span></h1><h2><span>The Beauty of CSS Design</span></h2></div><div><p><span> …</span></p><p><span> …<a>…</a></span></p></div><div><h3><span>…</span></h3><p><span> …</span></p><p><span> …</span></p></div></div><div><div><div><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></div></div></div></div>

css Zen Garden

[2/6]css Zen Garden

<div> <div> <div> <h1><span>css Zen Garden</span></h1> <h2><span>The Beauty of CSS Design</span></h2> </div>

<div> <div> <div> <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> </div> </div> </div></div>

css Zen Garden

[3/6]css Zen Garden

</html>

</body>

[4/6]css Zen Garden

Notes préliminaires et Définition

Elément : Couple ouvert et fermé d’une balise HTML :

Exemples : <p> … </p><h1> … </h1><span> … </span><div> … </ div ><pre> … </ pre >…

<p> … </p><h1> … </h1><span> … </span><div> … </ div ><pre> … </ pre >…

• 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

Les balises vides sont explicitées :

Exemples : <br> devient <br /><hr id=« top »> devient <hr id="top" /> , etc. <br> devient <br /><hr id=« top »> devient <hr id="top" /> , etc.

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.

Définition des styles

• Ces caractéristiques sont appelées propriétés ou attributs.• Ces caractéristiques sont appelées propriétés ou attributs.

Exemples de propriétés : • text-align• color• background-color• font-size• …

Propriétés ou attributs des styles

Définir un style consiste à préciser la valeurvaleur d'une ou de plusieurs propriétés pour un élément HTML donné.Exemple de valeur pour text-align :

Propriété, valeur, déclaration, liste et bloc de déclarations

• Le binôme propriété:valeurvaleur constitue une déclaration ou définition, c’est une instruction de mise en page.

• L'ensemble propriété1:valeur1valeur1; propriété2:valeur2valeur2; constitue une liste de déclarations.

• La liste de déclarations placée entre accolades s’appelle bloc de déclaration : { propriété1:valeur1valeur1; propriété2:valeur2valeur2; }

• text-align: leftleft;• text-align: rightright;• text-align: justifyjustify;• text-align: centercenter;

Règle de styleRègle de style = = SélecteursSélecteurs + + bloc de déclaration(s)bloc de déclaration(s)

• Feuille de style = jeux de Règles de styleRègles de style qui précisent l’affichage des

éléments HTML.

• Feuille de style = jeux de Règles de styleRègles de style qui précisent l’affichage des

éléments HTML.

Le sélecteur peut être : • un élément HTML • une classe • une pseudo-classe• un identifiant ID

bloc de déclaration(s)

règle de style CSSrègle de style CSS

sélecteur { propriété1: valeur1; propriété2: valeur2; }

Chaque règle de style CSSrè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).

.colonnegauche {margin: 0px;padding: 0%;float: left;position: static;background-color: #FFBEEB;width: 25%;text-align: left;

Bloc de déclarationsRègle CSSS

rListe de déclarations

Propriété Valeur Déclaration

.gauche {margin: 0px;padding: 0%;float: left;position: static;background-color: #FFBEEB;width: 25%;text-align: left;

}.droite {

background-color: #FFFF66;margin: 0px;padding: 0%;float: right;width: 25%;text-align: left;position: static;

Règle 1

Règle 2

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.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 CSS; @import 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.

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.

1. Style en ligne (intra-ligne ou incorporé) [1/1]

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

<élément style="propriété: valeur">

Exemple :

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.

2. Feuille de style incorporée (interne ou globale) [1/2]

</style>

</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 »

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>

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

Exemple :

2. Feuille de style incorporée (interne ou globale) [2/2]

Une feuille de style externe liée est un fichier de texte à extension .css, qui contient la liste des règles CSS.

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).

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.

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.

3. Feuille de style externe liée [1/3]

Ce fichier permet de grouper les styles de plusieurs pages HTML, voire d'un site Web entier.

Par exemple :

Il existe 2 manières d'appliquer une feuille de style externe : • sous forme liée ou • sous forme importée.

Des commentaires peuvent être ajoutés dans la feuille de stylesous la forme :

Il faut alors définir une classe spéciale par exemple pour aligner le paragraphe à gauche pour cette classe :

Une feuille de style globale ou liée peut définir la justification de tout paragraphe, mais ce choix est inopportun dans certains cas.

body {background-image: url(image.gif);}p {text-align: justify;}body {background-image: url(image.gif);}p {text-align: justify;}

p.gauche {text-align:left;}p.gauche {text-align:left;}

/* commentaires *//* commentaires */

…suite :

C'est la technique la plus courante. Dans le document HTML, on ajoute à l'intérieur de la partie HEAD :

…suite :

• Une directive @import 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.

4. Feuille de style externe importée (directive @import ou at-rules)

@import url(http://www.univ-mlv.fr/dossier/mafeuille1.css);@import url(dossier/mafeuille2.css);p {text-align: justify};

• On peut trouver plusieurs @import à placer toujours au début des définitions, avant les autres règles CSS.

• L'url peut être encadrée ou non de guillemets simples ou doubles.

@import url(url);@import url(url);

La règle de style CSS associe un bloc de déclaration(s) à un sélecteur.Le sélecteur peut être :

Sélecteurs

• Sélecteurs simples basés sur des éléments de balises HTML• Regroupement de sélecteurs simples• Sélecteurs contextuels• Classes• Identifiants• Pseudo-classes

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.

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.

Sélecteurs d’élément :

Exemples de sélecteurs d’éléments (sélecteurs simples) :h2 {color: red} span {background-color: red; color: white}p {color: blue}

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.

Sélecteurs universel * :

Par exemples, pour que tous les éléments soient en bleu:* {color: blue}

Les balises qui ont les mêmes propriétés peuvent être regroupées en les séparant par une virgule.

Regroupement de sélecteurs simples

Ces 3 lignes peuvent être groupées en une seule :

h1 {color:red}h2 {color:red}strong {color:red}

h1, h2, strong {color:red}h1, h2, strong {color:red}

Les déclarations sont généralement regroupées dans une seule règle.

Regroupement de déclarations

Ces 3 lignes sont généralement groupées

en une seule :

h1 {color: purple;}h1 {font: 20px Helvetica;}h1 {backgroud: aqua;}

h1 {color: purple; font: 20px Helvetica backgroud: aqua;}h1 {color: purple; font: 20px Helvetica backgroud: aqua;}

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.

Tout regrouper

h1, h2, h3, h4, h5, h6 {color: blue; background: #F5F5DC; padding: 0.5em; border: 2px solid red; font-family: Impact, san-serif;}h1, h2, h3, h4, h5, h6 {color: blue; background: #F5F5DC; padding: 0.5em; border: 2px solid red; font-family: Impact, san-serif;}

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, {......

... Préférable à tout écrire, ce qui donnerait :

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 :

Sélecteurs de Classes

la classe peut être appliquée à différentes balises,par exemple : p, div, span.

la classe concerne une balise précise, la balise p.

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.

Un style peut alors être défini pour cette classe de balise, dans une feuille de style incorporée ou externe.

<p class="intro">texte d'introduction</p><p class="intro">texte d'introduction</p>

p.intro {color:red}p.intro {color:red}

.intro {color:red}.intro {color:red}

Alors qu'une classe peut concerner plusieurs éléments du document, un identifiant concerne un élément unique.

Sélecteurs d’Identifiants

p#nom_id {color:red}#nom_id {color:red}p#nom_id {color:red}#nom_id {color:red}

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.

Un style peut alors être défini pour cette balise précise, dans une feuille de style incorporée ou externe.

<p id="nom_id">Texte</p><p id="nom_id">Texte</p>

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.

Les pseudo-classes et les pseudo-éléments créent des mécanismes ou des relations qui ne sont pas réalisables en HTML.

…sans que cela apparaisse dan le code du document HTML.

Sélecteurs de Pseudo-classes et de pseudo-éléments [1/7]

• 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.

Ces sélecteurs permettent de créer des règles CSS qui :

Un ensemble d'éléments HTML qui répondent à un même critère de contexte peuvent former une pseudo-classe.

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

Ils peuvent être associés à un élément :

: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

: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 sont spécifiés par l'ajout de deux points dans la feuille de style :

Sélecteurs de Pseudo-classes [2/7]

Recommandation : déclarer les pseudo-classes :link, :visited, :hover et :active dans l’ordre précis suivant, seul à garantir leur correcte interprétation :

Sélecteurs de Pseudo-classes [3/7]

Moyen mnémotechnique :

LoVe HAte (amour-haine)

évite le soulignement de l'hypertexte standard.

Sélecteurs de Pseudo-classes - Exemples [4/7]

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.

le premier élément enfant (ex: p) sera en italique, mais pas les suivants.

évite le soulignement de tous les types d'hypertexte.

a:link {text-decoration: none}a:link {text-decoration: none}

a {text-decoration: none}a {text-decoration: none}

div:first-child {font-style: italic}div:first-child {font-style: italic}

:firts-letter et :first-line

Sélecteurs de pseudo-éléments [5/7]

• :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.

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 :

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

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

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

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

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 :

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

.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>

Classes multiples [1/2]

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 :

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.

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

Classes multiples [2/2]

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 :

• Les éléments situés dans une balise strong, elle-même contenue dans un paragraphe p, seront mis en rouge.

Sélecteurs contextuels - Sélecteur de descendant

Les sélecteurs contextuels associent une règle à un élément en fonction de sa situation dans une ou plusieurs autre(s) balise(s).

p strong {color: red}p strong {color: red}

• 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.

Créer des règles qui ne fonctionnent qu’avec certaines structures

Sélecteur de Descendant, d’Enfant, de Frère

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.

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.

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.

Créer des règles qui ne fonctionnent qu’avec certaines structures

Sélecteurs de Descendant, d’Enfant, de Frère

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

Enfant :h3 > span {color: red;}Cette règle met en rouge le texte des éléments span enfants d’un élément h3.

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.

Descendant : p a {color: violet;} Cette règle met en violet le texte des éléments a descendants d’un élément p.

Commentaires CSS

Les commentaires CSS sont entourés par /* et */ Les commentaires CSS sont entourés par /* et */

/* Ceci est un commentaire CSS sur une ligne */

/* Ceci est un commentaire CSS sur la première ligneUn autre commentaire sur la deuxième ligneEt encore un commentaire sur la troisième ligne. */

Les commentaires peuvent occuper plusieurs lignes : Les commentaires peuvent occuper plusieurs lignes :

Background / Arrière-plan

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.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.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.

On peut spécifier l’arrière plan d’un élément (boîte) comme étant une couleur ou bien une image.On peut spécifier l’arrière plan d’un élément (boîte) comme étant une couleur ou bien une image.

body { background: url(http://style.com/granit.png) }

Background / Arrière-plan

• background-color

• background-image

• background-repeat

• background-attachment

• background-position

• background

• background-color

• background-image

• background-repeat

• background-attachment

• background-position

• background

Background-color

Cette propriété attribue la couleur du fond de la boîte (élément).

#rrggbb, #rgb, rgb(rrr.rr%,ggg.gg%,bbb.bb%)rgb(rrr,ggg,bbb)mot-clétransparent

Propriété :

Valeur :

background-colorbackground-color

#cc88ee ou #fa82b3#c8ergb(30%,70%,77.5%)rgb(128,255,60)cyantransparent

Exemple :

background-color: #FFDFFF;Exemple :

background-color: #FFDFFF;

Background-image

Cette propriété insère une image (jpg, gif ou png) en mosaïque dans le fond de la boîte.

url(nom-image.jpg)url(nom-image.gif)url(nom-image.png)none

Propriété :

Valeur :

background-imagebackground-image

Exemple :

background-image: url(image_Chat/chat_500.png);Exemple :

background-image: url(image_Chat/chat_500.png);

Background-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.

repeat;repeat-x;repeat-y;no-repeat;

Propriété :

Valeurs :

background-repeatbackground-repeat

Identique à Background-imageRé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;

Exemples :

background-repeat: repeat;background-repeat: repeat-x;background-repeat: repeat-y;background-repeat: no-repeat;

La propriété « background-attachment » permet de fixer une image de fond.

Background-attachment

background-attachment: fixed;background-attachment: fixed;

Avec la valeur « scroll » : l’image défile en même temps que le document.

Avec la valeur « fixed » : l’image ne défile pas avec l'espace de visualisation.

background-attachment: scroll;background-attachment: scroll;Exemples :

Exemples :

Deux valeurs possibles : fixed et scroll

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 (*).

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;

Propriété :

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.

Background-positionBackground-position

1) Background-position: 30px 50px; 2) Background-position: 25% 40%;3) Background-position: center right;

Trois exemples :

(*) à précéder de Background-image: url(image1.png); et Background-position: no-repeat;

longueur longueurPour 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.

Background-position [2/4]

longueur longueurtop left et left topIdentique à '0% 0%' ;top, top center et center topIdentique à '50% 0%';right top et top rightIdentique à '100% 0%' ;left, left center et center leftIdentique à '0% 50%' ;center et center centerIdentique à '50% 50%' ;right, right center etcenter rightIdentique à '100% 50%' ;bottom left et left bottomIdentique à '0% 100%' ;bottom, bottom center et center bottomIdentique à '50% 100%' ;bottom right et right bottomIdentique à '100% 100%'.

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 positionhorizontale.

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.

background-image: url(image_Chat/chat_500.png);background-repeat: no-repeat;background-position: 200px 150px;

Exemples :

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

.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 :<pre class="text-jaune">background-repeat: no-repeat;</pre>

</p></div></body>

<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 :<pre class="text-jaune">background-repeat: no-repeat;</pre>

</p></div></body>

Background-image

.background {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 {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;

.background {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;

t y; .text-bleu {

font-family: "Courier New", Courier, mono; color: #0000FF; font-size: 30px; font-style: normal; font-weight: bolder;}

.background {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 {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;

Background-attachment: fixed;

.background {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;

Background-attachment: fixed;

Textes• Police et famille de police : font-family

• font-family, font-style, font-variant, font-weight, font-size, font, color

• list-style, list-style-image, list-style-position, list-style

• word-spacing, letter-spacing, text-decoration, text-transform, text-align, text-indent, vertical-align, line-height

Les noms de polices contenant des espaces doivent être encadrés par des quotes simples ou doubles, voici 6 exemples :

Police et famille de police : font-family

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

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

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).

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.

• 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

font-family, font-style, font-variant, font-weight, font-size, font

• word-spacing

• letter-spacing

• text-decoration

• 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

word-spacing, letter-spacing, text-decoration, text-...

• list-style

• list-style-image

• list-style-position

• list-style

url(url)

inside|outside

list-style-type list-style-image list-style-position

Type de numéro, puce ou image dans une liste

Image servant de puces

Alignement des puces dans ou devant la liste

Regroupe les catégories de list-style

list-style, list-style-image, list-style-position, list-style

CSSDEBUTANT

• CSS : font-family, font-size, font-variant, font-weight» Les polices en CSShttp://www.cssdebutant.com/police-font-css.html

• CSS : letter-spacing, text-align, text-decoration» Mettre en forme un texte en CSShttp://www.cssdebutant.com/les-texte-en-css.html

• CSS : text-indent, text-transform, white-space, word-spacing» Mettre en forme un texte en CSShttp://www.cssdebutant.com/les-texte-en-css2.html

Mise en forme des textes... (qq adresses Web) [1/3]

FR.HTML.NET• Leçon 3 : Les couleurs et les arrières-plansColor, background-color, background-image, background-repeat, background-attachment, background-position, backgroundhttp://fr.html.net/tutorials/css/lesson3.asp

• Leçon 4 : Les policesfont-family, font-style, font-variant, font-weight, font-size, fonthttp://fr.html.net/tutorials/css/lesson4.asp

• Leçon 5 : Le textetext-indent, text-align, text-decoration, letter-spacing, text-transformhttp://fr.html.net/tutorials/css/lesson5.asp

• Leçon 6 : Les lienshttp://fr.html.net/tutorials/css/lesson6.asp

SITEDUZERO

• Formatage du texte en CSS (partie 1/2)http://www.siteduzero.com/tutoriel-3-13525-formatage-du-texte-en-css-partie-1-2.html

• Formatage du texte en CSS (partie 2/2)http://www.siteduzero.com/tutoriel-3-13533-formatage-du-texte-en-css-partie-2-2.html

• Les pseudo-formatshttp://www.siteduzero.com/tutoriel-3-13539-les-pseudo-formats.html

• Eléments constitutifs• content• padding• border• margin

• Types• Boîtes bloc• Boîtes en ligne• ...

• Eléments constitutifs• content• padding• border• margin

• Types• Boîtes bloc• Boîtes en ligne• ...

Boîtes

Boîtes : éléments constitutifs

Modèles et types de boîtes « attachées » aux balises HTMLhttp://icp.ge.ch/sem/cms-spip/spip.php?article153

Une boîte possède 4 aires

1. Contenu - content2. Espacement - padding3. Bordure - border4. Marge - margin

TOUS les éléments HTML s'inscrivent dans une boîte

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.

Positionnement :position : static, relative, absolute, fixe, float, clear, top, right, bottom, left, clear, overflow, z-index.

Bordures :border: width, color, style, top, right, bottom, left.

margin

padding

content

margin

padding

content

border

Boîte symétrique

Boîte asymétrique

Les valeurs sont attribuées :

• En partant du haut

• Dans le sens des aiguilles

d’une montre.

La Marge externe est incolore

Boîtes : éléments constitutifs 1 top

2 right4 left

3 bottom

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).

• Peut contenir des boîtes bloc et des boîtes

en ligne.

• Superposition des marges margin-top et margin-bottom, la plus grande l’emporte (fusion des marges).

Les principaux éléments créant des boîtes blocs (block) conteneur appelées aussi boîtes paragraphe sont :

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.

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, ...

Entraîne un retour de chariot avant et après le bloc qu’elle définit.

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.

• Toujours utilisée à l’intérieur de boîtes blocs.

• Peut contenir des boîtes en ligne.

• Accolement bout à bout des marges : margin-right d’une boîte et margin-left de la boîte suivante (pas de fusion des marges).

Les principaux éléments créant des boîtes en ligne (inline) sont :

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.

Boîtes - Aire de Contenu : content [1/3]

Largeur de contentwidth : n, p%, auto

Hauteur de contentheight: n, p%, auto

Exemple :width: 50px;width: 25%;width: auto;

Exemple :height: 50px;height: 25%;height: auto

width et height Incluent ou non padding et border suivant les navigateurs

Largeurs et hauteurs de content : width et height

Largeur max de contentmax-width : n, p%, auto

Hauteur max de contentmax-height: n, p%, auto

Exemple :max-width: 50px;max-width: 25%;max-width: 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

Contraindre les largeurs et hauteurs maximale de contentmax-width et max-height

Largeur min de contentmin-width : n, p%, auto

Hauteur min de contentmin-height: n, p%, auto

Exemple :max-width: 50px;max-width: 25%;max-width: 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

Contraindre les largeurs et hauteurs minimales de contentmin-width et min-height

Boîtes - Aire d’Espacement, Marge Interne : padding

Remplissage haut

Remplissage droite

Remplissage bas

Remplissage gauche

Regroupe les propriétés

de remplissage

padding-top

padding-right

padding-bottom

padding-left

Padding

n | p%

padding-top padding-right

padding-bottom padding-left

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

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 :

L'aire d'espacement prend toujours la couleur de l'aire de contenu.

padding

content

padding: 30px 40px 10px;

est équivalent à padding: 30px 40px 10px 40px;

padding

content40px 40px

On procède de mêmepour border et margin

padding: 20px 50px;

est équivalent à padding : 20px 50px 20px 50px;

padding

content

20px50px

padding: 50px;

est équivalent à padding: 50px 50px 50px 50px;

padding

content

• border-bottom• border-bottom-color• border-bottom-style• border-bottom-width

• border-left• border-left-color• border-left-style• border-left-width

• border-right• border-right-color• border-right-style• border-right-width

• border-top• border-top-color• border-top-style• border-top-width

• border• border-color• border-style• border-width

Boîtes - Aire de Bordure : border [1/3]

Boîtes - Aire de Marge externe : margin

Marge haut

Marge droite

Marge bas

Marge gauche

Regroupe les propriétés

de marge

margin-top

margin-right

margin-bottom

margin-left

margin

n | p% | auto

margin-top margin-right

margin-bottom margin-left

La marge « margin » est incolore et transparente

Boîtes - Combinaison des Marge externe : margin

En CSS2, les marges horizontales ne fusionnent jamais

http://www.yoyodesign.org/doc/w3c/css2/box.html#collapsing-margins

Boîtes en ligne : pas de fusion des marges

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.

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.

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.

Boîtes bloc - Marges interne et externe

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.

Par défaut :margin

padding

content padding et margin de tous les éléments bloc sont non nuls

Par défaut :

content… sauf pour <div>padding = 0 et margin = 0

Bloc : Padding et margin = 0

Boîtes en ligne - Marges interne et externe

Par défaut tous les éléments en ligne ont des marges internes (padding) et externes (margin) nulles.

Par défaut :

padding et margin de tous leséléments en ligne sont nulspadding = 0 et margin = 0

Par défaut :

content

margin

padding

content

Boîtes en ligne, par défaut :

pas de padding et pas de margin,donc pas de marge.

En ligne : Padding et margin = 0

Conditions de Largeur et Hauteur des boîtes selon W3C,

respectées par tous les navigateurssauf par Internet Explorer

width et heightComportement des navigateurs avec

la Largeur et la Hauteur de « content »

width: 300px;padding: 30px;border: 10px;

Appliquons la règle :

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 »

Constat :

width: 300 px;padding: 30px;border: 10px;

margin

padding

content

border

300 px360 px380 px

Normes et largeur W3C respectées par tous les

navigateurs sauf parInternet Explorer

Normes et largeur W3C non respectées

par les navigateursInternet Explorer

margin

padding

content

300 px

280 px

220 px

Ne marche pas avec

Internet Explorer !Ne marche pas avec

Internet Explorer !

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 ...

Contrôle des Boîtes

• Flux• Position• Contrôle du flux• Couche• Débordement• Rognage• ...

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’écranselon le flux de lecture du document.

PositionnementPositionnement

Contrôle des Boîtes : flux, position, couche, débordement, ...

position: static;position: static; float: left;float: right;float: none;float: inherit;

float: left;float: right;float: none;float: inherit;

position: relative;position: absolute;position: fixed;

toprightbottomleft

Débordementoverflow: hidden;overflow: scroll;overflow: visible;overflow: auto;

Rognageclip: rect(haut, droite, bas, gauche);Rognageclip: rect(haut, droite, bas, gauche);

clip: rect(10px, 5px, 20px, 15px);clip: rect(10px, 5px, 20px, 15px);

Couchesz-index: auto;z-index: 3;

Contrôle du flux autour des flottantsclear: left;clear: right;clear: both;clear: inherit;clear: none;

position: inherit;position: inherit;

Positionnement, les boîtes sont :

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

position: absolute; Sortie du flux 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 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.

position: static; Positionnée dans le flux courantposition: static; Positionnée dans le flux courant

… float: none; float: inherit;… 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;

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.

Positionnement des boîtes

position: static;position: static;

float: left;float: left; float: right;float: right;

La propriété float associée à position: static; sort la boîte de son

flux sur la gauche ou sur la droite :

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.

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.

Attribuons les déclarations suivantes à la boîtes (2) :

float: left;float: left;

position: static; /* valeur par défaut */

float: left;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.

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 ».

Observez l’écoulement du texte de la boîte (3)

autour du flan droit de la boîte (2)

Rappel :

position: static; /* valeur par défaut */

float: left;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.

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 ».

Observez l’écoulement du texte de la boîte (3)

autour du flan droit de la boîte (2)

position: static;position: static; float: left;float: left; Margin-left: 50%;Margin-left: 50%;(2) (3)

Pour la boîte (2) fixons : width: 50%;

Pour la boîte (3) ajoutons :

Margin-left: 50%;

Conséquence : le « content » de la boîte (3) est déplacé à droite d’une longueur égale à la largeur de la boîte (2).

Pour la boîte (2) fixons : width: 50%;

Pour la boîte (3) ajoutons :

Margin-left: 50%;

Conséquence : le « content » de la boîte (3) est déplacé à droite d’une longueur égale à la largeur de la boîte (2).

Observer le débordement à droite du texte de la boîte (4). Pour traiter ce problème, il faut utiliser la propriété « overflow ».

clear: both;clear: both;(4)

… 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).

clear: both;clear: both;(4)

… 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).

position: relative;position: relative;

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.

top: 50px;top: 50px; left: 40px;left: 40px;

top: 30px;top: 30px; right: 60px;right: 60px;

bottom: 70px;bottom: 70px; left: 20px;left: 20px;

right: 80px;right: 80px;bottom: 40px;bottom: 40px;

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.

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.

position: relative;position: relative;1

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.

position: absolute;position: absolute;

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.

top: 30px;top: 30px; right: 60px;right: 60px;

bottom: 70px;bottom: 70px; left: 20px;left: 20px;

right: 80px;right: 80px;bottom: 40px;bottom: 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;

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.

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.

position: fixed;position: fixed;

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 :

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 :

Ne marche pas avec

Internet Explorer !

Ne marche pas avec

Internet Explorer !

...la boîte bloc (3) reste immobile sur l’écran lorsque l’on fait défiler la page avec l’ascenseur vertical....la boîte bloc (3) reste immobile sur l’écran lorsque l’on fait défiler la page avec l’ascenseur vertical.

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;

Ne marche pas avec

Internet Explorer !

Ne marche pas avec

Internet Explorer !

Appliquons les déclarations suivantes à la boîte (3) :

Lors du défilement vertical de la page,

la boîte (3) reste immobile !

position: fixed;left: 50px;top: 60px;

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.

Ne marche pas avec Internet Explorer !Ne marche pas avec Internet Explorer !

fixed;

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

Site au design FLUID : En-tête, 3 colonnes, Pied de page

Positionnement des boîtes bloc élémentaires

<!--.entete {

position: static;padding: 0px;margin: 0px;height: auto;width: 100%;background-color: #CCFFCC;

}.gauche {

position: static;margin: 0px;padding: 0px;width: 25%;background-color: #FFBEEB;

}.droite {

position: static;margin: 0px;padding: 0px;width: 25%;background-color: #FFFF66;

}.centre {

position: static;margin: 0px;padding: 0px;width: 50%;background-color: #33FFFF;

}.pieddepage {

position: static;margin: 0px;padding: 0px;height: auto;width: 100%;background-color: #9BDAA7;

}--></style>

<!--.entete {

}.gauche {

}.droite {

}.centre {

}.pieddepage {

}--></style>

<body>

<div class="entete"><pre>.entete {

}</pre></div>

<div class="gauche"><pre>.gauche {

}</pre></div>

<div class="centre"><pre>.centre {

}</pre></div>

<body>

<div class="entete"><pre>.entete {

}</pre></div>

<div class="gauche"><pre>.gauche {

}</pre></div>

<div class="centre"><pre>.centre {

}</pre></div>

<div class="droite"><pre>.droite {

}</pre></div>

<div class="pieddepage"><pre>.pieddepage {

}</pre></div>

</body>

<div class="droite"><pre>.droite {

}</pre></div>

<div class="pieddepage"><pre>.pieddepage {

}</pre></div>

</body>

• Positionnement des boîtes bloc élémentaires

• Inclusions de boîtes

• Propriété overflow : hidden, scroll, visible ou auto

Template 3 colonnesde Michael Meadhra

Les points essentiels aux plans du HTML et des CSS

Résumé du

margin: 0px;padding: 0px;

header

navcol main sidecol

header

width: 130px;float: left;

height: 60px; Margin: 0px;

margin-left: 160px;margin-right: 160px;

width: 130px;float: right;

clear: both;

header

height: 60px; Margin: 0px;

clear: both;

navcol main sidecol

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

Variante 1 du

margin-top: 0px;

clear: both;

margin-top: 0px;

clear: both;

Variante 2 du

margin: 0px;float: left;position: static;width: 25%;

margin: 0px; height: auto;width: 100%

margin: 0px; 25%;position: static;

margin: 0px; 25%;float: right;width: 220px;position: static;

clear: both; height: auto; width: 100%

overflow: scroll;width: auto;

Feuilles de Styles en Cascade CSS : C ascading S tyle S heets CSS2 : Les feuilles de style en...

Documents

MUR DE GRANDE HAUTEUR - Boise Cascade

ÉCOLE DE CASCADE

Contrôleur de Cascade Sécurité et précautions …® 6000/Manual/Cascade...Contrôleur de Cascade Sécurité et précautions Option Contrôleur de 175ZA677.10 cascade pour VLT 6000

Soyez revolutionnaire, utilisez CSS2 !

livret circuit cascade de cuisinier

LÉGUMES FEUILLES LÉGUMES FEUILLES LÉGUMES FEUILLES · 2017. 2. 10. · LÉGUMES FEUILLES LÉGUMES FEUILLES LÉGUMES FEUILLES LÉGUMES FEUILLES LÉGUMES FEUILLES 1 LE CRESSON 3

Construction et déconstruction de l’arbre: la cascade des

Rebecca’s Slouch - Cascade Yarns

Flyerbourses2015 Feuilles

PORTES D‘INTÉRIEUR - Portes Ringo Eurok · ringolit Bouleau granit cascade ringolit Bouleau Ardoise cascade ringolit Hêtre clair cascade ringolit Erable cascade ringolit Bouleau

CHAUFFE-EAU RÉSIDENTIELS ÉLECTRIQUES STANDARD, CASCADE

Installation en cascade - Chabanat PELLEMATIC CASCADE.… · Cascade, le choix de la performance Installation en cascade Les avantages Plage de puissance Nombre de chaudières 11

cien néie et tnoie - Education.gouv.fr€¦ · Le langage CSS (Cascade Style Sheets, feuilles de style en cascade) est venu compléter le langage HTML en 1996. Son rôle est de gérer

Blyton Enid Le mystère de la cascade

Bonnes feuilles

La cascade perpétuelle

Les études moléculaires de la cascade apoptotique

programme La Cascade septembre - décembre 2010

avec Sass/Compass - static.fnac-static.com · apitre Lorsque les navigateurs ont commencé à interpréter les feuilles de style en cascade, bien des choses ont changé. Je me souviens

NOUVEAUX ANTICOAGULANTS. HISTORIQUE HISTORIQUE CASCADE DE LA COAGULATION CASCADE DE LA COAGULATION QUÊTE DE LANTICOAGULANT IDEAL QUÊTE DE LANTICOAGULANT