Qelios – Formation Initiation au langage CSS Jour 1 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 lllllllllllllllll Copyright – Qelios 2006

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

+ = Introduction #1 Interopérabilité Rationnalisation Accessibilité Html Structure et contenu 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. CSS Présentation (style et mise en page) = 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 Interopérabilité Rationnalisation Accessibilité Le couple Html et CSS assure : L'universalité et l'interopérabilté La rationnalisation du travail de production Une meilleure accessibilité

Initiation au langage CSS 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

Première approche #1 Trois types d'utilisation Inline Interne Externe Trois types d'utilisations : Inline On style un élément dans le code Html ex : <p style="color:#000000 "> Inline Interne Externe Interne On déclare les styles dans la partie Head ex : <style type="text/css ">...</style> Externe On déclare les styles dans un fichier externe (.css) ex : <link rel="stylesheet" href="style.css" type="text/css" media="screen" title="style par defaut" /> Chaque utilisation répond à un besoin Inline pour un élément unique Interne pour une page unique Externe pour un site entier

Première approche #2 Types de médias opérationnels CSS peut s'adresser à différents types de médias Screen : Navigateur web ou assimilé screen print handled tv Print : Imprimante Handled : Ecran limité (PDA, Smartphone...) Speech : Synthétiseur vocal (CSS 3 ) Tv : Web tv Braille / Embossed : Plage et imprimante Braille On spécifie un type de média à l'aide de l'attribut " media " <link rel="stylesheet" href="style.css" type="text/css" media="screen"... Note Les aides techniques (synthétiseurs vocaux) utilisent, actuellement, le type de média screen Tous les types de médias ne sont pas universellement supportés. Les plus communs sont : screen, print, handle, tv

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

Première approche #4 CSS Règles + Cascade Héritage = CSS utilise des règles 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 ex : h1{font-size:1.2em} Identifiant { déclaration } Tous les éléments Html (balises) sont stylables. En conclusion : 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 .

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

Interprétation du flux Html #1 Le Flux 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 code Html Le Flux naturel Ordre dans lequel les éléments sont écrits dans le code Html 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... Boîtes Inline Les unes à coté des autres 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... Boîtes Block Les unes en dessous des autres Par convention, on utilise indifféremment la dénomination « boîte » ou  « élément ».

Interprétation du flux Html #2 Identification des éléments Identification des boîtes Les boîtes sont identifées au travers de la structure du DOM (Document Object Model) en utilisant, par exemple : = Structure DOM Le nom de l'élément : p, h1... + Sélecteurs CSS 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.

Initiation au langage CSS Qelios – Formation Initiation au langage CSS Syntaxe de base

Syntaxe de base 1. Règles d'écriture

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

Syntaxe de base 2. Les sélecteurs

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

Styler un élément en fonction du contexte du DOM Syntaxe de base #5 Combinaison de sélecteurs Les Sélecteurs (partie IV) Les sélecteurs peuvent s'associer pour adresser plusieurs éléments pour une propriété identique : Association elem1,elem2, elem3{} Une propriété pour plusieurs éléments 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. 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. Descendance selecteur 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.

Syntaxe de base 3. Exercices

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

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

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

Syntaxe de base #12 :first-line :first-letter Pseudo-éléments Pseudo-éléments (partie I) Pseudo-éléments 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 Première ligne :first-line Premier caractère :first-letter :first-line Première ligne d'un élément p:first-line{color:#ff0000} (cf selecteur.htm) Support Gecko, Opéra, Safari, IE6/7 :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.

Initiation au langage CSS 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 Principales propriétés Propriété de mise en page Introduction Position Float Display Clear

Principales propriétés 1. Introduction

Principales Propriétés Introduction Propriétés CSS Les différents types de propriétés CSS Texte : polices, couleurs, alignement... Mise en forme Texte, Boîtes (fond, bordures...), Eléments (Style de listes...) 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... Tous les éléments ont des propriétés par défaut (agent utilisateur). Mise en page Positionnement Boîtes (marges,dimensions...) Tous les éléments peuvent acquérir des styles auteur ou utilisateur.

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

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 : 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 : 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 Selon le contexte, les mesures relatives peuvent accepter des valeurs négatives.

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

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 : #000000 - display: block Uniques /Globales Un seul mot clé font:val Les propriétés composées : plusieurs mots clés séparés par un tiret : - font-size : 0.9em Composées Certaines propriétés composées adressent un style pour un aspect particulier d'une propriété globale Plusieurs mots clés séparés par un tiret font-style:val Par exemple : - font-family (propriété globale font) - border-color (propriété globale border)

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 : Forme longue body{ font-family:verdana, sans serif; font-size:0.9em; font-style:italic; } propriété: val propriété-mot: val Dans la forme courte, on peut regrouper les valeurs pour une même propriété globale : Forme courte .longue{ border-top:1px; border-right:2px; border-bottom:3px; border-left:4px; } .courte{ border:1px 2px 3px 4px } Propriété: val val val

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

Propriétés de Mise en forme #1 Texte : (I) Propriété CSS Texte color : Couleur de police - color:#990066 (hexadecimal) - color:red (mot-clés) color autre valeurs color:rgb(158, 0 102) font-family : Famille de police - font-family : Verdana, 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 note : Toujours terminer par une police sans-serif font-size : taille de police - font-size:0.9em (%,em,px,cm,mm...) note : Privilégier em et % font-style : style de police - font-style:normal - font-style:italic - font-style:oblique

