Задача

Скриване на показването на маркери в списъка.

Решение

За тази цел стиловото свойство list-style-type се използва със стойност none. Трябва да се добави към селектора UL или LI, както е показано в пример 1.

Пример 1: Списък без водещи точки

HTML5 CSS 2.1 IE Cr Op Sa Fx

• север
• юг
• запад
• Изток

Резултатът от този пример е показан на фиг. 1.

ориз. 1. Списък без точки

Въпреки че маркерите не се показват в списъка, текстът все още е изместен надясно. За да контролира позицията на елементите от списъка, UL селекторът в този пример има добавени свойства margin-left и padding-left. Необходими са две свойства вместо едно, за да показват един и същ резултат в различни браузъри.

За списъци, чието създаване с помощта на HTML е описано тук, са предоставени следните CSS правила.

списък-стил-тип

Указва номериране с водещи символи или списък вместо атрибута type в HTML кода. Стойностите на свойствата за списъци с водещи символи могат да бъдат:

• диск- кръг, зададен по подразбиране.
• кръг- кръг.
• квадрат- квадрат.

За номерирани списъци на свойството обикновено се присвояват следните стойности:

• десетичен знак- Арабски цифри, стойност по подразбиране.
• долно-римски- малки римски цифри.
• горно-римски- главни римски цифри.
• по-ниска алфа- малки латински букви.
• горна алфа- главни латински букви.

Също така, за всеки тип списък, свойството list-style-type може да бъде зададено на none, което ще премахне маркера напълно.

Други стойности са налични за номерирани списъци, като напр cjk-идеографскизадава идеографска номерация, арменски- традиционен арменски и десетична-начална-нулаще зададе номерирането с римски цифри, но с водеща нула: 01, 02, 03... 09, но на практика тези и подобни стойности се използват изключително рядко.

Примерът по-долу показва три списъка: номериран списък с традиционно арменско номериране, списък с водещи символи с кръг и номериран списък с елементи, номерирани идеографски.

1. Първа точка
2. Втора точка
3. Трета точка

• Първа точка
• Втора точка
• Трета точка

1. Първа точка
2. Втора точка
3. Трета точка

Резултат.

Цветът на маркерите съвпада с цвета на текста в списъка, определен от свойството цвят.

list-style-image

Позволява ви да зададете свое собствено изображение като маркер в списъка. Например, ако папката, съдържаща страницата със списък, съдържа файла marker.png, който искате да използвате, тогава кодът на дизайна ще бъде както следва:

Ul ( list-style-image: url("marker.png"); )

списък-стил-позиция

Определя позицията на маркера: или той е поставен извън границата на елемента от списъка ( списък-стил-позиция: отвън), или текстът се обвива около него ( list-style-position: вътре).

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

• Просто вижте разликата между вътре и вън.
• В случай на вътре, маркерът се вписва директно в списъка, без да излиза извън неговите граници и без да пречи на оформлението. Текстът тече около него, маркерът изглежда е вътре.
• Външната стойност премества маркера извън списъка.

В резултат на това се създава следната страница:

стил на списък

Позволява ви да съкратите кода, като напишете всичките три изброени свойства в един ред. Правилата са написани разделени с интервали:

Ul (списъчен стил: квадрат отвътре;)

Нека да разгледаме пример за страница с три списъка. Първият е номериран с числа във формат 01, 02, вторият е маркиран с персонализирана снимка (файл marker.png в папката със страницата), маркерът на третия списък е деактивиран.

HTML кодът е даден по-долу.

1. Първа точка
2. Втора точка
3. Трета точка

• Първа точка
• Втора точка
• Трета точка

1. Първа точка
2. Втора точка
3. Трета точка

Браузърът ще покаже следната страница.

Днес практически няма нито един сайт, където да не се използват HTML списъци (

представлява подреден списък,
- неподреден списък). В този урок ще ви покажа 8 страхотни начина да направите обикновените, скучни html списъци да изглеждат привлекателни. Просто ще добавим няколко прости CSS техники и нашите списъци не само ще изглеждат невероятно, но и ще имат няколко допълнителни функции.

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

Изглеждат много по-добре, нали? И вие също можете да създавате такива списъци с помощта на прост CSS код. Искате ли да знаете как? Прочетете!

Списък #1: Проста навигационна система



