Qu'est-ce que le style de liste par défaut (CSS)?

91

Sur mon site Web, j'utilise reset.css. Il ajoute exactement ceci pour lister les styles:

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

Le problème est que tous les styles de liste sont définis NONEavec cela. Je souhaite rétablir les styles de liste d'origine (par défaut) pour toutes les listes sur les sous-pages du site Web uniquement (toutes les listes dans .my_container).

Lorsque j'essaie des paramètres, des choses comme list-style-typeà inheritn'héritent pas des styles par défaut du navigateur uniquement pour cette propriété CSS.

Existe-t-il un moyen d'hériter des styles du navigateur d'origine pour certaines propriétés sans modifier reset.css?

html css html-lists Atadj
la source
4
reset.css est l'un des pires anti-modèles de la conception Web.
ᆼ ᆺ ᆼ
9
Plutôt qu'une feuille de style de réinitialisation complète, envisagez quelque chose comme github.com/necolas/normalize.css qui définit des valeurs par défaut raisonnables pour tous les éléments. De cette façon, vous commencez avec une base de référence pour tous les navigateurs et pouvez construire à partir de là. De plus, vous n'avez pas besoin d'ajouter de code supplémentaire pour revenir aux paramètres par défaut!
Olly Hodgson
1
@OllyHodgson Oui, mais j'ai des raisons spécifiques pour lesquelles je veux utiliser reset.css. J'ai besoin de clarifier autant de style que possible et je veux le réécrire - pas l'inverse :)
Atadj
1
Si vous voulez les effacer et les réécrire, à quoi sert cette question? Pour autant que je sache, vous avez deux options: 1) éviter spécifiquement de réinitialiser les styles de liste afin de conserver les valeurs par défaut 2) les réinitialiser et créer vos propres styles de liste.
BoltClock
1
@BoltClock - Juste pour clarifier - Je veux donner aux utilisateurs la possibilité de créer leur propre liste à partir de zéro (j'ai ajouté une classe pour chaque style possible) - Je me demandais seulement s'il y avait quelque chose comme le paramètre "par défaut" mais puisqu'il n'y en a pas style par défaut - je vais juste en créer un.
Atadj

Réponses:

149

J'avais l'habitude de définir ce CSS pour supprimer la réinitialisation:

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

EDIT: avec une classe spécifique bien sûr ...

zessx
la source
Jusqu'à présent, cela fonctionne comme il se doit :) Je pense que cela résout ma question. Je vais le tester plus maintenant avec des listes imbriquées, etc.
Atadj
6
Il ne «rétablit pas les styles de liste d'origine (par défaut)». Cela définit juste quelques styles.
Jukka K. Korpela
Je suis d'accord, mais quoi qu'il en soit, l'objectif était simplement de définir un style. Ce CSS donne un style assez basique aux listes, pas plus.
zessx
3
Il n'y a pas d'option "par défaut" pour le type de type liste et je l'ai découvert après avoir obtenu des réponses. Les navigateurs ajoutent simplement des styles qui ne sont souvent pas cohérents entre les navigateurs.
Atadj
1
J'ai aussi demandé à quelqu'un d'afficher: inline-block; et il semble qu'il doit s'agir d'un élément de liste pour que les puces apparaissent à nouveau.
Mark
33

Je pense que c'est en fait ce que vous recherchez:

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

.my_container li
{
    display: list-item;
}
Froid froid
la source
Oui, je pense que cette réponse est quelque chose d'important aussi. inherithérite des styles des conteneurs parents et ne les définit pas sur les valeurs par défaut du navigateur. initialest-ce que cela (j'ai découvert son existence plus tard) mais en êtes-vous sûr ul { list-style: initial; }et ol { list-style: initial; }produira un résultat valide? N'a-t-il list-stylepas sa valeur initiale quel que soit l'élément auquel il est appliqué? La initialvaleur ne sera-t-elle pas disc outside nonepour les deux types de listes?
Atadj
1
Incroyable, initialne m'est jamais venu à l'esprit!
BenjaminRH
9
initialn'est pris en charge dans aucune version d'IE msdn.microsoft.com/en-us/library/…
lulalala
12

Selon la documentation, la plupart des navigateurs afficheront les éléments <ul>, <ol>et <li>avec les valeurs par défaut suivantes:

Paramètres CSS par défaut pour la balise 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;
}

Paramètres CSS par défaut pour la balise LI :

li { 
    display: list-item;
}

Style également des éléments de liste imbriqués:

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

Remarque: Le résultat sera parfait si nous utilisons les styles ci-dessus avec une classe. Voir également différents marqueurs d' élément de liste .

Reza Mamun
la source
Si tel était le cas, la liste imbriquée aura une marge supérieure et inférieure ajoutée avec tout nouveau niveau.
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
la source
1
merci m'a sauvé la vie, je me demandais pourquoi diable il y avait du rembourrage dans mon sous-menu.
Asura
Cela ajoutera vertical.margij sur n'importe quelle liste imbriquée.
VorganHaze
4

Vous ne pouvez pas. Chaque fois qu'une feuille de style est appliquée qui attribue une propriété à un élément, il n'y a aucun moyen d'accéder aux paramètres par défaut du navigateur, quelle que soit l'instance de l'élément.

L'idée (discutable) de reset.css est de se débarrasser des paramètres par défaut du navigateur, afin que vous puissiez commencer votre propre style à partir d'un bureau propre. Aucune version de reset.css ne le fait complètement, mais dans la mesure où ils le font, l'auteur utilisant reset.css est censé définir complètement le rendu.

Jukka K. Korpela
la source
2

Vous réinitialisez la marge sur tous les éléments du deuxième bloc css. La marge par défaut est de 40 pixels - cela devrait résoudre le problème:

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

Une réponse pour le futur: CSS 4 contiendra probablement le mot-clé revert, qui ramène une propriété à sa valeur à partir de la feuille de style de l'utilisateur ou de l'agent utilisateur [ source ]. Au moment d'écrire ceci, seul Safari prend en charge cela - vérifiez ici les mises à jour sur la prise en charge du navigateur.

Dans votre cas, vous utiliseriez:

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

Voir aussi cette autre réponse avec plus de détails.

Tanius
la source