Как изменить li css

CSS Lists

The list-style-type property specifies the type of list item marker.

The following example shows some of the available list item markers:

Example

ul.b list-style-type: square;
>

ol.c list-style-type: upper-roman;
>

ol.d list-style-type: lower-alpha;
>

Note: Some of the values are for unordered lists, and some for ordered lists.

An Image as The List Item Marker

The list-style-image property specifies an image as the list item marker:

Example

ul <
list-style-image: url(‘sqpurple.gif’);
>

Position The List Item Markers

The list-style-position property specifies the position of the list-item markers (bullet points).

«list-style-position: outside;» means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically. This is default:

Coffee — A brewed drink prepared from roasted coffee beans.
Tea
Coca-cola

«list-style-position: inside;» means that the bullet points will be inside the list item. As it is part of the list item, it will be part of the text and push the text at the start:

Coffee — A brewed drink prepared from roasted coffee beans.
Tea
Coca-cola

Example

ul.a <
list-style-position: outside;
>

ul.b list-style-position: inside;
>

Remove Default Settings

Example

ul <
list-style-type: none;
margin: 0;
padding: 0;
>

List — Shorthand property

The list-style property is a shorthand property. It is used to set all the list properties in one declaration:

Example

ul <
list-style: square inside url(«sqpurple.gif»);
>

When using the shorthand property, the order of the property values are:

list-style-type (if a list-style-image is specified, the value of this property will be displayed if the image for some reason cannot be displayed)
list-style-position (specifies whether the list-item markers should appear inside or outside the content flow)
list-style-image (specifies an image as the list item marker)

If one of the property values above is missing, the default value for the missing property will be inserted, if any.

Styling List With Colors

We can also style lists with colors, to make them look a little more interesting.

Example

ol <
background: #ff9999;
padding: 20px;
>

ul background: #3399ff;
padding: 20px;
>

ol li background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
>

ul li background: #cce5ff;
color: darkblue;
margin: 5px;
>

More Examples

Customized list with a red left border
This example demonstrates how to create a list with a red left border.

Full-width bordered list
This example demonstrates how to create a bordered list without bullets.

All the different list-item markers for lists
This example demonstrates all the different list-item markers in CSS.

All CSS List Properties

Property	Description
list-style	Sets all the properties for a list in one declaration
list-style-image	Specifies an image as the list-item marker
list-style-position	Specifies the position of the list-item markers (bullet points)
list-style-type	Specifies the type of list-item marker

161. Как изменить положение маркера списка

Маркеры списка могут обтекаться текстом в случае необходимости. Для этого существует специальное свойство list-style-position . По умолчанию маркеры находятся вне элемента. Рассмотрим синтаксис свойства list-style-position .

list-style-position: outside | inside | inherit;

li list-style-position: inside; 
>

Свойство list-style-position применяется к элементам dd , dt , li , ol , ul и имеющим свойство display: list-item .

Если урок был полезным,
можете поделиться им с друзьями

Похожие уроки и записи блога

Свойство background для работы с фоном Цвета и фон
Типы списков в CSS Списки
Обработка исключений (try/except) в Python Знакомство с Python
Знакомимся с Flexbox в CSS Знакомство с Flexbox
Свойство z-index для определения уровня элемента Позиционирование
Краткое свойство для изменения стиля списка Списки
Погружение в Python Знакомство с Python
Свойство outline для создания внешних границ Отступы, рамки, поля
Позиционирование элементов свойством position Позиционирование
Вернуть расположение блоков
Восстановить код

Чтобы использовать все функции сайта (например, сохранение прогресса прохождения уроков и участие в рейтинге среди пользователей), вам нужно авторизоваться. Это можно сделать пройдя обычную регистрацию с использованием почты или в пару кликов, если у вас есть один из аккаунтов: ВКонтакте, GitHub, Google, Яндекс или Telegram.

Сделайте так, чтобы содержимое элемента обтекало маркер.

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить на любом популярном форуме в интернете.

