CSS за списъци: свойството стил на списък и неговите производни. Примери за стилизиране ul li CSS Списъци Елементи на списък css

CSS за списъци: свойството стил на списък и неговите производни. Примери за стилизиране ul li CSS Списъци Елементи на списък css
01.06.2021

Вече се запознахме с такъв важен елемент като списък и наистина добър инструмент за структуриране на данни. Въпреки това списъците, организирани само от 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 свойствави позволяват да създавате почти всеки техен дизайн, използвайте списъци, в допълнение към основната им цел, като "меню" - навигация на сайта, където всеки елемент е връзка към определена страница от вашия сайт.

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

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

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

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

        Свойството list-style-type.

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

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

          в маркираното.

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

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

          Свойството list-style-type е доста просто, подобно на останалите свойства на списъка.

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

          свойство list-style-image..gif"); )</style> </head> <body> <ul> <li>Първа точка.</li> <li>Втора точка.</li> <li>Трета точка.</li> </ul> </body> </html> </p><p>Ето резултата от този код:</p> <img src='https://i2.wp.com/komotoz.ru/uroki/css/example/images/lists_2.png' height="190" width="374" loading=lazy loading=lazy>Фигура 2. Свойството list-style-image. <p>Виждаме, че маркерите на списъка вече са маркирани с .</p> <h2>свойство list-style-position</h2> <p>Преди да проучим това свойство, нека разгледаме по-подробно модела на форматиране на елемента. <ul> .</p><p> <!DOCTYPE html> <html> <head> <title>Форматиране на списъка.

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

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

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

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

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

              Форматиране на списъка.

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

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

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

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

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

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

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

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

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

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

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

                • като зададете това свойство на вътре.

                  Свойството list-style-position.

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

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

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

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

                • .

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

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

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

                  Свойството стил на списък.

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

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

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

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

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

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

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

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

                    • Първа точка
                    • Втора точка
                    • Трети параграф

                    Списъкът трябва да съдържа затварящ таг.

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

                  Пример 11-1 е HTML кодът за добавяне на списък с водещи символи към уеб страница.

                  Пример 11.1. Създайте списък с водещи символи

                  списък с водещи символи

                  • Чебурашка
                  • Крокодила Гена
                  • Шапокляк
                  • Плъх Лариса

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

                  Ориз. 11.1. Изглед на списък с водещи символи

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

                  Маркерите могат да приемат една от трите форми: кръг (по подразбиране), кръг и квадрат. Атрибутът тип на тага се използва за избор на стил на маркер.

                    . Допустимите стойности са дадени в табл. 11.1

                    Раздел. 11.1. Избройте стилове на водещи символи
                    Тип списък HTML код Пример
                    Списък с топчета под формата на кръг

                    • Първо
                    • Второ
                    • трето
                    Списък с топчета под формата на кръг

                    • Първо
                    • Второ
                    • трето
                    Списък с квадратни водещи точки

                    • Първо
                    • Второ
                    • трето

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

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

                    Пример 11.2. Тип маркери

                    списък с водещи символи

                    Промяна на вярванията

                    • промяна на религиозната вяра (по избор: будизъм, конфуцианство, хиндуизъм). Специална оферта- юдаизъм и ислям заедно;
                    • промяна във вярата в непогрешимостта на любимата страна;
                    • вярата, че съществуват извънземни;
                    • предпочитание към политическа система, като най-добрата по рода си (за избор: феодализъм, социализъм, комунизъм, капитализъм).

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

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

                    С елемент

                      свързани със следните характеристики:

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

                        Фигура 1 показва резултата от примера, илюстриращ горните характеристики на списъка с водещи символи.

                        Ориз. 1. Изглед на списъка с водещи символи

                        Тип маркер

                        Маркерите могат да приемат една от трите форми: запълнен кръг (по подразбиране), празен кръг и квадрат. За да изберете типа на маркера, използвайте свойството list-style-type или общия list-style (пример 1). Прилагат се следните стойности:

                        • диск - маркери под формата на запълнен кръг;
                        • кръг - маркери под формата на незапълнен кръг;
                        • квадрат - квадратни маркери.

                        Пример 1 - Промяна на външния вид на маркера

                        Списъци

                        • sepulki
                        • Sepulcarii
                        • Сепуления

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

                      • няма да работи, така че трябва да заобиколите. За да направите това, скрийте маркерите на списъка, като използвате свойството list-style със стойност none и в текста преди съдържанието
                      • добавете свой собствен символ с псевдо-елемента ::before. В пример 2 триъгълник действа като такъв маркер.

                        Пример 2: Използване на::before

                        Списъци

                        • sepulki
                        • Sepulcarii
                        • Сепуления

                        Резултатът от този пример е показан на фиг. 2. Тъй като използването на свойството list-style със стойност none изобщо не премахва маркерите, а само ги скрива от изгледа, списъкът се измества надясно. За да се отървете от тази особеност, примерът добавя свойството text-indent с отрицателна стойност. Неговата задача е да премести текста наляво с един знак.

                        Ориз. 2. Произволни маркери в списъка

                        Знакът не трябва да е в шестнадесетичен формат, той може да бъде вмъкнат и директно в текста. Основното нещо е да запазите документа в кодиране UTF-8 и редакторът да го поддържа. Самите символи и техните кодове могат да бъдат взети например от LibreOffice Writer(фиг. 3).

                        Ориз. 3. Избор на символ в LibreOffice

                        Списък с нарисувани топчета

                        Стиловете ви позволяват да зададете всяко подходящо изображение като маркер чрез свойството list-style-image. Стойността е относителен или абсолютен път до графичен файл, както е показано в пример 3.

                        Пример 3: Използване на изображение като маркер

                        Списъци

                        • sepulki
                        • Sepulcarii
                        • Сепуления

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

                        Ориз. 4. Рисунката като маркер

                        List-style-image има някои недостатъци:

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

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

                      • премахваме оригиналните маркери и задаваме фоновото изображение без повторение. И за да не се показва текстът в горната част на картината, ние го изместваме надясно чрез padding-left (пример 4).

                        Пример 4 Използване на фон

                        Ul ( margin-left: -1em; ) li ( list-style: none; background: url(images/bullet.png) no-repeat 0 2px; padding-left: 20px; )

                        Текст и позиция на водещите точки

                        Има два начина за поставяне на маркер спрямо текста: маркерът се поставя извън границите на елементите на списъка или се обвива с текст (фиг. 5).
                        вътренавън

                        Ориз. 5. Поставяне на маркери спрямо текста

                        Ако решите да промените стандартните ul и li списъци, тогава тази тема ще ви заинтересува. Тъй като тук ще научите някои оригинални решения. Което със сигурност ще ви помогне да промените стандартния изглед на уникален, където отива CSS стилът, за декориране на списъци. Предимството е, че ще използваме във всичко само един клас, което коренно ще промени външния вид. В допълнение към тези опции можете да посочите от кой номер да започне списъкът, можете да направите всичко сами тук. Първоначалната стойност по подразбиране за номерирани списъци е върху първата или буквата A.

                        След като приключихме основите, сега ще разгледаме по-отблизо елементите, използвани за осигуряване на структура и значение на различните части на дизайна. Ако някой не знае, тогава ул и ли, това е много най-добрият вариантотколкото просто текст текстзащото когато текстът се обвива, особено в мобилен телефон, той е идеално вдлъбнат и не се увива около маркера.

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

                        Трябва също да знаете, че списъците първоначално съдържат няколко елемента:

                        1 . неподредена информация.
                        2 . Поръчана информация.
                        3 . Дефиниции.

                        Да започнем инсталацията:

                        1. Опция:


                        • Елемент от списък

                        • Уникален списък

                        • Оригинални обяви

                        • ZORNET.RU - Уеб администратор

                        • Друг списък


                        css

                        (Ксангелопан)
                        поле: 19px 0 0;
                        подплата:0;
                        стил на списък: няма;
                        нулиране на контра:li;
                        }
                        .ksangelopan li (
                        рамка: 2px плътен #3575ad;
                        фон: #d7dee4;
                        позиция: роднина;
                        margin-bottom: 17px;
                        подложка: 15px 9px;
                        }
                        .ksangelopan li:hover(
                        z-индекс: 1;
                        }
                        .ksangelopan li: преди (
                        рамка: 2px плътна #2270b3;
                        позиция: абсолютна;
                        отгоре: -14px;
                        подложка: 3px 9px;
                        размер на шрифта: 11px;
                        тегло на шрифта: удебелен;
                        цвят: #246eaf;
                        фон: #f2f4f7;
                        контра-приращение: li;
                        съдържание: counter(li);
                        -webkit-transition-duration: 0.4s;
                        преход-продължителност: 0.4s;
                        }
                        .ksangelopan li:hover:before (
                        фон: #2672b3;
                        цвят: #f7f9fb;
                        -webkit-transform: превод (-11px, 0);
                        -ms-трансформация: превод (-11px, 0);
                        -o-трансформиране: превод (-11px, 0);
                        трансформиране: превод (-11px, 0);
                        }
                        .ksangelopan li:след (
                        съдържание: "";
                        позиция: абсолютна;
                        преход-продължителност: 0.3s;
                        -webkit-transition-property: ширина;
                        преход-свойство: ширина;
                        z-индекс: -1;
                        фон: #FFF;
                        височина: 100%;
                        ляво: 0;
                        отгоре: 0;
                        ширина: 0;
                        }
                        .ksangelopan li:hover:after (
                        ширина: 100%
                        }


                        Това е цялата настройка.

                        2 Втори вариант:


                        • Елемент от списък

                        • Уникален списък

                        • Оригинални обяви

                        • ZORNET.RU - Уеб администратор

                        • Друг списък


                        css

                        Beleduzlopamges (
                        margin-bottom: 8px;
                        подплата:0;
                        стил на списък: няма;
                        нулиране на контра:li;
                        }
                        .beleduzlopamges li (
                        позиция: роднина;
                        рамка: 2px плътен #195588;
                        фон: #eff3f7;
                        подложка: 15px 19px 15px 27px;
                        поле: 12px 0 12px 40px;
                        -webkit-продължителност на прехода: 0.3s;
                        преход-продължителност: 0.3s;
                        }
                        .beleduzlopamges li:hover(
                        фон: #FFF;
                        }
                        .beleduzlopamges li:before (
                        височина на реда: 32px;
                        позиция: абсолютна;
                        отгоре: 4px;
                        ляво: -39px;
                        ширина: 39px
                        подравняване на текст: център;
                        размер на шрифта: 16px;
                        тегло на шрифта: удебелен;
                        цвят: #f9f5f5;
                        фон: #275b88;
                        контра-приращение: li;
                        съдържание: counter(li);
                        преход-продължителност: 0.2s;
                        }
                        .beleduzlopamges li:hover:before (
                        ширина:46px;
                        }
                        .beleduzlopamges li:after (
                        позиция: абсолютна;
                        ляво: 0;
                        отгоре: 4px;
                        съдържание: "";
                        височина: 0;
                        ширина: 0;
                        рамка: 16px плътна прозрачна;
                        цвят на лявата граница: #275b88;
                        -webkit-transition-duration: 0.2s;
                        преход-продължителност: 0.2s;
                        }
                        .beleduzlopamges li:hover:after (
                        ляво поле: 6px;
                        }


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

                        3 Трети вариант:


                        • Скриптове за uCoz

                        • Шаблони за uCoz

                        • Дизайн на уеб сайт

                        • Стилове за сайта

                        • Стил в CSS


                        css

                        Nizualisanelag (
                        подплата:0;
                        стил на списък: няма;
                        нулиране на контра:li;
                        }
                        .nizualisanelag li(
                        позиция: роднина;
                        подложка: 9px 17px 17px 25px;
                        ляво поле: 39px;
                        преход-продължителност: 0.2s;
                        курсор: показалец;
                        тегло на шрифта: удебелен;
                        цвят: #343638;
                        }
                        .nizualisanelag li:before (
                        рамка: 3px плътна прозрачна;
                        височина на реда: 35px;
                        позиция: абсолютна;
                        отгоре: 0;
                        ляво:-29px;
                        ширина:41px;
                        подравняване на текст: център;
                        размер на шрифта: 14px;
                        тегло на шрифта: удебелен;
                        цвят: #619dce;
                        контра-приращение: li;
                        съдържание: counter(li);
                        преход-продължителност: 0.3s;

                        оразмеряване на кутия: border-box;
                        }
                        .nizualisanelag li:hover:before (
                        цвят: #337AB7;
                        }
                        .nizualisanelag li:след (
                        позиция: абсолютна;
                        отгоре: 0;
                        ляво: -29px;
                        ширина: 41px
                        височина: 41px;
                        рамка: 5px плътен #468bd0;
                        радиус на границата: 50%
                        съдържание: "";
                        непрозрачност: 0,5
                        -webkit-box-sizing: border-box;
                        -moz-box-sizing: border-box;
                        оразмеряване на кутия: border-box;
                        }
                        .nizualisanelag li:hover:after (
                        анимация: 500ms ease-in-out 0s bounceIn;
                        непрозрачност: 1
                        }

                        @keyframes bounceIn(
                        0% {
                        непрозрачност: 0
                        трансформация: scale3d(.3, .3, .3);
                        }
                        20% {
                        трансформиране: scale3d(1.3, 1.3, 1.3);
                        }
                        40% {
                        трансформация: scale3d(.9, .9, .9);
                        }
                        60% {
                        непрозрачност: 1
                        трансформиране: scale3d(1.03, 1.03, 1.03);
                        }
                        80% {
                        трансформация: scale3d(.97, .97, .97);
                        }
                        да се(
                        непрозрачност: 1
                        трансформиране: scale3d(1, 1, 1);
                        }
                        }


                        Предлага се с красива анимация.

                        4 Четвърта опция:


                        • Първият елемент за сайта

                        • Вторият елемент за сайта

                        • Третият елемент за сайта

                        • Четвъртият елемент за сайта

                        • Петият елемент за сайта


                        css

                        подплата:0;
                        стил на списък: няма;
                        }
                        .kudezamuden li(
                        padding:6px;
                        }
                        .kudezamuden li:before (
                        padding-right: 11px;
                        тегло на шрифта: удебелен;
                        цвят: #4979a0;
                        съдържание: "\2606";
                        преход-продължителност: 0.4s;
                        }
                        .kudezamuden li:hover:before (
                        цвят: #235e90;
                        съдържание: "\2605";
                        }


                        Подобен предишна версия, само самата икона е променена.

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

                        Ако трябва да поставите елементи в номериран списък вместо списък с водещи символи, тук ще се използва подреден HTML. Този списък е създаден с помощта на маркера ol. Номерирането започва от едно и се увеличава с едно за всеки следващ подреден елемент от списъка с етикет li.