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/
Héritage : Chaque élément «
héritage toutes les propriétés de son élément
Héritage, fusion et spécificité
héritage toutes les propriétés de son élément
«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
héritage toutes les propriétés de son élément
Héritage, fusion et spécificité
héritage toutes les propriétés de son élément
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
Héritage, fusion et spécificité
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
Héritage, fusion et spécificité
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
• 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
• 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
des éléments avecCSS
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
des éléments avecCSS
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
théorique (positionnement relatif) mais par rapport
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
des éléments avecCSS
100px
90px
théorique (positionnement relatif) mais par rapport à la position
référence
• 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
théorique (positionnement relatif) mais par rapport
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
des éléments avecCSS
100px 90px
théorique (positionnement relatif) mais par rapport à la position
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
des éléments avecCSS
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
des éléments avecCSS
positionnement
absolu
scrolling en
liaisonavec l'élément de référence
positionnement
fixe
pas de scrolling
• 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.