CSS правила за персонализиране на външния вид на списък на html страница. Свойство за стил на списък (тип, изображение, позиция). Персонализирано правило за стил на CSS списък

Здравейте, скъпи читатели на сайта на блога. Днес ще има още една статия в касичката. Ще се фокусира върху дизайна, използвайки правилата на каскадните стилови листове. Тук всичко е много просто, но въпреки това реших да посветя отделен пост на тази тема.

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

Стил на списък - дизайн на списък в Html код

И така, в стиловия език за маркиране има три отделни правила, започващи със стил на списък, които служат за персонализиране външен видсписъци (номерирани или обозначени с водещи символи) в кода на уеб документи. Освен това има предварително създадено правило за стил на Css списък, което ви позволява да намалите донякъде количеството код. Но на първо място.

Това, което сега ще разгледаме с вас, може да се използва като за Html елементи LI и за елементи Ul и Ol (съответно маркиран и номериран списък). Каква би била разликата в прилагането на списък стил към тези тагове?

Всъщност можете да разберете дали дадено свойство е наследено или не на уебсайта на валидатора (прочетете за предоставената връзка) в раздела за спецификацията на каскадни стилови листове. В колоната „Наследени“ срещу наследените правила ще бъде „Да“:

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

1. Няма - изобщо няма да има маркировка (list-style-type:none; приложено към този елемент и следователно няма маркер)
2. Диск - запълнен кръг (list-style-type: диск току-що беше приложен към този ред;)
3. Кръг - кръг като маркер
4. Квадрат - квадрат като маркер
5. Decimal - арабски цифри (list-style-type:decimal;)
6. lower-alpha - с малки букви
7. upper-alpha - латински букви в главни букви
8. lower-roman - римски цифри с малки букви
9. upper-roman - римски цифри в главни букви

Как мислите, с помощта на кои елементи от Ul или Ol е създаден горният списък? Сложен въпрос. Оказва се, че това вече не е важно, въпреки че в конкретния случай използвах Ol, но като го променя на Ul, външният вид ще остане същият, защото се задава за всеки елемент по свой начин CSS стойностправила за стил на списък.

Всъщност Ul и Ol се различават само по поведението по подразбиране (маркировки Ul и числа Ol). Но ако искате, можете лесно да превърнете един вид списък в друг с list-style-type. Шрифтът, използван за етикетиране на числа или букви, е точно същият като този, който сте дефинирали за съдържанието на LI таговете. Например, като променим цвета на шрифта за списъка, ще променим и цвят на маркера:

1. Променен цвят на текста (list-style-type:lower-roman;color:red) и променен цвят на маркера

Нека да преминем към следното CSS свойство − списък-стил-позиция. С него можете да зададете позицията (разположението) на зоната с маркера. Има само две възможни стойности:

Тези. всъщност в list-style-position указваме къде искаме да поставим областта с маркери - извън елемента LI (outside) или вътре в него (inside). По подразбиране зоната с маркера е извадена извън границите, т.е. използва се външната стойност.

Нека видим това с пример. В първия елемент на списъка ще напиша конкретно list-style-position:inside и ще видим какво ще излезе от това:

1. Тук всичко е по подразбиране.
2. Ето как ще изглежда разположението на зоната на маркера с вътрешността. Имайте предвид, че вторият ред в този елемент и маркерът са на едно ниво.
3. Тук всичко е по подразбиране.

Изображение в стил на списък и предварително изработено CSS правило

Следващият по ред е List-style-image - позволява ви да посочите изображение, което ще се използва като маркер. Това правило е зададено на None по подразбиране (т.е. изображение не се използва като маркер), но можете да напишете функционалността Url (), като посочите пътя до изображението в него, което по-късно ще действа като маркер в този списък:

Може да изглежда така:

Списък-стил-изображение: url(https://website/images/list_star.png);

1. Тук всичко е по подразбиране.
2. Ето как може да изглежда използването на изображение като маркер. Ясно е, че можете да изберете по-подходящо изображение за тази цел.
3. Например, като тук.

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

Ето картинката и заема мястото на маркера (букви или цифри). В същото време височината на реда с елемента списък ще се увеличи, ако вмъкнете голяма картина като маркер (както се случи във втория елемент от примера по-горе).

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

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

Къде мога да видя стойностите по подразбиране? Да, всичко е на едно и също място - в CSS спецификацията на W3C валидатора в колоната "Начална стойност" срещу свойствата, които ви интересуват:

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

На практика това може да изглежда така:

Стил на списък: вътрешен URL адрес с горна римска буква (https://site/images/list_star.png);

Можете да използвате стойности в произволен ред и произволен брой (започвайки от едно). Между другото, с помощта на списъци най-често се формират менюта на уебсайтове, а свойството List-style се използва за за премахване на маркери от списъците с менюта, които са напълно ненужни там:

list-style-type: none;

List-style:none;

Късмет! Ще се видим скоро на сайта на страниците на блога

Може да се интересувате

Display (block, none, inline) в CSS - задайте типа на показване на Html елементи на уеб страница Как да промените цвета на фона на редовете от таблици, списъци и други Html елементи на сайта с помощта на псевдокласа nth-child
Плаване и изчистване в CSS - инструменти за блоково оформление
Позициониране с Z-индекс и CSS Cursor правило за промяна на курсора на мишката
Позиция (абсолютна, относителна и фиксирана) - начини за позициониране на Html елементи в CSS (правила за ляво, дясно, горно и долно)
За какво е CSS, как да свържете каскадни таблици със стилове html документи основен синтаксис на този език
CSS свойстваукраса на текст, вертикално подравняване, подравняване на текст, отстъп на текст за украса на Html текст
Правила за шрифт (тегло, семейство, размер, стил) и височина на реда за стилизиране на шрифтове в CSS
Фон в CSS (цвят, позиция, изображение, повторение, прикачен файл) - всичко за задаване на фонов цвят или фоново изображение на Html елементи
CSS - какво е това, как са свързани каскадните стилови таблици html кодсъс стил и връзка
Приоритети в Css и тяхното увеличаване поради Важно, комбинация и групиране на селектори, потребителски и авторски стилове

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

кратка информация

Синтаксис

list-style-image: няма | url(<адрес>)

В тази глава ще проучим стиловите атрибути, които дефинират опции за параграфи. Параграфи в най-широкия смисъл на думата - които включват както заглавия, така и списъци, и адресни тагове, и страхотни цитати. Като цяло елементи на ниво блок, разгледани в Глава 2 и предназначени за структуриране на текст.

И накрая, ще разгледаме два много специфични стилови атрибута, които ни позволяват да настроим показването на елемент на уеб страница (т.е. блок или вграден) и да направим елемента невидим. Тези стилови атрибути се използват рядко и само във връзка с определени поведения (вижте Част III).

Опции за извеждане на текст

Ще започнем с атрибутите на стила, които контролират текстов изходв блокови елементи, структуриращи текста. Има много малко от тях. И всички те са приложими само за блокови елементи.

Атрибутът за стил на подравняване на текста определя хоризонталното подравняване на текста:

подравняване на текст: ляво|дясно|център|подравняване|наследяване

Наличните тук стойности са ляво (подравнено вляво; нормално поведение на уеб браузъра), дясно (подравнено вдясно), центрирано (центрирано) и оправдаване (подравнено изцяло).

Примери:

P (подравняване на текст: подравняване)
H1 (подравняване на текст: център)

Атрибутът text-indent style задава отстъпа за "червената линия":

отстъп на текста:<отступ "красной строки">

Тук са разрешени абсолютни и относителни (спрямо ширината на абзаца) стойности на отстъпа. По подразбиране отстъпът на "червената линия" е нула. Обърнете внимание, че атрибутът за стил на текстов отстъп не поддържа наследена стойност.

Пример:

P (текст-отстъп: 5 mm)

Сега абзаците ще имат "червена линия".

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

Атрибутът list-style-type style указва типа на водещите символи или номерирането за елементи от списъка:

тип-списък-стил: диск|кръг|квадрат|десетична|десетична-начална-нула|

долна-римска|горна-римска|долна-гръцка|долна-алфа|долна-латинска|

горна буква|горна латиница|арменски|грузински|няма|наследява

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

Дисков маркер под формата на черен кръг (обичайно поведение за списъци с водещи символи).

Кръг - маркер под формата на светъл кръг.

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

Decimal - номериране с арабски цифри (обичайно поведение за номерирани списъци).

Decimal-leading-zero - арабски цифри от 01 до 99 с водеща нула.

Lower-roman - номерация с малки римски цифри.

Upper-roman - номериране с големи римски цифри.

Долногръцки - номерация с малки гръцки букви.

Lower-alpha и lower-latin - номерация с малки латински букви.

Upper-alpha и upper-latin - номерация с главни латински букви.

Арменска - номерация с традиционни арменски цифри.

Грузински - номерация с традиционни грузински цифри.

Няма - Без маркер или номериране (обичайно поведение за несписъци).

НА ЗАБЕЛЕЖКА

Разгледахме само стойностите на атрибута list-style-type, предоставени от CSS 3. Въпреки това, CSS 2 предостави още няколко стойности, които все още се поддържат от уеб браузърите. Можете да ги намерите на https://developer.mozilla.org/en/CSS/list-style-type.

Атрибутът list-style-type style може да бъде зададен и на двете списъции за отделни елементи от списъка. Във втория случай се създава списък, в който елементите имат различни водещи точки или номерация. Понякога това може да бъде полезно.

Ето дефиницията на списък с водещи символи с поле маркер:

UL (списъчен стил-тип: квадрат)

А в листинг 9.1 зададохме същия маркер за един от елементите в списъка с водещи символи.

Атрибутът list-style-image style ви позволява да зададете всяко графично изображение като маркер на елемент от списък (създайте графичен маркер). В този случай стойността на стиловия атрибут list-style-type, ако има такъв, се игнорира:

list-style-image: няма|<интернет-адрес файла изображения>|наследяват

Интернет адресът на файла с графичен маркер е посочен в същия формат като интернет адреса на файла с фоново изображение (вижте Глава 8):

UL (изображение в стил на списък: url(/markers/dot.gif))

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

Атрибутът list-style-image style може също да бъде зададен както за самите списъци, така и за отделни елементи от списъка.

Атрибутът list-style-position style ви позволява да посочите местоположението на водещ символ или номер в елемент от списък:

list-style-position: вътре|извън|наследяване

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

Вътре - маркерът или номерирането са, така да се каже, вътре в елемента от списъка, те са част от него;

Извън - маркерът или номерацията е извън точката списък(това е нормално поведение).

Не е ясно защо е необходим този стилов атрибут, защото списъци, в които маркерът или номерацията са извадени от абзаците, са по-добре четими. Е, след като е в стандарта CSS, значи така да бъде...

Пример:

OL (списъчен стил-позиция: вътре)

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

кратка информация

Със свойството LIST-STYLE

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

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

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

Имотни комплекти тип маркерза всеки елемент от списъка. Типовете водещи символи се различават за списъците с водещи символи и номерираните списъци.

Стойности:

диск- точков маркер.
кръг- кръгъл маркер.
квадрат- квадратен маркер.
десетичен знак- Арабски цифри: 1, 2, 3 ....
десетична-начална-нула- Арабски цифри, започващи от нула: 01, 02, 03 ... 09.
ниско-римски- Римски цифри с малки букви.
горен рим- Римски цифри в главни букви.
ниско-латински- малки латински букви: a, b, c ....
горнолатин— главни латински букви: A, B, C ….
арменец- Арменска номерация.
грузински- Грузинска номерация.
нито един- анулиране.
наследяват

Примерът използва две различни значенияИмоти Списък-стил-тип:

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

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

Стойности:

вътре- маркерът се намира вътре в елемента на списъка.
навън— маркерът се премества извън текстовия блок.
наследяват- наследяване от родителския елемент.

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

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

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

Стойности:

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

Ul (списък-стил-изображение: url(papka/find.png); списък-стил-позиция:вътре;)

В примера използвахме малко изображение като маркер, което ясно демонстрира възможностите на имота. Списък-стил-изображение: