css (cascading style sheets : feuilles de style en cascade) est un langage informatique qui sert à...
TRANSCRIPT
![Page 1: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/1.jpg)
Formation CSS
![Page 2: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/2.jpg)
2
Définition
CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML.
Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C).
![Page 3: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/3.jpg)
3
Plan de la présentation
Histoire et enjeux du CSS Principes techniques
Les concepts fondamentaux Points techniques divers Ciblage du dispositif de visualisation
Point sur les sélecteurs Critiques et avenir du standard LessCSS
![Page 4: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/4.jpg)
Histoire et enjeux du CSS 4
Histoire et enjeux du CSSLes origines des CSS sont liées à trois alternatives majeures
![Page 5: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/5.jpg)
Histoire et enjeux du CSS 5
Questions clés
HTML Un format de structuration uniquement ? Un format mixte (mise en forme et
structuration) ? Choix de présentation
L'auteur doit avoir le dernier mot ? L’utilisateur doit avoir le dernier mot ?
La réponse aux besoins est-elle un format de description de la mise en forme ? un langage de transformation ?
![Page 6: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/6.jpg)
Histoire et enjeux du CSS 6
L’histoire du standard
1992 : premier navigateur Web 1995 : Netscape Navigator,
esquisses CSS 1996 : début de CSS1, promu par IE3 2000 : IE5 Mac supporte CSS1 (à
99%) 2001 : sortie d’IE6, leader sur le
marché 2001 : CSS 2.1, début CSS3 2006 : reprise du dev IE avec IE7 2010 : CSS3 à l’état de brouillon
(draft)
![Page 7: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/7.jpg)
Histoire et enjeux du CSS 7
Les enjeux
Séparer structure et présentation Séparer les deux notions dans des
fichiers différents Conception indépendante de la
présentation Uniformiser la présentation, accélérer
refonte Permettre de laisser le choix du thème Réduit la taille et la complexité du code
HTML
![Page 8: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/8.jpg)
Histoire et enjeux du CSS 8
Les enjeux
Décliner les styles selon le récepteur
Permettre la cascade des styles Par origine du style : agent utilisateur,
auteur, utilisateur Par média Selon l’architecture : fichier commun +
spécifique Selon l’architecture du CSS lui même
![Page 9: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/9.jpg)
Principes techniques et Syntaxe du CSS 9
CSS, concrètementPrincipes techniques et Syntaxe du CSS
![Page 10: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/10.jpg)
Principes techniques et Syntaxe du CSS 10
Les concepts fondamentaux
Sélecteurs et bloc de règles Propriétés regroupées par bloc précédé
d’un sélecteur Propriétés et Valeurs
Compromis simplicité lecture / écriture Boites et Flux CSS
Structure de formatage = arbre logique Flux de boite = ordre linéaire
![Page 11: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/11.jpg)
Principes techniques et Syntaxe du CSS 11
Propriété display
Display : none Disparait du flux À opposer à « visibility: hidden » Ex :
![Page 12: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/12.jpg)
Principes techniques et Syntaxe du CSS 12
Propriété display
Display : block Rendu l’un en dessous de l’autre S’adapte à la largeur maximum
![Page 13: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/13.jpg)
Principes techniques et Syntaxe du CSS 13
Propriété display
Display : block Margin (Outline) Border, Padding, Width
![Page 14: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/14.jpg)
Principes techniques et Syntaxe du CSS 14
Propriété display
Display : inline Rendu l’un à côté de l’autre S’adapte à la largeur minimum
![Page 15: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/15.jpg)
Principes techniques et Syntaxe du CSS 15
Propriété display
Display : inline-block Rendu type inline Possède les propriétés des blocks
![Page 16: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/16.jpg)
Principes techniques et Syntaxe du CSS 16
Propriété display
Display : table Rendu type balises <table><tr><td> Copier le rendu d’un tableau sans
l’utiliser
![Page 17: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/17.jpg)
Principes techniques et Syntaxe du CSS 17
Blocs flottants
Principe issu du média print Le contenu non flottant qui suit
initie l’habillage
Sort du flux (cf absolute)
Utilisation de « clear » pour passer des lignes
![Page 18: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/18.jpg)
Principes techniques et Syntaxe du CSS 18
Positionnement
Static Valeur par défaut Element dans le flux
Relative Similaire à static Peut être déplacé (décalé visuellement)
Absolute Hors flux Référence : premier parent non-static (sinon: html)
Fixed Similaire à absolute Référence : fenêtre du navigateur
![Page 19: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/19.jpg)
Principes techniques et Syntaxe du CSS 19
Margin-collapse
Exemple :<div> <p> This is a paragraph within a <code>div</code> </p></div>
div { background-color: #3C75AE; color: #fff; margin-top: 10px;}
p { margin-top: 20px; margin-bottom: 20px; border: 1px solid #EB6B0E;}
![Page 20: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/20.jpg)
Principes techniques et Syntaxe du CSS 20
Margin-collapse
Rendu ?
![Page 21: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/21.jpg)
Principes techniques et Syntaxe du CSS 21
Margin-collapse
Rendu réel :
Explication :
![Page 22: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/22.jpg)
Principes techniques et Syntaxe du CSS 22
Margin-collapse
Solution :
Rendu :
div { background-color: #3C75AE; color: #fff; margin-top: 10px; padding-top: 1px; padding-bottom: 1px;}
![Page 23: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/23.jpg)
Principes techniques et Syntaxe du CSS 23
Unités de mesure
Absolues Pt, pc, in, cm, mm
Relatives Px, em, ex, %
Unité em :
![Page 24: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/24.jpg)
Principes techniques et Syntaxe du CSS 24
Cibler l’agent utilisateur
Spécifier le media <link media="print" href="…" /> @media screen, print { … }
Types courants All Screen Print Handheld
Hacks CSS Ex: Astuce de l’underscore
![Page 25: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/25.jpg)
Principes techniques et Syntaxe du CSS 25
Les plus gros bugs IE6-7
Transparence PNG filter:progid:DXImageTransform.Microsoft.Alph
aImageLoader(enabled=true, sizingMethod=scale, src='image.png');
HasLayout IE5 – 7 Mécanique interne du moteur Trident
Height et Min-Height Bug height très petit Bug comportement height similaire min-
height
![Page 26: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/26.jpg)
Principes techniques et Syntaxe du CSS 26
Les plus gros bugs IE6-7
Modèle de bloc Modèle Quirks (héritage
IE5)
CSS3▪ box-sizing: border-box;
![Page 27: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/27.jpg)
Principes techniques et Syntaxe du CSS 27
Priorités des sélecteurs
Priorité interne : Element : 0,0,0,0,1 Classe : 0,0,0,1,0 Identifiant : 0,0,1,0,0 Attribut HTML style : 0,1,0,0,0 !important : 1,0,0,0,0
Style utilisateur prioritaire si priorité interne égale
![Page 28: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/28.jpg)
Point sur les sélecteurs 28
Point sur les sélecteursLes sélecteurs d’Internet Explorer 6 à nos jours
![Page 29: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/29.jpg)
Point sur les sélecteurs 29
Sélecteurs compatibles IE6 *
Cible l’ensemble des éléments descendants #X
Cible l’id, haute priorité, rigide .X
Cible la class, priorité intermédiaire, réutilisable X
Cible l’ensemble des éléments X X Y
Cible les descendants Y, quel que soit leur niveau
![Page 30: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/30.jpg)
Point sur les sélecteurs 30
Sélecteurs compatibles IE6 X::PSEUDOELEMENT
S’applique aux éléments nativement block▪ p::first-line { }▪ p::first-letter { }
Peut s’écrire X:PSEUDOELEMENT pour les éléments CSS 1 et 2▪ :first-line, :first-letter,:before,:after, …
A:link, A:visited, X:hover, A:active IE6 n’applique :hover qu’aux balises A Retenir LoVe/HAte
![Page 31: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/31.jpg)
Point sur les sélecteurs 31
Sélecteurs compatibles IE7 X + Y
Cible l’élément immédiatement adjacent (frère)
X ~ Y Similaire X + Y, en moins strict▪ Cible tous les frères de X qui le suivent, même s’il y
a des éléments entre deux X > Y
Similaire à X Y, mais cible les enfants directs X:first-child
Premier enfant de X (similaire X > Y)
![Page 32: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/32.jpg)
Point sur les sélecteurs 32
Sélecteurs compatibles IE7 X[title]
X ayant l’attribut TITLE X[href = "foo"]
X ayant l’attribut HREF égal à « foo » X[href *= "www."]
L’attribut HREF contient « www. » n’importe où X[href ^= "http"]
L’attribut HREF commence par « http » X[href $= ".jpg"]
L’attribut HREF fini par « jpg »
![Page 33: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/33.jpg)
Point sur les sélecteurs 33
Sélecteurs compatibles IE7
X[data-*="foo"] Pseudo attribut▪ Ex : data-filetype="image"
X[foo~="bar"] Cible un attribut séparé par des virgules
<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>
a[data-info ~= "external"] { color: red;}
![Page 34: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/34.jpg)
Point sur les sélecteurs 34
Sélecteurs compatibles IE8
X:before, X:after Permet de rajouter du contenu avant ou
après.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0;}
.clearfix { *display: inline-block; _height: 1%;}
![Page 35: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/35.jpg)
Critiques et avenir du CSS 35
Critique et avenir du standardLes limites du CSS, un avant gout de CSS 3
![Page 36: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/36.jpg)
Critiques et avenir du CSS 36
Les limites du CSS
Indépendance de la présentation et de la structure Souvent : texte -> image Feuilles de style générique difficilement
applicable Manque d’implémentation CSS =
techniques fortement liées à la structure▪ Ex: Design en float
![Page 37: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/37.jpg)
Critiques et avenir du CSS 37
Les limites du CSS
Accessibilité Risque de véhiculer des infos via CSS▪ Ex : Image background avec titre incorporé
Modifier l’ordre d’apparition des éléments / ordre logique▪ Ex: Sidebar, infobulle
Pertinence des balises non obligatoire▪ Ex: Un div class titre, avec font-size et font-
weight
![Page 38: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/38.jpg)
Critiques et avenir du CSS 38
Les limites du CSS
Simplicité La cascade complique l’anticipation du
rendu▪ Choix à faire entre redondance et
optimisation
En théorie : CSS facilement manipulable par l’utilisateur▪ La pratique est tout autre…
![Page 39: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/39.jpg)
Critiques et avenir du CSS 39
CSS3 : Implémentations beta Gecko (Firefox/Mozilla) : -moz-property Webkit (Safari/Chrome) : -webkit-property Presto (Opera) : -o-property Trident (Internet Explorer) : -ms-property
CSS3 : border-top-left-radius Gecko : -moz-border-radius-topleft Webkit : -webkit-border-top-left-radius
![Page 40: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/40.jpg)
Critiques et avenir du CSS 40
CSS3 : quelques propriétés
Border-radius
![Page 41: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/41.jpg)
Critiques et avenir du CSS 41
CSS3 : quelques propriétés
Box-shadow
![Page 42: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/42.jpg)
Critiques et avenir du CSS 42
CSS3 : quelques propriétés
Text-shadow
![Page 43: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/43.jpg)
Critiques et avenir du CSS 43
CSS3 : quelques propriétés
Text-stroke
![Page 44: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/44.jpg)
Critiques et avenir du CSS 44
CSS3 : quelques propriétés
Multiple Backgrounds
![Page 45: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/45.jpg)
Critiques et avenir du CSS 45
CSS3 : quelques propriétés
Background-size
body, html { height: 100%; } body { background: url(path/to/image.jpg) no-repeat; background-size: 100% 100%; }
![Page 46: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/46.jpg)
Critiques et avenir du CSS 46
CSS3 : quelques propriétés
Text-overflow
![Page 47: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/47.jpg)
Critiques et avenir du CSS 47
CSS3 : quelques propriétés
Resize
![Page 48: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/48.jpg)
Critiques et avenir du CSS 48
CSS3 : quelques propriétés
Transition
div { opacity: 1; -webkit-transition: opacity 1s linear;} div:hover { opacity: 0;}
![Page 49: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/49.jpg)
Critiques et avenir du CSS 49
Font-face
http://www.fontsquirrel.com/fontface/generator
@font-face {font-family: 'AdobeCaslonProBold';src: url('acaslonpro-bold-webfont.eot');src: local('☺'), url('acaslonpro-bold-webfont.woff') format('woff'), [ … ]font-weight: normal;font-style: normal;
}
div.titre { font-family : "AdobeCaslonProBoldItalic", serif; }
![Page 50: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/50.jpg)
Critiques et avenir du CSS 50
Modèle de boites flexibles
Au départ : 1 bloc main, 1 bloc aside 1 conteneur de 960px
![Page 51: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/51.jpg)
Critiques et avenir du CSS 51
Modèle de boites flexibles
Au départ : main :
800px
![Page 52: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/52.jpg)
Critiques et avenir du CSS 52
Modèle de boites flexibles
Au départ : aside : box-flex: 1;
![Page 53: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/53.jpg)
53
LessCSSUne surcouche de CSS qui offrent de nouvelles possibilités
LessCSS
![Page 54: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/54.jpg)
54
LessCSS : Fonctionnalités
Variables
LessCSS
@brand_color: #4D926F; #header { color: @brand_color;} h2 { color: @brand_color;}
![Page 55: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/55.jpg)
55
LessCSS : Fonctionnalités
Mixins
LessCSS
.rounded_corners (@radius: 5px) { -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius;} #header { .rounded_corners;} #footer { .rounded_corners(10px);}
![Page 56: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/56.jpg)
56
LessCSS : Fonctionnalités
Nested Rules
LessCSS
#header { color: red; a { font-weight: bold; text-decoration: none; }}
![Page 57: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/57.jpg)
57
LessCSS : Fonctionnalités
Operations
LessCSS
@the-border: 1px;@base-color: #111; #header { color: @base-color * 3; border-left: @the-border; border-right: @the-border * 2;} #footer { color: (@base-color + #111) * 1.5;}
![Page 58: CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML](https://reader036.vdocuments.site/reader036/viewer/2022062417/551d9d94497959293b8ca871/html5/thumbnails/58.jpg)
58
Formation CSSC’était :