Vous êtes sur la page 1sur 111

LOGO

Développement
d’Applications Web
(cours 03)
2ème année Licence Informatique
Université Alger1
2018/ 2019

Prof ALI SAOUCHA


Email: n_ali_saoucha@esi.com 1
LOGO

2
Le css

3
Introduction

4
Les versions de CSS

 Le CSS a évolué, et les majeurs versions sont:


 CSS 1 : dès 1996, on dispose de la première version du CSS. Elle pose les bases de
ce langage qui permet de présenter sa page web, comme les couleurs, les marges,
les polices de caractères, etc.
 CSS 2 : apparue en 1999 puis complétée par CSS 2.1, cette nouvelle version de CSS
rajoute de nombreuses options. On peut désormais utiliser des techniques de
positionnement très précises, qui nous permettent d'afficher des éléments où on le
souhaite sur la page.
 CSS 3 : c'est la dernière version, qui apporte des fonctionnalités particulièrement
attendues comme les bordures arrondies, les dégradés, les ombres, etc.
 C’est le navigateur qui lit le code CSS et comprend comment afficher la
page.
 Plus le navigateur est vieux moins il connait les fonctionnalités du CSS.
5
Comment appliquer un style
• Un sélecteur détermine à quel élément un style doit être
appliqué.
• Une propriété détermine le style qui va être appliqué à un
élément.
• Une valeur détermine le comportement d’une propriété.

6
Où écrire le CSS ?

• 3 possibilités :
– Dans la balise ouvrante d’un élément,
– Dans l’élément head du document HTML,
– Dans un fichier CSS séparé.

7
Dans la balise ouvrante d’un élément

on peut déclarer le style à l'intérieur d'une balise html à l'aide


de l'attribut style. Par exemple :

 Cette option n’est pas du tout recommandée. Car elle se


rapproche de l’utilisation des balises de mise en forme au
début de l’ère Html. 8
Dans l’élément head du document HTML
Dans l’entête <head> du fichier Html on insère le code CSS
dans une balise <style> à l’intérieur de l’entête <head>. Par
exemple :

9
Dans un fichier CSS séparé

Dans un fichier .css


C’est l’endroit recommandé. C’est la méthode la plus pratique
et plus souple.
Ça évite de tout mélanger dans un seul fichier.
On lie le fichier .css à la page Html à l’aide de la balise <link>
que l’on place dans le <head>.

10
 Dans la balise ouvrante: elle se rapproche de l’utilisation des balises de mise en forme au début
de l’ère Html.
 Dans l’élément head: le code CSS est répété dans chaque fichier HTML

 Dans un fichier CSS séparé: Les règles sont écrites qu'une seule fois pour tout votre site

11
Dans un fichier CSS séparé

12
Dans un fichier CSS séparé

<link rel="stylesheet" href="nom_fichier_style.css" >


L’élément link est représenté sous forme de balise orpheline
et doit être accompagné de ses deux attributs « rel » et « href ».
L’attribut rel signifie relationship qui correspond donc à la
relation entre la ressource et le document courant. Dans notre
cas l'attribut rel possède une valeur stylesheet qui indique que
c'est une feuille de style..
L’attribut href, que vous connaissez déjà, sert à faire le lien
en soi.

13
Dans un fichier CSS séparé

14
Dans un fichier CSS séparé

15
Les commentaires en CSS

Les fichiers CSS sont très vite très longs : il est donc
essentiel de les commenter proprement !

Un commentaire en CSS :


/* Je suis un commentaire CSS */

18
Appliquer un style en sélectionnant une balise

Appliquer du style à une balise


La syntaxe est : balise { propriété1 : valeur1 ;
propriété2 : valeur2 ;
…}
Par exemple :

20
Appliquer un style en sélectionnant une balise
 Appliquer un même style à plusieurs balises
 La syntaxe est : balise1, balise2, … { propriété1 : valeur1 ;
propriété2 : valeur2 ;
…}
Par exemple :

21
Sélecteurs simples et limitations
 Jusqu’à présent, nous n’avons manipulé que des sélecteurs que l’on appelle « simple »,
car ils correspondent à des éléments HTML seuls et sans attributs (par exemple le
sélecteur p).
 Ce type de sélecteur doit être préféré tant que possible pour des raisons d’optimisation
et de performance du code: En effet, ils requièrent moins de code et sont donc moins
gourmands en énergie que des sélecteurs plus complexes. Votre page mettra ainsi
moins de temps à charger.
 Le problème reste qu’on est quand même très limité avec des sélecteurs simples :
