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

Qelios – Formation Initiation au langage CSS Introduction Première approche Interprétation du flux Html Syntaxe de base La cascade Principales propriétés.

Présentations similaires


Présentation au sujet: "Qelios – Formation Initiation au langage CSS Introduction Première approche Interprétation du flux Html Syntaxe de base La cascade Principales propriétés."— Transcription de la présentation:

1 Qelios – Formation Initiation au langage CSS Introduction Première approche Interprétation du flux Html Syntaxe de base La cascade Principales propriétés Principes de mise en page Styles alternatifs Jour 1 Copyright – Qelios 2006

2 Qelios – Formation Initiation au langage CSS Introduction Présentation Version CSS

3 Introduction #1 Le langage CSS (Cascading Style Sheet) a été inventé pour pallier les faiblesses d'HTML quant à la présentation et à la mise en page des documents. Le langage CSS est au coeur du concept de la séparation de la structure, du contenu et de la présentation. La structure (balisage) et le contenu sont l'objet du langage Html La présentation (style et mise en page) sont l'objet du langage CSS Le couple Html et CSS assure : L'universalité et l'interopérabilté Html Structure et contenu CSS Présentation (style et mise en page) Une meilleure accessibilité = + Interopérabilité Rationnalisation Accessibilité La rationnalisation du travail de production

4 Qelios – Formation Initiation au langage CSS Première approche Type d'utilisation Type de médias Agent-utilisateur, Auteur, Utilisateur La cascade, l'héritage Conclusion

5 Première approche #1 Trois types d'utilisations : Interne On déclare les styles dans la partie Head ex :... Inline On style un élément dans le code Html ex : Externe On déclare les styles dans un fichier externe (.css) ex : Chaque utilisation répond à un besoin Inline pour un élément unique Interne pour une page unique Externe pour un site entier Trois types d'utilisation Inline Interne Externe

6 Première approche #2 CSS peut s'adresser à différents types de médias Screen : Navigateur web ou assimilé Print : Imprimante Speech : Synthétiseur vocal (CSS 3 ) Handled : Ecran limité (PDA, Smartphone...) Tv : Web tv Braille / Embossed : Plage et imprimante Braille Types de médias opérationnels screen print handled tv On spécifie un type de média à l'aide de l'attribut " media "

7 Première approche #3 Trois sources génèrent des propriétés CSS Agent-utilisateur : propriétés par défaut des éléments. ex. la couleur des liens, la taille des titres... Auteur : propriétés définies par l'auteur. Utilisateur : propriétés définies par l'utilisateur. Principe général de traitement Auteur Agent-Utilisateur Utilisateur Application Liens verts gras Liens bleus Liens rouges gras Liens rouges Trois origines Agent-Utilisateur Auteur Utilisateur Deux principes: La cascade L'héritage

8 Première approche #4 CSS est un langage de règles (identification + déclaration) qui permet de styler, pour différents types de médias, tous les éléments Html d'une page, selon les principes de la Cascade et de l'héritage. En conclusion : CSS Règles + Cascade + Héritage = Style+Mise en page Tous les éléments Html Types de médias Une règle comporte un identifiant et des déclarations CSS utilise des règles Identifiant { déclaration } ex : h1{font-size:1.2em} Tous les éléments Html (balises) sont stylables.

9 Qelios – Formation Initiation au langage CSS Interprétation du flux Html Le flux Html, les boîtes Identification des éléments

10 Interprétation du flux Html #1 2 types de boîtes Les boîtes de type inline (contexte de mise en forme en-ligne), qui s'affichent les unes à coté des autres. Ex : span, a, strong, em, img, q, cite, acronym, abbr... Les boîtes de type block (contexte de mise en forme bloc), qui s'affichent les unes en dessous des autres. Ex : div, hn, p, ul, ol dl, table, blokquote... Pour CSS, le code de la page est traité comme un flux d'éléments identifés au travers du DOM. Les éléments sont appelés des boîtes; elles sont traitées dans l'ordre dans lequel elles apparaissent dans le code : c'est le flux normal. Le Flux Le code Html Le Flux naturel Ordre dans lequel les éléments sont écrits dans le code Html Boîtes Inline Les unes à coté des autres Boîtes Block Les unes en dessous des autres Par convention, on utilise indifféremment la dénomination « boîte » ou « élément ».

