Jak formatować tekst na listach HTML

Listy HTML można bardzo łatwo dostosowywać za pomocą CSS. Wiele stron w witrynie jest zasilanych starannie sformatowanymi listami HTML. Jeśli masz odwagę skasować kod źródłowy Facebooka, możesz nawet zobaczyć, że używają nieuporządkowanych list HTML do stylu nawigacji. Istnieją dwa elementy do stylizowania tekstu na liście: znacznik listy podstawowej ("

") i tag pozycji listy ("
• Możesz także użyć klasy lub stylu, aby określić pojedynczy lub zestaw list HTML, a formatowanie tekstu może być obsługiwane na dowolnym poziomie.

  1.

  Otwórz kaskadowy plik arkusza stylów - który korzysta z rozszerzenia pliku .css - w preferowanym edytorze tekstu. Określ "ul" (lub "ol", jeśli formatujesz uporządkowaną listę) lub id tagu listy. Na przykład, jeśli formatujesz "

  , "zacznij od:

  ul {}

  2.

  Dodaj formatowanie tekstu wraz z dowolnym formatowaniem swojej nieuporządkowanej listy. Na przykład, jeśli chcesz, aby cały tekst znajdował się na nieuporządkowanej liście 12 i na niebiesko, może wyglądać mniej więcej tak:

  ul {rozmiar-czcionki: 12pt; kolor: # 8CCCC8; }

  3.

  Zmień typ stylu listy - obraz lub symbol na początku każdego elementu listy. W3Schools.com określa więcej niż tuzin różnych typów dla stylu listy. Jeśli nie chcesz niczego na początku listy, możesz użyć "list-style: none;", np .:

  ul {rozmiar-czcionki: 12pt; kolor: # 8CCCC8; styl listy: brak; }

  4.

  Zapisz arkusz stylów i dokument, a następnie przetestuj elementy listy w przeglądarce.

  Wskazówki

  • Jeśli chcesz użyć tej listy jako poziomego elementu nawigacji, możesz użyć
  • "display: inline" i "float: left;".

  Ostrzeżenie

  • Do edytowania plików HTML i CSS można używać tylko zwykłego edytora tekstu, takiego jak Notatnik, Notepad ++ lub TextWrangler.