Lista HTML. Stosowanie stylów CSS
Na wielu stronach HTML w tekście można zobaczyć listy. Za ich pomocą twórz menu, instrukcje, algorytmy krok po kroku, systematyzuj informacje i wykonuj znacznie więcej. Lista HTML jest tworzona przy użyciu tekstowego języka znaczników. Aby to zrobić, użyj kilku tagów. Jest to jedna z najczęstszych form prezentacji informacji w skompresowanej formie i jednocześnie wyraźnie.
Listy są używane głównie w następujących przypadkach:
- prezentacja informacji w pojedynczej strukturze z wygodną percepcją;
- upraszczanie złożonych procesów sekwencyjnych;
- tworzenie struktur z tabelami treści, punktami i objaśnieniami.
Listy istnieją w trzech odmianach:
- ponumerowane;
- oznaczone;
- listy definicji.
Lista numerowana
Numeracja jest wygodna podczas wpisywania elementów w kolejności. Lista HTML jest otwierana i zamykana za pomocą znaczników <ol> i </ ol>.
Kod listy będzie następujący:
<ol>
<li> 1 element </ li>
Element <li> 2 </ item>
<li> 3 element </ li >>
</ ol>
Każda pozycja jest umieszczona wewnątrz znacznika <li>.
Lista wypunktowana
Pozycje nie są numerowane i ułożone w dowolnej kolejności. Lista kodów jest podobna do poprzedniej. Jedyną różnicą jest to, że znajduje się wewnątrz znacznika <ul>:
<ul>
<li> pierwszy </ li>
<li> drugi </ li>
<li> trzeci </ li>
- </ ul>
Domyślny znacznik jest oznaczony czarnym kółkiem, ale jego obraz jest modyfikowany za pomocą atrybutu type, na przykład:
<ul type = "square">
Podobnie zmień oznaczenie listy numerowanej, na przykład, przypisując atrybutowi wartość literału:
<ol type = "A">
Lista definicji
Często wymagane jest wybranie słów z głównego tekstu i udzielenie wyjaśnień. Aby to zrobić, utwórz listę elementów wraz z ich definicjami. Kod otwiera się i zamyka znacznikami <dl> i </ dl>. Wewnątrz są ułożone w elementy porządkowe zawarte w parze <dt> i </ dt>. Często są one dodatkowo wyróżniane tagami <strong> ... </ strong>. Po każdym elemencie są wyjaśnienia, otoczone przez sparowane <dd> ... </ dd>. Ogólnie kod wygląda następująco:
<h2> DefinitionList </ h2>
<dl>
<dt> www </ dt>
<dd> www reprezentuje światową sieć </ dd>
<dt> CSS </ dt>
<dd> CSS reprezentuje arkusze stylów </ dd>
</ dl>
Na stronie wynik wykonywania tego kodu będzie wyglądał następująco: 
Lista rozwijana
Czasami wygodnie jest tworzyć listy rozwijane. W stanie początkowym są one zamknięte i domyślnie widoczna jest tylko pierwsza pozycja. Schemat kodu jest podobny do poprzednich. Elementy listy są tworzone za pomocą znacznika opcji, który jest osadzony w kontenerze <select>:
<wybierz>
<opcja> el1
<option> el2
<opcja wybrana> el3
Domyślnie pierwszy element jest zawsze wyświetlany. Można go zastąpić przez zastosowanie wybranego atrybutu znacznika <option>, jak przedstawiono w kodzie na liście rozwijanej. Trzeci element staje się w nim widoczny, gdy lista jest zamknięta.
Na niektórych listach wymagane jest wybranie kilku pozycji jednocześnie. Do tego celu wykorzystywany jest atrybut wielokrotny znacznika <select>.
Jak upuścić listę w HTML i CSS?
Chociaż znaczniki są powszechnie stosowane, jest raczej ograniczony. Lista rozwijana HTML została ulepszona przez CSS. Jego typ może być dowolny.
<div class = "rolls">
Produkty <button>
<ul>
<a> <li> 1 element </ li> </ a>
<a> <li> 2 element </ li> </ a>
<a> <li> 3 element </ li> </ a>
</ ul>
Teraz musisz zastosować właściwości CSS do kodu. Są one często używane do spektakularnego projektowania, ale lepiej najpierw skupić się na zapewnieniu wydajności rozwijanej listy. Powinien pojawić się na ekranie po najechaniu myszą na tytuł.
Style określają warunki wyświetlania lub ukrywania listy:
.rolls a {
styl listy: brak;
wyświetlacz: brak}
.rolls: hover a {
display: block}
Tak więc, gdy mysz unosi się nad przyciskiem, lista widoczna na poniższym obrazie pojawi się na stronie. 
Wielopoziomowe listy rozwijane
Kiedy proste układy na stronie mogą nie wystarczyć, ale ilość informacji powinien być świetny. Tutaj na ratunek przychodzą wielopoziomowe listy rozwijane. Ich struktura jest czasami skomplikowana. Aby wyeliminować błędy, należy dokładnie monitorować znaczniki początkowe i końcowe. Poprzednia lista definicji jest również wielopoziomowa. Jest wygodny w użyciu do tworzenia słowników lub objaśnień terminów.
Rozwijana lista HTML jest używana, aby nie zaśmiecać strony i nie rozszerzać jej możliwości. Jako podstawowe narzędzie wystarczy użyć języka znaczników. W tym samym czasie, dla każdego poziomu zagnieżdżenia, kod pozostaje taki sam.
Funkcjonalnie lista HTML będzie działać, ale przy użyciu arkuszy stylów można zaprojektować ją tak, aby była piękna i wygodna. 
Wniosek
Istnieją listy różnych typów HTML. Są tworzone zgodnie z tym samym schematem, w tym z zagnieżdżonymi. Funkcje list są rozszerzone o style CSS. Za pomocą stylów możesz tworzyć wyjątkowe narzędzia. Jednocześnie ważne jest, aby listy były właściwie zaprojektowane semantycznie, aby ułatwić utrzymanie stron dla siebie.