11 Interprétation du flux Html #2 Identification des boîtes Les boîtes sont identifées au travers de la structure du DOM (Document Object Model) en utilisant, par exemple : Le nom de l'élément : p, h1... Un identifiant DOM : Attribut id ou class La position dans l'arbre du DOM (relation parent- enfant) Pour CSS, ces méthodes d'identification opèrent au travers de sélecteurs ; par exemple, le nom d'un élément est un sélecteur de type, l'attribut class un sélecteur d'attribut classe. Identification des éléments Structure DOM Sélecteurs CSS = +

12 Qelios – Formation Initiation au langage CSS Syntaxe de base

13 1. Règles d'écriture

14 Syntaxe de base #1 Règles d'écriture : CSS est insensible à la casse et aux retours chariot Le modèle grammatical est le suivant : /* Style du titre */ h1{ color:#ff0000; font-size:2em } Sélecteur PropriétéValeur Une déclaration est écrite entre accolades { } Ecriture CSS identifiant{propriété:valeur;propriété:valeur} Règle SélecteurBloc de déclaration Déclaration : Chaque couple propriété:valeur est séparée par un point -virgule ; Une déclaration est un couple propriété:valeur séparé par deux points : Note Les commentaires, les minuscules, les retours chariot et l'indentation permettent d'éclairer le travail Les commentaires s'écrivent entre /* et */ : /* ceci est un commentaire */ L'identifiant est un sélecteur CSS valide

15 Syntaxe de base 2. Les sélecteurs

16 Syntaxe de base #2 Ce sont des expressions qui permettent de sélectionner un ou plusieurs éléments Html. On utilise quatre sélecteurs de base, au moins : Les Sélecteurs (partie I) De type ( nom ) : Le nom de l'élément Html p{color:#ff0000} D' ID ( # ) : valeur de l'attribut id #adresse{color:#ff0000} ( ) De classe (. ) : valeur de l'attribut class.adresse{color:#ff0000} ( ) Descendant ( element1 espace element2 ) : l'élément 2 est enfant de l'élément 1 p span{color:#ff0000} ( un texte rouge ) Note : Ces deux sélecteurs sont des sélecteurs d'attributs Les 4 sélecteurs de base Type nom{} Nom de l'élément ID #nom{} Attribut ID de l'élément Classe.nom{} Attribut CLASS de l'élément Descendant elem1 elem2 {} (séparés par un espace) Note : Les deux éléments sont séparés par un espace

17 Syntaxe de base #5 Les Sélecteurs (partie IV) elem1,elem2, elem3{} : chaque sélecteur est séparé par une virgule. h1,p,#titre,span.adresse{color:#ff0000} Tous ces éléments seront de couleur rouge. Les sélecteurs peuvent s'associer pour adresser plusieurs éléments pour une propriété identique : Malgré sa simplicité, la syntaxe CSS est un outil très puissant. La syntaxe de descendance (sélecteur descendant et enfant), associée au DOM, permet, notamment, de simplifier le code Html, de l'alléger et de faciliter sa maintenance. Combinaison de sélecteurs Association elem1,elem2, elem3{} Une propriété pour plusieurs éléments Descendance selecteur selecteur{} Styler un élément en fonction du contexte du DOM Le fichier contexte.htm présente un exemple illustrant cette relation qui lie intimement le DOM à CSS.

18 Syntaxe de base 3. Exercices

19 Syntaxe de base #8 Exercice : 1. Editez la page exemple (contacts.htm) 2. Ecrivez les styles qui correspondent à ces directives (les propriétés sont indiquées à droite) Directives : Titre principal : couleur rouge, taille de police 2em Titre "nom" : couleur bleu, taille de police 1.5em Paragraphe : couleur bleu, taille de police 0.9em Div "contact" : bordure noire de 1 pixel Le téléphone : souligné L'adresse : fond gris clair Le fichier de correction : contacts_corrige.htm Propriétés CSS Couleur (Rouge) color:#ff0000 (Bleu) color:# Taille de police font-size: 2em font-size:1.5em font-size:0.9m Cadre noir border:1px solid # Fond gris-clair background-color:#eeeeee Gras font-weight:bold Le code postal et la ville : en gras Souligné Text-decoration:underline

20 Syntaxe de base # 9 4. Pseudo-Classes Pseudo-Eléments

