Что такое стиль списка по умолчанию (CSS)?

91

На своем сайте я использую reset.css. Он добавляет именно это в стили списка:

ol, ul {
    list-style: none outside none;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    font-size: 100%;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
}

Проблема в том, что все стили списков настроены на NONEэто. Я хочу вернуть исходные стили списка (по умолчанию) только для всех списков на подстраницах веб-сайта (все списки в .my_container).

Когда я пытаюсь настройки вещи , как list-style-typeна inheritэто не наследует стили по умолчанию в браузере только для этого CSS свойства.

Есть ли способ наследовать исходные стили браузера для определенных свойств без изменения reset.css?

html css html-lists

— Атадж
источник

4

reset.css - один из худших антишаблонов веб-дизайна.

— ᆼ ᆺ ᆼ

9

Вместо полной таблицы стилей сброса подумайте о чем-то вроде github.com/necolas/normalize.css, который устанавливает разумные значения по умолчанию для всех элементов. Таким образом, вы начинаете с базовой линии для всех браузеров и можете оттуда развиваться. Кроме того, вам не нужно добавлять дополнительный код, чтобы вернуться к настройкам по умолчанию!

— Olly Hodgson

1

@OllyHodgson Да, но у меня есть конкретные причины, по которым я хочу использовать reset.css. Мне нужно очистить как можно больше стиля, и я хочу его переписать, а не наоборот :)

— Атадж

1

Если вы хотите стереть их и переписать, в чем смысл этого вопроса? Насколько я понимаю, у вас есть два варианта: 1) специально избегать сброса стилей списка, чтобы сохранить значения по умолчанию 2) сбросить их и придумать свои собственные стили списка.

— BoltClock

1

@BoltClock - Просто чтобы уточнить - я хочу дать пользователям возможность создавать свой собственный список с нуля (я добавил класс для каждого возможного стиля) - мне было только интересно, есть ли что-то вроде настройки "по умолчанию", но поскольку ее нет стиль по умолчанию - я просто создам его.

— Атадж 01

149

Я использовал этот CSS, чтобы удалить сброс:

ul { 
   list-style-type: disc; 
   list-style-position: inside; 
}
ol { 
   list-style-type: decimal; 
   list-style-position: inside; 
}
ul ul, ol ul { 
   list-style-type: circle; 
   list-style-position: inside; 
   margin-left: 15px; 
}
ol ol, ul ol { 
   list-style-type: lower-latin; 
   list-style-position: inside; 
   margin-left: 15px; 
}

РЕДАКТИРОВАТЬ: конечно, с определенным классом ...

— Zessx
источник

Пока работает как надо :) Думаю, это решает мой вопрос. Я собираюсь протестировать его сейчас с вложенными списками и т. Д.

— Атадж

6

Он не «возвращает исходные стили списка (по умолчанию)». Он просто устанавливает несколько стилей.

— Jukka K. Korpela

Я согласен, но как бы то ни было, целью было просто задать какой-то стиль. Этот CSS дает довольно простой стиль спискам, не более того.

— zessx

3

Для типа списка нет опции "по умолчанию", и я узнал об этом после получения ответов. Браузеры просто добавляют некоторые стили, которые часто несовместимы между браузерами.

— Атадж 01

1

Я также попросил кого-то установить display: inline-block; и, похоже, это должен быть элемент списка, чтобы маркеры снова отображались.

— Марк

33

Я думаю, это именно то, что вы ищете:

.my_container ul
{
    list-style: initial;
    margin: initial;
    padding: 0 0 0 40px;
}

.my_container li
{
    display: list-item;
}

— Холодно холодно
источник

Да, я думаю, что этот ответ тоже что-то важное. inheritнаследует стили от родительских контейнеров и не устанавливает для них значения браузера по умолчанию. initialделает это (я узнал о его существовании позже) , но вы уверены , что ul { list-style: initial; }и ol { list-style: initial; }даст правильный результат? Разве для него не установлено list-styleначальное значение, независимо от элемента, к которому оно применяется? Разве initialзначение не будет disc outside noneдля обоих типов списков?

— Атадж

1

Удивительно, initialмне никогда не приходило в голову!

— BenjaminRH

9

initialне поддерживается ни в одной из версий IE msdn.microsoft.com/en-us/library/…

— lulalala

12

Согласно документации, большинство браузеров будут отображать элементы <ul>, <ol>и <li>со следующими значениями по умолчанию:

Настройки CSS по умолчанию для тега UL или OL :

ul, ol { 
    display: block;
    list-style: disc outside none;
    margin: 1em 0;
    padding: 0 0 0 40px;
}
ol { 
    list-style-type: decimal;
}

Настройки CSS по умолчанию для тега LI :

li { 
    display: list-item;
}

Также стилизуйте элементы вложенного списка:

ul ul, ol ul {
    list-style-type: circle;
    margin-left: 15px; 
}
ol ol, ul ol { 
    list-style-type: lower-latin;
    margin-left: 15px; 
}

Примечание: результат будет идеальным, если мы будем использовать вышеуказанные стили с классом. Также см. Разные маркеры List-Item .

— Реза Мамун
источник

Если бы это было так, то у вложенного списка будет добавлено верхнее и нижнее поле с любым новым уровнем.

— VorganHaze

10

http://www.w3schools.com/tags/tag_ul.asp

ul { 
    display: block;
    list-style-type: disc;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

— Jerrygarciuh
источник

1

спасибо спасло мне жизнь, было интересно, какого черта в моем подменю была прокладка.

— Асура

Это добавит vertical.margij в любой вложенный список.

— VorganHaze

4

Вы не можете. Всякий раз, когда применяется какая-либо таблица стилей, которая назначает свойство элементу, нет возможности перейти к значениям по умолчанию браузера для любого экземпляра элемента.

(Спорная) идея reset.css состоит в том, чтобы избавиться от настроек браузера по умолчанию, чтобы вы могли начать свой собственный стиль с чистого листа. Ни одна из версий reset.css не делает этого полностью, но в той мере, в какой они это делают, автор, использующий reset.css, должен полностью определять рендеринг.

— Юкка К. Корпела
источник

2

Вы сбрасываете маржу для всех элементов во втором блоке css. Поля по умолчанию - 40 пикселей - это должно решить проблему:

.my_container ul {list-style:disc outside none; margin-left:40px;}

— Омид
источник

1

Ответ на будущее: CSS 4, вероятно, будет содержать ключевое слово revert, которое возвращает свойство к его значению из таблицы стилей пользователя или агента пользователя [ источник ]. На момент написания это поддерживает только Safari - проверьте здесь обновления о поддержке браузера.

В вашем случае вы бы использовали:

.my_container ol, .my_container ul {
    list-style: revert;
}

См. Также этот другой ответ с более подробной информацией.

— Таниус
источник