Най-често списъците се използват при създаване на навигационно меню. Този примерен HTML/CSS код ви позволява да създадете проста, дори малко скромна, но привлекателна навигационна система.

• Начало
• Блог
• За
• Контакт

/* СПИСЪК #1 */ #list1 ( ) #list1 ul ( list-style:none; text-align:center; border-top:1px solid #eee; border-bottom:1px solid #eee; padding:10px 0; ) #list1 ul li ( display:inline; text-transform:uppercase; padding:0 10px; letter-spacing:10px; ) #list1 ul li a (text-decoration:none; color:#eee; ) #list1 ul li a:hover ( text-decoration:underline; )

Списък #2: Използване на различен шрифт за номериране



Проблемът с използването на списък е, че той се слива с текста. И числата винаги са в същия цвят като текста.
Но добавете малко стил и ще забравите за горните ограничения и вашите обяви ще станат много по-привлекателни. Ето как се прави:

Холандияе държава в...

Съединените американски щатие федерална конституция...

Филипинитеофициално известна като република...

Обединеното кралствона Великобритания и...

/* СПИСЪК #2 */ #list2 ( width:320px; ) #list2 ol ( font-style:italic; font-family:Georgia, Times, serif; font-size:24px; color:#bfe1f1; ) #list2 ol li ( ) #list2 ol li p ( padding:8px; font-style:normal; font-family:Arial; font-size:13px; color:#eee; border-left: 1px solid #999; ) #list2 ol li p em (дисплей:блок;)

Списък #3: Изображения на маркери



Можете лесно да промените външния вид на неподредените списъчни маркери, като посочите една от стандартните стойности, но можете също да използвате изображения като маркери. Това решение ще ви помогне да направите списъците си по-оригинални. А ето и кода:

• Java
• .NET

/* СПИСЪК #3 */ #list3 ( ) #list3 ul ( list-style-image: url("../images/arrow.png"); цвят:#eee; font-size:18px; ) #list3 ul li (line-height:30px;)

Списък #4: iPhone стил



Този списък е взет от статията iPhone Contacts App, създадена от CSS помощи jQuery. Ето как изглеждат списъците на iPhone. Много привлекателно, нали? Искате ли такъв за вашия уебсайт?

• Торонто 2004
• Пекин 2008
• Лондон 2012
• Рио де Жанейро 2016

/* СПИСЪК #4 */ #list4 ( width:320px; font-family:Georgia, Times, serif; font-size:15px; ) #list4 ul ( list-style: none; ) #list4 ul li ( ) #list4 ul li a ( display:block; text-decoration:none; color:#000000; background-color:#FFFFFF; line-height:30px; border-bottom-style:solid; border-bottom-width:1px; border- bottom-color:#CCCCCC; padding-left:10px; cursor:pointer; ) #list4 ul a:hover (color:#FFFFFF; background-image:url(../images/hover.png); background-repeat :repeat-x;) #list4 ul a strong ( margin-right:10px; )

Списък #5: Вложени списъци



Вложените списъци могат да бъдат невероятно полезни и да изглеждат красиво. Чрез модифициране на третата техника (Bullet Images), можем да създадем „разширен списък“. Разбира се, не без помощта на jQuery:

1. Google
   1. Picasa
   2. Feedburner
   3. Youtube
2. Microsoft
   1. Corel Corporation
   2. Зигнали
   3. ByteTaxi
3. Yahoo!
   1. Xoopit
   2. BuzzTracker
   3. MyBlogLog

/* СПИСЪК #5 */ #list5 ( цвят:#eee; ) #list5 ol ( font-size:18px; ) #list5 ol li ( ) #list5 ol li ol ( list-style-image: url(".. /images/nested.png"); padding:5px 0 5px 18px; font-size:15px; ) #list5 ol li ol li ( цвят:#bfe1f1; височина:15px; margin-left:10px; )

Списък #6: Римска номерация + многоредов тип



По подразбиране списъкът използва стандартно номериране (1, 2, 3, 4 и т.н.). Като промените стойността в CSS, можете да зададете различен тип номериране, например Roman.
Освен това по подразбиране номерирането и водещите точки се намират извън списъка (нашият списък номер 2 е отличен пример за това). Но това може да се поправи, просто трябва да промените стойността на свойството list-style-position на вътре.

1. Lorem ipsum dolor sit amet, ...
   Fusce sit amet...