21 Syntaxe de base #10 Pseudo-classes (partie I) :hover Etat d'un élément survolé a:hover{color:#ff0000} :active Etat d'un élément activé (click) a:active{color:#ff0000} :focus Etat d'un élément recevant le focus input:focus{color:#ff0000} :link Etat d'un lien non visité a:link{color:#ff0000} :visited Etat d'un lien visité a:visited{color:#ff0000} Pseudo-classes Dynamiques Support pour tous les navigateurs. (Pour IE5/6 :hover est restreint aux liens) (IE5 ne connait pas :focus) Important Pour les liens, les pseudo-classes dynamiques doivent respecter cet ordre.

22 Syntaxe de base #12 Pseudo-éléments (partie I) A la différence des pseudo-classes, les pseudo-éléments insèrent des boîtes virtuelles dans l'arbre du DOM. Attention, cependant, les propriétés CSS applicables à ces boîtes peuvent être restreintes. Voir à ce sujet la spécification CSS2 :first-line Première ligne d'un élément p:first-line{color:#ff0000} (cf selecteur.htm) :first-letter Premier caractère d'un élément (lettrine) p:first-letter{color:#ff0000} (cf selecteur.htm) Ces deux pseudo-éléments sont supportés par tous les navigateurs, sauf IE5. Pseudo-éléments Première ligne :first-line Premier caractère :first-letter Support Gecko, Opéra, Safari, IE6/7

23 Qelios – Formation Initiation au langage CSS Principales Propriétés Introduction Unité de mesure Syntaxe des propriétés Propriété Globale et Composée Forme Longue et Courte Propriétés de mise en forme Texte Eléments Divers Exercices Propriétés du modèle de boîte Introduction Principales propriétés Exercices Propriété de mise en page Introduction Position Float Display Clear

24 Principales propriétés 1. Introduction

25 Principales Propriétés Introduction Les différents types de propriétés CSS Tous les éléments ont des propriétés par défaut (agent utilisateur). Tous les éléments peuvent acquérir des styles auteur ou utilisateur. Propriétés CSS Mise en forme Texte, Boîtes (fond, bordures...), Eléments (Style de listes...) Mise en page Positionnement Boîtes (marges,dimensions...) Texte : polices, couleurs, alignement... Positionnement : affichage, position, couche. De boîtes : dimensions, marges, bordures, types de boîtes, propriétés de fond. Spécifiques aux éléments : listes, tables... Diverses : Interface, impression...

26 Principales propriétés 2. Unités de mesure

27 Principales propriétés Les unités de mesure Unité de mesure CSS On distingue des unités de mesure fixes (absolues) ou relatives. Unités de mesure absolues : pt : point typographique (1/72 de pouce) pc : pica typographique (12 points) in : pouce (2.54cm) mm : millimètre cm : centimètre Unités de mesure relatives : em : relative à la taille de police par défaut de l'élément parent. % : relative à la dimension de l'élément parent px : pixel, relative à la densité de pixel du mode de sortie Unités de mesure absolues Unités de mesure relatives Selon le contexte, les mesures relatives peuvent accepter des valeurs négatives.

28 Principales propriétés 3. Syntaxe des propriétés Forme longue, forme courte

29 Principales propriétés Propriété globale, propriété composée Propriétés Les propriétés utilisent des mots-clés. On distingue : Les propriétés uniques ou globales : un seul mot clé - color : # display: block Certaines propriétés composées adressent un style pour un aspect particulier d'une propriété globale Les propriétés composées : plusieurs mots clés séparés par un tiret : - font-size : 0.9em Par exemple : - font-family (propriété globale font) - border-color (propriété globale border) Uniques /Globales Un seul mot clé font:val Composées Plusieurs mots clés séparés par un tiret font-style:val

30 Principales propriétés Forme longue, forme courte Propriétés Dans la forme longue, les propriétés sont simplement écrites les unes en dessous des autres : body{ font-family:verdana, sans serif; font-size:0.9em; font-style:italic; } Forme longue propriété: val propriété-mot: val Dans la forme courte, on peut regrouper les valeurs pour une même propriété globale :.longue{ border-top:1px; border-right:2px; border-bottom:3px; border-left:4px; }.courte{ border:1px 2px 3px 4px } Forme courte Propriété: val val val

31 Principales Propriétés 4. Propriétés de mise en forme

32 Propriétés de Mise en forme #1 Texte : (I) color : Couleur de police - color:# (hexadecimal) - color:red (mot-clés) font-size : taille de police - font-size:0.9em (%,em,px,cm,mm...) font-family : Famille de police - font-family : Verdana, sans-serif Propriété CSS Texte font-style : style de police - font-style:normal - font-style:italic - font-style:oblique note : Privilégier em et % note : Toujours terminer par une police sans-serif font-size autre valeurs Absolues : xx-large (h1) x-large (h2) large (h3) medium(h4) small (h5) x-small xx-small (h6) Relative : smaller larger color autre valeurs color:rgb(158, 0 102)

