Styling-Listen und Links - W3C Wiki
Einführung
In diesem Curriculum Artikel Web-Standards werden wir auf die Kernkompetenzen sehen Sie robuste Liste und Link-Styles erstellen müssen. Wir besprechen auch einige Möglichkeiten, Schlüssel Tücke dieser Elemente zu vermeiden und ein endgültiges Ergebnis zu produzieren, die in verschiedenen Browsern funktionieren und zugänglich für Benutzer mit Behinderungen.
Es gibt eine Reihe von Beispielen in diesem Artikel verwendet wird, so können Sie die Listen herunterladen und verbinden Beispieldateien mit ihnen zu folgen.
Styling-Listen
Erstens, ich werde Sie durch die Grundlagen nehme von Listen mit CSS Styling, bevor dann bei einigen etwas komplizierteren Techniken suchen gehen.
Grund Kugeln und Zahlen
Die grundlegende Sache zu prüfen, wenn eine Liste Stil zu schaffen ist, was Form von Aufzählungszeichen oder Nummerierung Sie verwenden möchten. Sie könnten auch vollständig die Kugeln und Zahlen entfernen wählen. Wie Sie in dem HTML-Listen Artikel gelernt. es gibt viele Optionen zur Verfügung, stellen Sie die list-style-type Eigenschaft.
Welche wird 1 wie in Abbildung erzeugen:
Abbildung 1: Ungeordnete Liste mit quadratischen Kugeln.
Einige gemeinsamen Listentypen sind in Abbildung 2 gezeigt:
Abbildung 2: Gemeinsame Liste Stile.
Bullets Bilder mit
Der Standardsatz von Kugeln genug ist, um für die grundlegenden Inhalte, aber es ist ein gemeinsames Design Bitte, sie mit einem benutzerdefinierten Bild zu ersetzen.
Die CSS-Spezifikation macht das list-style-image-Unterkunft zählen benutzerdefinierte Liste Bild hinzuzufügen. Allerdings hat die Eigenschaft Positionierungsoptionen für das Hintergrundbild beschränkt und unter Umständen gar nicht in IE arbeiten. So hat es eine weit gängige Praxis einfach ein Hintergrundbild auf den Listenelementen gesetzt.
Stellen wir uns vor, Sie haben eine Liste von RSS-Feeds und Sie die Kugel auf die Standardorangefarbene RSS-Symbol zu ändern. Wir geben der Liste die Klasse „rss“ es zu unterscheiden von anderen Listen:
Dies wird statt Kugeln eine Liste mit dem RSS-Bild erzeugen, wie in Abbildung 3 zu sehen ist:
Abbildung 3: Die Liste mit Bildaufzählungszeichen.
Beachten Sie, dass das Hintergrundbild positioniert ist, Pixel für eine präzise Platzierung verwendet wird. Je nach Design Sie erstellen, können Sie auch in der Lage sein% zu verwenden. em s oder Keywords. Nur vorsichtig sein, wenn Sie Ihr Design verfügt über Inhalte, die ein Listenelement verursachen könnten über mehr wickeln Linien-wenn Sie den Hintergrund vertikale Mitte oder 50% kann es ziemlich seltsam aussehen, wie in Abbildung 4 dargestellt:
Abbildung 4: Eine Demonstration von vertikal zentrierten Kugel Bildern auf einem Listenelement mit mehreren Leitungen.
Durch die Bildeinstellung an der Spitze der Liste Artikel zu sitzen, halten Sie das Standard-Kugel Verhalten (wo die Kugel in der ersten Zeile sitzt) -siehe Abbildung 5:
Abbildung 5: Eine Demonstration von oben justierten Aufzählungs Bildern auf einem Listenelement mit mehreren Leitungen.
ungeordnete Listen
Eine Sache, dass Sie wahrscheinlich recht schnell bemerken ist, dass der Standardstil für Listen Rückt sie mehr als der Standardstil für die Absätze-siehe Abbildung 6:
Abbildung 6: Standard gestylt Listen sind eingekerbte auf der linken Seite.
Abbildung 7: Bullets sind links von dem Text positioniert ist.
An dieser Stelle werden Sie noch eine Pixelebene Unterschied zwischen den Browsern finden, aber der Effekt ist im Grunde so konsistent wie möglich-siehe Abbildung 8:
Abbildung 8: Bullets positioniert zusammen mit den umgebenden Abschnitten.
Sortierte Listen
Abbildung 10: Die führenden Nullen in den Raum füllen für Elemente 1-9.
Abbildung 11: Die Textzeilen in beiden oben geordnete und ungeordnete Listen.
Also, was zu tun?
Sie haben grundsätzlich drei Möglichkeiten:
Es gibt kein „richtig“ oder „falsch“ -Ansatz, und es ist durchaus üblich, Dinge für Listen im allgemeinen Inhalt auf die Standardeinstellung einfach zu verlassen.
Mit list-style-position
Was ist Definitionslisten?
In der Regel nicht über eine riesige Menge an Aufmerksamkeit erfordern Definitionslisten, mit Ausnahme eines dt Stil zu setzen (allgemein fettgedruckter Text) und steuern die Vertiefung der Definitionen:
Dies stellt eine klare und einfache Art für Definitionslisten nach oben, wie in Abbildung gesehen 13:
Abbildung 13: Eine einfach gestaltete Definitionsliste.
Obwohl Definitionslisten mit Schwimmern und Positionierung neu angeordnet werden können, sind sie schrullig und in der Regel ist es besser, die Dinge einfach zu halten. Sie sind nützlich genug, wie sie sind, nur mit einer wenig Hilfe der Definition Begriffe mehr heraus stehen zu lassen; und erhalten die Definitionen schön einrücken.
verschachtelte Listen
Im HTML-Listen Artikel haben Sie gelernt, über Verschachtelung Listen. Wenn Sie Ihre CSS erstellen, sollten Sie vorsichtig sein, klare Designelemente zu erhalten, die die Beziehung zwischen einer verschachtelten Liste anzuzeigen und der Liste, die es enthält. Bei weitem des gängigste Weg, dies zu tun ist durch die verschachtelte Liste Artikel-it Einrücken in der Tat ist die Standardeinstellung für den Browser einstellen.
Wenn Sie Ihre eigene Liste Einzug einrichten, Ihre Grundeinstellung wird einfach zu multiplizieren. Betrachten wir zum Beispiel diese CSS:
Horizontal-Listen
Figur 14: eine einfache Liste.
Lassen Sie uns wandeln diese in eine horizontale Liste, wie in Abbildung 15:
Abbildung 15: Eine einfache horizontale Liste.
Um dies zu erreichen, müssen wir drei Dinge in unsere Liste tun:
Im Beispiel hat die Liste die ID „mainmenu“ so werden wir als kontextueller Selektor verwenden, dass, um sicherzustellen, dass wir nur die Liste wir zu ändern beabsichtigen, ändern. Die CSS ist:
In diesem einfachen Beispiel, um die Listenelemente Einstellung Anzeige: inline; ist genug; beachten Sie, dass mit float: left; wird auch ein ähnliches Aussehen erzielen. Sie werden mehr über Schwimmer lernen später im Kurs.
Faux Spalten
Abbildung 16: Eine Liste von RSS-Feeds in zwei Spalten, mit einem RSS-Symbol für jede Kugel.
Nehmen wir an, die Liste innerhalb a
Abbildung 17: Die unstyled Liste innerhalb der Grenze.
Beachten Sie, dass display: -moz-inline-box; hinzugefügt, um das Beispiel korrekt angezeigt werden in Firefox 2 zu erhalten.
Abbildung 18: Auf halbem Weg-wir jetzt korrekten Abstand und Symbol Kugeln haben.
In den meisten Browsern wird dies ausreichen, um die Spalte-Effekt zu erzeugen, aber Sie müssen IE explizit die Listenelemente auf der linken Seite zu schweben. Lassen Sie sich für alle Versionen bis zu IE7 einen bedingten Stil verwenden (da wir noch nicht wissen, welche zukünftigen Versionen tun wird):
Wir haben nun den gewünschten zweispaltigen Effekt, wie in zu sehen 19:
Abbildung 19: Die fertige Liste.
Legacy-Browser
Listen Abschluss
Wir haben jetzt einen Kernsatz von Styling-Möglichkeiten und Methoden für Listen abgedeckt. Sie können auf diesen Beispielen aufbauen und kombinieren sie eine große Anzahl von Design zu erstellen. Da Listen sehr häufig mit Verbindungen kombiniert werden, lassen Sie sich auf Links bewegen.
Styling Verbindungen
Styling Links kann ein bisschen eine Kunstform sein. Es gibt viele verschiedene Anforderungen an Spiel und es kann schwierig sein, sie alle zu beherbergen, während immer noch ein ästhetisch ansprechendes Ergebnis zu schaffen. Das heißt, es durchaus möglich ist, so lange, wie Sie einige einfache Regeln zu beachten:
- verstehen die unterschiedlichen Verbindungszustände
- streunen nicht zu weit von Benutzererwartungen
- Verwendung Farben sorgfältig
Wenn Sie diese Regeln befolgen sollten Sie Links erzeugen, die klar und einfach zu bedienen sind.
Das Verständnis Verbindungszustände
Sie sollten immer CSS angeben, für jeden dieser Zustände. Jeder übermittelt Informationen an den Benutzer über die Tatsache, dass sie mit einem Link interagieren. Wenn Zweifel über Fokus. schweben und aktiv können Sie einfach Stil Fokus und schweben in der gleichen Weise wie ihre Funktionen ähnlich genug sind, dass der gleiche Link Stil nicht aktiv zu Verwirrung führen sollte. Sie können dann einige einfache Variante für aktive hinzufügen. zum Beispiel der Einstellung des Textes kursiv. Zur Not kann man alle drei die gleiche Art und Weise Stil.
Wie Browser Evolution gesetzt Erwartungen
Um noch besser einige gemeinsame Erwartungen der Nutzer über Links zu verstehen, hilft es, eine kleine Web-Geschichte zu kennen.
Abbildung 20: Ein Bildschirm Mosaic.
Benutzererwartungen
Es gibt einige allgemeine Regeln für die Erwartungen der Benutzer in Bezug auf Links:
Sie sollten immer auf diese grundlegenden Regeln gerecht zu werden, da sie Ihre Benutzer schnell zu identifizieren und zu verwenden Links helfen. Sie wollen Stile schaffen, die Menschen nicht stoppen und denken „welche Bits sind Links“.
Diese Erwartungen zu einigen einfachen Codierungsregeln übersetzen:
- Set Stile für alle Verbindungszustände
- nur Verwendung für Links unterstreichen
Verwenden Sie Farbe sorgfältig
Wenn Sie Links Styling, seien Sie vorsichtig, nicht ganz auf die Farbe verlassen zwischen Verbindungszustände zu unterscheiden. Nicht jeder kann sehen, die gleiche Farbe (zB Menschen mit Farbenblindheit), so sollten Sie Farbe und Stile wie verschiedene Unterstreichungen, Symbole oder umgekehrt Farben.
Sie sollten auch überprüfen, ob Ihre Farbauswahl haben genug kontrast dies ist wirklich einfach Werkzeuge wie der Farbkontrast-Analyzer (für PC und Mac) oder die Web Accessibility Toolbar für Opera (beide von der Paciello Group).
Der Farbkontrast-Analyzer (siehe Abbildung 20) können Sie eine Farbauswahl verwenden, um die Vorder- und Hintergrundfarben auf dem Bildschirm auszuwählen, und dann eine einfache Bewertung ihres Kontrast erhalten:
Abbildung 21: Screenshot des Farbkontrast-Analyzer im Einsatz.
Immer zur Sache: die CSS
Nun, da Sie einige Grundregeln für Links zu verstehen, lassen Sie uns in einige Code-In diesem Abschnitt werden alle CSS Sie benötigen, um Stil Links erfolgreich.
Styling Verbindungszustände in der richtigen Reihenfolge
Zunächst einmal, beachten Sie, dass, wenn Sie nicht Ihre Links Stile in der richtigen Reihenfolge in Ihrem Stylesheet platzieren, werden die Einstellungen sie außer Kraft setzen und die Verbindungszustände werden nicht funktionieren. Ihr Link Stile muss immer in der folgenden Reihenfolge:
Eine gemeinsame mnemonic dies für die Erinnerung ist „Lord Vader ehemaliger Griff, Anakin“. Wenn Sie keinen Star Wars-Fan sind, ich fürchte, Sie werden einfach es auf die harte Art und Weise zu erinnern, oder kopieren und den Codeblock unten ein!
Ebenfalls beliebt ist die mnemonic "LoVe Fears hate", mit "Fears" steht für "Focus".
Wenn Sie eine CSS-Regel für alle Links in allen Staaten festlegen möchten, können Sie eine direkt stylen. Denken Sie daran, zuerst die allgemeine Regel zu setzen, um den Auftrag zu erhalten:
Dies ist nützlich, wenn Sie planen, den Standard unterstreicht mit einer unteren Grenze zu ersetzen, die ein gemeinsamer Weg ist, ein besserer visuelle Kontrolle über den Stil zu gewinnen.
Controlling Standardwerte
Standardmäßig setzen die meisten Browser alle Links einen Unterstrich zu haben und Zustand Links zu konzentrieren einen Überblick zu haben, wie in Abbildung 22 dargestellt:
Abbildung 22: Von links nach rechts: der Standardfokus Stile für Opera 9, Firefox 2 und Internet Explorer 7.
Wenn Sie diese Stile mit etwas anderes ersetzen möchten, können Sie diese Standardeinstellungen ändern oder deaktivieren.
Unterstreichung
Sie können, indem Sie die Eigenschaft auf keine der unterstrichenen deaktivieren.
Der Fokus Umriss wird durch die Kontur-Eigenschaft gesteuert. Outline ist sehr ähnlich wie Grenze, aber es braucht nicht Platz oder bewirken, dass die Seite neu zu fließen, wenn es erscheint (beachten Sie, dass es nicht in IE7 und unten entweder unterstützt wird). Der einfachste Weg, Kontur zu steuern, ist mit der Kurzschrift-Eigenschaft:
Dieses Beispiel würde 23 wie in Abbildung gemacht werden:
Abbildung 23: Beispiel-Rendering einer dicken schwarzen Kontur.
Wenn Sie im Zweifel darüber, was mit dem Umriss zu tun, lassen Sie einfach den Umriss auf den Standard-Browser.
Beispiel: Neuerstellung der Netscape Standardwerte
Als einfaches Beispiel der Verbindung von Design, lassen Sie sich den Netscape Ausfall von blau, violett und rot neu erstellen. Wir werden die unterstrichenen halten, sondern erweitern den aktiven Zustand kursiv zu verwenden. Wir werden die Textgröße im Interesse des Beispiels erhöhen und die Seite setzen einen weißen Hintergrund zu verwenden:
Dies sollte 24 wie in Abbildung erzeugen:
Abbildung 24: die Netscape-Standardwerte neu zu erstellen.
Faux unterstreicht Verwendung border-bottom
Viele Designer haben beobachtet, daß Unterstreichungen ein wenig dick und schneidet durch Unterlängen von Kleintyp, das heißt, geht die Leitung durch den Boden des g, j, p, q und y. Dies ist in Abbildung 25 dargestellt:
Abbildung 25: Die unterstrichenen Schnitte durch Klein Typ Unterlängen.
Abbildung 26: eine Grenze statt einer Unterstreichungs Verwendung gibt schönere Ergebnisse.
Erstens, um die unterstrichenen für alle Verbindungszustände zu deaktivieren, setzte dann eine Bottom-Grenze, welche die Linkfarbe für jeden Zustand entsprechen:
Dies sollte 27 wie in Abbildung erzeugen:
Abbildung 27: Die unterstrichenen faux-in Aktion.
Wenn Sie die faux Grenze Methode tun, achten Sie darauf, dass Sie genügend line-height haben setzen Sie die Unterstreichungs clashing mit der nächsten Zeile des Textes zu vermeiden.
Stile, die verlassen sich nicht auf Farbe
Dies sollte 28 wie in Abbildung erzeugen:
Abbildung 28: Ändern der Rahmenart für jeden Link-Zustand.
Annehmen Fokus und schweben als gleichwertig gestylt Staaten, bedeutet diese Methode die Verbindungszustände unterschieden werden mit mehr als Farbe. Auch wenn Sie diese Links in schwarz und weiß sehen sind, könnten Sie die verschiedenen Verbindungszustände identifizieren, wie in 29 gezeigt:
Abbildung 29: Die Verbindungszustände sind jetzt unterscheidbar auch in Schwarz und Weiß.
Icons auf Links
Diese Effekte sind einfach mit Hintergrundbildern zu erreichen, wie in Abbildung 30:
Abbildung 30: Ein Beispiel für Verbindungen mit Unterscheidungs Symbolen.
ein Pfeilsymbol, um externe Links fügen Sie die Klasse „extern“ auf den Link-Tag hinzufügen könnten:
Dann in Ihrem Stylesheet, stellen Sie ein Hintergrundbild für dieses Klasse-Erinnern Polsterung hinzuzufügen, um das Bild aufzunehmen:
Klassen und Staaten der Kombination eröffnet ein breites Spektrum an kreativen Möglichkeiten für Ihre Links auf. Erinnern Sie Ihre Farben zu überprüfen, ist Ihre einzige Einschränkung von diesem Punkt ist die Kreativität.
Bringen sie alle zusammen-ein einfaches Navigationsmenü
Zur Veranschaulichung einer Möglichkeit, Listen und Links zusammen zu bringen, die Beispiele zip enthält ein einfaches Flyout Navigationsmenü. wie in Abbildung 31. Flyout Menüs sind ein sehr häufiges Navigationssystem gesehen.
Abbildung 31: Screenshot des Beispiels Aufklappmenü.
Übungsfragen
- Wie wählen Sie zwischen Grundliste Arten, zum Beispiel quadratischen Aufzählungszeichen oder römische Ziffern auf einer geordneten Liste?
- Was ist ein Bild Sprite und warum Sie eine solche verwenden würde?
- Warum ist Farbkontrast wichtig und wie stellen Sie sicher, dass Ihr Link Farben geeignet Farben verwenden?
- Was ist die richtige Reihenfolge Stile auf die unterschiedlichen Verbindungszustände zur Einstellung?
Weiterführende Literatur
Hinweis: Dieses Material ursprünglich als Teil des Opera Web Standards Curriculum veröffentlicht wurde, als 32: Styling-Listen und Links. geschrieben von Ben Buchanan. Wie das Original wird unter der Creative Commons Attribution, Non Commercial veröffentlicht - ShareAlike 2.5 Lizenz.