comment faire pour appliquer un style différent à deux éléments de même type, deux
paragraphe par exemple ?
 On pourrait placer le code CSS dans un attribut style sur la balise que l'on vise, mais ce
n'est pas recommandé (il vaut mieux utiliser un chier CSS externe).
 Et c’est pour cela que l’on a créé les attributs class et id.

22
Appliquer un style via les attributs : class et id
Création d’un style via l’attribut class :
on définit d’abord un nom de class qui commence
nécessairement par un point (.) de la manière suivante:
.nom_classe { propriété1 : valeur1 ; propriété2 : valeur2 ; … }
Ensuite, on applique le style à la balise de la manière suivante :
<balise class="nom_classe">

23
Appliquer un style via les attributs : class et id

24
Appliquer un style via les attributs : class et id

Création d’un style via l’attribut id : c’est identique à


class sauf que le nom de l’id est précédé de # lors de sa
définition

Contrairement à l’attribut class, l’attribut id ne peut être


utilisé qu’une seule fois dans le code.
25
Interdit parce que un identifiant doit être unique.
Interdit pour la même raison
L’interdiction qui est mentionnée en commentaire est souvent ignorée par
les navigateurs, mais elle ne l’est pas pour le validateur du w3c.
26
Limitations class et id

Nous ne pouvons pour le moment appliquer un


style qu’à un contenu entre balises.
Effectivement, on ne pourrait pas appliquer de
style particulier au mot « linux » dans l’exemple
précédent.
Pour remédier à cela, on a inventé les deux
éléments HTML div et span.
27
div et span
 les éléments div et span ne possèdent aucune valeur sémantique, ce qui
va à l’encontre même du rôle du HTML.
 Ainsi, vous ne devez les utiliser que lorsque vous n’avez pas d’autre
choix.
 Les éléments div et span vont nous servir de containers. Nous allons
nous en servir pour entourer des blocs de code et ainsi pouvoir attribuer
des styles particuliers à ces blocs.
 L’utilisation des éléments div et span est très simple : il suffit d’entourer
le bloc de code voulu avec une paire de balises ouvrante et fermante div
ou span
 Généralement, on attribuera une class ou un id à div et span afin de
pouvoir différencier nos différents div et span dans notre page. Ainsi, on
peut désormais appliquer un style particulier à n’importe quel bout de
code dans notre page HTML. 28
Différence entre div et span

div est un élément de type block tandis que span est un


élément de type inline.
tout élément HTML est soit de type block, soit de type inline.

29
Différence entre block et inline

30
différence entre div et span

31
Différence entre div et span

L’élément HTML div est un élément de type block.


Cet élément va souvent être utilisé comme conteneur
pour plusieurs autres éléments HTML.
L’élément HTML span est un élément de type inline.
Cet élément va souvent servir de conteneur pour du
contenu textuel.

32
div et span

33
34
Les playgrounds
Il s’agit d’un IDE en ligne permettant de réaliser du
développement front-end (HTML, CSS et JS bien souvent) et
de visualiser le résultat.
La plupart permettent également de sauvegarder le code et de
le partager

Jsbin, codepen, jsfidle ,….


https://codepen.io/
35
Les sélecteurs

Les sélecteurs Les Les pseudo- Les pseudo-


simples combinateurs classes éléments

sélecteurs de sélecteurs de
type voisin direct

sélecteurs de sélecteurs de
classe voisins

sélecteurs sélecteurs
d'identifiant d'éléments fils

sélecteurs
sélecteur
d'éléments
universel
descendants

sélecteurs
d'attribut 36
Le sélecteur universel *
 Le sélecteur * permet de cibler tous les éléments d'un document.
 Syntaxe : *

37
Les sélecteurs

Les sélecteurs Les Les pseudo- Les pseudo-


simples combinateurs classes éléments

sélecteurs de sélecteurs de
type voisin direct

sélecteurs de sélecteurs de
classe voisins

sélecteurs sélecteurs
d'identifiant d'éléments fils

sélecteurs
sélecteur
d'éléments
universel
descendants

sélecteurs
d'attribut 38
Les sélecteurs d'attribut

Ce sélecteur simple permet de cibler des éléments d'un


document en fonction de la valeur d'un de leurs
attributs.
Syntaxe : [attr] [attr=valeur] [attr~=valeur]
[attr|=valeur] [attr^=valeur] [attr$=valeur]
[attr*=valeur]

