Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
2
CSS Cascading Style Sheets (Feuilles de style en cascade)
3
1.Introduction 2. 2.Enjeux 3. 3.Principes techniques de base 4. 4.Exemples 5. 5.CSS 3 6. 6.Limites 7. 7.Liens
4
Introduction Les spécifications CSS sont publiées par le W3CLes spécifications CSS sont publiées par le W3C Implémenté par Internet Explorer 3.0 dès 1996Implémenté par Internet Explorer 3.0 dès 1996 Suivi par Netscape Navigator 4.0 en 1997Suivi par Netscape Navigator 4.0 en 1997 1996 CSS 1 1998 CSS 2.0 2007 CSS 2.1 CSS 3 toujours non finalisé (en cours de développement… )CSS 3 toujours non finalisé (en cours de développement… )
5
Introduction Langage informatiqueLangage informatique Description du style de présentation des documents HTML et XMLDescription du style de présentation des documents HTML et XML
6
Introduction Spécifications CSS Document HTML Document XML Description du style Publication
7
Introduction CSS est développé par niveaux imbriqués et non par versions successivesCSS est développé par niveaux imbriqués et non par versions successives CSS 3 inclut CSS 2 qui inclut CSS 1CSS 3 inclut CSS 2 qui inclut CSS 1 Lenteur du développement de CSSLenteur du développement de CSS
8
Introduction CSS 3 CSS 2.1 CSS 2.0 CSS 1
9
Introduction Navigateurs implémentant les feuilles de style : Microsoft Internet Explorer 3.0 (partiellement)Microsoft Internet Explorer 3.0 (partiellement) Microsoft Internet Explorer 4.xMicrosoft Internet Explorer 4.x Microsoft Internet Explorer 5.xMicrosoft Internet Explorer 5.x Microsoft Internet Explorer 6.xMicrosoft Internet Explorer 6.x Netscape Navigator 4.xNetscape Navigator 4.x Netscape Navigator 6.xNetscape Navigator 6.x Netscape Navigator 7.xNetscape Navigator 7.x Mozilla x.xMozilla x.x Firefox x.xFirefox x.x Opera 5.xOpera 5.x Opera 6.xOpera 6.x Opera 7.xOpera 7.x Camino 0.8xCamino 0.8x Safari 1.xxSafari 1.xx
10
1.Introduction 2.Enjeux 3. 3.Principes techniques de base 4. 4.Exemples 5. 5.CSS 3 6. 6.Limites 7. 7.Liens
11
Enjeux Séparation de la structure d'un document de ses styles de présentation (pratique pour la définition d’une charte graphique)Séparation de la structure d'un document de ses styles de présentation (pratique pour la définition d’une charte graphique) Déclinaison des styles de présentation selon le récepteurDéclinaison des styles de présentation selon le récepteur Cascade des stylesCascade des styles
12
Enjeux Une présentation homogène sur tout un siteUne présentation homogène sur tout un site Changement rapide de l'aspect d'un site completChangement rapide de l'aspect d'un site complet Un document HTML lisible (styles définis à part)Un document HTML lisible (styles définis à part) Un temps de chargement des pages plus courtUn temps de chargement des pages plus court Un positionnement des éléments rigoureuxUn positionnement des éléments rigoureux
13
1.Introduction 2.Enjeux 3.Principes techniques de base 4. 4.Exemples 5. 5.CSS 3 6. 6.Limites 7. 7.Liens
14
Principes techniques de base Différentes façons d’associer le style au document HTML : Style en ligne, en tant qu'attribut des balisesStyle en ligne, en tant qu'attribut des balises Style du document, déclaré dans l'en-têteStyle du document, déclaré dans l'en-tête Style importé, déclaré à part dans un fichier.cssStyle importé, déclaré à part dans un fichier.css Style externe, déclaré à part dans un fichier.cssStyle externe, déclaré à part dans un fichier.css Ordre de priorité : Style en ligne > Style du document > Style importé > Style externe
15
Principes techniques de base Style en ligne, en tant qu'attribut des balises <HTML><HEAD></HEAD><BODY>......... </BODY></HTML>
16
Principes techniques de base Style du document, déclaré dans l'en-tête <HTML><HEAD> </STYLE></HEAD> … … </HTML>
17
Principes techniques de base Style importé, déclaré à part dans un fichier.css <HTML><HEAD> <!– @IMPORT URL(style.css); /* Définition des styles du document; */ --></STYLE></HEAD>...... </HTML>
18
Principes techniques de base Style externe, déclaré à part dans un fichier.css <HTML><HEAD> </HEAD>...... </HTML>
19
Principes techniques de base Définition d’une cascade de styles à part dans plusieurs fichiers.css <HTML><HEAD> </HEAD>...... </HTML>
20
Principes techniques de base Boîtes et flux CSSBoîtes et flux CSS Propriétés et valeursPropriétés et valeurs Sélecteurs et blocs de règlesSélecteurs et blocs de règles –sélecteur simple (exemple A {…}) –sélecteur contextuel (exemple P A {…])
![Principes techniques de base Boîtes et flux CSSBoîtes et flux CSS Propriétés et valeursPropriétés et valeurs Sélecteurs et blocs de règlesSélecteurs et blocs de règles –sélecteur simple (exemple A {…}) –sélecteur contextuel (exemple P A {…])](http://images.slideplayer.fr/11/3244229/slides/slide_20.jpg "Principes techniques de base Boîtes et flux CSSBoîtes et flux CSS Propriétés et valeursPropriétés et valeurs Sélecteurs et blocs de règlesSélecteurs et blocs de règles –sélecteur simple (exemple A {…}) –sélecteur contextuel (exemple P A {…])")
21
Principes techniques de base Sélecteur de balise ou d’élément Pour appliquer un style à une balise ou un élément <HEAD> <!– balise { propriete: valeur }--></STYLE></HEAD><BODY>............</BODY></HTML>
22
Principes techniques de base Sélecteur multiple Pour appliquer un style à plusieurs balises <HEAD> <!– Selecteur_de_balise1, selecteur_de_balise2 { /* style */ }--></STYLE></HEAD><BODY>.................. </BODY></HTML> /* Commentaire */
23
Principes techniques de base Sélecteur universel Pour appliquer un style à tous les éléments HTML <HEAD> <!– * { /* style */ }--></STYLE></HEAD>...... </HTML>
24
Principes techniques de base Sélecteur contextuel d’éléments imbriqués lorsque un élément Y est imbriqué dans un élément X selecteur_X selecteur_Y { /* style; */ }Sélecteur contextuel d’éléments imbriqués lorsque un élément Y est imbriqué dans un élément X selecteur_X selecteur_Y { /* style; */ } Sélecteur contextuel d’éléments consécutifs lorsque un élément Y suit immédiatement un élément X selecteur_X + selecteur_Y { /* style; */ }Sélecteur contextuel d’éléments consécutifs lorsque un élément Y suit immédiatement un élément X selecteur_X + selecteur_Y { /* style; */ } Sélecteur contextuel d’éléments père-fils lorsque un élément Y est fils direct d’un élément X selecteur_X > selecteur_Y { /* style; */ }Sélecteur contextuel d’éléments père-fils lorsque un élément Y est fils direct d’un élément X selecteur_X > selecteur_Y { /* style; */ }
25
Principes techniques de base Les classes <HEAD> <!– Selecteur_de_balise.ma_classe { /* style */ }--></STYLE></HEAD><BODY>..................</BODY></HTML>
26
Principes techniques de base Les classes universelles <HEAD> <!–.ma_classe { /* style */ }--></STYLE></HEAD><BODY>.................. </BODY></HTML>
27
Principes techniques de base Les pseudo-classes (:link, :visited, :hover, :active, :focus, :first-child, :first-line, :first-letter, …) <HEAD> <!– Selecteur_de_balise:pseudo_classe { /* style */ }--></STYLE></HEAD><BODY>..................</BODY></HTML>
28
Principes techniques de base Le sélecteur d’ID (identifiant) fait référence à un élément unique dans une page web repéré par son identifiant <HEAD> <!– #mon_ID { /* style */ }--></STYLE></HEAD><BODY>...... </BODY></HTML>
29
1.Introduction 2.Enjeux 3.Principes techniques de base 4.Exemples 5. 5.CSS 3 6. 6.Limites 7. 7.Liens
30
Exemples Site ZenGarden www.csszengarden.com Différentes feuilles de styles appliquées à une même page HTMLSite ZenGarden www.csszengarden.com Différentes feuilles de styles appliquées à une même page HTML www.csszengarden.com
31
Exemples Analyse d’un site (HTML CSS)Analyse d’un site (HTML CSS) Document HTML Document CSS
32
Exemples Document HTML
33
Exemples Document CSS
34
1.Introduction 2.Enjeux 3.Principes techniques de base 4. 4.Exemples 5.CSS 3 6. 6.Limites 7. 7.Liens
35
CSS 3 Les coins arrondis border-radiusLes coins arrondis border-radius La gestion de l’opacité PNG 24 bits et RGBa(r, v, b, a)La gestion de l’opacité PNG 24 bits et RGBa(r, v, b, a) Les arrière plans multiples background-image:url("alsa-beige.jpg"),url("alsa-vert.jpg")Les arrière plans multiples background-image:url("alsa-beige.jpg"),url("alsa-vert.jpg") Le multi colonage column-width et column-gapLe multi colonage column-width et column-gap Les ombrages box-shadowLes ombrages box-shadow Les effets sur le texte Text-shadowLes effets sur le texte Text-shadow Les boutons spéciaux propriété box-shadowLes boutons spéciaux propriété box-shadow Les polices spéciales @font-faceLes polices spéciales @font-face Les dégradés gradientLes dégradés gradient Les animations transitionLes animations transition Les nouveaux sélecteurs tableau dans la diapo suivanteLes nouveaux sélecteurs tableau dans la diapo suivante Source : www.alsacreations.com
36
CSS 3 Source : www.w3.org
37
1.Introduction 2.Enjeux 3.Principes techniques de base 4. 4.Exemples 5. 5.CSS 3 6.Limites 7. 7.Liens
38
Limites Lenteur du déploiement de CSSLenteur du déploiement de CSS Guerre des navigateursGuerre des navigateurs Monopole des navigateursMonopole des navigateurs Non implémentation de toutes les spécifications par les navigateurs (raisons commerciales et stratégiques)Non implémentation de toutes les spécifications par les navigateurs (raisons commerciales et stratégiques)
39
Limites
40
Limites
41
Limites
42
Limites
43
Limites
44
Limites
45
Limites
46
Limites D’après Raphaël Goetter, Webmaster Alsacréations "Si un site non standard s'affiche sur les navigateurs actuels, rien n'assure qu'il sera affiché proprement dans le futur"D’après Raphaël Goetter, Webmaster Alsacréations "Si un site non standard s'affiche sur les navigateurs actuels, rien n'assure qu'il sera affiché proprement dans le futur"
47
1.Introduction 2.Enjeux 3.Principes techniques de base 4. 4.Exemples 5. 5.CSS 3 6. 6.Limites 7.Liens
48
Liens W3 schools www.w3schools.comW3 schools www.w3schools.com www.w3schools.com Recommandations du W3C en français www.webstyles.fr/Style/CSS/Recommandations du W3C en français www.webstyles.fr/Style/CSS/ www.webstyles.fr/Style/CSS/ ZenGarden www.csszengarden.comZenGarden www.csszengarden.com www.csszengarden.com Alsa Créations www.alsacreations.comAlsa Créations www.alsacreations.com www.alsacreations.com
49
C’est fini… Merci pour votre attention !
Présentations similaires
