Pytanie Czym jest domyślna stylizacja list (CSS)?


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

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 listy są ustawione na NONE z tym. Chcę przywrócić oryginalne style listy (domyślne) dla wszystkich list tylko na podstronach witryny (wszystkie listy w .my_container).

Kiedy próbuję ustawień takich jak list-style-type do inherit nie dziedziczy domyślnych stylów przeglądarki tylko dla tej właściwości CSS.

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


76
2017-07-31 09:42


pochodzenie


Urgh ... resetuje ... dreszcz. - Utkanos
reset.css jest jednym z najgorszych anty-wzorców w projektowaniu stron internetowych. - Peter V
Zamiast pełnego arkusza stylów resetowania, rozważ coś w stylu 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ć. Ponadto nie trzeba dodawać dodatkowego kodu, aby przywrócić ustawienia domyślne! - Olly Hodgson
@OllyHodgson Tak, ale mam określone powody, dla których chcę użyć reset.css. Muszę rzeczywiście usunąć jak najwięcej stylu i chcę go ponownie napisać - nie odwrotnie :) - Atadj
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 listy, aby zachować wartości domyślne 2) zresetuj je i wymyśl własne style list. - BoltClock♦


Odpowiedzi:


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: z określoną klasą oczywiście ...


117
2017-07-31 09:47



Jak na razie działa tak, jak powinien :) Myślę, że to rozwiązuje moje pytanie. Zamierzam przetestować to teraz bardziej z zagnieżdżonymi listami itp. - Atadj
Nie "przywraca oryginalnych stylów listy (domyślnie)". Po prostu się ustawia trochę style. - Jukka K. Korpela
Zgadzam się, ale niezależnie od tego, celem było ustalenie jakiegoś stylu. Ten styl CSS daje całkiem prosty styl list, nic więcej. - zessx
Nie ma opcji "domyślnej" dla typu listy i dowiedziałem się, że po otrzymaniu odpowiedzi. Przeglądarki po prostu dodają pewne style, które często nie są spójne między przeglądarkami. - Atadj
Miałem też wyświetlacz zestawu osób: blok inline; i wygląda na to, że musi to być element list, aby ponownie wyświetlać punktory. - Mark


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

30
2018-04-18 00:12



Tak, myślę, że ta odpowiedź również jest ważna. inherit dziedziczy style z kontenerów nadrzędnych i nie ustawia ich na domyślne wartości przeglądarki. initial robi to (dowiedziałem się o jego istnieniu później), ale jesteś tego pewien ul { list-style: initial; } i ol { list-style: initial; } da prawidłowy wynik? Czy to nie jest ustawione list-style do jego wartości początkowej, niezależnie od elementu, do którego jest stosowana? Czy nie initial wartość być disc outside none dla obu rodzajów list? - Atadj
Niesamowity, initial nigdy mi nie przyszło! - BenjaminRH
initial nie jest obsługiwany w żadnej wersji IE msdn.microsoft.com/en-us/library/... - lulalala


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
2017-12-22 18:58



dzięki uratowałem mi życie, zastanawiałem się, dlaczego w moim podmenu jest piekło. - Asura


Zgodnie z dokumentacją większość przeglądarek wyświetla <ul>, <ol> i <li> elementy o następujących wartościach domyślnych:

Domyślne ustawienia CSS dla UL lub OL etykietka:

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

li { 
    display: list-item;
}

Elementy listy zagnieżdżonych stylów również:

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 idealny, jeśli użyjemy powyższych stylów z klasą. Zobacz także inne Element listy markery.


6
2017-12-17 09:53





Nie możesz. Ilekroć istnieje jakikolwiek zastosowany arkusz stylów, który przypisuje właściwość do elementu, nie ma możliwości dostępu do domyślnych ustawień przeglądarki dla każdej instancji elementu.

(Dyskusyjna) idea reset.css polega na pozbyciu się domyślnych ustawień przeglądarki, aby można było rozpocząć własną stylizację od czystego biurka. Żadna wersja reset.css nie robi tego całkowicie, ale do tego stopnia, że ​​autor używa reset.css ma całkowicie zdefiniuj rendering.


4
2017-07-31 13:50





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

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

2
2017-07-31 09:52





Odpowiedź na przyszłość: CSS 4 prawdopodobnie zawiera zwrotne słowo kluczowe, które przywraca właściwość do jej wartości z arkusza stylów użytkownika lub arkusza klienta użytkownika [źródło]. Pisząc to, tylko Safari obsługuje to - Sprawdź tutaj o aktualizacje dotyczące obsługi przeglądarki.

W twoim przypadku użyjesz:

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

Zobacz też ta inna odpowiedź z kilkoma dodatkowymi szczegółami.


0
2017-12-17 18:46