web-dev-qa-db-fra.com

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

Sur mon site, j'utilise reset.css. Il ajoute exactement ceci à la liste des 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 ont pour valeur NONE. Je souhaite rétablir les styles de liste d'origine (par défaut) pour toutes les listes des sous-pages de site Web uniquement (toutes les listes de .my_container).

Quand j'essaie de régler des choses comme list-style-type à inherit n’hérite 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?

htmlcsshtml-lists
82
Atadj

J'avais l'habitude de définir cette 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 un cours spécifique de cours ...

129
zessx

Je pense que c'est ce que vous recherchez:

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

.my_container li
{
    display: list-item;
}
31
ColdCold

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

Paramètres CSS par défaut pour UL ou OL tag: 

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 LI tag: 

li { 
    display: list-item;
}

Style les éléments de liste imbriqués ainsi: 

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 aussi différents List-Item marqueurs.

10
Reza Mamun

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

Vous ne pouvez pas. Chaque fois qu'une feuille de style appliquée attribuant une propriété à un élément, il n'existe aucun moyen d'obtenir les valeurs par défaut du navigateur, pour aucune instance de l'élément.

L'idée (contestable) de reset.css est de supprimer les paramètres par défaut du navigateur afin de pouvoir lancer 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.

4
Jukka K. Korpela

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

Une réponse pour l'avenir: CSS 4 contiendra probablement le mot-clé revert, qui rétablit la valeur d'une propriété à partir de la feuille de style utilisateur ou agent utilisateur [ source ]. Au moment de la rédaction de cet article, seul Safari le prend en charge - cochez cette case pour les mises à jour relatives à 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 quelques détails supplémentaires.

0
tanius