CSS Cascading Style Sheets (Feuilles de style en cascade)
1.Introduction 2. 2.Enjeux 3. 3.Principes techniques de base 4. 4.Exemples 5. 5.CSS Limites 7. 7.Liens
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 CSS CSS CSS 2.1 CSS 3 toujours non finalisé (en cours de développement… )CSS 3 toujours non finalisé (en cours de développement… )
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
Introduction Spécifications CSS Document HTML Document XML Description du style Publication
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
Introduction CSS 3 CSS 2.1 CSS 2.0 CSS 1
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
1.Introduction 2.Enjeux 3. 3.Principes techniques de base 4. 4.Exemples 5. 5.CSS Limites 7. 7.Liens
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
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
1.Introduction 2.Enjeux 3.Principes techniques de base 4. 4.Exemples 5. 5.CSS Limites 7. 7.Liens
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
Principes techniques de base Style en ligne, en tant qu'attribut des balises <HTML><HEAD></HEAD><BODY> </BODY></HTML>
Principes techniques de base Style du document, déclaré dans l'en-tête <HTML><HEAD> </STYLE></HEAD> … … </HTML>
Principes techniques de base Style importé, déclaré à part dans un fichier.css <HTML><HEAD> URL(style.css); /* Définition des styles du document; */ --></STYLE></HEAD> </HTML>
Principes techniques de base Style externe, déclaré à part dans un fichier.css <HTML><HEAD> </HEAD> </HTML>
Principes techniques de base Définition d’une cascade de styles à part dans plusieurs fichiers.css <HTML><HEAD> </HEAD> </HTML>
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 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>
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 */
Principes techniques de base Sélecteur universel Pour appliquer un style à tous les éléments HTML <HEAD> <!– * { /* style */ }--></STYLE></HEAD> </HTML>
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; */ }
Principes techniques de base Les classes <HEAD> <!– Selecteur_de_balise.ma_classe { /* style */ }--></STYLE></HEAD><BODY> </BODY></HTML>
Principes techniques de base Les classes universelles <HEAD> <!–.ma_classe { /* style */ }--></STYLE></HEAD><BODY> </BODY></HTML>
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>
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>
1.Introduction 2.Enjeux 3.Principes techniques de base 4.Exemples 5. 5.CSS Limites 7. 7.Liens
Exemples Site ZenGarden Différentes feuilles de styles appliquées à une même page HTMLSite ZenGarden Différentes feuilles de styles appliquées à une même page HTML
Exemples Analyse d’un site (HTML CSS)Analyse d’un site (HTML CSS) Document HTML Document CSS
Exemples Document HTML
Exemples Document CSS
1.Introduction 2.Enjeux 3.Principes techniques de base 4. 4.Exemples 5.CSS Limites 7. 7.Liens
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 polices 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 :
CSS 3 Source :
1.Introduction 2.Enjeux 3.Principes techniques de base 4. 4.Exemples 5. 5.CSS 3 6.Limites 7. 7.Liens
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)
Limites
Limites
Limites
Limites
Limites
Limites
Limites
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"
1.Introduction 2.Enjeux 3.Principes techniques de base 4. 4.Exemples 5. 5.CSS Limites 7.Liens
Liens W3 schools schools Recommandations du W3C en français du W3C en français ZenGarden Alsa Créations Créations
C’est fini… Merci pour votre attention !