39
Les sélecteurs d'attribut: [attr]
[attr]: Permet de cibler un élément qui possède un attribut attr.

40
Les sélecteurs d'attribut: X[attr]
 X[attr]: Permet de cibler tous les éléments X possédant un attribut attr.

41
Les sélecteurs d'attribut:[attr=valeur]
 [attr=valeur] Permet de cibler un élément qui possède un
attribut attr dont la valeur est exactement valeur.
Les sélecteurs d'attribut:[attr~=valeur]
 [attr~=valeur] Permet de cibler un élément qui possède un attribut attr dont la valeur
est valeur. Cette forme permet de fournir une liste de valeurs, séparées par des blancs, à
tester. Si au moins une de ces valeurs est égale à celle de l'attribut, l'élément sera ciblé.

43
Les sélecteurs d'attribut: [lang|=val]
 [attr|=val] Permet de cibler un élément qui possède un attribut attr dont la valeur est
exactement « val », ou commence par « val » immédiatement suivi d'un trait d'union « -
», Il est souvent utilisé pour les correspondances de sous-code de langue.

44
Les sélecteurs d'attribut: [lang^=en]
 [attr^=val] Permet de cibler un élément qui possède un
attribut attr dont la valeur commence par valeur.

45
Les sélecteurs d'attribut: [attr$=val]
[attr$=val] Permet de cibler un élément qui possède un
attribut attr dont la valeur se termine par val.

46
Les sélecteurs d'attribut: [att*=val]
[attr*=valeur] Permet de cibler un élément qui possède un
attribut attr et dont la valeur contient au moins une occurrence
de valeur dans la chaîne de caractères.

47
Attribut Sert à … Exemple
[attr] Permet de cibler un élément qui possède un [target]
attribut attr.
[attr=valeur] Permet de cibler un élément qui possède un [target=_blank]
attribut attr dont la valeur est exactement valeur.
[attr~=val] une liste de valeurs, séparées par des blancs, à [title~=flower]
tester. Si au moins une de ces valeurs est égale à
celle de val
[attr|=valeur] Permet de cibler un élément qui possède un [lang|=en]
attribut attr dont la valeur commence
par valeur ou valeur-
[attr^=valeur] Permet de cibler un élément qui possède un a[href^=en]
attribut attr dont la valeur commence par valeur.

[attr$=valeur] Permet de cibler un élément qui possède un a[href$=".pdf"]


attribut attr dont la valeur se termine par valeur.
[attr*=valeur] Permet de cibler un élément qui possède un a[href*="w3schools"]
attribut attr et dont la valeur contient au moins
une occurrence de valeur dans la chaîne de
caractères.
Les sélecteurs

Les sélecteurs Les Les pseudo- Les pseudo-


simples combinateurs classes éléments

sélecteurs de sélecteurs de
type voisin direct

sélecteurs de sélecteurs de
classe voisins

sélecteurs sélecteurs
d'identifiant d'éléments fils

sélecteurs
sélecteur
d'éléments
universel
descendants

sélecteurs
d'attribut 49
La notion de Parent/fils/descendants
body est le parent de div p p div p
body a comme descendants div p p div p h2 p h2
div a comme fils h2 et p

body

div p p div p

