Så här formaterar du text i HTML-listor

HTML-listor är extremt anpassningsbara med CSS. Många en webbplats meny drivs av noggrant formaterade HTML-listor. Om du har nerver att skumma Facebooks källkod kan du till och med se att de använder oordnade HTML-listor för att ställa in navigeringen. Det finns två element att stylera text i en lista: baslistan ("

") och listobjekttaggen ("
• "). Du kan också använda en klass eller en stil för att ange en enda eller en uppsättning HTML-listor. Formatering av texten kan hanteras på vilken nivå som helst.

  1.

  Öppna din kaskad stilarkfil - som använder .css filtillägget - i din föredragna ren textredigerare. Ange antingen "ul" (eller "ol" om du formaterar en ordnad lista) eller ditt listmärkes id. Om du till exempel formaterar "

  , "du skulle börja med:

  ul {}

  2.

  Lägg till textformatering tillsammans med någon annan formatering för din oordnade lista. Om du till exempel vill göra hela texten i en orörd lista 12pt och blå kan det se ut så här:

  ul {font-size: 12pt; färg: # 8CCCC8; }

  3.

  Ändra liststypstypen - bilden eller symbolen i början av varje listobjekt. W3Schools.com anger mer än ett dussin olika typer för liststilen. Om du inte vill ha något i början av listan kan du använda "list-style: none;", t.ex.:

  ul {font-size: 12pt; färg: # 8CCCC8; listestil: none; }

  4.

  Spara ditt stilark och dokument, och testa sedan listobjekten i din webbläsare.

  tips

  • Om du vill använda listan som ett horisontellt navigationselement kan du använda
  • "display: inline" och "float: left;".

  Varning

  • Använd bara en vanlig textredigerare, t.ex. Anteckningar, Notepad ++ eller TextWrangler, för att redigera HTML- och CSS-filer.