33 Propriétés de Mise en forme #2 Texte : (II) font-weight :graisse de police - font-weight:normal - font-weight:bold font-variant : type de caractère - font-variant:normal - font-variant:small-caps (Petites Maj) Propriété CSS Texte text-decoration : effet de texte - text-decoration:none - text-decoration:underline (Souligné) - text-decoration:overline (Surligné) - text-decoration:line-through (Barré) text-transform : effet de casse - text-transform:capitalize (1ère lettre Maj) - text-transform:uppercase (Maj) - text-transform:lowercase (Min)

34 Propriétés de Mise en forme #3 Texte : (III) Text-align : alignement - text-align:left - text-align:right - text-align:center - text-align:justify Propriété CSS Texte text-indent : retrait - text-indent:+- 5 em (%,em,px,cm,mm...) vertical-align : alignement vertical - vertical-align:valeur (%;em;px...) - vertical-align:baseline - vertical-align:sub - vertical-align:super - vertical-align:top - vertical-align:text-top - vertical-align:middle - vertical-align:bottom - vertical-align:text-bottom vertical-align L'alignement vertical permet de positionner un élément par rapport à son parent. Les valeurs baseline, text-top, text-bottom réfèrent au corps de texte du parent ou des éléments de textes adjacents

35 Propriétés de Mise en forme #4 Texte : (IV) white-space : gestion des espaces - white-space:normal - white-space:pre (tel qu'écrit) - white-space:no-wrap (insécable) - white-space:pre-wrap (retour auto) - white-space:pre-line (retour force) Propriété CSS Texte line-height : valeur d'interligne - line-height:5 em (%,em, px,cm,mm...) - line-height:1.2 word-spacing : espacement des mots - word-spacing:normal - word-spacing:5em (%,em, px,cm,mm...) letter-spacing : espacement des caractères - word-spacing:normal - word-spacing:5em (%,em, px,cm,mm...) white-space Les valeurs pre-wrap et pre-line sont susceptibles de ne pas être implémentées

36 Propriétés de Mise en forme #5 Eléments (I) : Les listes Propriété CSS Elément list-style-type : Modifie la marque des items de liste : - list-style-type:none (pas de marque) - list-style-type:val (disc,circle,square,decimal, lower-roman,upper-roman, lower-alpha,upper-alpha) ( 1. i I a A ) list-style-position : position de la marque (intérieure ou exterieure) - list-style-position : outside - list-style-position : inside list-style-image : Utiliser une image comme marque des items - list-style-image: url(image.gif) list-style-type Autres valeurs lower-latin, upper-latin, lower- greek, armenian, georgian Pas supportées par IE

37 Propriétés de Mise en forme #6 Eléments (II) : Les tables (A) Propriété CSS Elément border-collapse : Fusion des bordures - border-collapse: separate (séparées) - border-collapse: collapse (fusionnées) border-spacing : espacement entre les cellules - border-spacing : 2px (horizontal) - border-spacing : 2px 3px (h / v) empty-cells : Afficher les bordures des cellules vides. - empty-cells: show - empty-cells: hide border-spacing empty-cells Pas supportées par IE table-layout : largeur de la table - table-layout: auto (100%) - table-layout: fixed (largeur 1ère ligne)

38 Propriétés de Mise en forme #7 Eléments (II) : Les tables (B) Propriété CSS Elément caption-side : Position du titre - caption-side: top (en haut) - caption-side: bottom (en bas) width : largeur - width: auto - width: 100% (%,em, px,cm,mm...) vertical-align : Alignement vertical - vertical-align: top (top, bottom, middle, baseline) caption-side Pas supportée par IE

39 Propriétés de Mise en forme #8 Exercices Ouvrez le fichier style_texte.htm Appliquez les styles tels qu'ils sont décrits par les textes, en vous aidant, si besoin, du relevé des propriétés. Le fichier de correction s'appelle style_texte_corrige.htm font-family: Verdana, Geneva, Arial, sans-serif font-size:80% color:# color:# font-size:0.9em font-style:italic text-align:right font-weight:bold font-variant:small-caps text-decoration:overline underline text-transform:capitalize text-decoration:line-through text-indent:1em letter-spacing:0.3em vertical-align:middle line-height:2em list-style-type:square list-style-image:url(list_marque.gif) border:1px solid #990066; border-spacing : 2px 10px empty-cells:hide vertical-align:middle text-align:center Relevé des propriétés

