Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

1. « Philosophie » de l'utilisation des feuilles de style a. Principe Nous l'av

1. « Philosophie » de l'utilisation des feuilles de style a. Principe Nous l'avons largement évoqué en introduction à ce cours : à l'origine le langage HTML est conçu pour structurer le document (titre, citation, exemple, adresse...) en qualifiant la nature du contenu et non pour présenter le texte (gras, italique, en retrait, taille...). Au fil du temps, les créateurs de navigateurs s'étaient éloignés de ce point de départ pour en arriver à définir un langage de présentation. Avec les feuilles de style, le consortium du W3C est revenu à cette conception initale : le HTML structure le texte, la feuille de style le présente. b. Avantages et inconvénients Dans une conception raisonnée d'un site Web, le style de présentation fait partie des choix stratégiques de la communication de l'entreprise ou de l'institution. Il en va de même de l'organisation des liens, des arborescences... Or ces choix sont susceptibles d'évoluer rapidement. Il est alors hors de question d'avoir à reprendre l'ensemble des pages Web lors d'un changement de style de présentation, car la maintenance deviendrait dans cette situation impossible et son coût rédhibitoire. Pour rationaliser le développement et la maintenance il faut au maximum tendre vers le principe simple suivant : une information ne doit être mémorisée qu'à un seul endroit dans la base d'informations de l'entreprise. C'est ce que permet la feuille de style. Par exemple la taille des titres de niveau 3 peut être définie une seule fois pour tout le site et l'ensemble des pages qui le constituent, dans une seule feuille de style pour tout le site. Un exemple frappant de mise en pratique de cette souplesse d'emploi est le site CSSZenGarden. Le XML va au bout de cette logique : il organise l'information et permet d'aller la chercher par une requête qui s'apparente à celle des bases de données courantes. Il laisse aux feuilles de style XSL le soin de transformer cette information pour la rendre présentable. Il faut néanmoins reconnaître que le support des feuilles de style, même s'il est maintenant largement répandu parmi les navigateurs, laisse parfois à désirer, en particulier en ce qui concerne le positionnement des éléments. 3. Support par les navigateurs a. Introduction La situation est bien moins catastrophique qu'elle l'était voici quelques années. Les navigateurs de niveau 4 (IE4 et NN4) supportent la majorité des instructions CSS1. CSS a eu l'immense avantage d'unifier et de réduire les particularités des deux navigateurs. Ils supportent aussi une partie du CSS2, entre autres celle du positionnement CSS-P mais pas celle des "médias". IE5 et la version 6 de Netscape supportent la totalité de CSS1, ainsi que la version 6 d'Opera. Le support de CSS2 s'est grandement amélioré depuis quelques années. Internet Explorer 7 sous Windows est le navigateur récent présentant le support de ce 1 | P a g e format le moins étendu. Les autres navigateurs comme Opera, Mozilla ou Safari, présentent des performances comparables. Il reste néanmoins nécessaire, avant leur implémentation, de tester le comportement des propriétés des feuilles de style sur les navigateurs les plus anciens utilisés par le public visé. b. Stratégie de développement En conséquence, compte tenu du bon support des standards par les navigateurs récents, depuis quelques années se généralise une démarche relativement nouvelle en matière de développement Web. Traditionnellement en effet, l'usage était de développer un site en vérifiant au fur et à mesure de son avancement son rendu dans Internet Explorer ; on contrôlait ensuite le résultat avec les navigateurs moins répandus et, éventuellement, les autres plateformes. C'était une démarche très gourmande en temps. Maintenant que sur la plupart des plateformes, PC sous Windows exclus, les navigateurs dominants respectent correctement les standards, et qu'il existe sur PC des alternatives plus fiables sur ce sujet à Internet Explorer, il est devenu plus productif de développer un site en respectant les standards, puis en s'arrangeant pour que le résultat final reste acceptable sous Internet Explorer (autrement dit, ne remette en danger ni fonctionnalités, ni ergonomie du site). On utilise pour ce faire par exemple la technique des commentaires conditionnels afin de réserver certains contenus aux utilisateurs d'Internet Explorer. II. Comment appliquer un style ? 1. Appel à l'attribut style Le moyen le plus simple d'appliquer un style est l'utilisation de l'attribut style dans une balise. Par exemple, <h2 style="text-decoration: overline"> permet de déclarer que cet élément de titre aura une barre de surlignement. Cette solution présente l'inconvénient majeur d'encore mêler des informations sur la présentation d'un document (le style), et la structure de ce dernier. Cela complique les mises à jour du code dans le cas d'une refonte de l'apparence graphique. Enfin, utiliser cet attribut est susceptible d'empêcher les utilisateurs de modifier l'apparence de la page qu'il consulte par l'intermédiaire d'une feuille de style personnalisée. 2. Feuille de style interne Il est également possible de spécifier une feuille de style dite interne. Elle se place alors entre deux balises <style> et </style>, dans l'entête (<head>) du document HTML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title>Premiers pas</title> 2 | P a g e <meta http-equiv="Content-Type" content="text/html; charset=ISO- 8859-1" /> <style type="text/css"> (...) </style> </head> <body> (...) </body> </html> L'attribut type est obligatoire ; il précise le type MIME de feuille de style utilisé. En général, il vaut type="text/css". L'attribut media permet de spécifier le type de media auquel la feuille de style est destinée :  screen, la valeur par défaut.  tty, pour les « vieux » systèmes d'affichage à police de caractère fixe (comme le navigateur texte Lynx).  tv, pour les afficheurs de type télévision avec une faible résolution.  projection, pour les projecteurs.  handheld, pour les afficheurs de poche.  print, pour les imprimantes.  braille, pour les lecteurs braille.  aural, pour les navigateurs à synthèse vocale  all, pour tous les systèmes d'affichage. 3. Feuille de style externe Une troisième possibilité consiste en l'appel d'un fichier externe. L'appel se fait via l'élément link, placé dans l'entête du document HTML. L'URL de la feuille de style externe est spécifiée par la valeur de l'attribut href... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="fr"> <head> <title>Premiers pas</title> <link rel="stylesheet" type="text/css" href="../styles/site.css"> <meta http-equiv="Content-Type" content="text/html; charset=ISO- 8859-1"> </head> <body> (...) </body> </html> 4. Notion de feuille de style en cascade Le sigle CSS signifie Cascading Style Sheet ou encore Feuille de style en cascade. Pourquoi « cascade » ? Ce mot « cascade » fait référence à la méthode de résolution des conflits : puisqu'on peut placer plusieurs feuilles de style dans un même document (en lien, dans le head, en ligne dans la balise) les instructions de style successives peuvent 3 | P a g e s'opposer. Les ordres de style arrivent donc « en cascade ». Comment résoudre les conflits ? Comme pour le HTML, le dernier qui parle a raison. On aura donc la hiérarchie : feuille de style extérieure << feuille de style dans le head << style en attribut dans la balise III. La syntaxe 1. Structure générale a. Construction d'une règle Une feuille de style est une suite de règles. Voici un exemple de règle : h2 { text-align : center; color : black; } Il est facile de décrypter le sens de cette règle : tous les titres de niveau 2 auront leur texte centré et de couleur noire. Généralisons. Une règle a donc deux parties :  Un sélecteur ; dans l'exemple précédent il s'agit de h2 ;  Une déclaration ; c'est une suite de paires propriété: valeur séparées par un point virgule, le tout placé entre accolades. Ici dans cet exemple il s'agit de {text-align: center ; color: black}. b. Commentaires Il est possible d'ajouter des commentaires dans une feuille de style. Une zone de commentaires commence par les caractères /* et se termine par les caractères */. Elle peut s'étendre sur plusieurs lignes. Par exemple : /* Mise en forme des éléments h2 */ h2 { text-align : center; color : black; } 2. Sélecteurs simples a. Balise Il s'agit du sélecteur le plus simple possible, où le sélcteur reprend le nom de l'élément auquel la propriété s'applique : 4 | P a g e p { text-align : justify; color : black; } En utilisant l'attribut style, l'exemple précédent devient <p style="text-align: center; color: black">(...)</p> Il est possible de grouper les balises à l'aide de virgules : h2, h3, ul { text-align : center; color : green; } Dans cet exemple, tous les titres de niveaux 2 et 3 et les listes non ordonnées seront centrés et de couleur verte. b. Classe L'attribut class est un attribut qui peut apparaître dans n'importe quelle balise. Exemple : <p class="truc">Ceci est un paragraphe d'introduction.</p> <table summary="Un tableau peu informatif" class="machin"> <tr> <td>Et voici</td> <td>un</td> <td class="truc">tableau</td> </tr> <tr class="truc"> <td>de deux lignes</td> <td>et</td> <td class="truc">trois colonnes</td> </tr> </table> <ol class="truc"> <li>Et ceci</li> <li class="machin">est une</li> <li class="truc">liste</li> </ol> Cet attribut permet de regrouper des éléments différents en leur donnant un même nom de classe. Dans uploads/s3/ cour-11-feuille-de-style.pdf