Undolog.com

nei fogli di stile. Voici quelques conseils brefs sur l'utilisation de class et id dans les feuilles de style. Gardez à l'esprit qu'une fois que l'utilisation des techniques JavaScript avancées, telles que l'utilisation des moteurs Ajax, peuvent entrer en conflit avec les conseils donnés ici! Et à la fin nous verrons pourquoi.

per legare un TAG ad uno stile, spesso si rimane confusi e non si capisce quale sia la differenza o, comunque, la scelta migliore tra i due. Avec la disponibilité de la fois l'attribut class="" que l'attribut id="" de se lier à un style TAG, est souvent confus et ne comprennent pas ce qu'est la différence ou du moins, le meilleur choix entre les deux. Vraiment une étiquette marquée avec la classe ou l'utilisation du ' id pour le CSS ne change rien, ou presque. Ce qui change c'est la façon dont nous pensons au sujet de la page et utiliser correctement les id et ensuite nous retrouver avec des classes sans se repentir de ses choix.

Une note sur l'héritage

Avant de commencer, je voudrais profiter de cette occasion pour souligner un comportement important, des styles ou coscading ou d'héritage. En pratique, un sous-élément hérite des caractéristiques de la mère, sauf si vous spécifiez explicitement que c'est !important . Voyons un exemple qui peut clarifier cette situation. Imaginez que vous avez créé la feuille de style suivante:

et le code HTML suivant:

En conséquence, le navigateur sera effectivement celui désiré, le premier paragraphe sera fait avec les 14 polices de pixels et le deuxième paragraphe par la police à 22 pixels! Essayons maintenant d'utiliser la classe au lieu d'id:

Le code HTML:

Le résultat sur le navigateur (testé sur IE6 et Firefox 1.5 +), cette fois sera différente! Qu'est-il arrivé? ha ereditato il font-size del primo div con id c_box . Le div avec classe d_box héritées font-size de la première div avec id c_box . Une id , il faut donc les classes "filles" pour hériter de leurs attributs (bien que cela ne s'applique pas à tous les styles). nella classe d_box , come mostrato qui sotto: Pour éliminer le problème doit être explicite, avec le clétage !important , la font-size de classe d_box , comme indiqué ci-dessous:

De cette façon nous imposer de prendre en compte le nouveau style défini avec la classe d_box .

En utilisant seulement les classes:

Le code HTML:

Le résultat sera de lancer le navigateur, les deux paragraphes sera rendu correctement. Moralité: si prudent lorsque vous utilisez de style en cascade ... s'il est vrai qu'il n'y a aucune différence immédiate entre les classes et id 'est également vrai que leur utilisation n'est pas totalement identique. Sinon, pourquoi y at-il deux façons de parler?

Règle

Cependant, il existe un moyen de savoir qui «gagne» lorsque vous définissez un style. Cette technique est généralement appelée règle de cascade 3.
Il fournit une valeur à chaque sélecteur, ou la ligne des déclarations CSS. Cette valeur est dans la forme ABC.

1) ajouter 1 à A pour chaque id dans le sélecteur
2) Ajouter 1 à B pour chaque class dans le sélecteur
3) ajouter 1 à C pour chaque balise dans le sélecteur

Voici un exemple:

La valeur la plus élevée gagne. Si deux règles ont le même poids pour gagner le dernier set.

Conseils

Une route peut être cela: utiliser la classe quand le comportement visuel d'un TAG peuvent varier en fonction de son conteneur parent. Utilisez id quand le comportement visuel est unique, qu'il est indépendant de son conteneur parent.

Un exemple illustratif de cette approche pourrait être la suivante: le comportement d'un titre hypothétique. Dans ce cas nous allons utiliser la class="title" basée sur le conteneur supérieur et ajuster les comportements. Le fichier CSS pourrait être:

En fait, même, les choses sont encore mieux car nous avons le TAG H<em>n</em> pour nous aider. Dans un cas réel de la classe title serait inutile. En pratique, la technique consiste à utiliser l' id comme sélecteur de comportement (en fait, sont souvent désignés comme id-sélecteur). Une situation réelle pourrait donc être:

Nous avons trois comportements différents en fonction de l'interrupteur. La principale règle pourrait être: Si cette balise se comportent différemment selon visuellement en utilisant le conteneur class !

Dans cette série, entre autres choses, inclut de nombreux éléments de présentation visuelle tels que les listes ul . Elles peuvent résulter d'une manière différente en fonction de la mère conteneur peut regarder dans la barre de navigation, un autre sur la page principale, et une autre dans la barre latérale, etc ... Mais ce que nous avons besoin, dans la plupart des cas, est le seulement passer id , en utilisant les meilleures balise HTML standard.

quando si può, i TAG titolo H<em>n</em> , i TAG strong , acronym , code , insomma limitare div e span altrimenti rendiamo inutile l'uso degli stili, inondando inoltre la rete con bit supeflui. Par exemple, il est recommandé d'utiliser des listes ul ou ol quand vous pouvez, le titre tag H<em>n</em> , le TAG strong , acronym , code , limite à court div et la span rendre autrement inutile l'utilisation de styles, aussi inonder le réseau avec le bit supeflui. Souvent, vous ne savez même pas toutes les balises HTML. Certains concepteurs de sites web semblent ignorer certains de la balise la plus utile dans la norme HTML courant. Certes, certains de TAG (ainsi que certains attributs, les événements, les styles, et, hélas, de diverses autres petites choses ...) sont confinés à la norme de certains navigateur spécifique, mais il ya TAG nombreuses pleinement soutenu par pratiquement tous les navigateurs existants (y compris Safari - à propos, mais Apple At-il oublié qu'il a développé son propre navigateur?).

Les feuilles de style, toujours, hélas, sont également soumis à un certain malentendu éparpillés ici et là. Concepteur de sites Web à faire est d'attendre et d'espérer pour un avenir plus standard et moins variable. Utilisez le id comme sélecteur, par conséquent, ne peut s'empêcher d'être trop impliqués dans un effet secondaire associé à l'utilisation de Javascript. Grâce à la langue la plus largement utilisée côté client, s'il est activé dans votre navigateur, vous pouvez obtenir un pointeur vers un élément de page spécifique ou tag. . Ceci est maintenant résolu avec la facilité (il ya quelque temps était un peu plus complexe, en raison de l'incompatibilité entre les navigateurs toujours présent!) Via le getElementByID() mis à disposition par l'objet document .

dell'elemento. Comme peut être vu par le même nom de méthode, getElementByID() récupère le pointeur sur la base du ' id de l'élément. per rintracciare l'elemento. Le problème a à voir avec des feuilles de style est que le ' id en question est exactement le même utilisé par getElementByID() pour suivre la question. Alors imaginez avoir à écrire une application web qui gère une série de post-it sur ​​l'écran, si quelque chose avec la position:absolute suite. Cela signifie que des post-it sur ​​la page elle pourrait avoir un nombre indéterminé de n. . Le concepteur Web qui veut écrire la feuille de style pour cet objet, suivant notre règle précédente serait choisissez d'utiliser un div conteneur et lui donner une id="postIt" . De cette façon, on suivrait la règle quand un post-it ne se comportent de manière différente visuellement selon le conteneur parent. Dans notre cahier des charges, il est un objet est unique et donc associer correctement une ' id . Le problème vient quand le programmeur JavaScript (les personnages de ce MiniStore sont deux différents, mais la question serait toujours embarrassantes ... même pour un seul développeur) tente d'obtenir un pointeur vers un post-it spécifiques! Il se rend vite compte qu'il ne peut pas utiliser l'identifiant comme un discriminateur en ce que si il ya plusieurs éléments sur la page avec le même ID, puis getElementByID() ne peut pas retourner un pointeur unique, la limite peut retourner une liste (array), une liste de tous les éléments qui sont appelés de la même façon.

Cette discussion longue et fastidieuse apporte avec lui une note en conséquence. Dans l'élaboration de HTML / JavaScript / CSS et des feuilles de style en particulier, beaucoup dépend de la vision globale. Il ya en effet une règle qui s'applique à toute solution. Être capable de voir le projet dans son intégralité peut aider plus des règles énoncées.

Cet article a été utile pour vous?:

Chargement en cours ...

• 

• Tweet