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


http://www.csszengarden.com/

Un même document HTMLdes feuilles CSS différentes

Cascading Style Sheetsséparer contenu de la présentation

http://www.csszengarden.com/

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


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


.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


• 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



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



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



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



• 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

https://developer.mozilla.org/fr/docs/Web/HTTP/CORS

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


[ attribut ... ]

CSS• sélection de balise

13

Sélecteurs de stylesbalise

styles.css


balise { déclaration; déclaration; ... }

CSS

• Sélecteur de classe

14

Sélecteurs de styleclasse

styles.css



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


15


styles.css



possibilité d'appliquer à un même élémentplusieurs classes de style différentes

CSS


16


styles.css



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


#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


https://developer.mozilla.org/fr/docs/Web/CSS/Sélecteurs_d_attribut

Liens vers Mozilla

Liens vers w3schools

Lien quelconquePour plus de détails

https://developer.mozilla.org/fr/docs/Web/CSS/Sélecteurs_d_attribut

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


CSS• propagation des propriétés d'un élément aux éléments descendants



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


ex : particulariser les éléments <a>situés dans une liste (balise <ul>) en leur associant un fond cyan


CSS

• 1ère solution créer une classe de style correspondante

22


ex : particulariser les éléments <a> situés dans une liste (balise <ul> ) en leur associant un fond cyan


CSS

• 2ème solution utiliser la structure arborescente

23


tous les éléments <a> descendants d'unélément <ul>

Sélection en fonction d'une relation parent descendant.


ex : particulariser les éléments <a> situés dans une liste (balise <ul> ) en leur associant un fond cyan

CSS

24


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


sélecteur1 sélecteur2 … sélecteurn { déclaration ; déclaration … }

CSS

25


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


CSS



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


Combinaisons de sélecteurs


identificateur descendant enfant

CSS

28





CSS

29





CSS

30




identificateur

descendant

enfantdescendantenfant

CSS

31


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


CSS

32


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


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


– 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


CSS• La règle exacte de priorité est la suivante


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/

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


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


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


CSS• exemple de flux normal

39



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



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


• 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


• 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


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é


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


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


• 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


• 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


• Par défaut image d'arrière-plan attachée à son élément– se déplace avec lui lors d'un scroll

• background-attachment: fixed

– attache l'image à la fenêtre.

CSS

49

Bordures et arrière-planimage arrière-plan


Date post:	29-Jan-2020
Category:	Documents
Upload:	others
View:	109 times
Download:	16 times

HTML CSS - JavaScriptlig-membres.imag.fr/genoud/teaching/PL2AI/cours/pdf/AI/PLAI_03_CSS_p... · CSS...

Documents