h2 p h2
50
Les sélecteurs de voisin direct: A + B
Le combinateur '+' est utilisé pour sélectionner les éléments B
placés immédiatement après (pas à l'intérieur) le élément A.
Autrement dit le premier frère de type B de l’élément A
 Remarquer que le premier p n’est pas coloré parce que il
y a un h1 qui le sépare de div

51
Les sélecteurs de voisins: A ~ B
permettra de cibler les éléments B qui suivent (immédiatement
ou non) un élément A et qui ont le même élément parent.
Autrement dit tout les frères d’un élément A

52
Les sélecteurs d'éléments fils: A > B
Le combinateur '>' permet de sélectionner les éléments B qui
sont des fils directs d'un élément donné A.
Remarquer que le premier p n’est pas un fils direct

53
Les sélecteurs d'éléments descendants: A B
Le combinateur (espace) permet de sélectionner les éléments
B qui sont des descendants (pas nécessairement des fils
directs) d'un élément donné A.

54
Exemple:

55
Exemple:

56
Exemple

57
Les sélecteurs

Les sélecteurs Les Les pseudo- Les pseudo-


simples combinateurs classes éléments

sélecteurs de sélecteurs de
type voisin direct

sélecteurs de sélecteurs de
classe voisins

sélecteurs sélecteurs
d'identifiant d'éléments fils

sélecteurs
sélecteur
d'éléments
universel
descendants

sélecteurs
d'attribut 60
Les pseudo-classes
Les pseudo-classes permettent de cibler des éléments selon
une information d'état qui n'est pas stockée dans l'arbre du
selecteur exemple Sert à
document.
:link a:link Sélectionner tous les liens non visités

:visited a:visited Sélectionner tous les liens visités

:active a:active Au moment de cliquer et avant de relâcher la souris


:hover a:hover Sélectionner les liens au survol de la souris

:focus a:focus Sélectionner l'élément input qui a le focus dans le cas où vous
naviguez en utilisant tab ou lieu de la souris
: nth-child table:nth-
(n) child(2n) Le sélecteur: nth-child (n) correspond à chaque élément qui59
est le
Pseudo-classes
 Pensez à visiter le lien suivant pour tester les différents exemples
https://codepen.io/nalisaoucha/pen/JQoaNK
 Utiliser ctr+/ pour dé commenter les règles de CSS l’une après l’autre.

61
Pseudo-classes :visited

62
Pseudo-classes a:visited
Cliquer sur link 1 et remarquer la différence

63
Pseudo-classes :active
Cliquer sur un lien et ne relâcher la souris pour remarquer la
différence.

64
Pseudo-classes a:hover
Juste passer la souris sur un lien pour remarquer la différence.

65
Pseudo-classes p:hover
:hover ne s’applique pas seulement à l’element a, passez la
souris sur le paragraphe et remarquez la différence.

66
Pseudo-classes input:hover
Passez la souris sur le input pour remarquer la différence.

67
Pseudo-classes :focus

Utilisez tab dans la navigation, pour remarquer la différence.

68
Pseudo-classes: nth-child

214
Pseudo-classes: nth-child

215
Pseudo-classes: nth-child

216
Pseudo-classes: nth-child

217
Pseudo-classes: nth-child

218
Les sélecteurs

Les sélecteurs Les Les pseudo- Les pseudo-


simples combinateurs classes éléments

sélecteurs de sélecteurs de
type voisin direct

sélecteurs de sélecteurs de
classe voisins

sélecteurs sélecteurs
d'identifiant d'éléments fils

sélecteurs
sélecteur
d'éléments
universel
descendants

sélecteurs
d'attribut 69
Les pseudo-éléments ::
Les pseudo-éléments représentent des entités du
document qui ne sont pas décrites en HTML.
Exemple : p::first-line permettra de cibler la première
ligne de chacun des éléments <p> (les paragraphes)
du document.
Exemple : p::first-letter permettra de cibler la
première lettre de chacun des éléments <p> (les
paragraphes) du document.
Exemple: ::selection permettra de cibler la partie d'un
élément qui est sélectionnée par un utilisateur. 194
Les pseudo-éléments ::
L’exemple est disponible sur: https://codepen.io/nalisaoucha/pen/orgQov

71
Les pseudo-éléments ::

196
LOGO

La Cascade, héritage et
spécificité

72
L’héritage
 L'un des points forts de CSS est que les styles peuvent être hérités de
l'ancêtre aux éléments descendants. (D’où le mot cascading)

73
L’héritage
PS/: Certaines propriétés ne seront pas héritées logiquement
par tous les éléments comme border,…

74
L’héritage
Pensez à visiter https://www.w3.org/TR/CSS21/propidx.html ou tester
l’héritage manuellement.

75
La cascade
 les sélecteurs servent à sélectionner un ensemble de balises sur lesquels
on applique une règle CSS.
 Plusieurs règles CSS peuvent porter sur un même élément HTML. Si ces
règles peuvent coexister, elles sont toutes appliquées. Par exemple, si vous
avez le code CSS suivant :

76
alors un <div class="skill"> aura les deux propriétés
background-color:blue et color:red.

Mais il peut aussi arriver que ces dernières soient


contradictoires. Par exemple, si vous avez le code CSS suivant,
de quelle couleur sera le texte d’un <div> de classe skill ?

Pour régler ces conflits, le CSS définit une notion de priorité basée sur l’emplacement
des règles CSS puis sur la spécificité des sélecteurs CSS.

77
La cascade

 Que se passe-t-il lorsque l’on donne deux ordres contradictoires à un


élément parent et à son enfant en CSS (par exemple, donner une couleur
rouge au parent et bleue à l’enfant) ?
 Le fait qu'un sélecteur emporte dans la cascade dépend de trois facteurs
(ceux-ci sont listés par ordre de poids - les premiers l'emportent sur les
suivants) :
1) importance
2) Spécificité
3) ordre dans le code source