40 Principales propriétés 5. Propriétés du Modèle de boîte

41 Principales propriétés 1.Modèle de boîte Introduction

42 Modèle de boîte #1 Introduction Propriété CSS Modèle de boîte CSS définit un modèle de boîte (" box model ") standard pour tous les éléments html. IE implémente une version non-standard du modèle de boîte où : Contenu height width padding margin border Largeur totale Hauteur totale Largeur totale : width+padding+border Hauteur totale : height+padding+border Largeur totale =width Hauteur totale=height D'où une différence égale à padding+border Sur les dimensions restituées sur ce navigateur.

43 Modèle de boîte #2 Boîtes de type inlines, boîtes de types blocs Propriété CSS Modèle de boîte Pour une boîte de type bloc en flux normal, toutes les propriétés de dimensions et de marges sont stylables. Pour une boîte de type inline en flux normal, les propriétés width et height ne sont pas stylables, la propriété margin n'aura d'effet que sur les marges gauche et droite. Chaque dimension (hauteur, longueur, marges) peut être traitée de manière indépendante grâce aux mots clés : top, right, bottom, left: - border-right:1px (bordure droite de 1 pixel) La forme courte emploie l'ordre horaire : Top Right Bottom Left border:1px 2px 3px 4px Boîte inline padding border margin (G | D ) Boîte bloc width height margin padding border

44 Modèle de boîte #3 Propriété CSS Modèle de boîte La propriété display permet de modifier le statut d'une boîte : display:block Transforme une boîte de type inline en boîte de type bloc. display:inline Transforme une boîte de type bloc en boîte de type en-ligne La propriété display utilise d'autres propriétés qui seront détaillées plus tard.

45 Principales propriétés 2.Modèle de boîte Principales propriétés

46 Propriétés du modèle de boîte #1 Modèle de boîtes (I) Propriété CSS Elément width : largeur du contenu - width: auto (%,em, px,cm,mm...) min/max Pas supportée par IE 5, 5+, 6 min (max)-width : largeur minimale/maximale du contenu - min-width: 5em (%,em, px,cm,mm...) height : hauteur du contenu - height: auto (%,em, px,cm,mm...) min(max)-height : hauteur minimale/maximale du contenu - min-height: 5em (%,em, px,cm,mm...) Supportée par IE 7

47 Propriétés du modèle de boîte #2 Modèle de boîtes (II) Propriété CSS Elément margin : marge extérieure - margin: auto (%,em, px,cm,mm...) margin-val : marge extérieure spécifique - margin-top: 2px (marge haute 2 pixels) (top right bottom left) padding : marge intérieure - padding: auto (%,em, px,cm,mm...) padding-val : marge intérieure spécifique - padding-top: 2px (marge haute 2 pixels) (top right bottom left)

48 Propriétés du modèle de boîte #3 Modèle de boîtes (III) Propriété CSS Elément border : bordure La propriété border peut être associée aux mots clés top, right, bottom, left, style, color pour construire des propriétés composées. Formes courtes style peut prendre les valeurs : none, dotted, dashed, solid, double, groove, ridge, inset, outset, hidden Exemples : - border-top-style:double - border-width:1px - border-bottom-width:3px - border-left-color:# border-color:# width peut utiliser toutes les unités : (%,em, px,cm,mm...) border:1 px solid # border-top:1 px solid # Les valeurs non spécifiées dans la forme courte sont celles par défaut ou celles spécifiées par une propriété ad hoc

49 Propriétés du modèle de boîte #4 Modèle de boîtes (IV) Propriété CSS Elément overflow : débordement du contenu La propriété overflow permet de décider du comportement d'un contener si le contenu est trop important. visible : Le contener s'adapte au contenu hidden : Le contenu est rogné s'il déborde scroll : Ascenseurs permettant de scroller le contenu auto : Des ascenseurs apparaissent, si nécessaire clip : Permet de rogner la zone d'affichage d'un élément pour définir une zone visible. Le contenu à l'extérieur de la zone visible n'est plus affiché. auto : Par défaut, la zone visible est celle du contenu. shape : dimension de la zone visible (top, right, bottom, left) La propriété overflow à un statut particulier : elle permet dans certains cas de résoudre des bugs liés au navigateur.

