Дизайн на списък: група със стил в списъка в CSS

Списъците са важен елемент на уеб страница. Те помагат да се структурира информацията и да се представи в удобна за потребителя форма. В допълнение, под формата на списъци, менюта и навигационни панели често са съставени. Управлението на позицията и външния вид на маркиращия елемент позволява група свойства CSS списък стил.

Видове списъци

Има подредени и неподредени списъци. Първият маркер може да бъде всеки знак, който не се променя от точка на точка, второ, всеки елемент от списъка има свой собствен маркер, който определя местоположението му сред останалите.

В подредени списъци за маркировка обикновено се използват числа или букви от различни системи и азбуки.

В зависимост от степента на гнездене, едно ниво и многослойни списъци. Всяко ниво често има свой собствен маркиращ елемент.

Използването на списъци при създаване на менюта или навигационни ленти се насърчава от последната версия на HTML стандарта, тъй като този елемент има важно семантично значение.

Показване в CSS

Всеки елемент е блок контейнер със специален тип дисплей: списък-елемент. По подразбиране тази стойност е зададена за li елементи, намиращи се в контейнерите за ol и ol, и предоставя маркер пред блока.

Ако е необходимо, този тип дисплей може да бъде настроен за всеки контейнер с HTML. Новият елемент за етикетиране е оформен като използва CSS списък стил собственост група.

p {display: list-item-list-style-type: decimal-}

И трите от следните свойства се наслеждат от деца, които имат дисплей: списък-елемент и, ако е необходимо, изискват изрично забрана.

Позицията на маркера на списъка

Първата собственост на групата е позицията в списъка. Той определя дали маркерът остава в текстовия блок или се премества извън него.

Имотът има една от следните две стойности:

• вътре,
• отвън.

Разликата между тях е особено забележима при многоредови позиции.

.list1 {list-style-position: outside -} list2 {list-style-position: inside-}

Стандартната настройка е външна и маркерът на списъка се премества извън кутията.

Появата на маркера

Вторият тип собственост - тип стил на списък - контролира типа маркер и може да отнеме повече от петнадесет стойности.

По подразбиране цифровия списък използва арабски цифри, а за списък с отметки се използва точката. Но характеристиките в стил на списъка в CSS ви позволяват да промените тези настройки и дори да премахнете напълно маркерите.

Неопределени маркери на списъка:

• диск - обикновена точка, изпълнена с цвета на текста;
• кръг - празен кръг с удар в цвета на текста;
• квадрат - сенчестия квадрат.

За подредени списъци с опции има много повече:

Някои стойности дублират помежду си, например по-нисък алфа и по-нисък латински, а други не се поддържат от няколко браузъра и шрифтове.

Ако е необходимо, маркери с подреден тип могат да бъдат приложени към неорганизирани списъци ul и обратно.

Отделно, изберете никоя стойност, която скрива маркерите от списъка от всякакъв тип. Това е особено полезно, когато създавате навигационни панели, когато искате да запазите семантиката на списъка, но маркиращите елементи не се вписват в дизайна. Също така, собствеността често се използва за дефиниран от потребителя стил.

.списък {style-style: none;}

Персонализиран маркер

Вместо определени CSS типове маркиращи елементи, можете да използвате всяко изображение. За да направите това, трябва да препратите връзка към него в собственост на списък със стил.

Можете дори да използвате изображения във формат gif - анимацията ще бъде запазена. Важно е да запомните това CSS списък стил показва изображение в пълен размер.

.списък {style-style-image: url (image.jpg) -line-height: 25px;}

Например:

В допълнение към файловете с изображения можете да използвате функциите CSS на радиални или линейни градиенти:

.списък {list-style-image: радиален градиент (светлосиньо, аква, синьо) -}

Формата на маркера остава квадратно.

Комбиниран синтаксис

Всички свойства, които определят показването на маркера на списъка, могат да се комбинират в един - стил на CSS списък.

стил на списък: списък-стил-списък-стил-позиция списък-стил-изображение

Специфичните свойства са изброени в интервал, те не могат да нарушат реда си, но всеки от тях може да бъде пропуснат:

.List1 {списък стил: няма;} List2 {списък стил: горния римски вътре -} List3 {списък стил: вътре URL (/images/img1.jpg) -} ..

За да възстановите стиловете до оригиналните параметри, има начална стойност, която може да бъде предавана на някой от изброените четири свойства.

С помощта на група от Стил на списъци със собствености на CSS в комбинация с ефектите за насочване можете да създадете красиви уникални списъци, които привличат вниманието на потребителя.