Qual é o estilo de lista padrão (CSS)?

89

No meu site, uso reset.css. Ele adiciona exatamente isso aos estilos de lista:

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;
}

O problema é que todos os estilos de lista são configurados NONEcom isso. Desejo reverter os estilos de lista originais (padrão) para todas as listas nas subpáginas do site apenas (todas as listas em .my_container).

Quando tento configurações coisas como list-style-typea inherité não herda estilos padrão do navegador apenas para esta propriedade CSS.

Existe alguma maneira de herdar os estilos do navegador original para certas propriedades sem modificar reset.css?

html css html-lists

— Atadj
fonte

4

reset.css é um dos piores anti-padrões em web design.

— ᆼ ᆺ ᆼ

9

Em vez de uma folha de estilo de redefinição completa, considere algo como github.com/necolas/normalize.css que define padrões razoáveis para todos os elementos. Dessa forma, você começa com uma linha de base em todos os navegadores e pode construir a partir daí. Além disso, você não precisa adicionar código extra para voltar às configurações padrão!

— Olly Hodgson

1

@OllyHodgson Sim, mas tenho motivos específicos para usar o reset.css. Eu preciso realmente limpar o máximo de estilo possível e quero reescrevê-lo - não o contrário :)

— Atadj

1

Se você quiser apagá-los e reescrevê-los, qual é o objetivo desta pergunta? Pelo que posso ver, você tem duas opções: 1) especificamente evitar redefinir estilos de lista para manter os padrões 2) redefini-los e criar seus próprios estilos de lista.

— BoltClock

1

@BoltClock - Só para esclarecer - quero dar aos usuários a oportunidade de construir sua própria lista do zero (adicionei classe para cada estilo possível) - Eu só queria saber se há algo como configuração "padrão", mas como não há estilo padrão - vou apenas criar um.

— Atadj

145

Eu costumava definir este CSS para remover o reset:

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; 
}

EDITAR: com aula específica de curso ...

— Zessx
fonte

Até agora está funcionando como deveria :) Acho que isso resolve minha dúvida. Vou testá-lo mais agora com listas aninhadas etc.

— Atadj

5

Ele não “reverte os estilos de lista originais (padrão)”. Apenas define alguns estilos.

— Jukka K. Korpela

Concordo, mas de qualquer maneira, o objetivo era apenas definir um estilo. Este CSS fornece um estilo bastante básico para listas, nada mais.

— zessx

2

Não existe uma opção "padrão" para o tipo de lista e descobri isso depois de obter as respostas. Os navegadores apenas adicionam alguns estilos que geralmente não são consistentes entre os navegadores.

— Atadj

1

Também fiz alguém definir o display: inline-block; e parece que precisa ser um item de lista para que os marcadores sejam exibidos novamente.

— Marque

31

Acho que é isso que você está procurando:

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

.my_container li
{
    display: list-item;
}

— Frio frio
fonte

Sim, acho que essa resposta é algo importante também. inheritherda os estilos dos contêineres pai e não os define para os valores padrão do navegador. initialfaz isso (que eu descobri sobre a sua existência mais tarde), mas você tem certeza que ul { list-style: initial; }e ol { list-style: initial; }irá produzir um resultado válido? Não é definido list-stylecom seu valor inicial, independentemente do elemento ao qual é aplicado? O initialvalor não será disc outside nonepara os dois tipos de lista?

— Atadj

1

Incrível, initialnunca me ocorreu!

— BenjaminRH

8

initialnão é compatível com nenhuma versão do IE msdn.microsoft.com/en-us/library/…

— lulalala

12

De acordo com a documentação, a maioria dos navegadores exibirá o <ul>, <ol>e<li> elementos com os seguintes valores padrão:

Configurações CSS padrão para tag UL ou OL :

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

Configurações CSS padrão para tag LI :

li { 
    display: list-item;
}

Defina também os itens da lista aninhada:

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

Nota: O resultado será perfeito se usarmos os estilos acima com uma classe. Veja também diferentes marcadores de item de lista .

— Reza Mamun
fonte

Se for esse o caso, a lista aninhada terá uma margem superior e inferior adicionadas com qualquer novo nível.

— 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
fonte

1

graças salvou minha vida, queria saber por que diabos havia preenchimento no meu submenu.

— Asura de

Isso adicionará vertical.margij em qualquer lista aninhada.

— VorganHaze

4

Você não pode. Sempre que houver uma folha de estilo sendo aplicada que atribua uma propriedade a um elemento, não há como acessar os padrões do navegador, para qualquer instância do elemento.

A ideia (discutível) de reset.css é se livrar dos padrões do navegador, para que você possa começar seu próprio estilo de uma mesa limpa. Nenhuma versão de reset.css faz isso completamente, mas na medida em que o faz, o autor que usa reset.css deve definir completamente a renderização.

— Jukka K. Korpela
fonte

2

Você está redefinindo a margem em todos os elementos no segundo bloco css. A margem padrão é 40px - isso deve resolver o problema:

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

— OmidAntiLong
fonte

1

Uma resposta para o futuro: o CSS 4 provavelmente conterá a palavra-chave revert, que reverte uma propriedade ao seu valor da folha de estilo do usuário ou do agente do usuário [ fonte ]. No momento em que escrevo isso, apenas o Safari oferece suporte - verifique aqui as atualizações sobre o suporte do navegador.

No seu caso, você usaria:

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

Veja também esta outra resposta com mais alguns detalhes.

— Tanius
fonte