50 Propriétés du modèle de boîte #5 Modèle de boîtes (V) Propriété CSS Elément background-color : une couleur (rgb, hexadecimal, nom) background-color:# background : nature du fond d'un élément. background-image : une image (url) background-image:url(image.gif) background-repeat : répéter l'image no-repeat : pas de répétition repeat (-x | -y ): répétition (verticale|horizontale) background-attachment : détermine comment l'image est traitée. scroll : l'image défile avec le contenu fixed : l'image reste figée background-position : position de l'image par rapport au coin supérieur gauche : background-position : horizontal vertical.

51 Propriétés du modèle de boîte #6 Modèle de boîtes (VI) Propriété CSS Elément Les boîtes de type bloc accèdent à toutes les propriétés du modèle de boîte. Les boîtes de type en-ligne n'accèdent pas aux propriétés : width, height, overflow, clip Note importante : IE/win traite différemment ces propriétés qui vont être appliquées sous certaines conditions. Il est donc très important de ne pas utiliser ces propriétés sur une boîte en ligne, si son statut n'a pas été modifié par la propriété display. La propriété clip ne peut être utilisée que sur des boîtes positionnées en absolu.

52 Propriétés du modèle de boîte #7 Exercices Ouvrez le fichier style_boîte.htm Appliquez les styles tels qu'ils sont décrits par les textes, en vous aidant, si besoin, du relevé des propriétés. Le fichier de correction s'appelle style_boîte_corrige.htm background-color:#990033; Relevé des propriétés color:#ffffff; border:3px solid #cacaca; border:1px dashed #cacaca; width:20%; border-bottom:1px dashed #cacaca; padding:0.3em; margin-bottom:0.3em; border-width:1px 0 1px 0; border-style:solid; border-color:#990033; display:inline; height:200px; background-color:#cacaca; padding:5px; border-left:10px solid #000000; padding-left:10px; display:block; width:100px; height:100px; border:2px inset; background-image:url(fond_lien.gif); text-align:center; width:300px; height:30px; border:2px solid #000000; overflow:auto;

53 Principales propriétés 6. Propriétés de mise en page Le positionnement

54 Propriétés de mise en page #1 1. Introduction

55 Propriétés de mise en page #2 Introduction CSS permet de positionner tous les éléments Html au travers de propriétés dédiées comme la position, les marges, les couches (z-index). Le nombre de propriétés est réduit (6) mais leur combinaison avec la structure Html permet un nombre illimité de mises en pages. Cela nécessite de disposer d'un plan de conception rigoureux, d'une structure Html saine et d'un contenu bien ordonné. Enfin, si les 6 propriétés de mise en page sont supportées par tous les navigateurs, leurs valeurs le sont de manière plus inégale et peuvent différer d'un navigateur à l'autre. Il est donc primordial de tester et vérifier le support d'une valeur et son implémentation par les principaux navigateurs avant de l'utiliser. Mise en page Plan de conception Contenu ordonné Structure Html saine Vérification du support des propriétés

56 Propriétés de mise en page #3 Principales propriétés (I) display : la propriété display change la nature et l'affichage d'une boîte; elle peut prendre un grand nombre de valeurs très différentes : Valeurs supportées par tous les navigateurs : - none : boîte retirée - block : boîte de type bloc - inline : boîte de type inline - inline-table : tableau en-ligne Valeurs supportées de manière inégale : - table-val : boîte de type « élément de tableau » (uniquement Gecko) - inline-block : boîte en ligne et contenu formaté comme un block : non implémenté par Gecko Uniquement sur des boîtes inline pour IE Les autres valeurs (list-items, run-in) ne sont pas supportées par Gecko et IE, de qui interdit leur emploi Propriété CSS Mise en page Display Change la nature ou l'affichage d'un élément

57 Propriétés de mise en page #4 Principales propriétés (II) position : détermine comment une boîte doit être positionné. Valeurs supportées par tous les navigateurs : - absolute: position absolue - relative : position relative Valeurs supportées de manière inégale - fixed: position fixe (sauf IE5 & 6) Une boîte positionnée (absolute, relative, fixed) utilise les propriétés top, right, bottom, left avec des valeurs positives ou négatives La référence et le coin supérieur gauche qui est positionné par rapport à son plus proche parent positionné. Si aucun parent n'est lui-même positionné, c'est la boîte body qui est utilisée. IE applique un traitement particulier aux calculs des marges fusionnées d'éléments positionnés. Propriété CSS Mise en page Position Choix d'une méthode de positionnement. Fixed, pas supporté par IE5+ mais supporté par IE7 Coordonées : top,right,bottom,left avec n'importe qu'elle valeur, y compris négative

