La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Feuilles de Styles en Cascade CSS : C ascading S tyle S heets CSS2 : Les feuilles de style en cascade, niveau 2

Présentations similaires


Présentation au sujet: "Feuilles de Styles en Cascade CSS : C ascading S tyle S heets CSS2 : Les feuilles de style en cascade, niveau 2"— Transcription de la présentation:

1 Feuilles de Styles en Cascade CSS : C ascading S tyle S heets CSS2 : Les feuilles de style en cascade, niveau 2 Une référence importante : François Daniel Giezendanner, SEM (Service Ecoles-Medias) - DIP - Genève, 5 rue des Gazomètres, 1205 CH-Genève Tél: / , - 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) 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 dun site de manière centrale, donc maintenance facilitée et moins coûteuse du site. Mise en page moins facile mais plus précise quavec 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 Les couleurs et leur « codage » Les unités de mesure Rappel sur : … utilisées avec les CSS Préambule B

5 Il existe cinq manières de spécifier les valeurs dune 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 <=<= % 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

6 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

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

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

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

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

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

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

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

14 Couleurs « Compatibles Web » : Celle qui évitent le tramage en 256 couleurs Les couleurs « Compatibles Web », sexpriment 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,... Hexadec : multiples de 33 : triplets de 00, 33, 66, 99, CC, FF Exemples : #66CC99, #FF3366, #0099CC,... RGB : multiples de 51: 0, 51, 102, 153, 204 et 255 Exemples : rgb(51,0,153), rgb(102,204,51), rgb(255,102,153),... 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%),... % : 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, F Exemples : #6C9, #F36, #09C,... Hexa court : multiples de 3 : triplets de 0, 3, 6, 9, C, F Exemples : #6C9, #F36, #09C,... … mais en 2008, existe-til 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 (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 daffichage de couleurs à lécran entre le code hexadécimal et le mot clé correspondant Dautre 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 daffichage 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. #FFFF00 = yellow # = purple # = gray etc. ====== yellow purple gray

16

17

18

19

20

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

22 ValeursDescription Unités de mesure CSS UnitéExemple Relatives Pourcentage par rapport à une référence (taille de police dune boîte bloc, fenêtre, calque, cellule, etc.) % 25%entière Inch (1 inch = 1 pouce = 2.54 cm) in 3inréelleCentimètre cm 10cmentièreMillimètre mm 5mmentièreLunité est la largeur de la lettre M (majuscule) em 2.5emréelleLunité est la hauteur de la lettre x (minuscule) ex 0.5exréellePoint typo (1 pt = 1/72 inch, 1/12 pica) pt 14pt absolues entièrePica (12 points, 1/6 pouce) pc 12pcréellePixel (un point sur lécran de lordinateur) 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é.

23 Préambule D Doctype – DTD D éfinition de T ype de D ocument

24 Doctype – DTD – D éfinition de T ype de D ocument 1) DTD Strict : tous les éléments de présentation sont pris en charge par des feuilles de style : 2) DTD Transitional : appelée aussi loose, elle permet dutiliser un mélange de CSS et de balises ou attributs de présentation du HTML : 3) DTD Frameset : utilisée lorsque le document HTML comporte aussi des cadres : En HTML, trois DTD possibles prennent en charge la gestion des CSS :

25 Doctype – DTD – D éfinition de T ype de D ocument 1) DTD Strict : tous les éléments de présentation sont pris en charge par des feuilles de style : 2) DTD Transitional : appelée aussi loose, elle permet dutiliser un mélange de CSS et de balises ou attributs de présentation du HTML : 3) DTD Frameset : utilisée lorsque le document HTML comporte aussi des cadres : Préférée pour cause de confort. Préférée pour cause de confort. Porte bien son nom, Assez difficile à atteindre. Porte bien son nom, Assez difficile à atteindre.

26 Doctype – DTD – D éfinition de T ype de D ocument 1) DTD Strict : tous les éléments de présentation sont pris en charge par des feuilles de style : 2) DTD Transitional : appelée aussi loose, elle permet dutiliser un mélange de CSS et de balises ou attributs de présentation du XHTML : 3) DTD Frameset : utilisée lorsque le document HTML comporte aussi des cadres : En XHTML, trois DTD possibles prennent en charge la gestion des CSS:

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

28 css Zen Garden: The Beauty in CSS "/001/001.css"; css Zen Garden: The Beauty in CSS "/001/001.css"; css Zen Garden: The Beauty in CSS Design [1/6] Arbre du document et degré de parenté des éléments Extrait dun code du site css Zen Garden Extrait dun code du site css Zen Garden

