11. LES CLASSES ET LES ID

Transcription

1 LES CLASSES ET LES ID On désire parfois affecter des styles différents à une même balise, les feuilles de style vous proposent pour cela l attribut class et l attribut id, ceux-ci peuvent utilisés sur toutes les balises. Les attributs class et id sont quasiment identiques Les classes Une classe est un nom que l on choisit librement (en se limitant aux caractères alphanumériques classiques) et dont on baptise les éléments concernés. Une classe permet d attribuer un comportement différent à certains éléments. La définition d'un style était : balise {propriété de style: valeur; Elle devient :.nom_de_classe {propriété de style: valeur; Pour appeler l'effet de style dans le document, on ajoute le nom de la classe à la balise. <balise class="nom_de_classe">... </balise> Exemple Je souhaite mettre ce qui est important dans le texte en gras et en bleu. Je crée la classe.essentiel :.essentiel {font-weight: bold; color: #000080; Et dans le document HTML, il suffit d'appeler la classe.important quand cela se révèle nécessaire : <p class="essentiel"> cette partie de texte est très importante </p> <h1 class="essentiel">titre 1</h1> <table><tr><td class="essentiel">cellule</td></td>... Le nom de classes utilisé est libre (tant qu il débute par une lettre) et est précédé d un point. On peut appliquer la même classe à autant d'éléments qu on le souhaite et un même élément peut recevoir plusieurs classes. <h2 class="sommaire titre2"> Titre de niveau 2 en rouge et centré </h2> Les identifiants Les ID fonctionnent exactement comme les classes, excepté qu il ne peut être utilisé qu'une fois dans le code.le nom est choisi librement mais est précédé d'un #. En pratique, les id sont utilisés sur des éléments qui sont uniques sur votre page (comme par exemple le logo). La syntaxe est : #nom_de_id {propriété de style: valeur; Et pour l'appeler : <balise id="nom_de_id">... </balise> Pour #essentiel {... <P id="essentiel"> est correct. Mais si on rencontre dans la même page <h1 id="essentiel"> ce n'est plus correct! Nommer les éléments Lorsque vous nommez les ID et les classes, choisissez des noms indépendants de la présentation, nommez les éléments en fonction de ce qu ils sont (sémantique) plutôt que de l apparence qu ils possèdent. Le code est ainsi plus compréhensible et ne risque jamais de se désynchroniser avec la mise en page. Lorsque vous écrivez des noms de classe et d ID, soyez attentif à la casse, car les navigateurs la respectent. Vous pouvez employer des "-" ou des "_".

2 45 Conclusions On ne peut appliquer qu un seul nom d ID à un élément dans une page mais un même nom de classe à n importe quel nombre d éléments c est tout l intérêt des classes. Elles sont donc utiles pour identifier des types de contenu ou des éléments similaires. Il peut donc être intéressant d'attribuer automatiquement des id aux objets uniques du code (en-têtes, bloc publicité, bloc rubriques, annexes, ) et des classes aux éléments qui se répètent (paragraphes, listes de menus, ) Lorsque vous intégrez du code javascript et CSS dans une même page, les identifiants peuvent être utiles pour reconnaître certaines balises. 12. LES BALISES UNIVERSELLES (SPAN ET DIV) Il arrive parfois que vous ayez besoin d'appliquer une class (ou un id) à certains mots qui ne sont pas à l'origine entourés par des balises. <DIV> et <SPAN> sont deux balises HTML dites «universelles» car elles n'ont aucune signification particulière. C est associées aux attributs CLASS et ID qu elles permettent d'utiliser des mécanismes de mises en page complexes SPAN La balise <SPAN>... </SPAN> permet d'appliquer des styles à un morceau de paragraphe, il rend possible la délimitation d'un groupe de texte. C'est une balise de type inline, elle ne provoque pas de retour à la ligne. Exemple <html> <head> <style type="text/css">.element{font-size: x-large; color: navy </style> </head> <body> <p> un monde de <span class="element"> géants </span> en papier</p> </body> </html> DIV La balise <DIV>... </DIV> permet de délimiter un bloc de contenu (texte, liste, tableau, image). C'est une balise de type block., elles créent un nouveau "bloc" dans la page, et provoquent donc obligatoirement un retour à la ligne. Exemple <html> <head> <style type="text/css"> #header{font-size: x-small;background-color:silver; </style> </head> <body> la balise div <div id="zone"> <p> commentaire : </p> <p> permettant de délimiter un bloc de contenu </p> <table> <tr> <td> l'attribut div </td> </tr> </table> </div> </body> </html>

3 46 Pour limiter le plus possible le balisage, utilisez d élément div lorsqu il n existe pas déjà un élément distinctif (exemple: si vous vous servez d une liste pour votre navigation principale, il n est pas nécessaire de l envelopper dans une div, utilisez l ul déjà disponible). <div> /* pas nécessaire <ul id="nav"> <li><a href="/home/">home</a></li> <li><a href="/about/">about Us</a></li> <li><a href="/contact/">contact</a></li> </ul> </div> /* pas nécessaire Veillez également à utiliser des div pour regrouper des éléments liés par leur signification ou leur fonction plutôt que par leur présentation ou leur disposition (sémantique). Classite ou Divinite aiguë La classite ou divinite aigüe consistent à utiliser un sélecteur "class" ou ajouter un "div" quand ce n'est pas nécessaire alors que les CSS peuvent appliquer plusieurs règles à un élément et cibler directement les sous-éléments d'une classe ou d un div. Le ciblage des éléments 1 permet de simplifier votre balisage (et le rendre plus logique aux navigateurs et machines de traitement comme le Googlebot), condenser le code et ajouter sens et structure aux pages Web. En supprimant les classes superflues, vous simplifierez le code et réduirez le poids de vos pages. Votre contenu est plus facile à traiter et à mettre à jour. 13. LES SELECTEURS ET L'ARBORESCENCE Les différents éléments composant un fichier HTML (titres, paragraphes, listes, liens, images ) s organisent sous la forme d un «arbre généalogique», que l on nomme également «arbre du document» (ou DOM pour Document Object Model). Au chargement de la page HTML, le navigateur construit un modèle arborescent correspondant à l'ensemble des balises de la page web appelé le DOM. Il charge ensuite la ou les feuilles de styles puis applique les différentes règles aux objets du DOM au fur et à mesure de la lecture des styles. Les sélecteurs sont la base de la recheche d éléments HTML dans le DOM. Selon la structure du document et principalement son arborescence (c est-à-dire la hiérarchie des blocs, chacun étant placé «sous» l éventuel bloc qui le contient), il est possible de pointer directement certains éléments en fonction de leur situation dans le document. Cette technique porte le nom de «sélection hiérarchique» Éléments ancêtres, parents, enfants et frères Chaque boîte peut en contenir d autres. Un paragraphe <p> peut ainsi renfermer des boîtes définies par les éléments <span> ou <strong>, et se trouver lui-même inclus dans un élément <div>. Toutes ces imbrications de boîtes forment une hiérarchie arborescente entièrement comprise dans la boîte de l élément racine du document (<body>). Il est essentiel de comprendre cette arborescence pour bien utiliser les positionnements. Ceux-ci peuvent être ancêtre, parents, enfants ou frères. Ces différents éléments composent une hiérarchie d'imbrications. 1. Un élément Ancêtre est un élément qui contient un élément ou une hiérarchie d'éléments 2. Un bloc Parent est un élément contenant directement un autre bloc. Par exemple, un div contenant un paragraphe p. Attention : si ce paragraphe contient lui-même des éléments (ex: strong), div ne sera pas Parent de l'élément 1 Consultez le chapitre sur les sélecteurs et l arborescence

4 47 strong mais uniquement son Ancêtre. Le Parent est donc l'ancêtre immédiat de 1 er niveau. 3. Un bloc contenu directement dans un autre bloc est dit Enfant de cet élément. Par exemple, les éléments li sont enfants de leur conteneur ul. 4. Les éléments ayant le même élément Parent sont appelés Frères. Exemple : <div> <h1> Titre évocateur </h1> <p> paragraphe de texte à la suite du titre H1 </p> <h2> sous-titre </h2> <p> paragraphe de texte à la suite du sous-titre avec certains <strong> termes importants </strong> </p> </div> Le bloc <div> est parent des titres <h1>, <h2> et des 2 <p>, c'est aussi un ancêtre de <strong> Le second <p> est parent de <strong> Les titres <h1>, <h2> et les 2 <p> sont frères 13.2 Simplifier avec le regroupement des propriétés Certaines propriétés génériques prévoient une version raccourcie permettant l'application de plusieurs valeurs en 1 seule déclaration. Ainsi : p{ font-family:arial; font-style:italic; font-weight:bold; font-size:120%; line-height:140%; Sera identique à : p{ font : italic bold 120%/140% arial Ainsi : border-width: 3px; border-style: dotted; border-color: gray; Sera identique à : border: 3px dotted gray; Ces notations raccourcies permettent d éviter l accumulation de déclarations de styles mais attention! L ordre est important sous peine de ne pas voir s appliquer les styles. Certains sites comme ou vous propose d organiser automatiquement votre feuille de style en classant hiérarchiquement vos sélecteurs et propriétés Regroupement des sélecteurs Au lieu de répéter la même règle pour plusieurs éléments, le W3C a prévu une notation raccourcie des mêmes propriétés pour plusieurs balises : Ainsi :.texte {

5 48 p { h1 { h2 { Sera identique à :.texte, p, h1, h2 { Le sélecteur universel Identifié par un astérisque, il est souvent utilisé pour appliquer des mises en forme à tous les éléments d une page. /* Pour supprimer le remplissage et les marges par défaut du navigateur sur tous les éléments : */ * { padding: 0; margin: 0; Combiné avec d autres sélecteurs, le sélecteur universel peut servir à mettre en forme tous les descendants d un élément particulier ou à ignorer un niveau de descendants. #header * { font-weight: bolder; color: red; Cibler les sélecteurs descendants Les sélecteurs descendants (une balise contenue dans une autre) permettent de cibler les descendants d un élément ou d un groupe d éléments donnés. Ils sont indiqués par un espace entre deux autres sélecteurs. h3 em { ici les styles ; Sélectionne toutes les balises <em> situées à l'intérieur d'une balise <h3>. Notez qu'il n'y a pas de virgule entre les deux noms de balise Simplifier grâce à la hiérarchie Dans un site web bien architecturé, cette méthode permet d éviter le recours aux classes dans la plupart des cas. Exemple : <ul id="menu"> <li><a class="lienmenu" href=" ">premier lien du menu</a></li> <li><a class="lienmenu" href=" ">deuxième lien du menu</a></li> </ul> Pourra devenir : <ul id="menu"> <li><a href=" ">premier lien du menu</a></li> <li><a href=" ">deuxième lien du menu</a></li> </ul>

6 49 Vous désignez vos liens de cette manière : #menu a {propriétés Ou plus précis : ul#menu li a {propriétés Au lieu de leur attribuer différentes classes, pensez à appliquer une classe ou un ID à l un de leurs parents, puis ciblezles à l aide d un sélecteur descendant Limiter les styles aux balises dotées de certaines classes ou identifiants Ainsi, a.nav {background-color:yellow; ne désignera que les liens <a> appartenant à la classe nav, et... <a class="nav" href=" "> lien hypertexte </a> /*sera affecté par la propriété*/ <p class="nav"> paragraphe </p> /* ne sera pas affecté <p class="nav"> <a href="..."> lien </a> </p> /* ne sera pas affecté Ainsi a img {border-width:0; ne supprimera les bordures qu'aux images contenues dans un lien Un nommage polyvalent Il est autorisé de cumuler un attribut d identifiant et un attribut de classe pour le même élément, par exemple : <p class="exotique" id="fruits"> Un élément peut disposer de noms de classes multiples en les séparant par un espace, par exemple : <p class="fruit exotic"> Héritage Certaines propriétés, comme la couleur ou la taille des polices, sont héritées par les descendants des éléments auxquels elles sont appliquées. Notons que Internet Explorer et Netscape ont quelques problèmes avec l héritage des tailles de police dans les tableaux, il est donc préférable dans ce cas précis de définir leur taille de police séparément car tous les styles qui sont appliqués directement à un élément redéfinissent un style hérité. L héritage est très utile car il évite d ajouter le même style à chaque descendant d un élément : p, div, h1, h2, h3, ul, ol, dl, li {color: black; = body {color: black; L héritage bien utilisé peut aider à réduire le nombre et la complexité des sélecteurs dans le code. Lecture Web : CASCADES ET SPECIFICITES Nous savons que lorsque deux règles ciblent le même élément, les CSS gèrent ces conflits par le biais d un processus appelé «cascade». Les règles sont ensuite ordonnées en fonction de la spécificité du sélecteur : les règles aux sélecteurs plus spécifiques redéfinissent celles dont les sélecteurs sont moins spécifiques. Si deux règles possèdent la même spécificité, c est celle qui est définie en dernier qui prend le dessus.

7 50 Calcul de la spécificité d un sélecteur La nature du CSS est d attribuer un poids aux valeurs en fonction de l'endroit où elles apparaissent dans la "cascade". Un style CSS sera appliqué en fonction de quatre facteurs selon l'ordre suivant : 1. spécificité directe (par exemple les éléments <ul> se voient attribuer une largeur de 300px) 2. importance du style (par exemple le style est t'il déclaré dans la feuille de style de l'utilisateur?) 3. spécificité du sélecteur (par exemple les éléments <ul> à l'intérieur d'éléments <div> se voient attribuer une largeur de 400px) 4. ordre d'apparition (par exemple le dernier déclaré s'applique) Utiliser la déclaration!important Quand la déclaration!important est utilisée sur une paire spécifique de propriété/valeur, cette valeur là échappera à la cascade et deviendra, comme son nom le suggère, la valeur la plus importante pour cette propriété, surclassant toutes les autres valeurs. #leftside { background-color: green!important; #header #leftside { background-color: red; Dans l'exemple ci-dessus, même si le style du background-color spécifié dans la seconde règle est plus spécifique du fait du sélecteur et est déclaré en dernier, la première règle sera prioritaire du fait de l'ajout de la déclaration!important. Ainsi, la couleur d'arrière-plan de l'élément en question (l'élément #leftside) sera vert au lieu de rouge. Lecture Web :

8 51 EXERCICE DE REVISION : Réalisez la feuille de style permettant de formater les pages HTML sur Molière et Balsac.