Styling listes et liens - W3C Wiki
introduction
Dans cet article, le programme d'études des normes Web, nous allons examiner les compétences de base dont vous avez besoin pour créer la liste robustes et styles lien. Nous allons également discuter des moyens d'éviter les pièges de ces éléments clés et produire un résultat final qui fonctionnera sur les différents navigateurs, et être accessible aux utilisateurs handicapés.
Il y a un certain nombre d'exemples utilisés dans cet article, vous pouvez télécharger les listes et liens des fichiers par exemple pour suivre avec eux.
Listes de style
Tout d'abord, je vais vous guider à travers les bases de listes style avec CSS, avant de passer ensuite à regarder des techniques un peu plus compliquées.
balles de base et les numéros
La chose fondamentale à considérer lors de la création d'un style de liste est quelle forme de puce ou de numérotation que vous souhaitez utiliser. Vous pouvez également choisir de supprimer complètement les balles et les chiffres. Comme vous l'avez appris dans l'article HTML Listes. il existe de nombreuses options disponibles, définies à l'aide de la propriété type de liste de style.
Qui produira quelque chose comme la figure 1:
Figure 1: Liste non ordonnée avec des balles carrées.
Certains types de liste courants sont représentés à la figure 2:
Figure 2: styles de liste commune.
puces personnalisées en utilisant des images
L'ensemble standard de balles suffisent pour le contenu de base, mais il est une demande de conception commune de les remplacer par une image personnalisée.
La spécification CSS inclut la propriété list-style-image pour ajouter une image liste personnalisée. Cependant, la propriété a limité les options de positionnement pour l'image de fond, et dans certaines circonstances, ne fonctionne pas du tout dans IE. Ainsi, il est devenu une pratique beaucoup plus courante simplement définir une image d'arrière-plan sur les éléments de liste.
Imaginons que vous avez une liste de flux RSS et que vous voulez changer la balle à l'icône standard RSS orange. Nous vous donnerons la liste de la classe « rss » pour le différencier des autres listes:
Cela produira une liste à l'image de RSS au lieu de balles, comme le montre la figure 3:
Figure 3: La liste des puces d'image.
Gardez à l'esprit que l'image d'arrière-plan est placé en utilisant des pixels pour un placement précis. Selon la conception que vous créez, vous pouvez également être en mesure d'utiliser%. em s ou mots-clés. Faites juste attention lorsque votre conception présente un contenu qui pourrait causer un élément de liste pour envelopper sur plusieurs lignes si vous définissez comme indiqué sur la Figure 4 l'arrière-plan au centre vertical ou 50%, il peut paraître assez étrange,:
Figure 4: Une démonstration d'images de balles verticalement centrées sur un élément de liste à plusieurs lignes.
En réglant l'image pour asseoir au sommet de l'élément de la liste, vous maintenez le comportement de la balle par défaut (où la balle se trouve sur la première ligne) -voir Figure 5:
Figure 5: La démonstration d'images de balles supérieurs alignés sur un élément de liste à plusieurs lignes.
listes à puces
Une chose que vous remarquerez probablement est assez rapidement que le style par défaut pour les listes les plus indente le style par défaut des paragraphes-voir Figure 6:
Figure 6: Les listes par défaut sont en retrait sur style gauche.
Figure 7: Les balles sont positionnés à gauche du texte.
à ce stade, vous trouverez toujours une différence au niveau des pixels entre les navigateurs, mais l'effet est fondamentalement aussi cohérente que possible, voir Figure 8:
Figure 8: puces positionné conjointement avec les points environnants.
Les listes ordonnées
Figure 10: Les zéros de remplissage dans l'espace pour les éléments 1-9.
Figure 11: Les lignes de texte dans les deux listes ordonnées et non ordonnées.
Alors que faire?
Vous avez essentiellement trois choix:
Il n'y a pas d'approche « droit » ou « mauvais » et il est assez fréquent de laisser les choses simplement aux paramètres par défaut pour les listes de contenu général.
En utilisant la liste de style positions
Qu'en est-il des listes de définition?
En général, les listes de définition ne nécessitent pas une énorme quantité d'attention, à l'exception de définir un style dt (texte généralement gras) et contrôler l'indentation des définitions:
Ceci met en place un style clair et facile pour les listes de définition, comme on le voit dans la figure 13:
Figure 13: Une liste de définitions style simple.
Bien que les listes de définition peuvent être réorganisés avec des flotteurs et le positionnement, ils sont excentriques et généralement il est préférable de garder les choses simples. Ils sont assez utiles car ils sont, avec juste un peu d'aide pour faire les termes de définition se distinguent plus; et pour obtenir les définitions indent bien.
listes emboîtées
Dans l'article HTML des listes que vous avez appris sur les listes de nidification. Lorsque vous créez votre CSS, vous devez être prudent de maintenir des éléments de design clairs pour montrer la relation entre une liste imbriquée et la liste qui le contient. De loin la façon la plus courante de le faire est par les éléments-indenter il liste imbriquée est en fait le paramètre par défaut dans les navigateurs.
Si vous configurez votre propre empreinte de la liste, le réglage de base sera simplement multipliée. Par exemple, considérez ce CSS:
listes horizontales
Figure 14: Une simple liste.
Convertissons ce à une liste horizontale, comme le montre la figure 15:
Figure 15: Une simple liste horizontale.
Pour y parvenir, nous devons faire trois choses à notre liste:
Dans l'exemple la liste a l'ID « mainmenu » nous allons donc l'utiliser comme un sélecteur contextuel, pour vous assurer que nous changeons uniquement la liste nous avons l'intention de changer. Le CSS est:
Dans cet exemple simple, le réglage des éléments de la liste pour afficher: inline; est assez; être conscient que l'utilisation float: left; également obtenir un look similaire. Vous en apprendrez plus sur flotteurs plus tard dans le cours.
faux colonnes
Figure 16: Une liste des flux en deux colonnes, avec une icône RSS pour chaque balle.
Supposons que la liste se trouve dans un
Figure 17: La liste à l'intérieur de la frontière sans style.
Notez que l'affichage: -moz-inline-box; est ajouté pour obtenir l'exemple pour afficher correctement dans Firefox 2.
Figure 18: A mi-chemin, nous avons maintenant un espacement correct et des balles icône.
Dans la plupart des navigateurs, cela sera suffisant pour créer l'effet de la colonne, mais vous aurez besoin de définir explicitement IE flotter les éléments de liste à gauche. Utilisons un style conditionnel pour toutes les versions jusqu'à IE7 (puisque nous ne savons pas encore ce que les futures versions faire):
Nous avons maintenant l'effet désiré deux de la colonne, comme on le voit dans la figure 19:
Figure 19: La liste terminée.
Les navigateurs hérités
listes conclusion
Nous avons maintenant couvert un ensemble de base des choix de style et des méthodes pour les listes. Vous pouvez construire sur ces exemples et les combiner pour créer un grand nombre de modèles. Étant donné que les listes sont très souvent associés à des liens, nous allons passer à des liens.
Liens de style
liens de style peuvent être un peu d'une forme d'art. Il y a beaucoup d'exigences différentes en jeu et il peut être difficile de les accueillir tous, tout en créant un résultat esthétique. Cela dit, il est tout à fait possible aussi longtemps que vous gardez quelques règles simples à l'esprit:
- comprendre les différents états de liaison
- ne pas s'égarer trop loin des attentes des utilisateurs
- Utilisez des couleurs soigneusement
Si vous suivez ces règles que vous devez produire des liens clairs et faciles à utiliser.
Comprendre les états de liaison
Vous devez toujours spécifier CSS pour chacun de ces états. Chacun transmet des informations à l'utilisateur sur le fait qu'ils sont en interaction avec un lien. En cas de doute au sujet de mise au point. vol stationnaire et actif, vous pouvez vous concentrer simplement le style et vol stationnaire de la même manière que leurs fonctions sont suffisamment similaires pour que le même style de lien ne devrait pas causer activement la confusion. Vous pouvez alors ajouter une variation simple active. par exemple la définition du texte en italique. A une pincée vous pouvez définir le style trois de la même façon.
Comment régler l'évolution du navigateur attentes
Pour mieux comprendre certaines attentes communes des utilisateurs sur les liens, il est utile de connaître un peu l'histoire du web.
Figure 20: Une capture d'écran de la mosaïque.
Les attentes des utilisateurs
Il y a quelques règles générales pour les attentes des utilisateurs en ce qui concerne les liens:
Vous devez toujours répondre à ces règles de base, car elles aideront vos utilisateurs à identifier rapidement et utiliser des liens. Vous voulez créer des styles qui ne font pas les gens à arrêter et penser « quels bits sont des liens ».
Ces attentes se traduisent par des règles de codage simples:
- jeu de styles pour tous les états de liaison
- utiliser uniquement en soulignant les liens
Utilisez attentivement la couleur
Lorsque vous liens style, veillez à ne pas compter entièrement sur la couleur pour distinguer entre les états de liaison. Tout le monde peut voir la couleur même (par exemple, les personnes atteintes de daltonisme), vous devez donc utiliser la couleur et des styles différents comme soulignements, icônes ou couleurs inversées.
Vous devez également vérifier que vos choix de couleurs ont assez de contraste cela est vraiment facile en utilisant des outils tels que le contraste analyseur de couleurs (pour PC et Mac) ou la barre d'outils d'accessibilité du Web pour Opera (tous deux du groupe Paciello).
L'analyseur de couleur contrastée (voir Figure 20) vous permet d'utiliser un sélecteur de couleur pour sélectionner les couleurs de premier plan et arrière-plan sur l'écran, puis recevoir une simple évaluation de leur contraste:
Figure 21: Capture d'écran du contraste analyseur de couleurs en cours d'utilisation.
Passer aux affaires: le CSS
Maintenant que vous comprenez quelques règles de base pour les liens, nous allons entrer dans un code-ce section détaille tous les CSS, vous aurez besoin de liens de style avec succès.
Styling états de liaison dans le bon ordre
Tout d'abord, sachez que si vous ne placez pas vos liens styles dans l'ordre dans votre feuille de style, les paramètres remplaceront les uns les autres et les états de liaison ne fonctionnera pas. Vos styles de lien doit toujours être dans l'ordre suivant:
Un moyen mnémotechnique pour se souvenir commun est ce « Handle Ancien Seigneur Vador, Anakin ». Si vous n'êtes pas un fan de Star Wars, je crains que vous aurez juste de se rappeler la dure, ou copier et coller le bloc de code ci-dessous!
Aussi populaire est le mnémonique « Les craintes d'amour détestez », avec « craintes » debout pour « Focus ».
Si vous souhaitez définir une règle CSS pour tous les liens dans tous les états, vous pouvez définir le style un directement. Rappelez-vous de placer la règle générique d'abord, pour préserver l'ordre:
Ceci est utile si vous prévoyez de remplacer le par défaut avec underline une bordure inférieure, ce qui est une façon courante pour obtenir un meilleur contrôle visuel du style.
contrôle par défaut
Par défaut, la plupart des navigateurs définir tous les liens pour avoir un soulignement et de se concentrer liens de l'Etat d'avoir un aperçu, comme illustré à la figure 22:
Figure 22: De gauche à droite: les styles de mise au point par défaut pour Opera 9, Firefox 2 et IE7.
Si vous remplacez ces styles avec quelque chose d'autre, vous pouvez modifier ou désactiver ces valeurs par défaut.
soulignement
Vous pouvez désactiver le soulignement en définissant la propriété sans pareil.
Le plan de mise au point est contrôlé par la propriété outline. Grandes lignes est la même que la frontière, mais il ne prend pas de place ou faire la page pour refusion quand il apparaît (notez qu'il ne soit pas pris en charge dans IE7 et au-dessous non plus). La meilleure façon de contrôler les grandes lignes est la propriété raccourcie:
Cet exemple serait rendu quelque chose comme la figure 23:
Figure 23: Exemple de rendu d'un contour noir épais.
Si vous êtes dans le doute sur ce qu'il faut faire avec le contour, il suffit de laisser le contour de la valeur par défaut du navigateur.
Exemple: recréer les paramètres par défaut de Netscape
À titre d'exemple facile de styles de lien, Recréons les paramètres par défaut de Netscape de bleu, violet et rouge. Nous allons garder le soulignement, mais étendre l'état actif à utiliser italique. Nous allons augmenter la taille du texte pour le bien de l'exemple et définir la page d'utiliser un fond blanc:
Cela devrait produire quelque chose comme la figure 24:
Figure 24: recréer les paramètres par défaut de Netscape.
Faux souligne en utilisant border-bottom
De nombreux designers ont observé que le soulignement est un peu épais et coupe à travers descendeurs de type qui est minuscule, la ligne passe par le fond de g, j, p, q et y. Ceci est illustré dans la figure 25:
Figure 25: Les coupes soulignement par descendeurs de type minuscules.
Figure 26: En utilisant une bordure au lieu d'un soulignement donne plus agréables résultats.
Tout d'abord, désactiver le soulignement pour tous les états de liaison, puis définissez une bordure en bas pour correspondre à la couleur de lien pour chaque état:
Cela devrait produire quelque chose comme la figure 27:
Figure 27: Le faux-underline en action.
Si vous utilisez la méthode de frontière faux, prenez garde que vous avez la ligne de hauteur suffisante pour éviter le mettre en soulignement des affrontements avec la ligne suivante du texte.
Les styles qui ne reposent pas sur la couleur
Cela devrait produire quelque chose comme la figure 28:
Figure 28: Modification du style de bordure pour chaque état de liaison.
Accepter mise au point et planer comme des états de style équivalent, ce procédé signifie que les états de liaison se distinguent avec plus de couleur. Même si vous deviez voir ces liens en noir et blanc, vous pouvez identifier les différents états de liaison, comme le montre la Figure 29:
Figure 29: Les états de liaison sont désormais distinguer même en noir et blanc.
Les icônes sur les liens
Ces effets sont simples à réaliser avec des images d'arrière-plan, comme le montre la Figure 30:
Figure 30: Un exemple de liens avec des icônes distinctives.
Pour ajouter une icône de flèche pour des liens externes, vous pouvez ajouter la classe « externe » à la balise de lien:
Ensuite, dans votre feuille de style, définir une image d'arrière-plan pour cette classe d'ajouter un rembourrage remémoration pour contenir l'image:
La combinaison de classes et états ouvre un large éventail de possibilités créatives pour vos liens. Se souvenir de vérifier vos couleurs, votre seule limite de ce point est la créativité.
Rassembler tous-un menu de navigation simple
Pour illustrer une façon de faire des listes et des liens ensemble, les exemples d'un simple zip comprend le menu de navigation déroulant. comme on le voit sur la figure 31. menus des icônes déroulantes sont un système de navigation très commun.
Figure 31: Capture d'écran de l'exemple menu déroulant.
Questions d'exercice
- Comment choisissez-vous entre les styles de liste de base, par exemple des balles carrée ou romains sur une liste ordonnée?
- Qu'est-ce qu'un sprite d'image et pourquoi utiliseriez-vous un?
- Pourquoi le contraste des couleurs importantes et comment voulez-vous assurer que vos couleurs de lien utilisent des couleurs appropriées?
- Quel est l'ordre correct pour définir des styles sur les différents états de liaison?
Pour en savoir plus
Remarque: Ce matériel a été publié à l'origine dans le cadre du programme des normes Web Opera, disponible 32: listes de style et des liens. écrit par Ben Buchanan. Comme l'original, il est publié sous la licence Creative Commons Attribution, non commerciale - Partage à l'Identique 2.5 licence.