29 css Zen Garden The Beauty of CSS Design … … … … Select a Design: Attitude by Stephane Moens Urban by Matt Kim & Nicole Paravion by Emiliano Pennisi Verdure by Lim Yuan Qing Extrait dun code du site css Zen Garden Extrait dun code du site css Zen Garden [2/6] css Zen Garden

30 css Zen Garden The Beauty of CSS Design … … … … Select a Design: Attitude by Stephane Moens Urban by Matt Kim & Nicole Paravion by Emiliano Pennisi Verdure by Lim Yuan Qing Extrait dun code du site css Zen Garden Extrait dun code du site css Zen Garden [3/6] css Zen Garden

31 css Zen Garden The Beauty of CSS Design … … … … Select a Design: Attitude by Stephane Moens Urban by Matt Kim & Nicole Paravion by Emiliano Pennisi Verdure by Lim Yuan Qing [4/6] css Zen Garden

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

33 css Zen Garden The Beauty of CSS Design … … … … Select a Design: Attitude by Stephane Moens Urban by Matt Kim & Nicole Paravion by Emiliano Pennisi Verdure by Lim Yuan Qing css Zen Garden: The Beauty in CSS Design [6/6]

34 Notes préliminaires et Définition Elément : Couple ouvert et fermé dune balise HTML : Exemples : … 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 : devient devient, etc. devient devient, etc.

35 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. 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. Exemples de propriétés : text-align color background-color font-size … Exemples de propriétés : text-align color background-color font-size … Propriétés ou attributs des styles

36 valeur 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 : Propriété, valeur, déclaration, liste et bloc de déclarations valeur Le binôme propriété:valeur constitue une déclaration ou définition, cest une instruction de mise en page. valeur1valeur2 L'ensemble propriété1:valeur1; propriété2:valeur2; constitue une liste de déclarations. valeur1valeur2 La liste de déclarations placée entre accolades sappelle bloc de déclaration : { propriété1:valeur1; propriété2:valeur2; } left text-align: left; right text-align: right; justify text-align: justify; center text-align: center;

37 Règle de style = Sélecteurs + bloc de déclaration(s) Règles de style Feuille de style = jeux de Règles de style qui précisent laffichage 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 CSS sélecteur { propriété1: valeur1; propriété2: valeur2; } règle de style CSS Chaque règle de style CSS est composée de : un sélecteur qui indique à quel type d élément HTML la règle sapplique un bloc de déclaration(s). règle de style CSS Chaque règle de style CSS est composée de : un sélecteur qui indique à quel type d élément HTML la règle sapplique un bloc de déclaration(s).

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

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

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 du document à l'intérieur d'une balise 3. Feuille de style externe liée (Linked Style Sheet) : Liste de règles CSS dans un fichier séparé à extension CSS; balise 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 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] Voici un paragraphe de largeur 100% dont le texte est rouge, centré, en 16 pt. Exemple :

42 Les règles de styles des différents éléments sont regroupés dans une balise spécifique placée dans l'en-tête ( entre les balises et ) 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] element1 {propriété1: valeur1; propriété2: valeur2;} element2 {propriété1: valeur1; propriété2: valeur2;} element1 {propriété1: valeur1; propriété2: valeur2;} element2 {propriété1: valeur1; propriété2: valeur2;} 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 feuille de style incorporée qui définit un fond d'écran et la justification des paragraphes.... body {background-image:URL(image.gif)} p {text-align:justify} Voici un paragraphe justifié. Voici un autre paragraphe justifié body {background-image:URL(image.gif)} p {text-align:justify} Voici un paragraphe justifié. Voici un autre paragraphe justifié.... Exemple : 2. Feuille de style incorporée (interne ou globale) [2/2]

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

45 Par exemple : 3. Feuille de style externe liée [2/3] 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 style sous 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;} /* commentaires */ …suite :

46 C'est la technique la plus courante. Dans le document HTML, on ajoute à l'intérieur de la partie HEAD : 3. Feuille de style externe liée [3/3] …suite :

47 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. 4. Feuille de style externe importée ou url(dossier/mafeuille2.css); p {text-align: url(dossier/mafeuille2.css); p {text-align: justify}; On peut trouver à 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 url(url);

48 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

49 alors que La balise en ligne délimite un fragment de texte et/ou de données au sein dun 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 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}