2. Aenean placerat lectus tristique...
   Vivamus interdum...
3. Mauris eget sapien arcu, vitae...
   Phasellus neque risus...
4. Phasellus feugiat lacus...
   Duis rhoncus...

/* СПИСЪК #6 */ #list6 ( семейство шрифтове: "Trebuchet MS", "Lucida Grande", Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; ) #list6 ol ( list-style-type: upper -roman; цвят: #eee; размер на шрифта: 14px;

Списък #7: Линеен списък с елементи, разделени със запетаи



Обикновено списъците се използват за показване на количеството на нещо и се показват като колона. Но какво ще стане, ако имате нужда от линеен списък? Това се постига чрез промяна на стойността на свойството display на inline. Но ако изведнъж трябва да вградите списък в текста, тогава според правилата елементите в списъка трябва да бъдат разделени със запетая. Как да постигнете това? И просто, използвайки елемента :after на символния код.

• Първи вграден елемент
• Втори вграден елемент
• Трети вграден елемент
• Четвърти вграден елемент

/* СПИСЪК #7 */ #list7 ( ) #list7 ul ( цвят:#eee; font-size:18px; font-family:Georgia, Times, serif; ) #list7 ul li ( display: inline; ) #list7 ul li:after ( съдържание: ", "; ) #list7 ul li.last:after ( съдържание: "."; )

Списък #8: Въртящо се навигационно меню



Ето последната техника, която изисква CSS3, за да работи (поддържа се само най-новите версии Firefox, Safari и Chrome). Когато задържите курсора върху един от елементите на блока, се активира ефектът на въртене. Разбира се, не най-доброто удобен начин, но много красиво.

• Начало
• Блог
• За
• Контакт

/* СПИСЪК #8 */ #list8 ( ) #list8 ul ( list-style:none; ) #list8 ul li ( font-family:Georgia,serif,Times; font-size:18px; ) #list8 ul li a ( display:block;bound-left:5px solid #222;border-right:#bfe1f1; -moz-box-shadow:10px 20px; -webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 20px #000000;transform:box-shadow:10px 10px 20px #000000;

Заключение

Както можете да видите, възможно е да създавате уникални неща от обикновен html списък. И всичко това се прави с помощта на CSS. Много се радвам, ако сте научили много интересни неща за себе си.

Свойството list-style-type задава типа на маркера. Ето таблица с валидни стойности за това свойство:

Смисъл	Пример
диск	Елемент от списък
кръг	Елемент от списък
квадрат	Елемент от списък
десетичен знак	Елемент от списък
десетична-начална-нула	Елемент от списък
долно-римски	Елемент от списък
горно-римски	Елемент от списък
по-ниска алфа	Елемент от списък
горна алфа	Елемент от списък
грузински	Елемент от списък Елемент от списък Елемент от списък
cjk-идеографски	Елемент от списък Елемент от списък Елемент от списък
няма	Елемент от списък

В таблицата съм посочил две много необичайни свойства: грузински и cjk-ideographic. Тези имоти се използват регионално. Има няколко други подобни интересни значения на това свойство, например арменец или хирагана, но няма смисъл да ги изброявам всички.

Сега пример за използване на това свойство:

1. Първа точка.
2. Втора точка.
3. Трета точка.

Моля, обърнете внимание, че сме обърнали номерирания списък

в етикетирани.

Фигура 1. Свойство тип стил на списък.

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

Свойството list-style-type е доста просто, подобно на други свойства за работа със списъци.

Свойството list-style-image настройва символа на маркера към графичен файл.

• Първа точка.
• Втора точка.
• Трета точка.

Ето какво виждаме:

Фигура 3. Форматирайте блока
.

Важно е да се обърне внимание на факта, че маркерите на списъка се простират отвъд границата на елементния блок

