La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

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.

Présentations similaires


Présentation au sujet: "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."— Transcription de la présentation:

1

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. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). 2

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

4 Les origines des CSS sont liées à trois alternatives majeures Histoire et enjeux du CSS4

5 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 ? Lutilisateur 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 ? 5Histoire et enjeux du CSS

6 1992 : premier navigateur Web 1995 : Netscape Navigator, esquisses CSS 1996 : début de CSS1, promu par IE : IE5 Mac supporte CSS1 (à 99%) 2001 : sortie dIE6, leader sur le marché 2001 : CSS 2.1, début CSS : reprise du dev IE avec IE : CSS3 à létat de brouillon (draft) Histoire et enjeux du CSS6

7 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 Histoire et enjeux du CSS7

8 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 larchitecture : fichier commun + spécifique Selon larchitecture du CSS lui même Histoire et enjeux du CSS8

9 Principes techniques et Syntaxe du CSS9

10 Sélecteurs et bloc de règles Propriétés regroupées par bloc précédé dun 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 Principes techniques et Syntaxe du CSS10

11 Display : none Disparait du flux À opposer à « visibility: hidden » Ex : Principes techniques et Syntaxe du CSS11

12 Display : block Rendu lun en dessous de lautre Sadapte à la largeur maximum Principes techniques et Syntaxe du CSS12

13 Display : block Margin (Outline) Border, Padding, Width Principes techniques et Syntaxe du CSS13

14 Display : inline Rendu lun à côté de lautre Sadapte à la largeur minimum Principes techniques et Syntaxe du CSS14

15 Display : inline-block Rendu type inline Possède les propriétés des blocks Principes techniques et Syntaxe du CSS15

16 Display : table Rendu type balises Copier le rendu dun tableau sans lutiliser Principes techniques et Syntaxe du CSS16

17 Principe issu du média print Le contenu non flottant qui suit initie lhabillage Sort du flux (cf absolute) Utilisation de « clear » pour passer des lignes Principes techniques et Syntaxe du CSS17

18 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 Principes techniques et Syntaxe du CSS18

19 Exemple : Principes techniques et Syntaxe du CSS19 This is a paragraph within a div div { background-color: #3C75AE; color: #fff; margin-top: 10px; } p { margin-top: 20px; margin-bottom: 20px; border: 1px solid #EB6B0E; }

20 Rendu ? Principes techniques et Syntaxe du CSS20

21 Rendu réel : Explication : Principes techniques et Syntaxe du CSS21

22 Solution : Rendu : Principes techniques et Syntaxe du CSS22 div { background-color: #3C75AE; color: #fff; margin-top: 10px; padding-top: 1px; padding-bottom: 1px; }

23 Absolues Pt, pc, in, cm, mm Relatives Px, em, ex, % Unité em : Principes techniques et Syntaxe du CSS23

24 Spécifier le screen, print { … } Types courants All Screen Print Handheld Hacks CSS Ex: Astuce de lunderscore Principes techniques et Syntaxe du CSS24

25 Transparence PNG filter:progid:DXImageTransform.Microsoft.AlphaI mageLoader(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 Principes techniques et Syntaxe du CSS25

26 Modèle de bloc Modèle Quirks (héritage IE5) CSS3 box-sizing: border-box; Principes techniques et Syntaxe du CSS26

27 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 Principes techniques et Syntaxe du CSS27

28 Les sélecteurs dInternet Explorer 6 à nos jours Point sur les sélecteurs28

29 * Cible lensemble des éléments descendants #X Cible lid, haute priorité, rigide.X Cible la class, priorité intermédiaire, réutilisable X Cible lensemble des éléments X X Y Cible les descendants Y, quel que soit leur niveau Point sur les sélecteurs29

30 X::PSEUDOELEMENT Sapplique 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 napplique :hover quaux balises A Retenir LoVe/HAte Point sur les sélecteurs30

31 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 sil 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) Point sur les sélecteurs31

32 X[title] X ayant lattribut TITLE X[href = "foo"] X ayant lattribut HREF égal à « foo » X[href *= "www."] Lattribut HREF contient « www. » nimporte où X[href ^= "http"] Lattribut HREF commence par « http » X[href $= ".jpg"] Lattribut HREF fini par « jpg » Point sur les sélecteurs32

33 X[data-*="foo"] Pseudo attribut Ex : data-filetype="image" X[foo~="bar"] Cible un attribut séparé par des virgules Point sur les sélecteurs33 Click Me, Fool a[data-info ~= "external"] { color: red; }

34 X:before, X:after Permet de rajouter du contenu avant ou après Point sur les sélecteurs34.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; }.clearfix { *display: inline-block; _height: 1%; }

35 Les limites du CSS, un avant gout de CSS 3 Critiques et avenir du CSS35

36 Indépendance de la présentation et de la structure Souvent : texte -> image Feuilles de style générique difficilement applicable Manque dimplémentation CSS = techniques fortement liées à la structure Ex: Design en float Critiques et avenir du CSS36

37 Accessibilité Risque de véhiculer des infos via CSS Ex : Image background avec titre incorporé Modifier lordre dapparition des éléments / ordre logique Ex: Sidebar, infobulle Pertinence des balises non obligatoire Ex: Un div class titre, avec font-size et font-weight Critiques et avenir du CSS37

38 Simplicité La cascade complique lanticipation du rendu Choix à faire entre redondance et optimisation En théorie : CSS facilement manipulable par lutilisateur La pratique est tout autre… Critiques et avenir du CSS38

39 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 Critiques et avenir du CSS39

40 Border-radius Critiques et avenir du CSS40

41 Box-shadow Critiques et avenir du CSS41

42 Text-shadow Critiques et avenir du CSS42

43 Text-stroke Critiques et avenir du CSS43

44 Multiple Backgrounds Critiques et avenir du CSS44

45 Background-size Critiques et avenir du CSS45 body, html { height: 100%; } body { background: url(path/to/image.jpg) no-repeat; background-size: 100% 100%; }

46 Text-overflow Critiques et avenir du CSS46

47 Resize Critiques et avenir du CSS47

48 Transition Critiques et avenir du CSS48 div { opacity: 1; -webkit-transition: opacity 1s linear; } div:hover { opacity: 0; }

49 Critiques et avenir du { 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; }

50 Au départ : 1 bloc main, 1 bloc aside 1 conteneur de 960px Critiques et avenir du CSS50

51 Au départ : main : 800px Critiques et avenir du CSS51

52 Au départ : aside : box-flex: 1; Critiques et avenir du CSS52

53 Une surcouche de CSS qui offrent de nouvelles possibilités LessCSS53

54 Variables #4D926F; #header { } h2 { }

55 Mixins LessCSS55.rounded_corners 5px) { } #header {.rounded_corners; } #footer {.rounded_corners(10px); }

56 Nested Rules LessCSS56 #header { color: red; a { font-weight: bold; text-decoration: none; }

57 Operations #111; #header { * 3; * 2; } #footer { color: + #111) * 1.5; }

58 Cétait : 58


Télécharger ppt "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."

Présentations similaires


Annonces Google