Необходимо авторизоваться, чтобы проверить задание
Это займет не больше минуты.
Раздел «Списки»
159 . УРОК: Типы списков в CSS
160 . УРОК: Маркер списка в виде изображения
УРОК 161 . Как изменить положение маркера списка
162 . УРОК: Краткое свойство для изменения стиля списка
Другие разделы
Раздел 1. Знакомство с HTML
Раздел 2. Разметка текста
Раздел 3. Ссылки
Раздел 4. Изображения
Раздел 5. Таблицы
Раздел 6. Формы
Раздел 7. HTML5
Раздел 8. Остальное
Раздел 9. Знакомство с CSS
Раздел 10. Селекторы в CSS
Раздел 11. Структура и каскад
Раздел 12. Единицы измерения
Раздел 13. Шрифт
Раздел 14. Свойства текста
Раздел 15. Форматирование
Раздел 16. Отступы, рамки, поля
Раздел 17. Цвета и фон
Раздел 18. Позиционирование
Раздел 19. Верстка таблиц
Раздел 21. Анимация
Раздел 22. Практика с htmlbook.ru
Раздел 23. Элементы сайта
Раздел 24. Знакомство с Flexbox
Впервые на сайте Codebra?

Извините за это всплывающее окно, меня они тоже раздражают.

Образовательный ресурс codebra.ru полностью посвящен программированию. Все курсы и уроки находятся на главной странице. Ради интереса можете посмотреть на содержимое курсов по Python, HTML и CSS, JavaScript, C++ и другие, размещенные на главной странице.

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

Как изменить свойство класса с помощью js?

Есть div с классом mystyle . В классе есть свойство margin как его изменить с помощью обычного js или jquery?

.mystyle, .mystyle ul

Отслеживать
122k 24 24 золотых знака 124 124 серебряных знака 299 299 бронзовых знаков
задан 28 фев 2017 в 6:12
393 3 3 золотых знака 12 12 серебряных знаков 45 45 бронзовых знаков
– user256824
6 ноя 2019 в 4:05

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

document.getElementsByClassName('mystyle')[0].style.margin = "50px";

document.getElementsByClassName('mystyle')[0].style= "margin: 50px";

$('.mystyle').css('margin','50px');

Отслеживать
ответ дан 28 фев 2017 в 6:23
59 7 7 бронзовых знаков

Если нужно поменять во всех элементах этого класса:

$('.mystyle').css('margin','10px')

Если прямо в стилях нужно поменять:

$(function() < var ss = document.styleSheets[0]; var rules = ss.cssRules || ss.rules; var h1Rule = null; for (var i = 0; i < rules.length; i++) < var rule = rules[i]; if (/(^|,) *\.mystyle *(,|$)/i.test(rule.selectorText)) < h1Rule = rule; break; >> h1Rule.style.margin='10px' console.log(h1Rule.style.margin) >);

.mystyle

 Header

Отслеживать
ответ дан 28 фев 2017 в 6:16
9,720 2 2 золотых знака 17 17 серебряных знаков 49 49 бронзовых знаков

function getClassByName(className)

.mystyle, .mystyle ul

Отслеживать
ответ дан 15 июн 2020 в 14:06
11 2 2 бронзовых знака

Невозможно переписывать CSS стиле с помощью JS. Лучше создай новый класс с нужными свойствами и добавляй его.

 .mystyle, .mystyle ul < margin: 0; >.mystyle.active < margin: 20px 0; >.mystyle.active ul

 document.querySelector('.mystyle').classList.add('active');

$('.mystyle').addClass('active');

Отслеживать
ответ дан 3 мар 2017 в 10:04
Roman Kryvun Roman Kryvun
29 3 3 бронзовых знака
Неправда. Возможно. Но jQuery в этом не помощник.
3 мар 2017 в 10:11

javascript
html
jquery
css

Важное на Мете

Связанные

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.