50 Sélecteurs simples basés sur des éléments de balises HTML, et représenté par un astérisque (*) Correspond à nimporte 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}

51 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 {color:red} h2 {color:red} strong {color:red} h1, h2, strong {color:red}

52 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;} h1 {font: 20px Helvetica;} h1 {backgroud: aqua;} h1 {color: purple; font: 20px Helvetica backgroud: aqua;}

53 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, { 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 :

54 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. texte d'introduction p.intro {color:red}.intro {color:red}

55 Alors qu'une classe peut concerner plusieurs éléments du document, un identifiant concerne un élément unique. Sélecteurs dIdentifiants 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. Texte 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.

56 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 dun 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 :

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

58 Recommandation : déclarer les pseudo-classes :link, :visited, :hover et :active dans lordre précis suivant, seul à garantir leur correcte interprétation : Sélecteurs de Pseudo-classes [3/7] 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 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 M oyen mnémotechnique : LoVeHAteLoVeHAte LoVeHAteLoVeHAte 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 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 L o V e HA te (amour-haine)

59 é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 {text-decoration: none} div:first-child {font-style: italic}

60 :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 dun texte, dun 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 :

61 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; } 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; } titre principal texte 1 sous-titre 2 texte 2 sous-titre 2 texte 3 titre principal texte 1 sous-titre 2 texte 2 sous-titre 2 texte 3 Sélecteurs de pseudo-éléments [6/7]

62 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; } 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; } titre principal texte 1 sous-titre 2 texte 2 sous-titre 2 texte 3 titre principal texte 1 sous-titre 2 texte 2 sous-titre 2 texte 3 Sélecteurs de pseudo-éléments [7/7]

63 Partons dun exemple : Nous voulons que des parties dun texte expriment un danger, une urgence, un appel à laide et une catastrophe. A cette fin nous définissons les règles : Concerne les éléments dont lattribut class contient les mots danger et urgent Concerne les éléments dont lattribut 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;}.danger {color: blue;}.urgent {font-weight: bold;}.danger.urgent {font-style: italic;}.catastrophe {text-transform: uppercase;}.alaide {color: red;} span.alaide.catastrophe {background: Yellow;} ? 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 delle. Maman se précipite et crie attention, la casserole se renverse, Ouf, leau est à peine tiède. 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 delle. Maman se précipite et crie attention, la casserole se renverse, Ouf, leau est à peine tiède. Classes multiples [1/2]

64 Partons dun exemple : Nous voulons que des parties dun texte expriment un danger, une urgence, un appel à laide 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;}.danger {color: blue;}.urgent {font-weight: bold;}.danger.urgent {font-style: italic;}.catastrophe {text-transform: uppercase;}.alaide {color: red;} span.alaide.catastrophe {background: Yellow;} 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 DELLE. Maman se précipite et crie attention, la casserole se renverse Ouf, leau est à peine tiède. 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 delle. Maman se précipite et crie attention, la casserole se renverse, Ouf, leau est à peine tiède. 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 delle. Maman se précipite et crie attention, la casserole se renverse, Ouf, leau est à peine tiède. Classes multiples [2/2]

65 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} 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 quavec certaines structures

66 Sélecteur de Descendant, dEnfant, de Frère Descendant (sélecteur contextuel) : Par exemple appliquer un styles sur chaque élément em qui descend dun élément p p em {color: fuchsia;} Cette règle met en violet le texte des éléments span descendants dun élément p. Enfant : Par exemple appliquer un styles sur chaque élément span enfant dun élément h3 h3 > span {color: red;} Cette règle met en rouge le texte des éléments span enfants dun é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 quavec certaines structures

67 Sélecteurs de Descendant, dEnfant, de Frère Descendant : div ul li a {color: fuchsia;} Cette règle met en bleu le texte des éléments a descendants dun élément li, descendant dun élément ul,descendant dun é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 dun é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 dun élément p.

68

69

70

71 Commentaires CSS 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 ligne Un autre commentaire sur la deuxième ligne Et encore un commentaire sur la troisième ligne. */ Les commentaires peuvent occuper plusieurs lignes :

