So formatieren Sie Text in HTML-Listen

HTML-Listen sind mit CSS extrem anpassbar. Viele Menüs einer Website basieren auf sorgfältig formatierten HTML-Listen. Wenn Sie den Mut haben, den Quellcode von Facebook zu überfliegen, können Sie sogar sehen, dass sie ungeordnete HTML-Listen verwenden, um die Navigation zu gestalten. Der Text in einer Liste enthält zwei Elemente: das Basislisten-Tag ("

") und das Listenelement-Tag ("
• "). Sie können auch eine Klasse oder einen Stil verwenden, um eine oder mehrere HTML-Listen anzugeben. Die Formatierung des Texts kann dort auf jeder Ebene erfolgen.

  1

  Öffnen Sie Ihre Cascading Stylesheet-Datei - die die Dateierweiterung .css verwendet - in Ihrem bevorzugten Nur-Text-Editor. Geben Sie entweder "ul" (oder "ol", wenn Sie eine geordnete Liste formatieren) oder die ID Ihres List-Tags an. Zum Beispiel, wenn Sie formatieren "

  ", würden Sie mit

  ul {}

  2

  Fügen Sie die Textformatierung zusammen mit jeder anderen Formatierung für Ihre ungeordnete Liste hinzu. Wenn Sie beispielsweise den gesamten Text in einer ungeordneten Liste mit 12 Punkten und blau erstellen möchten, könnte dies ungefähr so ​​aussehen:

  ul {font-size: 12pt; Farbe: # 8CCCC8; }

  3.

  Ändern Sie den Typ des Listenstils - das Bild oder Symbol am Anfang jedes Listenelements. W3Schools.com gibt mehr als ein Dutzend verschiedene Typen für den Listenstil an. Wenn Sie nichts am Anfang der Liste haben möchten, können Sie "list-style: none;" verwenden, zB:

  ul {font-size: 12pt; Farbe: # 8CCCC8; Listenstil: keine; }

  4

  Speichern Sie Ihr Stylesheet und Ihr Dokument und testen Sie dann die Listenelemente in Ihrem Browser.

  Tipps

  • Wenn Sie die Liste als horizontales Navigationselement verwenden möchten, können Sie verwenden
  • "Anzeige: Inline" und "Float: Links;".

  Warnung

  • Verwenden Sie zum Bearbeiten von HTML- und CSS-Dateien nur einen Nur-Text-Editor (z. B. Notepad, Notepad ++ oder TextWrangler).