58 Propriétés de mise en page #5 Principales propriétés (III) Propriété CSS Mise en page float : faire flotter une boîte à droite ou à gauche de telle sorte que les contenus adjacents s'écoulent le long de celle-ci sur toute sa hauteur. Valeurs supportées par tous les navigateurs : - left : flotter à gauche - right : flotter à droite Les contenus adjacents (avant ou après) s'écoulent sur toute la hauteur de la boîte flottante et reprennent la totalité de la largeur disponible. Note importante : ce sont bien les contenus qui s'écoulent et pas la boîte qui les contient et affichée dans le flux normal comme si la boîte flottante n'existait pas. Ce qui signifie que les deux coins supérieurs gauches d'une boîte flottante et d'une boîte adjacente sont superposés par défaut. Le fichier position.htm illustre ce phénomène Float Faire flotter une boîte à droite ou à gauche. Laisser les contenus adjacents s'écouler le long de la boîte. IE 5+ crée une marge artificielle de 3 pixels le long du contenu adjacent. (« three pixel jog ») IE 7 corrige ce bug

59 Propriétés de mise en page #6 Principales propriétés (IV) Propriété CSS Mise en page clear : interdit à une boîte d'afficher un contenu à droite ou à gauche d'elle-même. Valeurs supportées par tous les navigateurs : - left : pas de boîte à gauche - right : pas de boîte à droite - both : pas de boîte à droite ou à gauche Logiquement une boîte affectée de la propriété : clear:both va se retrouver rejetée à la ligne. Cette propriété est une des méthodes usuelles pour forcer une boîte conteneur qui n'a pas de dimension à s'étendre à l'ensemble de ses enfants flottants. Le fichier position.htm illustre ce phénomène Clear Interdit l'affichage d'une boîte à droite ou à gauche Clear:both A pour effet de rejeter la boîte affectée à la ligne. Propriété utilisée pour forcer une boîte à s'étendre à l'ensemble de son contenu.

60 Propriétés de mise en page #7 Principales propriétés (V) Propriété CSS Mise en page z-index : positionne des boîtes de types block positionnées (absolute, relative ou fixed) sur un axe de profondeur, représenté par un empilement de couches. Les boîtes positionnées sont empilées l'une sur l'autre avec la propriété z-index qui prend comme valeur un entier quelconque (0..n). Le positionnement en couches peut être utilisé pour réaliser des effets graphiques (synchronisation, transparence...). Cette technique comporte, néanmoins, des limitations et des contraintes. Un élément positionné sur une couche supérieure peut en effet interdire la sélection ou le click sur un élément situé dans une couche inférieure.. Z-index Empile des boîtes l'une sur l'autre pour simuler un axe de la profondeur Limitations et contraintes importantes.

61 Propriétés de mise en page #8 Principales propriétés (VI) Propriété CSS Mise en page visibility : rend invisible une boîte tout en lui conservant sa place dans l'affichage. Valeur supportées par tous les navigateurs : - hidden : la boîte est invisible - visible : la boîte est visible Contrairement à la propriété display:none qui retire totalement la boîte du flux, la propriété visibility conserve la place nécessaire à l'affichage de la boîte. En conséquence, cet espace d'affichage décalera d'autant toutes les boîtes adjacantes. visibility Rendre visible ou invisible une boîte tout en lui conservant sa place à l'affichage La valeur collapse est censée gérer le repliement / dépliement d'une boîte. Elle n'est supportée que par Gecko et paraît difficile d'usage.

62 Propriétés de mise en page #9 Excercices Relevé des propriétés Ouvrez le fichier style_position.htm, appliquez les styles tels qu'ils sont décrits par les textes, en vous aidant, si besoin, du relevé des propriétés. Le fichier de correction s'appelle style_position_corrigé.htm background:url(fond_body.gif) top left repeat-y; height:6em; background-color:#b5b0b5; text-align:center; width:140px; background-color:#993366; list-style-type:none; text-decoration:none; border:1px solid #efefef; color:#993366; padding-left:162px; margin:0; padding:0; display:none; font-size:1em; border:1px solid #ff9900; color:#993366; float:left; padding:10px; margin:3px 10px 0 0; display:block; width:100%; padding:0.3em; background-color:#efefef; margin-bottom:5px; color:#ffffff; border:2px solid #993366; clear:both; width:75%; margin-top:0; display:inline; margin:2px;

