Списък с HTML. Прилагане на CSS стилове
На много HTML страници в текста можете да видите списъци. С тяхна помощ се създават менюта, инструкции, алгоритми стъпка по стъпка, систематизират информацията и се изпълняват много повече. Списъкът HTML се създава с помощта на език за текстово маркиране. За да направите това, използвайте няколко маркера. Това е една от най-често срещаните форми на представяне на информация в компресирана форма и в същото време ясно.
Списъците се използват главно в следните случаи:
- представяне на информация в една структура с удобно възприятие;
- опростяване на сложни последователни процеси;
- създаване на структури със съдържание, точки и обяснения.
Списъците съществуват в три разновидности:
- номерирани;
- белязан;
- списъци с определения.
Номериран списък
Номерирането е удобно, когато се изброяват елементи по ред. Списъкът HTML се отваря и затваря с етикетите <ol> и </ ol>.
Кодът на списъка ще бъде:
<Ol>
<li> 1 елемент </ li>
<li> 2 </ item> елемент
<li> 3 елемента </ li >›
</ ol>
Всяка позиция се поставя вътре в маркера <li>.
Списък с белези
Позициите не са номерирани и подредени в произволна последователност. Списъкът с кодове е подобен на предишния. Единствената разлика е, че се намира вътре в маркера <ul>:
<Ул>
<li> първо </ li>
<li> второ </ li>
<li> трети </ li>
- </ ul>
Маркерът по подразбиране е обозначен с черен кръг, но изображението му е модифицирано с атрибута на типа, например:
<ul type = "square">
По подобен начин променете обозначението на номериран списък, например, като присвоите атрибута на литерална стойност:
<ol type = "A">
Списък с определения
Често се изисква да се избират думи от основния текст и да им се дадат обяснения. За да направите това, направете списък с елементи с техните определения. Кодът се отваря и затваря с таговете <dl> и </ dl>. Вътре са подредени по ред елементи, затворени в двойка <dt> и </ dt>. Често те се отличават допълнително с маркери <strong> ... </ strong>. След като всеки елемент е обяснение, рамкирани от сдвоени <dd> ... </ dd>. Като цяло кодът изглежда така:
<h2> Определение Списък </ h2>
<Dl>
<dt> www </ dt>
<dd> www представлява световната мрежа </ dd>
<dt> CSS </ dt>
<dd> CSS представлява стилови таблици </ dd>
</ dl>
На страницата резултатът от изпълнението на този код ще изглежда така: 
Падащ списък
Понякога списъците са удобно направени от падащото меню. В първоначалното състояние те са затворени и по подразбиране се вижда само първата позиция. Кодовата схема е подобна на предишната. Елементите от списъка се създават с етикет за опция, който е вграден в контейнер <select>:
<Изберете>
<опция> el1
<опция> el2
<опция избрана> el3
По подразбиране винаги се показва първият елемент. Тя може да бъде заменена чрез прилагане на избрания атрибут на маркера <option>, както е представен в кода в падащия списък. Третият елемент се вижда в него, когато списъкът е затворен.
В някои списъци е необходимо да се изберат няколко позиции едновременно. За това се използва множественият атрибут на маркера <select>.
Как да направите списък в HTML и CSS падащото меню
Въпреки че маркировката е широко използвана, тя е доста ограничена. HTML падащият списък се подобрява от CSS. Неговият тип може да бъде всеки.
<div class = "rolls">
<бутон> продукти
<Ул>
<a> <li> 1 елемент </ li> </ a>
<a> <li> 2 елемент </ li> </ a>
<a> <li> 3 елемент </ li> </ a>
</ ul>
Сега трябва да приложите CSS свойствата към кода. Те често се използват за ефектен дизайн, но е по-добре да се съсредоточите първо върху ефективността на падащия списък. Тя трябва да се появи на екрана, когато задържите мишката върху заглавието.
Стиловете определят условията за показване или скриване на списъка:
.rolls a {
стил в списъка: няма;
дисплей: няма}
.rolls: задръжте {
дисплей: блок}
По този начин, когато мишката мига над бутона, списъкът, показан на изображението по-долу, се появява на страницата. 
Падащи списъци на няколко нива
Когато оформлението на страницата прости списъци може да не е достатъчно, но количество информация трябва да бъде страхотно. Това е мястото, където спасяват списъци с много нива. Структурата им понякога е сложна. За да елиминирате грешки, трябва внимателно да наблюдавате началните и крайните тагове. Предишният списък от определения също е многостепенна. Удобно е да се използват за създаване на речници или обяснения на термини.
Използва се падащият списък на HTML, за да не се затрупва страницата и да се разширяват възможностите му. Като основен инструмент е достатъчно да се използва език за маркиране. В същото време, за всяко ниво на вмъкване, кодът остава същият.
Функционално HTML списъкът ще работи, но с използването на стилови листове можете да го проектирате така, че да е красиво и удобно. 
заключение
Има списъци с различни типове HTML. Те се създават по същата схема, включително и вложените. Характеристиките на списъците са подобрени от CSS стиловете. С помощта на стилове можете да създадете уникални инструменти. В същото време е важно списъците да бъдат правилно семантично проектирани, за да се улесни поддържането на обектите за себе си.