78
Ordre dans le source
CSS s'exécute de haut en bas, en cas d’égalité absolue, la
règle écrite en dernier est prioritaire.

79
Importance
 Dans une CSS, pour vous assurer qu'une déclaration aura toujours la priorité sur les
autres vous disposez de l'élément de syntaxe : !important

80
Spécificité
 Entre les deux déclarations ci-dessous, à votre avis, laquelle sera
appliquée sur l’élément de liste <li> ?
.page .menu li {color: red;}
body div.menu ul li {color: blue;}
La spécificité d’une déclaration est un calcul qui indique
le “poids” d’une déclaration.
Ce “poids” est alors utilisé pour comparer les différentes
déclarations entre-elles et savoir laquelle est prioritaire sur l’autre,

81
Le calcul de la spécificité

 La quantité de spécificité d'un sélecteur se mesure avec quatre valeurs différentes (ou
composantes), que l'on peut imaginer comme étant des milliers, des centaines, des dizaines ou
des unités :
 Milliers : mettez un dans cette colonne si la déclaration est dans un attribut style (de telles
déclarations n'ont pas de sélecteurs, leur spécificité est toujours simplement 1000) sinon 0.
 Centaines : mettez un dans cette colonne pour chaque sélecteur d'ID contenu dans un sélecteur
général.
 Dizaines : mettez un dans cette colonne pour chaque sélecteur de classe, sélecteur d'attribut ou
de pseudo-classe contenu dans une sélecteur général.
 Unités : mettez un dans cette colonne pour chaque sélecteur d'élément ou de pseudo-élément
contenu dans un sélecteur général. 82
Le calcul de la spécificité

83
Le calcul de la spécificité
Spécificité
Sélecteur Milliers Centaines Dizaines Unités
totale

h1 0 0 0 1 0001

#identifier 0 1 0 0 0100

h1 + p::first-letter 0 0 0 3 0003

li > a[href*="en-US"] > .inline-warning 0 0 2 2 0022

Pas de sélecteur, la règle est dans


1 0 0 0 1000
l'attribut style de l'élément
Le calcul de la spécificité
 Notes.Le sélecteur universel (*) n'est pas pris en compte dans le calcul.
 Les sélecteurs d'adjacence (~ et +) et de descendance (>) n'ont pas d'impact sur la spécificité.
Sélecteur Poids Explications
le sélecteur universel n'est
* 0
pas compté
div 0-0-1 un élément
div span 0-0-2 deux éléments
deux éléments et un
div > ul::before 0-0-3
pseudoélément
.classe 0-1-0 une classe
a[target=_blank] 0-1-1 un élément et un attribut
une classe, un attribut et un
div .champ[disabled] 0-2-1
élément
#identifiant 1-0-0 un identifiant
un identifiant, une classe et
#main .inner:empty 1-2-0
une pseudoclasse
la pseudoclasse :not() n'est
#main :not(div) 1-0-1 pas comptée, mais son
contenu l'est 85
#main
Le calcul de la spécificité
87
https://specificity.keegan.st/
LOGO

Formatage du text

89
Style du texte

90
Style du texte

91
Style du texte

92
Style du texte

93
Style du texte

Indiquer une taille absolue : en pixels, en centimètres


ou millimètres. Cette méthode est très précise mais il est
conseillé de ne l'utiliser que si c'est absolument
nécessaire, car on risque d'indiquer une taille trop petite
pour certains lecteurs.
Indiquer une taille relative : en pourcentage, « em »,
cette technique a l'avantage d'être plus souple. Elle
s'adapte plus facilement aux préférences de taille des
visiteurs.

94
Style du texte

95
Style du texte

Avec small-caps font, toutes les lettres minuscules sont converties en lettres
majuscules. Toutefois, les lettres majuscules converties apparaissent dans
une taille de police plus petite que les lettres majuscules d'origine du texte.
96
Style du texte

97
Style du texte

98
Style du texte

99
Style du texte

100
Style du fond

101
Style du fond

102
Style des listes

103
Style des listes

104
Style des bordures

105
Style des bordures

106
Style des bordures

107
Style des bordures

108
LOGO

La fin.

109