63 Principes de mise en page 1. Introduction

64 Principes de mise en page #1 Introduction La mise en page CSS nécessite que plusieurs conditions soient réunies : Un code sain, robuste, pertinent et structuré : Css travaille sur la structure Html au travers du DOM. Une balise mal formée peut suffire à produire un résultat très aléatoire. La structure Html doit être pertinente, tant du point de vue du contenu, que du point de vue des boîtes dédiées au design, notamment au regroupement d'éléments. Une bibliothèque graphique bien préparée : Les objectifs de design seront d'autant plus faciles à atteindre qu'ils s'appuieront sur des éléments graphiques intelligemment préparés. Des objectifs de design concertés : Ils doivent prendre en compte l'ensemble des contraintes des différents intervenants (graphiste, intégrateurs...) et intégrer les contraintes liées à l'interopérabilité. Mise en page CSS Un code sain, robuste et pertinent Une bibliothèque graphique intelligemment préparée Des objectifs de design concertés et raisonnables

65 Principes de mise en page #2 Le modèle de mise en forme visuel (I) : Le document est vu comme un arbre d'éléments selon la représentation du DOM (parent-enfant) Modèle de mise en forme Chaque élément de l'arbre produit zéro ou plusieurs boîtes gouvernées par : - Leurs dimensions et leur type - Le schéma de positionnement (flux normal, positionné ou flottant) - Les relations entre les éléments de l'arbre, la taille de la zone de visualisation, les dimensions intrinsèques des objets. La position et la taille d'une boîte est calculée en fonction d'une zone rectangulaire qui s'appelle le bloc conteneur. Le bloc conteneur initial est l'élément racine body; par défaut, ce bloc adapte sa dimension à son contenu. Zone de visualisation L'affichage s'effectue dans une zone de visualisation redimensionnable et scrollable sur les médias continus (ex. navigateur). Arbre du document Boîtes dimensions, type schéma de positionnement relation DOM et objets Bloc conteneur Bloc conteneur initial

66 Principes de mise en page #4 Le concept de contexte de mise en forme (I) Dans un contexte de type bloc : - Les boîtes s'affichent en succession verticale. - Les marges régissent la distance verticale entre deux bloc successifs et fusionnent. - Le bord externe gauche de chaque boîte touche le bord externe gauche du bloc conteneur. Contexte de mise en forme Le contexte de mise en forme détermine la manière dont vont être affichées les boîtes selon les règles du modèle de boîte. La référence est toujours le bloc conteneur. Dans un contexte de type en ligne : - Les boîtes s'affichent en succession horizontale dans une " boîte de ligne " (largeur de la zone de visualisation). - Les marges, bordures et espacements sont conservés. - La largeur dépend de la largeur du bloc conteneur. - Les boîtes de ligne génèrent des retours à la ligne si nécessaire.

67 Principes de mise en page #5 Le concept de contexte de mise en forme (II) Contexte de mise en forme Le flux normal, repositionnement, chevauchement : Une boîte en flux normal est affichée selon les caractéristiques par défaut du contexte de mise en forme. Selon leurs caractéristiques, les propriétés de mise en page retirent ou repositionnent les boîtes par rapport à leur position en flux normal. Les éléments retirés ou repositionnés peuvent donc créer des chevauchements. Il faut toujours contrôler l'effet de ces chevauchements pour les événement suivants : - Redimensionnement de la zone de visualisation - Agrandissement de la taille des caractères - Rajout ou modification du contenu. Flux normal + Positionnement = Mise en forme Contrôler les effets : Redimensionnement Taille caractères Taille contenu

68 Principes de mise en page #6 Types de structures : Contexte de mise en forme On distingue trois types de structures de mise en forme. Les structures à taille fixe : Les éléments qui servent d'ossature au design utilisent des unités fixes. - Le redimensionnement est impossible. - Le contenu est limité. Dans la pratique, l'utilisation de structures mixtes apportent les meilleurs résultats. Les structures à taille relative : Les éléments qui servent d'ossature au design utilisent des unités relatives. - La mise au point du design, notamment la synchronisation des éléments graphiques, est difficile. Les structures mixtes : Les éléments qui servent d'ossature au design utilisent des unités fixes ou relatives. - La mise au point de la structure doit être très organisée


Télécharger ppt "Qelios – Formation Initiation au langage CSS Introduction Première approche Interprétation du flux Html Syntaxe de base La cascade Principales propriétés."

Présentations similaires


Annonces Google