2018 css3 partie3 - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-css3-partie3.pdf · Code HTML que la . Le modèle de boites Le navigateur représente

DAWDAWDéveloppement Applications

Ouadfel SalimaOuadfel Salima

Site du cours: http://salimaouadfel.e

DAWDAWpplications Web

Ouadfel SalimaOuadfel Salima

Site du cours: http://salimaouadfel.e-monsite.com/

Conception de page web statique

3. CSS3(fin)

Conception de page web statique

CSS3(fin)

Héritage : Chaque élément «

héritage toutes les propriétés de son élément

Héritage, fusion et spécificité


«parent»

Fusion : Si plus d'une règle s’appliquent au même

élément, les propriétés différentes

h1 sera affiché avec une couleur rouge fond noir.

: Chaque élément « enfant » reçoit en




Si plus d'une règle s’appliquent au même

les propriétés différentes sont «fusionnées».

h1 sera affiché avec une couleur rouge ET un

• Spécificité: Si pour le même

règles appliquent différentes valeurs


règles appliquent différentes valeurs

même propriété,

1. On calcule la spécificité

règle.

2. On ordonne les règles

3. La règle qui a la plus grande 3. La règle qui a la plus grande

appliquée.

4. Si toutes les règles ont la

dernière sera appliquée.

le même élément, différentes

différentes valeurs pour la


différentes valeurs pour la

spécificité ou le poids de chaque

la plus grande spécificité sera la plus grande spécificité sera

Si toutes les règles ont la même spécificité, la

sera appliquée.

• les spécifications CSS propo

des sélecteurs selon un barème de poids sous des sélecteurs selon un barème de poids sous

forme de notation à quatre chiffres

Le nombre d’id

Le nombre d’attributs+ Le nombre

Les sélecteurs: universel, descendance, enfant, adjacence

Le nombre d’elements+

SS proposent une classification

des sélecteurs selon un barème de poids sous des sélecteurs selon un barème de poids sous

forme de notation à quatre chiffres :

Le nombre d’id

1 ou 0

Le nombre de classe+ Le nombre de pseudo-classe

adjacence, fraternité ont un poids nul

+ Le nombre pseudo-element

http://specificity.keegan.st/http://specificity.keegan.st/

• La règle CSS !important permet de spécifier

propriété est la plus importante dans votre feuille CSS propriété est la plus importante dans votre feuille CSS

en lui donnant un poids plus important

Code css

Code HTMLCode HTML

permet de spécifier que la

propriété est la plus importante dans votre feuille CSS propriété est la plus importante dans votre feuille CSS

un poids plus important.

Le modèle de boitesLe navigateur représente chaque élément comme

boîte.

Le navigateur représente chaque élément comme une

Une boîte est composée de 4 parties• Contenu (contenu de l'élément : texte,

• Marge interne (Padding) :marge entre

• Cadre (Border): une bordure

La notion de

• Cadre (Border): une bordure

• Marge externe (Margin): marge entre le

éléments adjacents dans le flux

marge externe

bordurebordure

marge

contenu

parties :texte, image… autres éléments…)

entre le contenu et la bordure

deboite

le cadre et les boîtes matérialisant les

marge externe

bordurebordure

marge interne

contenu

On considère deux types de

La boîte des éléments de type

sur une nouvelle ligne et prend toute la largeur disponible.

La boîte des éléments de typecomporte comme un mot dans le texte, et sa largeur dépend de son contenu.

On considère deux types de boites:bloc et inline

La boîte des éléments de type bloc commence

sur une nouvelle ligne et prend toute la largeur

La boîte des éléments de type inline se comporte comme un mot dans le texte, et sa largeur dépend de son contenu.

Balise div

Vient du mot division. Cette balise

de type bloc introduit une division,de type bloc introduit une division,

un bloc à l’intérieur de la page, une

boîte bloc à laquelle on peut

appliquer un style particulier.

Entraîne un retour de chariot avant

et après le bloc qu’elle définit.

Usage fréquent dans les CSS,

accepte tout ce que l’on veut àaccepte tout ce que l’on veut à

l ’intérieur : boîtes bloc ou boîtes en

lignes, ...

Balise span

