CSS-свойство List, CSS

Содержание
  1. list-style-type
  2. Поля и отступы
  3. List-style-position
  4. List-style-image
  5. Уменьшение list-style
  6. Перечень inline
  7. Стилизация упорядоченного перечня

Тема нашей статьи — CSS-свойство List, CSS. Вы узнаете мнения и рекомендации специалистов, почитаете настоящие отзывы и увидите фотографии.

CSS-свойство List

2-мя самыми популярными типами HTML-перечней являются упорядоченный и неупорядоченный. Для их стилизации перечней мы будем применять свойство list-style CSS .

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

CSS-свойство List, CSS

list-style-type

Чтобы задать стиль маркера для пунктов перечня, можно применить свойство list-style-type .

Стандартное значение такого свойства – disc , но можно применить и иные значения: circle , square , none . По мимо этого можно применить такие значения, как upper-alpha , lower-alpha , upper-roman , lower-roman , decimal и т. д.

В приведенном ниже примере свойство list-style-type имеет большое значение square :

CSS-свойство List, CSS

CSS-свойство List, CSS

Поля и отступы

Чтобы прибавить в перечень отступы, можно применить свойство margin .

В приведенном ниже примере применения CSS ul li list style мы прибавляем поля по 30px над и под перечнем:

CSS-свойство List, CSS

CSS-свойство List, CSS

CSS-свойство List, CSS

CSS-свойство List, CSS

List-style-position

Такое свойство в ответе за то, как текст в середине list style CSS будет переходить на следующую строку. Стандартное значение outside значит, что при переносе строки текст также получит разравнивание по левому краю. Если выставлено значение inside , то строка будет перенесена под маркер перечня.

В примере, приведенном ниже, представлен перечень, в котором свойство list-style-position выставлено на outside ( значение по умолчанию ):

В следующем примере показано, что будет, если свойство list-style-position станет иметь значение inside . Подобным образом, текст на новой строке будет начинаться прямо под маркером:

CSS-свойство List, CSS

List-style-image

Свойство list-style-image дает возможность применять свою пиктограмму в качестве маркера.

В примере CSS ul list style мы применяем изображение звезды взамен маркера перечня:

CSS-свойство List, CSS

Уменьшение list-style

Можно применить неполное свойство list-style для назначения тех же стилей. В приведенном ниже примере мы задаем вид, расположение и изображение маркера перечня:

CSS-свойство List, CSS

Перечень inline

По умолчанию, все пункты перечня перечисляются с новой строки, другими словами, вертикально. Если необходимо выводить перечень в горизонтальном положении или строчно ( inline ), необходимо присвоить элементам перечня display inline .

В приведенном ниже примере предоставлен строчный перечень:

CSS-свойство List, CSS

Стилизация упорядоченного перечня

Теперь настало время задать стилевое решение для CSS ol list style . По умолчанию, list-style-type для упорядоченного перечня поставлен с помощью десятичного числа:

CSS-свойство List, CSS

Ниже приведен пример, где list-style-type имеет большое значение upper-alpha :

CSS-свойство List, CSS

CSS-свойство List, CSS

Эта статья собой представляет перевод публикации « CSS List » , подготовленной дружной командой проекта Интернет-технологии.ру

Комментариев нет, будьте первым кто его оставит

Вам нужно войти, чтобы оставить комментарий.