HTML CSS - JavaScriptlig-membres.imag.fr/genoud/teaching/PL2AI/cours/pdf/AI/PLAI_03_CSS_p... · CSS...
Transcript of HTML CSS - JavaScriptlig-membres.imag.fr/genoud/teaching/PL2AI/cours/pdf/AI/PLAI_03_CSS_p... · CSS...
HTML – CSS - JavaScript
• Décomposer la conception d'un site web en 3 couches
(c) UGA-2019 Philippe GENOUD 1
Comportement (JavaScript)
Présentation (CSS)
Contenu structuré (HTML 5)
Head First Mobile Web, Lyza Danger Gardner, Jason Grigsby, O'Reilly 2012
CSSCascading Styles Sheets
2(c) UGA-2019 Philippe GENOUD
Comportement (JavaScript)
Présentation (CSS)
Contenu structuré (HTML 5)
CSS
(c) UGA-2019 Philippe GENOUD 3
http://www.csszengarden.com/
Un même document HTMLdes feuilles CSS différentes
Cascading Style Sheetsséparer contenu de la présentation
CSS - Historique
4
HTML 1.01989
1991 HTML 2.0
1995
HTML 3
HTML 3.2
1998 HTML 4.0CSS
HTML 4.011999
CSS1 : 1ère recommandation officielle du W3C
2000 XHTML 1.0
2012 HTML 5
(c) UGA-2019 Philippe GENOUD
1996
CSS2 : extension du concept des feuilles de style
2002 CSS2.1 : quelques ajustements
CSS3 : animations, effets textuels, transformations 2D/3D….
h2 {
}
CSS• définition d'un style
– Forme générale
5
Définition d'un styleforme générale
sélecteur { } déclaration déclaration...style ::=
déclaration ::= propriété : valeur
• exemple
(c) UGA-2019 Philippe GENOUD
sélecteur identifie les éléments de la page web à laquelle le style est appliqué
propriété désigne au navigateur ce qu'il faut modifier
valeur désigne au navigateur le changement à effectuer
;
font-size
color
background-color
: 120%;
:red;
:#FFCC6;
CSS
6
Définition d'un styleforme générale
.monStyle {
font: 12pt bold Tekton;
color: red;
}
Possibilité de regrouper plusieurs propriétés sous une seule
#titreSpecial {
color:red;
background:yellow;
text-transform:capitalize;
border:double medium green;
font-weight:900;
padding:0.5em;
}
Certaines propriétés ne sont accessibles qu’au travers des styles CSS
• autres exemples
(c) UGA-2019 Philippe GENOUD
.monStyle {
font-size: 12pt;
font-weigth: bold;
font-family: Tekton;
color: red;
}
CSS• Plusieurs moyens d'associer des styles CSS aux éléments d'un document HTML
7
Association style CSS –document HTML
(c) UGA-2019 Philippe GENOUD
• inconvénients : mélange structure et présentation, ne s'applique qu'à une seule balise
Style in-line défini directement dans une baliseà l'aide d'un attribut style1
CSS
(c) UGA-2019 Philippe GENOUD 8
Association style CSS –document HTML
Styles définis dans l'en tête du document avec un élément (balise) style
2
• Styles du document localisés en un seul endroit
• Selon le sélecteur défini un même style peut être appliqué à un ou plusieurs éléments du document
CSS
(c) UGA-2019 Philippe GENOUD 9
Association style CSS –document HTML
Lien vers une feuille de style externe (fichier .css)
3
• Possibilité de partager les styles entre plusieurs documents
maPage.html
meStyles.css
monAutrePage.html
CSS
(c) UGA-2019 Philippe GENOUD 10
Association style CSS –document HTML
Lien vers une feuille de style externe (fichier .css)
3
• Comme pour les liens hypertexte dans un même site le chemin vers la feuille de styles est un chemin relatif
maPage.html
meStyles.css
• Une page peut avoir plusieurs feuilles de style associées avec possibilité d'avoir des feuilles externes
CSS
(c) UGA-2019 Philippe GENOUD 11
Association style CSS –document HTML
• Une page peut avoir plusieurs feuilles de style associées avec possibilité d'avoir des feuilles externes au site
maPage.html
integrity (Subresource Integrity ou SRI) permet aux navigateurs de vérifier que les fichiers téléchargé n'ont pas subi de manipulation inattendue.
crossorigin indique si la ressource doit être récupérée avec une requête CORS (Cross-origin resource sharing ou partage des ressources entre origines multiples).
Les styles issus des différentes feuilles de style se combinent
CSS• plusieurs possibilités pour définir un style
– style s'appliquant à tous les éléments correspondant à une balise HTML donnée sélecteur de balise
– style nommé pouvant être associé à n'importe quel élémentsélecteur de classe
– style associé à un élément identifiésélecteur d'identificateur
– style ciblant un élément selon l'un de ces attributs
12
Sélecteurs de style
balise { déclaration; déclaration; ... }
.nomDeClasse { déclaration; déclaration; ... }
#identificateur { déclaration; déclaration; ... }
(c) UGA-2019 Philippe GENOUD
[ attribut ... ]
CSS• sélection de balise
13
Sélecteurs de stylesbalise
styles.css
(c) UGA-2019 Philippe GENOUD
balise { déclaration; déclaration; ... }
CSS
• Sélecteur de classe
14
Sélecteurs de styleclasse
styles.css
(c) UGA-2019 Philippe GENOUD
.nomDeClasse { déclaration; déclaration; ... }
Associé à un élément via l'attribut class
attribut classpeut être porté par toute balise possibilité d'appliquer une mêmeclasse de style à des éléments de balises différentes
Le nom de la classe doit refléter la sémantique et non pas la présentation choisie.rougeSurJaune.renforcé
CSS
• Sélecteur de classe
15
Sélecteurs de styleclasse
styles.css
(c) UGA-2019 Philippe GENOUD
.nomDeClasse { déclaration; déclaration; ... }
possibilité d'appliquer à un même élémentplusieurs classes de style différentes
CSS
• Sélecteur de classe
16
Sélecteurs de styleclasse
styles.css
(c) UGA-2019 Philippe GENOUD
.nomDeClasse { déclaration; déclaration; ... }
possibilité de restreindre une classe à un type d'élément.le nom de la classe est préfixé par le nom de la balise
CSS
• Sélecteur d'identificateur
17
Sélecteurs de styleidentificateur
styles.css
(c) UGA-2019 Philippe GENOUD
#identificateur { déclaration; déclaration; ... }
- attribut id désignant l'élément à styler et défini dans sa balise ouvrante- doit être unique dans le document HTML
- renforcement : utilisable par plusieurs éléments sélecteur de classe- résumé : un seul résumé par article sélecteur d'identificateur
CSS
• permettent de cibler un élément selon la présence d'un attribut ou selon la valeur donnée d'un attribut
– Exemple : particulariser les liens selon leur destination
18
Sélecteurs de stylesélecteurs d'attributs
(c) UGA-2019 Philippe GENOUD
https://developer.mozilla.org/fr/docs/Web/CSS/Sélecteurs_d_attribut
Liens vers Mozilla
Liens vers w3schools
Lien quelconquePour plus de détails
CSS• l'imbrication des éléments forme une hiérarchie (arbre)
19
Sélecteurs de stylesélecteurs et arborescence
<div>
<h1>titre</h1>
<h2>un sous titre</h2>
<p>un paragraphe avec
<em>des mots importants</em>
pour terminer avec une image
<img src="logo.gif" alt="un logo"/>.
</p>
</div>
divdiv
h1
h2
pem
img
racine
feuille
h1 h2 p
em img
noeud
p est père de em et de imgp est parent de em et imgem et img sont les enfants de pem est un fils de pimg est frère de emdiv est un ancêtre de emem est un descendant de div
(c) UGA-2018 Philippe GENOUD
CSS• propagation des propriétés d'un élément aux éléments descendants
(c) UGA-2018 Philippe GENOUD 20
Sélecteurs de stylesélecteurs et arborescence
body
div div
racine
pdiv
classe = "azure"
CSS• problème : comment donner une présentation spécifique à des éléments en fonction de leur situation
dans l'arborescence ?
21
Sélecteurs de stylesélecteurs et arborescence
ex : particulariser les éléments <a>situés dans une liste (balise <ul>) en leur associant un fond cyan
(c) UGA-2018 Philippe GENOUD
CSS
• 1ère solution créer une classe de style correspondante
22
Sélecteurs de stylesélecteurs et arborescence
ex : particulariser les éléments <a> situés dans une liste (balise <ul> ) en leur associant un fond cyan
(c) UGA-2018 Philippe GENOUD
CSS
• 2ème solution utiliser la structure arborescente
23
Sélecteurs de stylesélecteurs et arborescence
tous les éléments <a> descendants d'unélément <ul>
Sélection en fonction d'une relation parent descendant.
(c) UGA-2018 Philippe GENOUD
ex : particulariser les éléments <a> situés dans une liste (balise <ul> ) en leur associant un fond cyan
CSS
24
Sélecteurs de stylesélecteurs et arborescence
Sélecteur de nœuds descendants
s'applique à tout élément désigné par sélecteurn qui descend (directement ou indirectement) d'un élément désigné par sélecteurn-1 … qui descend d'un élément désigné sélecteur2 qui descend d'un élément désigné par sélecteur1
(c) UGA-2018 Philippe GENOUD
sélecteur1 sélecteur2 … sélecteurn { déclaration ; déclaration … }
CSS
25
Sélecteurs de stylesélecteurs et arborescence
Sélecteur de nœuds enfants
sélecteur1 > sélecteur2 { déclaration ; déclaration }
s'applique à tout élément désigné par sélecteur2 dont le parent direct est un élément désigné par sélecteur1
(c) UGA-2018 Philippe GENOUD
CSS
(c) UGA-2018 Philippe GENOUD 26
Sélecteurs de stylesélecteurs et arborescence
Sélecteur de nœuds enfants
sélecteur1 > sélecteur2 { déclaration ; déclaration }
s'applique à un élément désigné par sélecteur2 dont le parent direct est un élément désigné par sélecteur1
CSS
27
Sélecteurs de stylesélecteurs et arborescence
Combinaisons de sélecteurs
(c) UGA-2018 Philippe GENOUD
identificateur descendant enfant
CSS
28
Sélecteurs de stylesélecteurs et arborescence
Combinaisons de sélecteurs
(c) UGA-2018 Philippe GENOUD
identificateur descendant enfant
CSS
29
Sélecteurs de stylesélecteurs et arborescence
Combinaisons de sélecteurs
(c) UGA-2018 Philippe GENOUD
identificateur descendant enfant
CSS
30
Sélecteurs de stylesélecteurs et arborescence
Combinaisons de sélecteurs
(c) UGA-2018 Philippe GENOUD
identificateur
descendant
enfantdescendantenfant
CSS
31
Sélecteurs de stylesélecteurs et arborescence
Sélecteur de nœuds adjacents
sélecteur1 + sélecteur2 { déclaration ; déclaration }
s'applique à tout élément désigné par sélecteur2 dont le frère directement précédentdans le flux du balisage de la page HTML est un élément désigné par sélecteur1
(c) UGA-2018 Philippe GENOUD
CSS
32
Sélecteurs de stylesélecteurs et arborescence
Sélecteur de nœuds frères
sélecteur1 ~ sélecteur2 { déclaration ; déclaration }
s'applique à tout élément désigné par sélecteur2 dont un frère précédent dans le flux du balisage de la page HTML est un élément désigné par sélecteur1
(c) UGA-2018 Philippe GENOUD
CSS• pseudo-classes
– portent sur des éléments existants dans le code source du document et auxquels on peut accéder par des caractéristiques autres que leur nom, attribut ou contenu.
33
Sélecteurs de stylepseudo classes
sélecteur:pseudoClasse { } déclaration ; déclaration...
(c) UGA-2018 Philippe GENOUD
– structurelles : :first-child, :last-child, :nth-child(n)
– d’ancres :link et :visited
– dynamiques :hover, :active et :focus
CSS• pseudo-éléments
– permettent de donner un style à un contenu n’apparaissant pas dans le code source du document comme étant un élément.
Sélecteurs de stylepseudo éléments
sélecteur::pseudoElt { } déclaration ; déclaration...
– ::first-line
– ::first-letter
– ::before et :after
– ::selection
(c) UGA-2018 Philippe GENOUD 34
CSS• La règle exacte de priorité est la suivante
(c) UGA-2018 Philippe GENOUD 35
Sélecteurs de stylePriorité des règles
Si deux règles de style sont contradictoires, la deuxième remplace la première sauf si la première a un degré de priorité (c.a.d. de spécificité)supérieur à la deuxième
Règle de calcul de degré de priorité : x1 x2 x3 x4
• x1 : 1 si style en ligne ou !important, 0 sinon
• x2 : nombre d’identifiants (#xxx) dans le sélecteur
• x3 : nombre de classes (.xxx) dans le sélecteur
• x4 : nombre d’éléments séparés par des espaces dans le sélecteur
Pour plus de details : http://www.openweb.eu.org/articles/cascade_css/
CSS• notées par abréviation (2 lettres)
• pas d'espace entre valeur et unité
• certaines propriétés acceptent valeurs négatives
(c) UGA-2018 Philippe GENOUD 36
Unités de mesures
Unité Description Valeur Exemple
px pixel entier 450px
cm centimètre entier 7cm
mm millimètre entier 43mm
in pouce (2,54cm) réel 0.15in
pt point (1/72 pouce) entier 48pt
pc pica (12 points) réel 4.2pc
% pourcentage entier 14%
CSS
(c) UGA-2018 Philippe GENOUD 37
Notation des couleurs
green#00FF00
#0F0rgb(0,255,0)
rgb(0,100%,0%)
blue#0000FF
#00Frgb(0,0,255)
rgb(0%,0%,100%)
white#FFFFFF
yellow#FFFF00
magenta#FF00FF
cyan#00FFFF
• CSS2– mots réservés
– notation hexadécimale
– notation décimale
• CSS3– canal alpha (opacité)
• rgba(r,g,b,a)
– hsl• hsl(hue,saturation,ligthness)
• hsla(h,s,l,a)
http://www.w3schools.com/cssref/css_colornames.asp
http://www.w3schools.com/tags/ref_colorpicker.asp
http://hslpicker.com
http://www.workwithcolor.com/hsl-color-picker-01.htm
red#FF0000
#F00rgb(255,0,0)
rgb(100%,0%,0%)
CSS• chaque élément HTML considéré comme une boîte rectangulaire.
• flux du document : ordre dans lequel le navigateur affiche ces boîtes.
– flux normal (par défaut)
• un élément père est un conteneur
• un élément fils s'affiche dans son conteneur
• élément bloc– s'affiche en dessous de son frère précédent.
– occupe toute la largeur disponible dans son conteneur.
• é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 conteneur.
– flux personnalisé
• certaines propriétés CSS permettent de sortir des éléments du flux normal
38
Affichage des éléments HTMLflux du document
(c) UGA-2018 Philippe GENOUD
CSS• exemple de flux normal
39
Affichage des éléments HTMLflux du document
(c) UGA-2018 Philippe GENOUD
CSS• <div> et <span> éléments génériques sans information structurante prédéfinie
– utilisés en association avec des feuilles de style CSS ou du Javascript via les attributs id, class ou style
40
Affichage des éléments HTMLflux du document
(c) UGA-2018 Philippe GENOUD
div : balise de type bloc zone rectangulaire qui ne peut être répartie sur plusieurs lignes peut contenir tous les autres éléments de type bloc ou en ligne
span : balise de type en ligne (inline) s'inscrit dans le flux du contenu, peut être répartie sur plusieurs lignes peut contenir tous les autres éléments en ligne
CSS
41
Notion de boîteparties constituantes
marge externe
marge interne
bordure
(c) UGA-2018 Philippe GENOUD
• boîte rectangulaire matérialisant un élément composée de 3 parties :– son contenu (contenu de l'élément : texte, image… autres éléments…)
– un cadre
• une bordure
• un marge interne (marge entre le contenu et la bordure)
– une marge externe
• marge entre le cadre et les boîtes matérialisant les éléments adjacents dans le flux
contenu
CSS
42
Notion de boîtepropriétés CSS
marginwidth
height
background
(c) UGA-2018 Philippe GENOUD
• La taille du contenu, le cadre et la marge externe d'une boîte peuvent être contrôlés par des propriétés CSS.
padding border-style
border-width
border-color
marge externebordure
largeur ethauteur
épaisseurtype, épaisseur
et couleurépaisseur
Contenu Marge interne Bordure Marge externe
Arrière plan
couleurimage
margin-right
height
background-color
marge interne
contenu
padding-top
width
border-width-bottom
CSS• dimensions d'une boîte induites par son contenu + trois périmètres
(margin, border , padding).
• margin, border, padding pas obligatoires– valeurs par défaut
• 0 pour éléments en ligne et <div>
• border = 0, margin et padding dépendent du navigateur pour les éléments bloc fixer dans les feuilles de style CSS pour rendu indépendant du navigateur
43
Notion de boîtedimensions et attributs par défaut
(c) UGA-2018 Philippe GENOUD
marge externebordure
margin-right
height
background-color
marge interne
contenu
padding-top
width
border-width-bottom
CSS
• Bordures et arrière plan
– Possibilité d'entourer les éléments et de les doter d'un arrière-plan (couleur, image)
– Propriétés• border-style style
• border-width épaisseur
• border-color couleur
• background-color couleur arrière plan
• background-image image d'arrière plan
44
Bordures et arrière-planintroduction
applicable à tous les bordsou de chaque côté
(c) UGA-2018 Philippe GENOUD
CSS• border-style
45
Bordures et arrière-planstyle
• border-style:<val> tous les côtés
• border-style:<val1> <val2>
• <val1> côtés horizontaux
• <val2> côtés verticaux
• border-style:<val1> <val2> <val3>
• <val1> côté horizontal haut
• <val2> côtés verticaux
• <val3 > côté horizontal bas
• possibilité de spécifier chaque côté
• border-left-style
• border-right-style
• border-top-style
• border-bottom-stylevaleurs possibles
(c) UGA-2018 Philippe GENOUD
CSS
• border-width
– valeur numérique ex: border-width:5px (5 pixels)
– mots clés
• border-color
– valeur numérique • hexadécimale : #00ffff ou #0ff
• rgb : rgb(0,255,255) ou rgb(0,100%,100%)
• mot clé : cyan
• même règles que pour border-style pour individualiser chaque côté.
46
Bordures et arrière-planépaisseur, couleur
(c) UGA-2018 Philippe GENOUD
• background-color: valeur
• #00ffff, #0ff , rgb(0,255,255), rgb(0,100%,100%) , cyan
• background-image: url(url de l'image)
• image locale url(images/logo-ujf.png) – chemin relatif
• image distante url(http://www.monsite.org/images/logo.gif)
– par défaut l'imageest répétée en damier
CSS
47
Bordures et arrière-plancouleur – image arrière-plan
logo_ujf-fond.png
(c) UGA-2018 Philippe GENOUD
• background-repeat: valeur
• contrôle répétition de l'image d'arrière-plan
CSS
48
Bordures et arrière-planimage arrière-plan
• background-position: valeur1 valeur2
• valeur1 position horizontale par rapport au bord gaucheleft, right ou pourcentage
• valeur2 si présente, position verticale par rapport au bord supérieurtop, bottom ou pourcentage
(c) UGA-2018 Philippe GENOUD