Propriétés de Mise en forme #2 Texte : (II) Propriété CSS Texte 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) 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)

Propriétés de Mise en forme #3 Texte : (III) Propriété CSS Texte Text-align : alignement - text-align:left - text-align:right - text-align:center - text-align:justify 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 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

Propriétés de Mise en forme #4 Texte : (IV) Propriété CSS Texte 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) white-space Les valeurs pre-wrap et pre-line sont susceptibles de ne pas être implémentées 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...)

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-type Autres valeurs lower-latin, upper-latin, lower-greek, armenian, georgian list-style-position : position de la marque (intérieure ou exterieure) - list-style-position : outside - list-style-position : inside Pas supportées par IE list-style-image : Utiliser une image comme marque des items - list-style-image: url(image.gif)

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 empty-cells border-spacing : espacement entre les cellules - border-spacing : 2px (horizontal) - border-spacing : 2px 3px (h / v) Pas supportées par IE empty-cells : Afficher les bordures des cellules vides. - empty-cells: show - empty-cells: hide table-layout : largeur de la table - table-layout: auto (100%) - table-layout: fixed (largeur 1ère ligne)

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) caption-side width : largeur - width: auto - width: 100% (%,em, px,cm,mm...) Pas supportée par IE vertical-align : Alignement vertical - vertical-align: top (top, bottom, middle, baseline)

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

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

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

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

Modèle de boîte #2 Propriété CSS Modèle de boîte padding border 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. Boîte inline padding border margin (G | D ) 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. Boîte bloc width height margin padding border 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) Top La forme courte emploie l'ordre horaire : Left Right border:1px 2px 3px 4px Bottom

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.

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

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 min (max)-width : largeur minimale/maximale du contenu - min-width: 5em (%,em, px,cm,mm...) Pas supportée par IE 5, 5+, 6 Supportée par IE 7 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...)

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)

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 border:1 px solid #000000 style peut prendre les valeurs : none, dotted, dashed, solid, double, groove, ridge, inset, outset, hidden border-top:1 px solid #000000 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 width peut utiliser toutes les unités : (%,em, px,cm,mm...) Exemples : - border-top-style:double - border-width:1px - border-bottom-width:3px - border-left-color:#000000 - border-color:#000000 ...

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. La propriété overflow à un statut particulier : elle permet dans certains cas de résoudre des bugs liés au navigateur. 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)

Propriétés du modèle de boîte #5 Modèle de boîtes (V) Propriété CSS Elément background : nature du fond d'un élément. background-color : une couleur (rgb, hexadecimal, nom) background-color:#990066 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.

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.

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

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

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

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

Propriétés de mise en page #3 Principales propriétés (I) Propriété CSS Mise en page 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 Display Change la nature ou l'affichage d'un élément 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és de mise en page #4 Principales propriétés (II) Propriété CSS Mise en page position : détermine comment une boîte doit être positionné. Valeurs supportées par tous les navigateurs : - absolute: position absolue - relative : position relative 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 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é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. 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 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

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

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. Z-index Empile des boîtes l'une sur l'autre pour simuler un axe de la profondeur Limitations et contraintes importantes. 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..

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. visibility Rendre visible ou invisible une boîte tout en lui conservant sa place à 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. 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.

Propriétés de mise en page #9 Excercices margin-top:0; padding:0; 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 margin:0; display:none; padding:0.3em; border:1px solid #ff9900; color:#993366; padding:10px; Relevé des propriétés background-color:#efefef; background:url(fond_body.gif) top left repeat-y; font-size:1em; height:6em; display:inline; background-color:#b5b0b5; float:left; text-align:center; margin:3px 10px 0 0; border:1px solid #efefef; display:block; width:140px; width:100%; background-color:#993366; margin:2px; color:#ffffff; list-style-type:none; border:2px solid #993366; text-decoration:none; clear:both; color:#993366; margin-bottom:5px; padding-left:162px; width:75%;

Principes de mise en page 1. Introduction

Principes de mise en page #1 Introduction La mise en page CSS nécessite que plusieurs conditions soient réunies : Mise en page CSS 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. Un code sain, robuste et pertinent Une bibliothèque graphique intelligemment préparée 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 et raisonnables 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é.

Principes de mise en page #2 Le modèle de mise en forme visuel (I) : Modèle de mise en forme Le document est vu comme un arbre d'éléments selon la représentation du DOM (parent-enfant) L'affichage s'effectue dans une zone de visualisation redimensionnable et scrollable sur les médias continus (ex. navigateur). Zone de visualisation Arbre du document 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. Bloc conteneur initial Bloc conteneur Boîtes dimensions, type schéma de positionnement relation DOM et 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.

Principes de mise en page #4 Le concept de contexte de mise en forme (I) 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 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. 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.

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 : Flux normal Une boîte en flux normal est affichée selon les caractéristiques par défaut du contexte de mise en forme. + Positionnement = 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. Mise en forme Contrôler les effets : Redimensionnement Taille caractères Taille contenu 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.

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