Главная » Языки программирования

Css menu list style

На чтение 12 мин
Содержание
  1. list — style
  2. Пример
  3. Как пишется
  4. Использование значения none
  5. Подсказки
  6. list-style
  7. Try it
  8. Constituent properties
  9. Syntax
  10. Values
  11. Accessibility concerns
  12. Formal definition
  13. Formal syntax
  14. Examples
  15. Setting list style type and position
  16. HTML
  17. CSS
  18. Result
  19. Specifications
  20. Browser compatibility
  21. See also
  22. Found a content problem with this page?
  23. MDN
  24. Support
  25. Our communities
  26. Developers
  27. CSS List Style: 20+ examples
  28. Contents
  29. Unordered List
  30. Set List Item Markers
  31. Custom Bullets
  32. Set an Image as List Item Marker
  33. Ordered List
  34. Changing Punctuation in List Items
  35. Position the List Item Markers
  36. Colored Markers
  37. Colored Markers with Background
  38. Examples of More Advanced Use
  39. Example #1
  40. Example #2
  41. Example #3

list — style

Шорткат list — style позволяет одновременно задать значение для следующих свойств:

Пример

Скопировать ссылку «Пример» Скопировано

Код ниже задаёт всем элементам списка стиль маркера upper — alpha и делает маркер частью содержимого элемента списка.

 li  list-style: upper-alpha inside;> li  list-style: upper-alpha inside; >

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Значения свойства можно задавать в любом порядке и в любом количестве от 1 до 3.

Установим значение none для изображения и типа маркера:

 ul  list-style: none;> ul  list-style: none; >

Зададим значение disc для типа маркера и inside для позиции:

 ul  list-style: disc inside;> ul  list-style: disc inside; >

Зададим значение decimal для типа, укажем путь до картинки и расположим маркер снаружи пункта списка:

 ul  list-style: decimal url('marker.png') outside;> ul  list-style: decimal url('marker.png') outside; >

Браузер сам найдёт подходящие значения для нужных свойств.

Использование значения none

Скопировать ссылку «Использование значения none» Скопировано

Использовать значение none в сокращении стоит аккуратно, потому что это значение можно указать как для list — style — image так и для list — style — type .

Например, код ниже установит значение none для list — style — image , а для list — style — type значение disc :

 ul  list-style: none disc;> ul  list-style: none disc; >

А здесь установит значение url ( doka . png ) для list — style — image , а для list — style — type значение none :

 ul  list-style: none url(doka.png);> ul  list-style: none url(doka.png); >

Если установить просто значение none свойству list — style , то значение none применится только к list — style — image и list — style — type , но не к свойству list — style — position , потому что у него нет значения none .

Код ниже устанавливает значение none для свойств list — style — image и list — style — type :

 ul  list-style: none;> ul  list-style: none; >

А такой код не сработает. У свойства list — style — position нет значения none :

 ul  list-style: none disc url(doka.png);> ul  list-style: none disc url(doka.png); >

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Как и с любым шорткатом, со свойством list — style нужно обращаться осторожно. Если потребуется переопределить всего одно из заданных значений, то нужно будет переписать и все остальные.

💡 Если в рамках шортката не задано значение для какого-то из свойств и в коде ниже оно не прописано, то свойству устанавливается значение по умолчанию.

💡 Записанные выше отдельные свойства переопределяются заданным ниже свойством list — style .

Источник

list-style

The list-style CSS shorthand property allows you to set all the list style properties at once.

Try it

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* type */ list-style: square; /* image */ list-style: url("../img/shape.png"); /* position */ list-style: inside; /* type | position */ list-style: georgian inside; /* type | image | position */ list-style: lower-roman url("../img/shape.png") outside; /* Keyword value */ list-style: none; /* Global values */ list-style: inherit; list-style: initial; list-style: revert; list-style: revert-layer; list-style: unset;

The list-style property is specified as one, two, or three keywords in any order. If list-style-type and list-style-image are both set, then list-style-type is used as a fallback if the image is unavailable.

Values

Accessibility concerns

In a notable exception, Safari will not recognize an ordered or unordered list as a list in the accessibility tree if it has a list-style value of none . This behavior is intentional and not considered a bug.

    or
    element in the markup. This will restore the list semantics without affecting the design:

ul role="list"> li>An itemli> li>Another itemli> ul>

A CSS-only workaround is also available for those who do not have access to the markup: Adding pseudo-content before each list item can restore list semantics:

ul  list-style: none; > ul li::before  content: "+ "; >