72 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. 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 larrière plan dun élément (boîte) comme étant une couleur ou bien une image. body { background: url(http://style.com/granit.png) }

73 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

74 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 #rrggbb, #rgb, rgb(rrr.rr%,ggg.gg%,bbb.bb%) rgb(rrr,ggg,bbb) mot-clé transparent Propriété : Valeur : background-color #cc88ee ou #fa82b3 #c8e rgb(30%,70%,77.5%) rgb(128,255,60) cyan transparent #cc88ee ou #fa82b3 #c8e rgb(30%,70%,77.5%) rgb(128,255,60) cyan transparent Exemple : background-color: #FFDFFF; Exemple : background-color: #FFDFFF;

75 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 url(nom-image.jpg) url(nom-image.gif) url(nom-image.png) none Propriété : Valeur : background-image Exemple : background-image: url(image_Chat/chat_500.png); Exemple : background-image: url(image_Chat/chat_500.png);

76 Background-repeat Cette propriété permet de contrôler la répétition dune 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; repeat; repeat-x; repeat-y; no-repeat; Propriété : Valeurs : background-repeat Identique à Background-image Répète limage seulement selon x (ligne dimages en haut) Répète limage seulement selon y (colonne dimages à gauche) Image affichée une seule fois. Identique à Background-image Répète limage seulement selon x (ligne dimages en haut) Répète limage seulement selon y (colonne dimages à 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;

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

78 Background-position [1/4] Cette propriété positionne limage précisément par coordonnées x,y dans le fond de la boîte. Limage est préalablement définie par dautres propriétés background-… et elle nest 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; 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-position 1) Background-position: 30px 50px; 2) Background-position: 25% 40%; 3) Background-position: center right; 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;

79 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. Background-position [2/4]

80 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%'. Background-position [3/4]