Cette balise de type boîte

en-ligne n’introduit pas deen-ligne n’introduit pas de

division mais simplement

une zone à l’intérieur d’un

paragraphe à laquelle on

peut appliquer un style

particulier.

Usage fréquent dans lesUsage fréquent dans les

CSS

flux du document : ordre dans lequel le affiche les boîtes.

• flux normal :sans positionnement

Flux d’affichage du

• flux normal :sans positionnement

• un élément père est un conteneur

• un élément fils s'affiche dans son

• élément bloc

• s'affiche en dessous de son frère précédent.

• occupe toute la largeur disponible dans son

• élément en ligne• élément en ligne

• s'affiche à côté de son frère précédent.

• retour à la ligne quand il n'y a plus de place dans le

• flux personnalisé avec positionnement

• certaines propriétés CSS permettent de

normal

: ordre dans lequel le navigateur

:sans positionnement(par défaut)

du documentHTML

:sans positionnement(par défaut)

conteneur

dans son conteneur

précédent.

dans son conteneur.

précédent.

plus de place dans le conteneur.

avec positionnement

certaines propriétés CSS permettent de sortir des éléments du flux

• exemple (sans positionnement)

Positionnement des positionnement)

des éléments avecCSS

• attribution de dimensions aux éléments div1 et

Positionnement des éléments

400px

250px

et p1

ajout de marges

internes (padding)

aux éléments

éléments avecCSS

aux élémentsdiv1 et p1

400px

250px20px

30px 30px

20px

• ajout d'une marge externe (margin) a l'élément

Positionnement des

20px

l'élément div1

div1 sans marge


20px

div1 avec marge

55

• positionnement relatif

• l'élément est décalé à l'aide des propriétés

rapport à sa position normale dans le flux

Positionnement des

l'aide des propriétés top, right, left, bottom par

flux courant


50px

40px

40px

50px

40px

• positionnement absolu

• sort un élément du flux

• expriment des décalages non plus par rapport

théorique (positionnement relatif) mais par rapport

Positionnement des


d'un bloc conteneur de référence

des décalages non plus par rapport à position

théorique (positionnement relatif) mais par rapport à la position


100px

90px


référence

• positionnement absolu

• sort un élément du flux

• expriment des décalages non plus par rapport


Positionnement des


d'un bloc conteneur de référence

des décalages non plus par rapport à position



100px 90px


référence

• Dans le cas où tous les ancêtres de l'

positionné en absolu ne sont

Positionnement des

positionné en absolu ne sont

(position:static), le navigateur les ignorent tous

en rétablissant le positionnement par rapport

aux bords de la page.

Dans le cas où tous les ancêtres de l'élément

ne sont pas positionnés


ne sont pas positionnés

, le navigateur les ignorent tous

en rétablissant le positionnement par rapport

• positionnement fixe

• cas particulier du positionnement absolu

• l'élément reste fixe dans la page par rapport

scroll)

Positionnement des

absolu

page par rapport à la zone de visualisation (pas de


positionnement

absolu

scrolling en

liaisonavec l'élément de référence

positionnement

fixe

pas de scrolling

positionnement flottant

Positionnement des éléments éléments avecCSS

positionnement flottant

Positionnement des éléments éléments avec CSS

Exemple de mise en page avec floatPositionnement des éléments éléments avec CSS

• possibilité de retirer des éléments du fluxPositionnement des

•display:none l'élément n'est plus du toutTout se passe comme

du fluxdes éléments avecCSS

p4

l'élément n'est plus du tout affiché.passe comme si il n'existait pas

• possibilité de rendre invisible des élémentsPositionnement des

•visibility:hidden l'élément n'est plus du toutmais sa place et ses dimensions ne sont pas touchées. L’élément occupe toujours de l’espace sur la page.

éléments du fluxdes éléments avecCSS

l'élément n'est plus du tout affiché mais sa place et ses dimensions ne sont pas touchées. L’élément occupe toujours de l’espace sur la page.

Documents

2018 css3 partie3 - salimaouadfel.e-monsite.comsalimaouadfel.e-monsite.com/medias/files/2018-css3-partie3.pdf · Code HTML que la . Le modèle de boites Le navigateur représente