Co to jest domyślny styl listy (CSS)?

91

Na swojej stronie używam reset.css. Dodaje dokładnie to do listy stylów:

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

Problem polega na tym, że wszystkie style list są ustawione na NONEto. Chcę przywrócić oryginalne style list (domyślne) dla wszystkich list tylko na podstronach witryny (wszystkie listy w .my_container).

Przy próbie ustawienia rzeczy, jak list-style-typena inheritto nie dziedziczy style domyślne w przeglądarce tylko dla tej właściwości CSS.

Czy istnieje sposób na odziedziczenie oryginalnych stylów przeglądarki dla niektórych właściwości bez modyfikowania reset.css?

html css html-lists

— Atadj
źródło

4

reset.css to jeden z najgorszych anty-wzorców w projektowaniu stron internetowych.

— ᆼ ᆺ ᆼ

9

Zamiast pełnego resetowania arkusza stylów, rozważ coś takiego jak github.com/necolas/normalize.css, który ustawia rozsądne wartości domyślne dla wszystkich elementów. W ten sposób zaczynasz od linii bazowej we wszystkich przeglądarkach i możesz z niej budować. Nie musisz też dodawać dodatkowego kodu, aby wrócić do ustawień domyślnych!

— Olly Hodgson,

1

@OllyHodgson Tak, ale mam konkretne powody, dla których chcę używać reset.css. Muszę wyczyścić jak najwięcej stylu i chcę to przepisać - nie na odwrót :)

— Atadj

1

Jeśli chcesz je usunąć i przepisać, jaki jest sens tego pytania? O ile widzę, masz dwie opcje: 1) w szczególności unikaj resetowania stylów list, aby zachować domyślne, 2) zresetuj je i wymyśl własne style list.

— BoltClock

1

@BoltClock - Tylko dla wyjaśnienia - chcę dać użytkownikom możliwość zbudowania własnej listy od podstaw (dodałem klasę dla każdego możliwego stylu) - zastanawiałem się tylko, czy jest coś takiego jak ustawienie „domyślne”, ale ponieważ nie ma żadnego domyślna stylizacja - po prostu ją utworzę.

— Atadj

149

Kiedyś ustawiłem ten CSS, aby usunąć 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; 
}

EDYCJA: oczywiście z określoną klasą ...

— zessx
źródło

Na razie działa tak, jak powinno :) Myślę, że to rozwiązuje moje pytanie. Mam zamiar przetestować to teraz bardziej z zagnieżdżonymi listami itp.

— Atadj

6

Nie „przywraca oryginalnych stylów list (domyślne)”. Po prostu wyznacza pewne style.

— Jukka K. Korpela

Zgadzam się, ale bez względu na sposób, celem było tylko ustalenie stylu. Ten CSS daje dość podstawowy styl listom, nie więcej.

— zessx

3

Nie ma opcji „domyślnej” dla typu listy i dowiedziałem się, że po uzyskaniu odpowiedzi. Przeglądarki po prostu dodają kilka stylów, które często nie są spójne między przeglądarkami.

— Atadj

1

Miałem też kogoś ustawić wyświetlanie: inline-block; i wygląda na to, że musi być elementem listy, aby punktory były ponownie wyświetlane.

— Mark

33

Myślę, że właśnie tego szukasz:

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

.my_container li
{
    display: list-item;
}

— Zimno zimno
źródło

Tak, myślę, że ta odpowiedź też jest ważna. inheritdziedziczy style z kontenerów nadrzędnych i nie ustawia ich na domyślne wartości przeglądarki. initialczy to (dowiedziałem się o jego istnieniu później), ale czy jesteś tego pewien ul { list-style: initial; }i ol { list-style: initial; }przyniesie ważny wynik? Czy nie jest ustawiony list-stylena wartość początkową, niezależnie od elementu, do którego jest stosowany? Czy initialwartość nie będzie disc outside nonedotyczyła obu typów list?

— Atadj

1

Niesamowite, initialnigdy nie przyszło mi do głowy!

— BenjaminRH

9

initialnie jest obsługiwane w żadnej wersji IE msdn.microsoft.com/en-us/library/…

— lulalala

12

Zgodnie z dokumentacją większość przeglądarek wyświetli elementy <ul>, <ol>i <li>z następującymi wartościami domyślnymi:

Domyślne ustawienia CSS dla tagu UL lub OL :

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

Domyślne ustawienia CSS dla tagu LI :

li { 
    display: list-item;
}

Stylizuj również zagnieżdżone elementy listy:

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

Uwaga: Wynik będzie doskonały, jeśli użyjemy powyższych stylów z klasą. Zobacz także różne znaczniki pozycji listy .

— Reza Mamun
źródło

W takim przypadku zagnieżdżona lista będzie miała górny i dolny margines dodany z każdym nowym poziomem.

— 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
źródło

1

dzięki uratował mi życie, zastanawiałem się, dlaczego do cholery jest tam wyściółka w moim podmenu.

— Asura

Spowoduje to dodanie vertical.margij do każdej zagnieżdżonej listy.

— VorganHaze

4

Nie możesz. Za każdym razem, gdy stosowany jest arkusz stylów, który przypisuje właściwość do elementu, nie ma sposobu, aby przejść do ustawień domyślnych przeglądarki dla dowolnego wystąpienia elementu.

(Dyskusyjną) ideą reset.css jest pozbycie się domyślnych ustawień przeglądarki, abyś mógł rozpocząć własną stylizację z czystego biurka. Żadna wersja reset.css nie robi tego całkowicie, ale w takim zakresie, w jakim robią, autor używający reset.css powinien całkowicie zdefiniować renderowanie.

— Jukka K. Korpela
źródło

2

Resetujesz margines na wszystkich elementach w drugim bloku css. Domyślny margines to 40 pikseli - to powinno rozwiązać problem:

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

— OmidAntiLong
źródło

1

Odpowiedź na przyszłość: CSS 4 prawdopodobnie będzie zawierał słowo kluczowe revert, które przywraca właściwość do jej wartości z arkusza stylów użytkownika lub klienta użytkownika [ źródło ]. W chwili pisania tego tekstu obsługuje to tylko Safari - sprawdź tutaj aktualizacje dotyczące obsługi przeglądarek.

W twoim przypadku użyłbyś:

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

Zobacz także tę inną odpowiedź z kilkoma szczegółami.

— taniusz
źródło