The added pseudo-content is tested by Safari to determine if it should be accessible or ignored. Accessible pseudo-content restores list semantics, while ignored pseudo-content does not.

Generally, text or images are determined to be things that should be accessible, which is why the content: «+ «; declaration in the previous example works.

A declaration of content: «»; (an empty string) is ignored, as are content values that contain only spaces, such as content: » «; , so these do not work.

If the intent is to keep list item markers visually hidden, this can often be managed with a zero-width space, ​ , which is \200B in CSS and \u200B in JavaScript:

ul  list-style: none; > ul li::before  content: "\200B"; >

Another visually hidden approach is to apply an to the list-style property:

nav ol, nav ul  list-style: none; > /* becomes */ nav ol, nav ul  list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E"); >

These CSS workarounds should be used only when the HTML solution is not available, and only after testing to ensure that they don’t result in unexpected behaviors that may negatively impact users’ experiences.

Formal definition

  • list-style-type : disc
  • list-style-position : outside
  • list-style-image : none
  • list-style-image : The keyword none or the computed
  • list-style-position : as specified
  • list-style-type : as specified
  • list-style-image : discrete
  • list-style-position : discrete
  • list-style-type : discrete

Formal syntax

Examples

Setting list style type and position

HTML

ul class="one"> li>List Item1li> li>List Item2li> li>List Item3li> ul> List 2 ul class="two"> li>List Item Ali> li>List Item Bli> li>List Item Cli> ul>

CSS

.one  list-style: circle; > .two  list-style: square inside; >

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 26, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

CSS List Style: 20+ examples

This guide contains simple and practical CSS list styles you can copy and paste, including 20+ CSS list styles templates and examples.

Contents

Web browsers dictate how bulleted and numbered lists should look. Fortunately, you can style your lists by combining various CSS properties so that your lists look just the way you want them to. And this guide will help you achieve the maximum effect.

Unordered List

CSS unordered list example