• , ограден с червена граница. Това може да доведе до неочаквани резултати, например да нулираме подложката
  .
  • Първа точка.
  • Втора точка.
  • Трета точка.

  Ето какво получаваме:

  Фигура 4. Форматирайте блока
  .

  Маркерите на списъка вече са извън контейнера

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

  По-добре е да ги поставите в контейнер

  • . Това би го решило този проблем. За това служи свойството list-style-position.

    Свойството list-style-position задава позицията на маркера спрямо блока

  • . Това свойство има две значения:

    Стойността по подразбиране е извън .

    Нека приложим това свойство към нашия пример и да поставим маркери в блока

  • като зададете това свойство на вътре.
    • Първа точка.
    • Втора точка.
    • Трета точка.

    Ето какво получихме:

    Фигура 5. Свойство list-style-position.

    Водещите списъци вече са вложени в блок

  • .

    свойство в стил списък

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

    Пример: направете картина с маркер и поставете маркера вътре в блока на елемент от списъка.

    • Първа точка.
    • Втора точка.
    • Трета точка.

    Ето резултата:

    Фигура 6. Свойство стил на списък.

    Указахме две стойности в едно свойство в стил списък: позицията на маркера и пътя на графичния файл на маркера.

    Свойството стил на списък се използва най-често, дори за задаване на една стойност. Пише се кратко и лесно.

    Свързани CSS рецепти

    • Как се прави падащо меню в CSS, сложен пример със сенки.

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

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

    1. - Глава 9, описана в учебника по HTML - Препоръчвам да опресните ума си за тези елементи, преди да започнете работа.

       Е, ако вече е прясно в главата ви, тогава нека започнем!

       Тип маркер в списъка.

       Ако си спомняте, в чистия HTML типът на маркера в списъка се определяше от атрибута типи една от възможните му стойности, в CSS тази задача се поема от свойството: списък-стил-типкоето от своя страна също има свои собствени стандартни стойности, които определят вида на маркера както за целия списък наведнъж, така и за неговия отделен „елемент“.

       Ценности списък стил тип:

       • диск- Диск. (по подразбиране за
         )
         • кръг- Кух кръг.
         • квадрат- Квадрат.
         • десетичен знак- арабски цифри. (по подразбиране за
           )
           1. долно-римски- Малки римски цифри.
           2. по-ниска алфа- Малки букви.
           3. горно-римски- Главни римски цифри.
           4. горна алфа - Главни букви.
           5. няма- Маркерът липсва.

         
         
         
         
         
         
         

         
         
         • Точка 1.
           
         • Точка 2.
           
         • Точка 3 (специална).
           
         
         
         
         
         • Точка 1.
           
         • Точка 2.
           
         • Точка 3.
           
         
         
         

         Персонализиран чертеж на маркер.

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

         Тази задача се изпълнява от имота list-style-imageкоето дефинира нещо като маркер на списък графично изображениеуказващ пътя до него.

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

         • няма- Отменя графичното представяне на маркера.
         • URL адрес- Път до файла с дизайна на маркера.

         Път до рисуване след URL адресе посочено в скоби.

         Такъв запис ще покаже, че до документа има папка с графики, в която има файл с чертеж: " " - наречен marker.gif

         Сега нека се опитаме да се уверим, че всеки елемент от нашия списък е маркиран с тази снимка. Да разгледаме един пример:

         
         
         
         
         
         
         

         
         
         • Първи любим артикул.
           
         • Втори любим артикул.
           
         • И не по-малко любима трета точка.
           
         
         
         

         Стилът на обвиване на списъка за маркера.

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

         Възможни стойности на имотите списък-стил-позициясамо две:

         • навън- Маркерът се намира отстрани на списъка (по подразбиране).
         • вътре- Маркерът е обвит в текст.

         Пример за яснота:

         
         
         
         
         
         
         
         

         
         

         Тук маркерът е обвит в текст:

         
         

         
         
         • 
           
         • 
           

         
         
         
         
         
         

         Но не тук:

         
         

         
         
         • Точка, която казва, че би било хубаво да се направи нещо там, където нещо все още не е направено.
           
         • Точка, която казва нещо, което би било хубаво да се направи, нещо, където това нещо все още не е направено.
           

         
         
         
         
         

         стил на списък

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

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

         Ако има пропуски в главата ви, можете да се върнете назад и да прочетете отново.

         
         
         
         
         
         
         

         
         

         
         
         • - Този списък използва чертеж като маркер.
           
         • - Текстът на този списък се увива около маркера.
           

         
         
         
         
         

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

         Тъй като списъците са отличен инструмент за структуриране на данни и свойствата на CSS ви позволяват да създавате почти всеки дизайн, използвайте списъците, в допълнение към основната им цел, като „меню“ - навигация на сайта, където всеки елемент е връзка към определена страница на вашия сайт.

         Facebook

         Twitter

         ВКонтакте

         Google+
         Как се работи