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

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



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



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


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


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


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.



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

=

+



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



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


2. Unités de mesure


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.


3. Syntaxe des propriétésForme longue, forme courte


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


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 policefont-size:0.9em (%,em,px,cm,mm...)

font-family : Famille de policefont-family : Verdana, sans-serif

Propriété CSSTexte

font-style : style de policefont-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)


Texte : (II)

font-weight :graisse de policefont-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)


Texte : (III)

Text-align : alignement- text-align:left- text-align:right- text-align:center- text-align:justify


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


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)


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


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


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)


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


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


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


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.


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


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.


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


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)


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


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.


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.


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.


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;


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;


6. Propriétés de mise en pageLe positionnement

Propriétés de mise en page #1

1. Introduction


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


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


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


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


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.


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.


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.


Excercices


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


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


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.


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


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

Documents

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