Set List Item Markers

    ). By way of illustration, we’ll apply this rule to the each individual
    element inside their parent

      :

    CSS unordered list item markers examples

    Custom Bullets

    You can also specify your own markers, such as “—”, “+”, “*”, “→”, “🌈”, “😎”, etc.:

    Here’s another solution if you want to use more options like positioning of the marker:

    CSS list custom markers

    You can remove default settings by applying these rules:

    Here are more examples of custom bullets in square, triangular, arrow, heart, diamond and other shapes:

    CSS custom bullets

     li.diamond::before < content: ""; position: absolute; left: 0px; top: 0px; width: 0; height: 0; border: 5px solid transparent; border-bottom-color: #f9dd94; >li.diamond::after
     li.circle-checkmark::before < content: ""; position: absolute; left: 0; top: 2px; border: solid 8px #f9dd94; border-radius: 8px; >li.circle-checkmark::after
     li.heart::before, li.heart::after < content: ""; position: absolute; left: 7px; top: 5px; width: 7px; height: 12px; background: #f9dd94; border-radius: 50px 50px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; >li.heart::after
     li.cross::before < content: ""; position: absolute; height: 15px; border-left: 2px solid #f9dd94; transform: rotate(45deg); top: 2px; left: 5px; >li.cross::after
     li.curved-arrow::before < content: ""; position: absolute; width: 0; height: 0; left: 4px; top: 3px; border-top: 9px solid transparent; border-right: 9px solid #f9dd94; transform: rotate(10deg); >li.curved-arrow::after

    Find more examples of creating different shapes with CSS:

    Set an Image as List Item Marker

    You can also set an image as the list item marker using one of two ways.

      element and indicate a path to your image. In this case, you need to resize your image manually in advance so it would fit in the list (e. g. 30 px × 30 px).

    Image as CSS list marker

    Learn more about CSS backgrounds:

    Ordered List

    CSS ordered list example

      ). By way of illustration, we’ll apply this rule to the each individual
      element inside their parent

        : 
       .one < list-style-type: decimal; >.two < list-style-type: decimal-leading-zero; >.three < list-style-type: lower-roman; >.four < list-style-type: upper-roman; >.five < list-style-type: lower-greek; >.six < list-style-type: lower-latin; >.seven < list-style-type: upper-latin; >.eight < list-style-type: armenian; >.nine < list-style-type: georgian; >.ten < list-style-type: lower-alpha; >.eleven

      CSS ordered list markers

      Changing Punctuation in List Items

      You can add a semicolon at the end of each list item or any other punctuation mark:

      CSS list with semicolon

      You can also remove a comma in an ordered list marker:

      CSS ordered list marker without a comma

      Position the List Item Markers

      Web browsers also dictate how CSS list items are positioned. You might want to change the default look.

      First, you might want to remove the margin to the left of your list (apply margin-left with any value that suits you).

      Second, you can add the list-style-position: inside; so that the bullet points would be inside the list item and part of the text. The result will be a CSS list indent.

      CSS list indent

      If you want the text to be aligned along one line vertically, simply remove list-style-position: inside; :

      CSS list vertical alignment

      You can use a shorthand property to set all the list properties in one declaration: ul

      Colored Markers

      By default, markers of unordered lists are round, small and have the same color as the text. You can set the color and size of markers the way you like. For example, let’s make them bigger and pink-colored:

       ul < display: block; margin-left: -10px; >ul li < display: block; position: relative; >ul li:not(:last-child) < margin-bottom: 16px; >ul li:before

      CSS list colored markers

      Apply linear-gradient() instead of simple color, and you will get gradient markers:

      CSS list gradient marker

      Find more examples of creating CSS gradients:

      If you only want to change the color, apply these rules:

      Likewise, you can change the color of markers in an ordered list:

      CSS ordered list color

      The counter-increment property allows you to assign a name to your counter. This provides a way to identify the counter when using the ::before pseudo-element. When you name the counter-increment “item” (or whatever you like), you’re telling the browser to use a counter for each list item.

      Colored Markers with Background

      You can go further and add even more visual effects. For example, you can create markers with numbers in colored squares:

      CSS ordered list background

      You can also use a different font family for numbers in list item markers:

      CSS ordered list font 

      It is also possible to make round colored markers with numbers.

       ol < counter-reset: item; list-style-type: none; line-height: 2.2; margin-left: -40px; >ol li < display: block; position: relative; >ol li span < margin-left: 40px; >ol li:before

      The result will look like this:

      CSS unordered list background

      Apply linear-gradient() instead of simple color, and you will get gradient markers:

      CSS list gradient background

      Find more examples of creating CSS gradients:

      Examples of More Advanced Use

      Below are three examples of more complicated CSS lists with fancy design and animation.

      Example #1

      CSS list animation

        Grilled Flatfish With Pistachio-Herb SauceCoconut Cod Chowder With Seasoned Oyster CrackersTamarind-Glazed Black Bass With Coconut-Herb SaladSpicy Sweet-and-Sour Salmon With Dates 
       ol < counter-reset: li; list-style: none; padding: 0; text-shadow: 0 1px 0 rgba(255,255,255,.5); >ol a < position: relative; display: block; padding: .4em .4em .4em 2em; margin: .5em 0; background: #DAD2CA; color: #444; text-decoration: none; border-radius: .3em; transition: .3s ease-out; >ol a:hover < background: #E9E4E0; >ol a:hover:before < transform: rotate(360deg); >ol a:before

      Example #2

      CSS list animation

        Grilled Flatfish With Pistachio-Herb SauceCoconut Cod Chowder With Seasoned Oyster CrackersTamarind-Glazed Black Bass With Coconut-Herb SaladSpicy Sweet-and-Sour Salmon With Dates 
       ol < counter-reset: li; list-style: none; padding: 0; text-shadow: 0 1px 0 rgba(255,255,255,.5); >ol a < position: relative; display: block; padding: .4em .4em .4em .8em; margin: .5em 0 .5em 2.5em; background: #D3D4DA; color: #444; text-decoration: none; transition: all .3s ease-out; >ol a:hover ol a:before < content: counter(li); counter-increment: li; position: absolute; left: -2.5em; top: 50%; margin-top: -1em; background: #f9dd94; height: 2em; width: 2em; line-height: 2em; text-align: center; font-weight: bold; >ol a:after < position: absolute; content: ""; border: .5em solid transparent; left: -1em; top: 50%; margin-top: -.5em; transition: all .3s ease-out; >ol a:hover:after

      Example #3

      CSS list restaurant menu

       ul < list-style: none; font-family: 'Marck Script', cursive; >ul li < margin-bottom: 5px; border-bottom: 2px #404B51 dotted; font-size: 26px; line-height: 1; >ul li span:nth-child(odd) < padding-right: 6px; color: #404B51; >ul li span:nth-child(even) < float: right; padding-left: 6px; color: #fff; >ul span

      These three examples above are inspired by html5book.ru.

      Источник

      Читайте также:  Background cover all html
Оцените статью
© 2023 Программирование