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

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

Описание

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

Синтаксис

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

Стойности

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

Наследяване Наследява стойността на родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

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

  • Lorem ipsum dolor sit amet
  • Consectetuer adipiscing elit
  • Sed diem nonummy nibh euismod
  • Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

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

Ориз. 1. Прилагане на свойството стил на списък

Обектен модел

document.getElementById("elementID ").style.listStyle

Браузъри

Версиите на Internet Explorer до и включително 7.0 не поддържат наследената стойност.

Материал от Директорията на уеб езиците

Използвани стойности

sМестоположение Линия, който може да дефинира и приема една от следните стойности:

Това свойство се чете/записва за всички обекти с изключение на currentStyle (само за четене). Стойността по подразбиране е нито един. Атрибутът Cascading Style Sheets (CSS) е наследен.

Бележки

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

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

За показване на изображение на маркер за списък за собственост маржтрябва да се настрои на минимум 30 точки.

Примери

Следните примери илюстрират използването на имота listStyleImageи атрибут list-style-imageза да зададете изображението на маркера на списъка.

Първият пример използва селектора ули атрибут list-style-image.

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

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

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

    List style property – дизайн на списък на html страница

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

    Всички тези свойства могат да се използват и за двете html елементи li и за елементи ul и ol. Единствената разлика е, че ако правилата са написани за конкретна стойност на списъка li, тогава тя ще бъде приложена само към нея. И ако едни и същи css правила са написани за ul или ul контейнери, тогава те ще бъдат приложени към всички li елементи, съдържащи се в тези контейнери.

    Да започнем с атрибута списък-стил-тип, което определя тип маркериили номериранеза елементи от списъка:

    list-style-type: диск|кръг|квадрат|десетична|десетична-начална-нула|долна-римска|горна-римска|долна-гръцка|долна-алфа|долна-латиница|горна-алфа|горна-латиница|арменски| грузински|няма|наследяват

    Както можете да видите, свойството list-style-type има много налични стойности, които могат да определят както типа маркер, така и различни видове номериране.

    • диск - маркер под формата на черен кръг (стойност по подразбиране за списъци с водещи символи).
    • кръг - маркер под формата на незапълнен кръг.
    • квадрат - маркер под формата на квадрат. Тя може да бъде светла или тъмна, в зависимост от браузъра.
    • decimal - номериране с арабски цифри (стойност по подразбиране за номерирани списъци).
    • decimal-leading-zero - номерация с арабски цифри от 01 до 99 с водеща нула.
    • долен римски - номериране с малки римски цифри.
    • upper-roman - номериране с големи римски цифри.
    • долногръцки - номерация с малки гръцки букви.
    • lower-alpha и lower-latin - номериране с малки латински букви.
    • upper-alpha и upper-latin - номерация с главни латински букви.
    • арменски - номерация с традиционните арменски цифри.
    • грузински - номериране с традиционни грузински цифри.
    • няма - маркиране и номериране изобщо няма да се извършват.

    Ето как ще изглеждат елементите от списъка в браузъра различни значениясписък стил тип:

    При използвайки CSSстилове, няма значение кой елемент (OL или UL) се използва за създаване на списъка. OL и UL се различават само по поведението по подразбиране и със свойството list-style-type можете лесно да превърнете един вид списък в друг.

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

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

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

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

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


    • първи елемент от списъка;

    • втори елемент от списъка;

    • трети елемент в списъка.

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

    • първи елемент от списъка;
    • втори елемент от списъка;
    • трети елемент в списъка.

    Ясно е, че когато избирате картина като маркер, е по-добре да изберете малко изображение.

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

    списък-стил-позиция: вътре|вън

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

    Примерен списък с различни стойности на позиция в стила на списъка:

    • в първия параграф всичко е по подразбиране;
    • във втория абзац list-style-position е настроен на вътре. В този случай имайте предвид, че втората линия е поставена наравно с маркера;
    • в този момент list-style-position е равно на out.

    Сглобяемо CSS правило в стил на списък

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

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

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

    Истинско CSS правило за стилизиране на списъци може да изглежда по следния начин:

    списък-стил: кръг url (//site/images/marker.png) извън;

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

    Както бе споменато по-горе, стойностите могат да бъдат посочени в произволен ред и във всяко количество. Така например, за да премахнете маркерите от списъка с менютадостатъчно е да напишете:

    стил на списък: няма;

    Същото може да се направи с помощта на свойството list-style-type:

    list-style-type: няма;

    Това е всичко за историята на дизайна. html списъциЩе завърша с Cascading Style Sheets. За да разберете за другите CSS свойстваможете да четете статии от раздела „“ и не забравяйте да се абонирате за актуализации на блога. Ще се видим отново!

    Материал от Директорията на уеб езиците

    Използвани стойности

    sStyle Линия, който може да дефинира и приема от една до три от следните стойности:

    Това свойство се чете/записва за всички обекти. Стойността по подразбиране е диск извън никакъв. Атрибутът Cascading Style Sheets (CSS) е наследен.

    Бележки

    Имот listStyleе универсално съставно свойство. Когато са зададени както тип, така и изображение, стойността на изображението има предимство (ще се покаже картината, а не един от стандартните водещи списъци), освен ако listStyleImage не е зададено на нито единили връзка ( URL адрес) на изображението е инсталиран неправилно или е остарял.

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

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

    Примери

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

    Примерът използва класове улИ UL.компактен, а също и атрибута стил на списъкза да посочите два неподредени списъка. За час UL.компактенза замяна на чертежа, описан в ул, трябва да зададете стойността нито единза атрибута list-style-image.

    • ...
    • ...
    • ...
    • ...

    Вторият пример използва свойството listStyle. Ако изображението, указано за списъка, не е налично, ще се използва маркерът кух кръг(празен кръг).

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

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

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

      Имот Стойности и т.н.* Hc*
      стил на списък [списък-стил-изображение; списък-стил-позиция; list-style-type], наследяване * +
      списък-стил-тип диск , кръг, квадрат, десетична, десетична водеща нула, ниска римска, горна римска, ниска латиница, горна латиница, арменски, грузински, няма, наследяване * +
      списък-стил-позиция отвътре, отвън, наследи * +
      list-style-image URL, няма, наследяване * +

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

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

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

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

      Стойности:

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

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

      List-style-position

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

      Стойности:

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

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

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

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

      Стойности:

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

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

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