¿Qué es el estilo de lista predeterminado (CSS)?

91

En mi sitio web utilizo reset.css. Agrega exactamente esto a los 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;
}

El problema es que todos los estilos de lista están configurados NONEcon esto. Quiero revertir los estilos de lista originales (predeterminado) para todas las listas solo en las subpáginas del sitio web (todas las listas en .my_container).

Cuando intento ajustes cosas como list-style-typea inherites no hereda estilos predeterminados del navegador sólo para esta propiedad CSS.

¿Hay alguna forma de heredar los estilos del navegador original para ciertas propiedades sin modificar reset.css?

html css html-lists

— Atadj
fuente

4

reset.css es uno de los peores anti-patrones en diseño web.

— ᆼ ᆺ ᆼ

9

En lugar de una hoja de estilo de restablecimiento completo, considere algo como github.com/necolas/normalize.css que establece valores predeterminados razonables para todos los elementos. De esa manera, comienza con una línea de base en todos los navegadores y puede construir a partir de ahí. Además, no es necesario que agregue código adicional para volver a la configuración predeterminada.

— Olly Hodgson

1

@OllyHodgson Sí, pero tengo razones específicas por las que quiero usar reset.css. De hecho, necesito borrar tanto estilo como sea posible y quiero volver a escribirlo, no al revés :)

— Atadj

1

Si quieres borrarlos y reescribirlos, ¿cuál es el punto de esta pregunta? Por lo que puedo ver, tiene dos opciones: 1) evitar específicamente restablecer los estilos de lista para mantener los valores predeterminados 2) restablecerlos y crear sus propios estilos de lista.

— BoltClock

1

@BoltClock - Solo para aclarar - Quiero darles a los usuarios la oportunidad de crear su propia lista desde cero (agregué una clase para cada estilo posible) - Solo me preguntaba si hay algo como una configuración "predeterminada", pero como no hay ninguna estilo predeterminado: solo crearé uno.

— Atadj

149

Solía configurar este CSS para eliminar el reinicio:

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: con una clase específica por supuesto ...

— zessx
fuente

Hasta ahora funciona como debería :) Creo que esto resuelve mi pregunta. Voy a probarlo más ahora con listas anidadas, etc.

— Atadj

6

No “revierte los estilos de lista originales (predeterminado)”. Simplemente establece algunos estilos.

— Jukka K. Korpela

Estoy de acuerdo, pero sea como sea, el objetivo era simplemente establecer un estilo. Este CSS le da un estilo bastante básico a las listas, nada más.

— zessx

3

No hay una opción "predeterminada" para el tipo de estilo de lista y lo descubrí después de obtener respuestas. Los navegadores simplemente agregan algunos estilos que a menudo no son consistentes entre navegadores.

— Atadj

1

También hice que alguien configurara la pantalla: inline-block; y parece que debe ser un elemento de lista para que las viñetas se muestren nuevamente.

— Mark

33

Creo que esto es en realidad lo que estás buscando:

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

.my_container li
{
    display: list-item;
}

— Frio frio
fuente

Sí, creo que esta respuesta también es algo importante. inherithereda los estilos de los contenedores principales y no los establece en los valores predeterminados del navegador. initialhace esto (que me enteré de su existencia más adelante), pero ¿está seguro de que ul { list-style: initial; }y ol { list-style: initial; }producirá un resultado válido? ¿No se establece list-styleen su valor inicial independientemente del elemento al que se aplica? ¿No será el initialvalor disc outside nonepara ambos tipos de listas?

— Atadj

1

¡Increíble, initialnunca se me ocurrió!

— BenjaminRH

9

initialno es compatible con ninguna versión de IE msdn.microsoft.com/en-us/library/…

— lulalala

12

Según la documentación, la mayoría de los navegadores mostrarán los elementos <ul>, <ol>y <li>con los siguientes valores predeterminados:

Configuración CSS predeterminada para etiqueta UL u OL :

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

Configuración de CSS predeterminada para la etiqueta LI :

li { 
    display: list-item;
}

Diseñe también elementos de lista anidados:

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

Nota: El resultado será perfecto si usamos los estilos anteriores con una clase. Consulte también diferentes marcadores de elementos de lista .

— Reza Mamun
fuente

Si este fuera el caso, la lista anidada tendrá un margen superior e inferior agregado con cualquier nivel nuevo.

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

1

gracias me salvó la vida, me preguntaba por qué diablos había relleno en mi submenú.

— Asura

Esto agregará vertical.margij en cualquier lista anidada.

— VorganHaze

4

No se puede. Siempre que se esté aplicando una hoja de estilo que asigne una propiedad a un elemento, no hay forma de acceder a los valores predeterminados del navegador, para ninguna instancia del elemento.

La idea (discutible) de reset.css es deshacerse de los valores predeterminados del navegador, para que pueda comenzar su propio estilo desde un escritorio limpio. Ninguna versión de reset.css hace eso por completo, pero en la medida en que lo hacen, se supone que el autor que usa reset.css debe definir completamente la representación.

— Jukka K. Korpela
fuente

2

Está restableciendo el margen en todos los elementos en el segundo bloque css. El margen predeterminado es 40px; esto debería resolver el problema:

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

— OmidAntiLong
fuente

1

Una respuesta para el futuro: CSS 4 probablemente contendrá la palabra clave revert, que revierte una propiedad a su valor de la hoja de estilo de usuario o agente de usuario [ fuente ]. Al momento de escribir esto, solo Safari lo admite; consulte aquí las actualizaciones sobre la compatibilidad del navegador.

En su caso, usaría:

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

Vea también esta otra respuesta con algunos detalles más.

— tanius
fuente