Che cos'è lo stile di elenco predefinito (CSS)?

91

Sul mio sito web utilizzo reset.css. Aggiunge esattamente questo agli stili di elenco:

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

Il problema è che tutti gli stili di elenco sono impostati NONEcon questo. Voglio ripristinare gli stili di elenco originali (impostazione predefinita) per tutti gli elenchi solo nelle pagine secondarie del sito Web (tutti gli elenchi in .my_container).

Quando provo impostazioni cose come list-style-typeper inheritè non eredita gli stili predefiniti del browser solo per questa proprietà CSS.

Esiste un modo per ereditare gli stili del browser originale per determinate proprietà senza modificare reset.css?

html css html-lists

— Atadj
fonte

4

reset.css è uno dei peggiori anti-pattern nel web design.

— ᆼ ᆺ ᆼ

9

Piuttosto che un foglio di stile di ripristino completo, considera qualcosa come github.com/necolas/normalize.css che imposta valori predefiniti ragionevoli per tutti gli elementi. In questo modo, inizi con una linea di base su tutti i browser e puoi partire da lì. Inoltre, non è necessario aggiungere codice extra per tornare alle impostazioni predefinite!

— Olly Hodgson

1

@OllyHodgson Sì, ma ho motivi specifici per cui voglio utilizzare reset.css. Ho bisogno di chiarire quanto più stile possibile e voglio riscriverlo, non il contrario :)

— Atadj

1

Se vuoi cancellarli e riscriverli, qual è il punto di questa domanda? Per quanto posso vedere hai due opzioni: 1) evita specificamente di reimpostare gli stili di elenco in modo da mantenere i valori predefiniti 2) ripristinarli e creare i tuoi stili di elenco.

— BoltClock

1

@BoltClock - Solo per chiarire - Voglio dare agli utenti l'opportunità di costruire il proprio elenco da zero (ho aggiunto una classe per ogni possibile stile) - Mi stavo solo chiedendo se esiste qualcosa come l'impostazione "predefinita" ma poiché non ce n'è stile predefinito: ne creerò solo uno.

— Atadj

149

Ho usato per impostare questo CSS per rimuovere il ripristino:

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: con una classe specifica ovviamente ...

— zessx
fonte

Finora funziona come dovrebbe :) Penso che questo risolva la mia domanda. Lo

— testerò di

6

Non "ripristina gli stili di elenco originali (impostazione predefinita)". Imposta solo alcuni stili.

— Jukka K. Korpela

Sono d'accordo, ma qualunque sia il modo, l'obiettivo era solo quello di impostare un certo stile. Questo CSS fornisce uno stile piuttosto semplice agli elenchi, non di più.

— zessx

3

Non esiste un'opzione "predefinita" per il tipo in stile elenco e l'ho scoperto dopo aver ottenuto le risposte. I browser aggiungono solo alcuni stili che spesso non sono coerenti tra i browser.

— Atadj

1

Ho anche chiesto a qualcuno di impostare display: inline-block; e sembra che debba essere una voce di elenco per mostrare di nuovo i proiettili.

— Mark

33

Penso che questo sia effettivamente quello che stai cercando:

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

.my_container li
{
    display: list-item;
}

— Freddo freddo
fonte

Sì, penso che anche questa risponda a qualcosa di importante. inheriteredita gli stili dai contenitori principali e non li imposta sui valori predefiniti del browser. initialfa questo (ho scoperto la sua esistenza più tardi) ma sei sicuro che ul { list-style: initial; }e ol { list-style: initial; }produrrà un risultato valido? Non si imposta list-styleal suo valore iniziale indipendentemente dall'elemento a cui è applicato? Il initialvalore non sarà disc outside noneper entrambi i tipi di elenchi?

— Atadj

1

Incredibile, initialnon mi è mai venuto in mente!

— BenjaminRH

9

initialnon è supportata in tutte le versioni di IE msdn.microsoft.com/en-us/library/...

— lulalala

12

Secondo la documentazione, la maggior parte dei browser visualizzerà il file <ul> elementi , <ol>e <li>con i seguenti valori predefiniti:

Impostazioni CSS predefinite per UL o OL tag :

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

Impostazioni CSS predefinite per LI tag :

li { 
    display: list-item;
}

Definisci anche lo stile degli elementi dell'elenco nidificato:

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

Nota: il risultato sarà perfetto se usiamo gli stili precedenti con una classe. Vedi anche diversi marcatori di voci di elenco .

— Reza Mamun
fonte

In tal caso, l'elenco nidificato avrà un margine superiore e inferiore aggiunto con qualsiasi nuovo livello.

— 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

grazie mi ha salvato la vita, mi chiedevo perché diavolo c'era imbottitura nel mio sottomenu.

— Asura

Questo aggiungerà vertical.margij a qualsiasi elenco nidificato.

— VorganHaze

4

Non puoi. Ogni volta che viene applicato un foglio di stile che assegna una proprietà a un elemento, non c'è modo di accedere alle impostazioni predefinite del browser, per qualsiasi istanza dell'elemento.

L'idea (discutibile) di reset.css è di sbarazzarsi delle impostazioni predefinite del browser, in modo da poter iniziare il proprio stile da una scrivania pulita. Nessuna versione di reset.css lo fa completamente, ma nella misura in cui lo fanno, l'autore che usa reset.css dovrebbe definire completamente il rendering.

— Jukka K. Korpela
fonte

2

Stai ripristinando il margine su tutti gli elementi nel secondo blocco CSS. Il margine predefinito è 40 px: questo dovrebbe risolvere il problema:

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

— OmidAntiLong
fonte

1

Una risposta per il futuro: CSS 4 conterrà probabilmente la parola chiave revert, che ripristina il valore di una proprietà dal foglio di stile utente o user-agent [ sorgente ]. Al momento in cui scrivo, solo Safari lo supporta: controlla qui per gli aggiornamenti sul supporto del browser.

Nel tuo caso useresti:

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

Vedi anche quest'altra risposta con qualche dettaglio in più.

— tanius
fonte