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
Qelios – Formation
Initiation au langage CSS
Introduction Présentation Version CSS
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
Qelios – Formation
Initiation au langage CSS
Première approche
Type d'utilisation Type de médiasAgent-utilisateur, Auteur,
Utilisateur La cascade, l'héritage Conclusion
Première approche #1
Trois types d'utilisations :
InterneOn déclare les styles dans la partie Headex : <style type="text/css ">...</style>
InlineOn style un élément dans le code Htmlex : <p style="color:#000000 ">
ExterneOn 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
Trois types d'utilisation
Inline
Interne
Externe
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
handled
tv
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"...
Tous les types de médias ne sont pas universellement supportés.Les plus communs sont : screen, print, handle, tv
Note
Les aides techniques (synthétiseurs vocaux)
utilisent, actuellement, le type de média screen
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
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 :
CSSRè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.
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
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 FluxLe code Html
Le Flux naturelOrdre dans lequel les éléments
sont écrits dans le code Html
Boîtes InlineLes 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 ».
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
=
+
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 :
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é ValeurUne déclaration est écrite entre accolades { }
Ecriture CSS
identifiant{propriété:valeur;propriété:valeur}
Règle
Sélecteur Bloc de déclaration
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 travailLes commentaires s'écrivent entre /* et */ :
/* ceci est un commentaire */
L'identifiant est un sélecteur CSS valide
Syntaxe de base
2. Les sélecteurs
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 Htmlp{color:#ff0000}
D' ID ( # ) : valeur de l'attribut id#adresse{color:#ff0000} (<p id="adresse">)
De classe ( . ) : valeur de l'attribut class.adresse{color:#ff0000} (<p class="adresse">)
Descendant ( element1 espace element2 ) : l'élément 2 est enfant de l'élément 1p span{color:#ff0000}(<p>un texte <span>rouge</span></p>)
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
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
Associationelem1,elem2, elem3{}
Une propriété pour plusieurs éléments
Descendanceselecteur 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
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:#000099
Taille de policefont-size: 2em
font-size:1.5emfont-size:0.9m
Cadre noir border:1px solid #000000
Fond gris-clair background-color:#eeeeee
Grasfont-weight:bold
Le code postal et la ville : en gras Souligné Text-decoration:underline
Syntaxe de base # 9
4. Pseudo-Classes
Pseudo-Eléments
Syntaxe de base #10
Pseudo-classes (partie I)
:hoverEtat d'un élément survoléa:hover{color:#ff0000}
:activeEtat d'un élément activé (click)a:active{color:#ff0000}
:focusEtat d'un élément recevant le focusinput:focus{color:#ff0000}
:linkEtat d'un lien non visitéa:link{color:#ff0000}
:visitedEtat 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.
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-linePremière ligne d'un élémentp:first-line{color:#ff0000} (cf selecteur.htm)
:first-letterPremier 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
Qelios – Formation
Initiation au langage CSS
PrincipalesPropriétés
Introduction Unité de mesure Syntaxe des propriétés
Propriété Globale et ComposéeForme Longue et Courte
Propriétés de mise en formeTexteElémentsDiversExercices
Propriétés du modèle de boîte
IntroductionPrincipales propriétésExercices
Propriété de mise en pageIntroductionPositionFloatDisplayClear
Principales propriétés
1. Introduction
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 formeTexte,
Boîtes (fond, bordures...), Eléments (Style de listes...)
Mise en pagePositionnement
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...
Principales propriétés
2. Unités de mesure
Principales propriétés
Les unités de mesure Unité de mesure CSSOn 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ètrecm : 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.
Principales propriétés
3. Syntaxe des propriétésForme longue, forme courte
Principales propriétés
Propriété globale, propriété composée PropriétésLes 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
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ésséparés par un tiret
font-style:val
Principales propriétés
Forme longue, forme courte PropriétésDans 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é: valpropriété-mot: valproprié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
Principales Propriétés
4. Propriétés de mise en forme
Propriétés de Mise en forme #1
Texte : (I)
color : Couleur de police- color:#990066 (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é CSSTexte
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-seriffont-size autre valeurs
Absolues :xx-large (h1) x-large (h2)large (h3)
medium(h4) small (h5)
x-smallxx-small (h6)
Relative :smallerlarger
color autre valeurs color:rgb(158, 0 102)
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é CSSTexte
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)
Text-align : alignement- text-align:left- text-align:right- text-align:center- text-align:justify
Propriété CSSTexte
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-alignL'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
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é CSSTexte
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-spaceLes valeurs pre-wrap et
pre-line sont susceptibles de ne pas être implémentées
Propriétés de Mise en forme #5
Eléments (I) : Les listes Propriété CSSElémentlist-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-typeAutres valeurs
lower-latin, upper-latin, lower-greek, armenian, georgian
Pas supportées par IE
Propriétés de Mise en forme #6
Eléments (II) : Les tables (A) Propriété CSSElé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-spacingempty-cells
Pas supportées par IE
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é CSSElé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
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:#000099
color:#000000
font-size:0.9emfont-style:italic
text-align:right
font-weight:bold
font-variant:small-capstext-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
Principales propriétés
5. Propriétés du Modèle de boîte
Principales propriétés
1.Modèle de boîteIntroduction
Modèle de boîte #1
Introduction Propriété CSSModèle de boîteCSS 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
hei
gh
t
width
padding
margin
border
Largeur totale
Hau
teur
tot
ale
Largeur totale : width+padding+border
Hauteur totale : height+padding+border
Largeur totale =widthHauteur totale=height
D'où une différence égale à
padding+borderSur les dimensions
restituées sur ce navigateur.
Modèle de boîte #2
Boîtes de type inlines, boîtes de types blocs Propriété CSSModèle de boîtePour 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 inlinepaddingborder
margin (G | D )
Boîte blocwidthheightmarginpaddingborder
Modèle de boîte #3
Propriété CSSModè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îtePrincipales propriétés
Propriétés du modèle de boîte #1
Modèle de boîtes (I) Propriété CSSElé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
Propriétés du modèle de boîte #2
Modèle de boîtes (II) Propriété CSSElé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é CSSElémentborder : 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:#000000- border-color:#000000...
width peut utiliser toutes les unités :(%,em, px,cm,mm...)
border:1 px solid #000000
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
Propriétés du modèle de boîte #4
Modèle de boîtes (IV) Propriété CSSElémentoverflow : 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 contenuhidden : Le contenu est rogné s'il débordescroll : Ascenseurs permettant de scroller le contenuauto : 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.
Propriétés du modèle de boîte #5
Modèle de boîtes (V) Propriété CSSElément
background-color : une couleur (rgb, hexadecimal, nom)
background-color:#990066
background : nature du fond d'un élément.
background-image : une image (url)background-image:url(image.gif)
background-repeat : répéter l'imageno-repeat : pas de répétitionrepeat (-x | -y ): répétition (verticale|
horizontale)
background-attachment : détermine comment l'image est traitée.
scroll : l'image défile avec le contenufixed : l'image reste figée
background-position : position de l'imagepar 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é CSSElé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
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;
Principales propriétés
6. Propriétés de mise en pageLe 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 supportdes propriétés
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
Propriété CSSMise en page
Display
Change la nature ou
l'affichage d'un élément
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é CSSMise 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'ellevaleur, y compris
négative
Propriétés de mise en page #5
Principales propriétés (III) Propriété CSSMise en pagefloat : 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 margeartificielle de 3 pixelsle long du contenu
adjacent.(« three pixel jog »)
IE 7 corrige ce bug
Propriétés de mise en page #6
Principales propriétés (IV) Propriété CSSMise en pageclear : 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'affichaged'une boîte à droite
ou à gauche
Clear:bothA pour effet de rejeterla boîte affectée à la
ligne.
Propriété utilisée pourforcer une boîte à
s'étendre à l'ensemble de son
contenu.
Propriétés de mise en page #7
Principales propriétés (V) Propriété CSSMise en pagez-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'unesur l'autre pour simulerun axe de la profondeur
Limitations et contraintesimportantes.
Propriétés de mise en page #8
Principales propriétés (VI) Propriété CSSMise en pagevisibility : 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
invisibleune boîte tout en luiconservant 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.
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;
Principes de mise en page
1. Introduction
Principes de mise en page #1
IntroductionLa 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
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 visualisationL'affichage s'effectue dans une zone de visualisation redimensionnable et scrollable sur les médias continus (ex. navigateur). Arbre du document
Boîtesdimensions, type
schéma de positionnementrelation DOM et objets
Bloc conteneur
Bloc conteneur initial
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 formeLe 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.
Principes de mise en page #5
Le concept de contexte de mise en forme (II) Contexte de mise en formeLe 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èresTaille contenu
Principes de mise en page #6
Types de structures : Contexte de mise en formeOn 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
Top Related