81 Background-position [4/4] Quand on ne donne qu'une seule valeur, en pourcentage ou en longueur, celleci 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. background-image: url(image_Chat/chat_500.png); background-repeat: no-repeat; background-position: 200px 150px; background-image: url(image_Chat/chat_500.png); background-repeat: no-repeat; background-position: 200px 150px; Exemples :

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; } 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 { 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; }.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; }.text-jaune { color: #FFFF00; font-size: 30px; } Couleur et Image de fond sont placées avec les déclarations :.background { background-color: #D782FB; background-image: url(image_Chat/chat_500.png); } L'image de fond est répétée si l'on ne précise pas : background-repeat: no-repeat; Couleur et Image de fond sont placées avec les déclarations :.background { background-color: #D782FB; background-image: url(image_Chat/chat_500.png); } L'image de fond est répétée si l'on ne précise pas : background-repeat: no-repeat; Background-image

84 .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; }.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; }.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 { 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-x; } Background-repeat: repeat x;.text-bleu { font-family: "Courier New", Courier, mono; color: #0000FF; font-size: 30px; font-style: normal; font-weight: bolder; }.text-bleu { font-family: "Courier New", Courier, mono; color: #0000FF; font-size: 30px; font-style: normal; font-weight: bolder; }

86 .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; }.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; } Background-repeat: repeat y;.text-bleu { font-family: "Courier New", Courier, mono; color: #0000FF; font-size: 30px; font-style: normal; font-weight: bolder; }.text-bleu { font-family: "Courier New", Courier, mono; color: #0000FF; font-size: 30px; font-style: normal; font-weight: bolder; }

87 .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; }.text-bleu { font-family: "Courier New", Courier, mono; color: #0000FF; font-size: 30px; font-style: normal; font-weight: bolder; }.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 { 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 { 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; }.text-bleu { font-family: "Courier New", Courier, mono; color: #0000FF; font-size: 30px; font-style: normal; font-weight: bolder; } Background- attachment: fixed;

89 .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 { 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; }.text-bleu { font-family: "Courier New", Courier, mono; color: #0000FF; font-size: 30px; font-style: normal; font-weight: bolder; } Background- attachment: fixed;

90 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

91 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 linternaute il passe à la suivante, etc. Si aucune police désignée nexiste 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 font-family, font-style, font-variant, font-weight, font-size, font

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

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

95 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 » Mettre en forme un texte en CSS Mise en forme des textes... (qq adresses Web) [1/3]

96 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 Mise en forme des textes... (qq adresses Web) [2/3]

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

98 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

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

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

101 Boîtes : éléments constitutifs

102 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 dune montre. La Marge externe est incolore Boîtes : éléments constitutifs 1 top 2 right 4 left 3 bottom

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 lune sous lautre (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 lemporte (fusion des marges).

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

105

106 Balise div Vient du mot div ision. Cette balise de type bloc introduit une division, un bloc à linté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 lon 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 quelle définit. Boîtes de type bloc (block box)

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 lune à côté de lautre sur la même ligne tant quelles 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 à lintérieur de boîtes blocs. Peut contenir des boîtes en ligne. Accolement bout à bout des marges : margin-right dune boîte et margin-left de la boîte suivante (pas de fusion des marges).

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

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

110 Boîtes - Aire de Contenu : content [1/3] Largeur de content width : n, p%, auto Hauteur de content height: 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

111 Boîtes - Aire de Contenu : content [2/3] Largeur max de content max-width : n, p%, auto Hauteur max de content max-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 content max-width et max-height

112 Boîtes - Aire de Contenu : content [3/3] Largeur min de content min-width : n, p%, auto Hauteur min de content min-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 content min-width et min-height

113 Boîtes - Aire dEspacement, 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

114 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 : Boîte p avec les 4 marges internes différentes 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 20px 50px 30px 40px

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

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

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

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

119 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-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 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 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 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 Boîtes - Aire de Bordure : border [2/3]

120 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-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 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 Boîtes - Aire de Bordure : border [3/3]

121 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

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

123 Boîtes - Combinaison des Marge externe : margin 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 Boîtes bloc : Fusion

124 Boîtes - Combinaison des Marge externe : margin 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 Boîtes bloc : Fusion

125 Boîtes - Combinaison des Marge externe : margin La marge « margin » est incolore et transparente 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 : Fusion

126 Boîtes bloc - Marges interne et externe A lexception de la balise neutre, 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 padding = 0 et margin = 0 La marge « margin » est incolore et transparente Bloc : Padding et margin = 0

127 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 nuls padding = 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

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

129 width: 300px; padding: 30px; border: 10px; 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 :

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

131 Une solution parmi dautres... Placer la boîte dans une boîte ayant : width: 300px; border: 0px; padding: 0px; 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... 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) dune 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 à laffichage (é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 Positionnement Contrôle des Boîtes : flux, position, couche, débordement,... position: static; float: left; float: right; float: none; float: inherit; float: left; float: right; float: none; float: inherit; position: relative; position: absolute; position: fixed; position: relative; position: absolute; position: fixed; top right bottom left top right bottom left Débordement overflow: hidden; overflow: scroll; overflow: visible; overflow: auto; Débordement overflow: hidden; overflow: scroll; overflow: visible; overflow: auto; Rognage clip: rect(haut, droite, bas, gauche); Rognage clip: rect(haut, droite, bas, gauche); clip: rect(10px, 5px, 20px, 15px); Couches z-index: auto; z-index: 3; Couches z-index: auto; z-index: 3; Contrôle du flux autour des flottants clear: left; clear: right; clear: both; clear: inherit; clear: none; Contrôle du flux autour des flottants clear: left; clear: right; clear: both; clear: inherit; clear: none; position: inherit;

135 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. Déplacée sélectivement selon les propriétés top, right, bottom et left 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; Contrôle du flux autour des flottants : clear: left; clear: right; clear: both; clear: inherit; clear: none;

136 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. Déplacée sélectivement selon les propriétés top, right, bottom et left 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; Contrôle du flux autour des flottants : clear: left; clear: right; clear: both; clear: inherit; clear: none;

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

138 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 lune au-dessous de lautre. Positionnement des boîtes position: static;

139 Positionnement des boîtes position: static; 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 lune au-dessous de lautre

140 Attribuons les déclarations suivantes à la boîtes (2) : Positionnement des boîtes position: static; 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 dabord 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 »

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

142 Rappel : Positionnement des boîtes position: static; 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 dabord 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)

143 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%; Conséquence : le « content » de la boîte (3) est déplacé à droite dune longueur égale à la largeur de la boîte (2)

144 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%; Conséquence : le « content » de la boîte (3) est déplacé à droite dune 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 »

145 position: static; float: left; Margin-left: 50%; (2)(3) 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)

146 position: static; float: left; Margin-left: 50%; (2)(3) 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)

147 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. Déplacée sélectivement selon les propriétés top, right, bottom et left 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; Contrôle du flux autour des flottants : clear: left; clear: right; clear: both; clear: inherit; clear: none;

148 Positionnement des boîtes position: relative; Avec la déclaration « position: relative ; » et lune des quatre déclarations ci-dessus, la boîte prend dabord 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; left: 40px; top: 30px; right: 60px; bottom: 70px; left: 20px; right: 80px; bottom: 40px; 1) 2) 3) 4)

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

150 Attribuons les déclarations suivantes à la boîte (3) : position: relative; left: 60px; top: 80px; La boîte bloc (3) concernée prend dabord 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. top: 80px; left: 60px; position: relative;

151 top: 80px; left: 60px; position: relative; Attribuons les déclarations suivantes à la boîte (3) : position: relative; left: 60px; top: 80px; La boîte bloc (3) concernée prend dabord 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

152 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. Déplacée sélectivement selon les propriétés top, right, bottom et left 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; Contrôle du flux autour des flottants : clear: left; clear: right; clear: both; clear: inherit; clear: none;

153 Positionnement des boîtes position: absolute; Avec la déclaration « position: absolute; » et lune 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: 50px; left: 40px; top: 30px; right: 60px; bottom: 70px; left: 20px; right: 80px; bottom: 40px; 1) 2) 3) 4)

154 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 lune au-dessous de lautre. 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; left: 40px; position: absolute;

155 top: 30px; left: 40px; position: absolute; 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

156 top: 30px; left: 40px; position: absolute; 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

157 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. Déplacée sélectivement selon les propriétés top, right, bottom et left 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; Contrôle du flux autour des flottants : clear: left; clear: right; clear: both; clear: inherit; clear: none;

158 Positionnement des boîtes 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 : 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 !...la boîte bloc (3) reste immobile sur lécran lorsque lon fait défiler la page avec lascenseur vertical.

159 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 lune au-dessous de lautre. 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; Positionnement des boîtes position: fixed; top: 60px; left: 50px; Ne marche pas avec Internet Explorer !

160 Appliquons les déclarations suivantes à la boîte (3) : position: fixed; top: 60px; left: 50px; Lors du défilement vertical de la page, la boîte (3) reste immobile ! Lors du défilement vertical de la page, la boîte (3) reste immobile ! position: fixed; left: 50px; top: 60px; 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. Les boîtes (4) et (5) qui la suivent se placent dans le flux. Ne marche pas avec Internet Explorer !

161 Appliquons les déclarations suivantes à la boîte (3) : position: fixed; left: 50px; top: 60px; 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. Les boîtes (4) et (5) qui la suivent se placent dans le flux. top: 60px; left: 50px; Lors du défilement vertical de la page, la boîte (3) reste immobile ! Lors du défilement vertical de la page, la boîte (3) reste immobile ! Ne marche pas avec Internet Explorer !

162 Appliquons les déclarations suivantes à la boîte (3) : position: fixed; left: 50px; top: 60px; 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. Les boîtes (4) et (5) qui la suivent se placent dans le flux. top: 60px; left: 50px; Lors du défilement vertical de la page, la boîte (3) reste immobile ! Lors du défilement vertical de la page, la boîte (3) reste immobile ! Ne marche pas avec Internet Explorer ! fixed;

163 Appliquons les déclarations suivantes à la boîte (3) : position: fixed; left: 50px; top: 60px; 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. Les boîtes (4) et (5) qui la suivent se placent dans le flux. top: 60px; left: 50px; Lors du défilement vertical de la page, la boîte (3) reste immobile ! Lors du défilement vertical de la page, la boîte (3) reste immobile ! Ne marche pas avec Internet Explorer ! fixed;

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

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

166

167 .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; }.centre { position: static; margin: 0px; padding: 0px; width: 50%; background-color: #33FFFF; }.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; }.centre { position: static; margin: 0px; padding: 0px; width: 50%; background-color: #33FFFF; }.droite { position: static; margin: 0px; padding: 0px; width: 25%; background-color: #FFFF66; }.pieddepage { position: static; margin: 0px; padding: 0px; height: auto; width: 100%; background-color: #9BDAA7; }.droite { position: static; margin: 0px; padding: 0px; width: 25%; background-color: #FFFF66; }.pieddepage { position: static; margin: 0px; padding: 0px; height: auto; width: 100%; background-color: #9BDAA7; }

168

169

170

171

172

173

174

175

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

177

178

179

180

181

182

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

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

185 header foot navcolmain sidecol

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

187 header foot width: 130px; float: left; height: 60px; Margin: 0px; margin-left: 160px; margin-right: 160px; width: 130px; float: right; clear: both; navcolmain sidecol En tete Colonne gauche Colonne droite Colonne centrale Pied de Pge

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

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

190

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

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

193

194

195 Div 1 Div 2 Div 4 Div 3 Div 5

196 Div 1 Div 2 Div 4 Div 3 Div 5 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%

197 Div 4 overflow: scroll; width: auto;

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


Télécharger ppt "Feuilles de Styles en Cascade CSS : C ascading S tyle S heets CSS2 : Les feuilles de style en cascade, niveau 2"

Présentations similaires


Annonces Google