Wszystkie elementy strony HTML domyślnie mają własne zdefiniowane wartości. I niestety nie są one traktowane jednakowo przez różne przeglądarki. W rezultacie cierpi na tym projekt strony, jej wygląd zmienia się po zmianie przeglądarki (przeglądarki internetowej). Celem procedury resetowania stylu jest zmniejszenie niespójności przeglądarki w takich kwestiach, jak wysokość linii, marginesy, rozmiary czcionek nagłówka itp.

Przykłady skryptów resetowania CSS

Istnieje opinia, że ​​każdy szanujący się webmaster powinien napisać własny kod resetowania CSS. Ale jestem zwolennikiem innego podejścia, biorę gotowe rozwiązanie, rozumiem je iw razie potrzeby poprawiam.

Reset CSS Erica Meyera

Scenariusz resetu autorstwa Erica Meyera, według samego autora, jest celowo bardzo ogólny. Na przykład nie ustawia żadnego domyślnego koloru tła dla elementu body. Dlatego należy go modyfikować, edytować, rozszerzać i w inny sposób dostosowywać do własnych potrzeb. Dodaj żądane kolory dla stron, linków i tak dalej.

/* http://meyerweb.com/eric/tools/css/reset/v2.0 | 20110126 Licencja: brak (domena publiczna) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, skrót, akronim, adres, duży, cytuj, kod, del, dfn, em, img, ins, kbd, q, s, samp, mały, strajk, silny, sub, sup, tt, var, b, u, ja, centrum, dl, dt, dd, ol, ul, li, fieldset, formularz, etykieta, legenda, tabela, podpis, tbody, tfoot, thead, tr, th, td, artykuł, na bok, płótno, szczegóły, embed, rysunek, figcaption, stopka, nagłówek, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video ( margines: 0; padding: 0; border: 0; font-size: 100%; font: dziedziczenie; vertical-align: baseline ; ) /* Resetowanie roli wyświetlania HTML5 dla starszych przeglądarek */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section ( display: block; ) body ( line-height: 1; ) ol, ul (list-style: brak; ) blockquote, q ( cudzysłowy: brak; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) table ( border- zwinąć:c upadek; odstępy między obramowaniami: 0; )

Wieśniak! (YUI 3) Zresetuj CSS

YUI 3 CSS Style Reset łagodzi konflikty stylów elementów HTML przez przeglądarki, tak jak każdy inny skrypt resetowania CSS, aby stworzyć solidną podstawę do tworzenia stron internetowych i aplikacji internetowych.

/* YUI 3.18.1 Prawa autorskie 2014 Yahoo! Inc. Wszelkie prawa zastrzeżone. Licencjonowane na podstawie licencji BSD. http://yuilibrary.com/license/ */ /* TODO będzie musiało usunąć ustawienia HTML, ponieważ nie możemy go umieścić w przestrzeni nazw. TODO z prefiksem, czy powinienem grupować według selektora lub właściwości, aby zmniejszyć wagę? */ html( color:#000; background:#FFF; ) /* TODO usuń ustawienia z BODY, ponieważ nie możemy ich nazwać. */ /* Test TODO umieszczając klasę na HEAD. - Zawodzi na FF. */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td ( margin:0; padding:0; ) table ( border-collapse:collapse; border-spacing:0; ) fieldset, img ( border:0; ) /* TODO pomyśl o innej obsłudze dziedziczenia, być może pozwól IE6 trochę zawieść ... */ adres, podpis, cytuj, kod, dfn, em, strong, th, var ( styl czcionki:normalny; waga czcionki:normalny; ) ol, ul ( styl listy: brak; ) podpis, th ( text-align:left; ) h1, h2, h3, h4, h5, h6 ( font-size:100%; font-weight:normal; ) q:before, q:after ( content:""; ) abbr, akronim ( border:0; font-variant:normal; ) /* aby zachować wysokość linii i wygląd selektora */ sup ( vertical-align:text-top; ) sub ( vertical-align:text-bottom; ) input, textarea , wybierz ( font-family:inherit; font-size:inherit; font-weight:inherit; *font-size:100%; /*aby włączyć zmianę rozmiaru dla IE*/ ) /*ponieważ legenda nie dziedziczy w IE * / legend ( color:#000; ) /* YUI CSS Detect ion Stamp */ #yui3-css-stamp.cssreset ( wyświetlanie: brak; )

Zresetuj style normalize.css

Normalize.css to niestandardowy plik CSS, który umożliwia przeglądarkom renderowanie wszystkich elementów w bardziej spójny sposób i zgodnie z nowoczesnymi standardami. Jego autorzy zbadali różnice między domyślnymi stylami różnych przeglądarek, aby poprawić tylko te style, które wymagają normalizacji.

/*! normalize.css v6.0.0 | Licencja MIT | github.com/necolas/normalize.css */ /* Dokument ==================================== = ==================================== */ /** * 1. Popraw wysokość linii we wszystkich przeglądarki. * 2. Zapobiegaj zmianom rozmiaru czcionki po zmianie orientacji w * IE włączony Telefon Windows oraz w iOS. */ html ( line-height: 1.15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ ) /* Sekcje ============================================= == ========================= */ /** * Dodaj poprawny wyświetlacz w IE 9-. */ article, aside, footer, header, nav, section ( display: block; ) /** * Popraw rozmiar czcionki i marginesy w elementach `h1` w kontekstach `section` i * `article` w Chrome, Firefox i safari. */ h1 ( font-size: 2em; margin: 0.67em 0; ) /* Grupowanie treści ============================ = ===========================================*/ /** * Dodaj poprawne wyświetlanie w IE 9-. * 1. Dodaj poprawny wyświetlacz w IE. */ figcaption, rysunek, główny ( /* 1 */ display: block; ) /** * Dodaj poprawny margines w IE 8. */ rysunek ( margines: 1em 40px; ) /** * 1. Dodaj poprawne pole zmiany rozmiaru w Firefoksie. * 2. Pokaż przepełnienie w Edge i IE. */ hr ( box-size: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ ) /** * 1. Popraw dziedziczenie i skalowanie rozmiaru czcionki we wszystkich przeglądarkach. * 2. Popraw nieparzysty rozmiar czcionki `em` we wszystkich przeglądarkach. */ pre ( font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ ) /* Semantyka na poziomie tekstu =============== ========================================================= = ======== */ /** * 1. Usuń szare tło aktywnych linków w IE 10. * 2. Usuń luki w podkreślonych linkach w iOS 8+ i Safari 8+. */ a ( background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ ) /** * 1. Usuń dolną ramkę w Chrome 57- i Firefox 39- . * 2. Dodaj poprawne dekoracja tekstu w Chrome, Edge, IE, Opera i Safari. */ abbr ( border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ ) /** * Zapobiega zduplikowanej aplikacji `bolder ` przez następną regułę w Safari 6. */ b, strong ( font-weight: inherit; ) /** * Dodaj poprawną grubość czcionki w Chrome, Edge i Safari. */ b, strong ( font-weight: bolder; ) /** * 1. Popraw dziedziczenie i skalowanie rozmiaru czcionki we wszystkich przeglądarkach. * 2. Popraw nieparzysty rozmiar czcionki `em` we wszystkich przeglądarkach. */ code, kbd, samp ( font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ ) /** * Dodaj poprawny styl czcionki w Androidzie 4.3-. */ dfn ( font-style: italic; ) /** * Dodaj poprawne tło i kolor w IE 9-. */ mark ( background-color: #ff0; color: #000; ) /** * Dodaj poprawny rozmiar czcionki we wszystkich przeglądarkach. */ small ( font-size: 80%; ) /** * Zapobieganie wpływowi elementów `sub` i `sup` na wysokość linii we wszystkich * przeglądarkach. */ sub, sup ( font-size: 75%; line-height: 0; position: względne; vertical-align: baseline; ) sub ( bottom: -0,25em; ) sup ( top: -0,5em; ) /* Osadzone treści ======================================== == ======================== */ /** * Dodaj poprawny wyświetlacz w IE 9-. */ audio, wideo ( display: inline-block; ) /** * Dodaj poprawny wyświetlacz w iOS 4-7. */ audio:not() ( display: none; height: 0; ) /** * Usuń obramowanie obrazków wewnątrz linków w IE 10. */ img ( border-style: none; ) /** * Ukryj przepełnienie w IE. */ svg:not(:root) ( overflow: hidden; ) /* Formularze =============================== = ========================================= */ /** * Usuń margines w Firefoksie i Safari. */ button, input, optgroup, select, textarea ( margin: 0; ) /** * Pokaż przepełnienie w IE. * 1. Pokaż przepełnienie w Edge. */ przycisk, input ( /* 1 */ overflow: visible; ) /** * Usuń dziedziczenie transformacji tekstu w Edge, Firefox i IE. * 1. Usuń dziedziczenie transformacji tekstu w Firefoksie. */ przycisk, wybierz ( /* 1 */ text-transform: none; ) /** * 1. Zapobiegaj błędom WebKit, gdzie (2) niszczy natywne kontrolki `audio` i `video` * w Androidzie 4. * 2. Popraw brak możliwości stylizacji typów klikalnych w iOS i Safari. */ button, html , /* 1 */ , ( -webkit-appearance: button; /* 2 */ ) /** * Usuń wewnętrzne obramowanie i dopełnienie w Firefoksie. */ button::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner ( styl obramowania: brak; dopełnienie: 0; ) /** * Przywróć style fokusa nieustawione przez poprzednią regułę. */ button:-moz-focusring, :-moz-focusring, :-moz-focusring, :-moz-focusring ( zarys: 1px z kropkami ButtonText; ) /** * 1. Popraw zawijanie tekstu w Edge i IE. * 2. Popraw dziedziczenie kolorów z elementów `fieldset` w IE. * 3. Usuń dopełnienie, aby programiści nie zostali złapani, gdy * wyzerują elementy `fieldset` we wszystkich przeglądarkach. */ legend ( box-size: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0 ; /* 3 */ white-space: normal; /* 1 */ ) /** * 1. Dodaj poprawny wyświetlacz w IE 9-. * 2. Dodaj prawidłowe wyrównanie w pionie w Chrome, Firefox i Opera. */ progress ( display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ ) /** * Usuń domyślny pionowy pasek przewijania w IE. */ textarea ( overflow: auto; ) /** * 1. Dodaj właściwy rozmiar pola w IE 10. * 2. Usuń dopełnienie w IE 10-. */ , ( box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ ) /** * Popraw styl kursora przycisków zwiększania i zmniejszania w Chrome. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button (wysokość: auto; ) /** * 1. Popraw dziwny wygląd w Chrome i Safari. * 2. Popraw styl konturu w Safari. */ ( -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ ) /** * Usuń wewnętrzne dopełnienie i przyciski anulowania w Chrome i Safari na macOS. */ ::-webkit-search-cancel-button, ::-webkit-search-decoration ( -webkit-appearance: none; ) /** * 1. Popraw brak możliwości stylizacji klikalnych typów w iOS i Safari. * 2. Zmień właściwości czcionki na „dziedziczyć” w Safari. */ ::-webkit-file-upload-button ( -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ ) /* Interactive ============ ========================================================= = =========== */ /* * Dodaj poprawny wyświetlacz w IE 9-. * 1. Dodaj prawidłowy wyświetlacz w Edge, IE i Firefox. */ szczegóły, /* 1 */ menu ( display: block; ) /* * Dodaj poprawne wyświetlanie we wszystkich przeglądarkach. */ summary ( display: list-item; ) /* Skrypty ==================================== = ==================================== */ /** * Dodaj poprawny wyświetlacz w IE 9- . */ canvas ( display: inline-block; ) /** * Dodaj poprawny ekran w IE. */ szablon ( wyświetl: brak; ) /* Ukryty ==================================== == ================================== */ /** * Dodaj poprawny wyświetlacz w IE 10- . */ ( Nie wyświetla się; )

Resetuj za pomocą przełącznika uniwersalnego * (gwiazdka)

Na pierwszy rzut oka może się to wydawać najprostszym i najskuteczniejszym rozwiązaniem, po co opisywać wszystkie elementy HTML i przypisywać im wartości, skoro można użyć selektora *, ponieważ dotyczy on wszystkich HTML.

* ( margines: 0; dopełnienie: 0; )

Ale niestety nie jest to dobra praktyka. Jest bardzo trudne (i czasochłonne w porównaniu z innymi resetami CSS) dla przeglądarki, aby zastosować reguły do ​​każdego elementu w dokumencie, zwłaszcza na dużych stronach internetowych, a także może złamać wiele dobrych domyślnych stylów.

Zresetuj style i WordPress

Jeśli chcesz skorzystać z jednego z powyższe metody zresetuj style CSS dla witryny WordPress, możesz to zrobić na dwa sposoby.

Po pierwsze, musisz skopiować kod resetowania na górę pliku style.css. Motywy WordPress(po linijkach o autorstwie i tytule tematu, czyli po tekście otoczonym ułamkiem i gwiazdką /* ... */.

@import "reset.css";

Jeśli w CSS istnieje dyrektywa @import, powinna ona znajdować się na samym początku tabeli (przed wszystkimi regułami). W przeciwnym razie przeglądarka może to zignorować.

Z drugiej strony, aby poprawić wydajność, Tabele CSS style z reguły są łączone w jeden plik. Dlatego używanie @import bez rzeczywistej potrzeby nie jest tego warte.

Jak widać, resetowanie stylów w WordPressie nie jest niczym specjalnym.

Dziękuję

W pisaniu tego artykułu wykorzystano następujące źródła.

Domyślnie przeglądarka ustawia własne ustawienia dla niektórych właściwości w css. Problem polega jednak na tym, że istnieje wiele przeglądarek internetowych i każdy może ustalać własne zasady. Jakie rozwiązanie? Dowiedz się, jak zresetować ustawienia CSS do domyślnych i zastąpić je własnymi. Ale ten artykuł będzie poświęcony temu, jak można to zrobić.

Resetowanie CSS lub resetowanie ustawień domyślnych

CSS Reset to zestaw stylów, które resetują niektóre parametry, zainstalowany przez przeglądarkę domyślna. Każdy web developer pisze ten plik dla siebie indywidualnie, a ktoś bierze gotowe rozwiązanie. Od tego proponuję zacząć. Istnieje wiele dobrych opcji resetowania stylu, ale moją ulubioną jest ta autorstwa Erica Meyera:

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
Licencja: brak (domena publiczna)
*/
html, ciało, div, span, aplet, obiekt, iframe,
h1, h2, h3, h4, h5, h6, p, cytat blokowy, pre,
a, skrót, akronim, adres, duży, zacytować, kod,
del, dfn, em, img, ins, kbd, q, s, samp,
mały, strajk, silny, sub, sup, TT, Var,
b, ty, ja, centrum,
DL, DT, DD, OL, ul, LI,
zestaw pól, formularz, etykieta, legenda,
stół, podpis, tbody, tfoot, thead, tr, th, TD,
artykuł, na bok, płótno, szczegóły, osadzić,
rysunek, figcaption, stopka, nagłówek, hgroup,
menu, nawigacja, wyjście, rubin, sekcja, podsumowanie,
czas, znak, dźwięk, wideo (
margines: 0;
wypełnienie: 0;
granica: 0;
rozmiar czcionki: 100%
czcionka: dziedziczenie;
wyrównanie w pionie: linia bazowa;
}
/* Resetowanie roli wyświetlania HTML5 w starszych przeglądarkach */
artykuł, na boku, szczegóły, figcaption, rysunek,
stopka, nagłówek, hgroup, menu, nav, sekcja (
Blok wyświetlacza;
}
ciało (
wysokość linii: 1;
}
ol, ul (
styl listy: brak;
}
cytat blokowy, q (
cytaty: brak;
}
cytat:przed, cytat:po,
q:przed, q:po (
zawartość: "";
treść: brak;
}
stół (
border-collapse: zwiń;
odstępy między obramowaniami: 0;
}

Trochę skomentuję kod. Po pierwsze, resetuje wewnętrzne i zewnętrzne marginesy dla wszystkich niezbędnych elementów. Po drugie, istnieje wsparcie dla elementów HTML5. Posiadają regułę, która pozwoli im poprawnie wyświetlać się w niektórych wersjach przeglądarek. Po trzecie, typowe ustawienia dla wygodna obsługa z tabelami (usunięte wcięcia między komórkami i podwójnymi obramowaniami). Zrezygnowano również ze standardowych znaczników dla list i cytatów dla cytatów. Te części kodu powinny zostać usunięte, jeśli chcesz użyć domyślnego stylu.

Jak samodzielnie zresetować ustawienia CSS?

Mając mniej lub bardziej normalne posiadanie css, możesz sam spróbować napisać kilka reguł. Na przykład:

*{
margines: 0;
wypełnienie: 0;
}

To chyba najprostsze polecenie. Gwiazdka w tym przypadku reprezentuje wszystkie selektory, więc style zostaną zastosowane do wszystkich elementów na stronie internetowej, resetując ich marginesy i dopełnienie. Będziesz zaskoczony, ale te proste wiersze kodu mogą wystarczyć, aby zapewnić kompatybilność z różnymi przeglądarkami w wielu przeglądarkach internetowych. Wszystkie inne zasady można dodawać dowolnie. Polecam również dodanie display: block do wszystkich tagów HTML5.

Gdzie umieścić reguły resetowania CSS

Tutaj powyżej zaoferowałem ci kod, ale gdzie go wstawić? Są tu dwie opcje:

  • Wklej go na samym początku głównego arkusza stylów na swojej stronie
  • Utwórz nowy plik css na serwerze i zapisz w nim kod, a następnie zapisz i połącz się ze wszystkimi stronami ZANIM główna tabela style.css.

Aby uzyskać więcej informacji na temat łączenia arkusza stylów css z html, zobacz

Moim zdaniem druga opcja jest gorsza, ponieważ pogarsza wydajność dodając do pobrania jeden dodatkowy plik. Z drugiej strony łatwiej będzie Ci zarządzać tymi zasadami. Ale ze względu na wydajność polecam skorzystać z pierwszej opcji.

Zresetowanie ustawień jest jednym ze środków zapewniających kompatybilność witryny z różnymi przeglądarkami, czyli taki sam wyświetlacz w różnych przeglądarkach internetowych. Oczywiście to nie wszystkie środki, które zapewnią ten sam wygląd, o reszcie napiszę w przyszłości na tym blogu. Zapisz się, jeśli jesteś zainteresowany.

Ten artykuł jest pierwszym z serii o oswajaniu CSS. Dzisiaj przyjrzymy się technologii Resetowanie CSS.

Dlaczego jest to potrzebne?

Każda przeglądarka ustawia własne domyślne wartości stylu dla różnych elementów HTML. Z za pomocą CSS Zresetuj możemy wyrównać tę różnicę, aby zapewnić style w różnych przeglądarkach.

Na przykład używasz elementu a w twoim dokumencie. Większość przeglądarek lubi Internet Explorer i Firefox, dodaj link Kolor niebieski oraz podkreślenie. Wyobraź sobie jednak, że pięć lat później ktoś postanowił stworzyć nowa przeglądarka(nazwijmy to UltraBrowser). Twórcom przeglądarki nie spodobał się niebieski kolor, a podkreślenie było denerwujące, więc postanowili wyróżnić linki w czerwonym oraz pogrubienie. Właśnie na tej podstawie, jeśli ustawisz wartość stylu bazowego dla elementu a, gwarantuje to, że jest taki, jaki chcesz, a nie w taki sposób, w jaki programiści UltraBrowser wolą go wyświetlać.

Ale teraz nie mamy żadnych wcięć, w tym między poszczególnymi akapitami! Co robić? Nie kłam i nie bój się: poniżej naszego resetu opiszemy potrzebną nam zasadę. To może być zrobione różne sposoby: określ wcięcie pod lub nad akapitem, określ je w procentach, pikselach lub em.

Co najważniejsze, przeglądarka gra teraz według naszych zasad, a nie my według jego. Postanowiłem to zrobić tak:

* ( margines: 0; dopełnienie: 0; ) p ( margines: 5px 0 10px 0; )

W rezultacie otrzymaliśmy to, co widać w trzecim przykładzie.

Możesz tworzyć własne style resetowania, jeśli rozwiązujesz konkretny problem w swoim projekcie. Mimo to nie ma opis przejścia aby stworzyć własny reset CSS. Polegaj na własnych zasadach i własnym stylu.

Aby pomóc Ci dokonać właściwego wyboru, oto kilka dodatkowych linków:

  1. Mniej znaczy więcej - mój wybór Reset CSS (Ed Elliot).

2. Twój reset CSS jest pierwszą rzeczą, którą powinna zobaczyć przeglądarka

Resetowanie stylów po ustawieniu własnych stylów dla elementów nie jest właściwym podejściem. W takim przypadku niczego dobrego nie należy oczekiwać od wyświetlania przez przeglądarkę. Pamiętaj, że zawsze powinieneś najpierw uwzględnić CSS Reset, a następnie wszystkie inne style.

Tak, rozumiem, że to brzmiało śmiesznie, ale to jeden z głównych błędów deweloperów, młodych i starych. Wiele osób po prostu o tym zapomina.

Niektórzy mogą zadać logiczne pytanie: dlaczego tak się dzieje? Odpowiedź jest prosta: reguły zapisane w pliku CSS (a nawet w kolejności w dokumencie) zastępują reguły zadeklarowane wcześniej.

Nie odbiegajmy zbytnio od tematu i kontynuujmy. Zastosujmy do naszego przykładu style Erica Meyera, ale po opisy naszych nieruchomości, jak pokazano w przykładzie 4. Matematycy powiedzieliby, co następuje: „To było wymagane do udowodnienia”.

3. Użyj osobnego dokumentu CSS do resetowania CSS

Muszę (nie, nie byłem zmuszony) wspomnieć o tej radzie. Używanie oddzielnego pliku do resetowania CSS jest powszechną praktyką obsługiwaną przez duża liczba programiści.

W rzeczywistości przyjmuję pozycję tworzenia jeden duży plik CSS ze względu na wyższą wydajność tego podejścia. Ale w tej kwestii zgadzam się z większością: CSS Reset powinien zostać przeniesiony do osobnego pliku (zwykle o nazwie reset.css). W takim przypadku możesz go używać w różnych projektach bez żadnego wysiłku, aby oddzielić go od innych reguł CSS.

4. Staraj się unikać używania uniwersalnego selektora

Chociaż ta koncepcja działa, często nie jest pożądana ze względu na niezgodności z niektórymi przeglądarkami (na przykład ten selektor jest niepoprawnie obsługiwany w przeglądarce Internet Explorer). Tę technikę należy stosować tylko w przypadku prostych, małych, statycznych i przewidywalnych stron (jeśli trzeba).

Ta wskazówka jest szczególnie ważna, gdy tworzysz rozwiązania, takie jak motywy CMS. Nie możesz z góry przewidzieć, w jaki sposób będzie on używany i jak będzie modyfikowany. Lepiej opisać podstawowe reguły CSS dla wszystkich elementów, niż wykorzystać do tego nieprzewidywalny (choć mniejszy) mechanizm selektorów uniwersalnych.

5. Unikaj zbędnych opisów właściwości podczas korzystania z resetowania CSS

Innym powodem, dla którego nie lubię oddzielnego pliku CSS Reset, jest potencjalna nadmiarowość kolejnych deklaracji właściwości CSS. Powtarzanie Twoich indywidualnych stylów w całym zestawie plików CSS to złe maniery i należy ich unikać. Oczywiście czasami jesteśmy zbyt leniwi, aby żmudnie przeglądać zestaw stylów i łączyć niektóre z nich, ale powinniśmy przynajmniej spróbować!

Wróćmy do resetowania CSS Erica. Ustawia domyślne wartości wysokości linii, koloru i tła elementu ciało w następujący sposób:

body ( wysokość linii: 1; kolor: czarny; tło: białe; )

Powiedzmy, że już wiesz, jak będzie wyglądał dany element. ciało:
  1. kolor tła: #cccccc;
  2. kolor: #996633;
  3. Chcesz powtórzyć określony obraz tła w poziomie.

W takim przypadku nie ma potrzeby tworzenia nowego selektora do opisania swoich właściwości - wystarczy je dołączyć do resetowania CSS. Zróbmy to:

body ( line-height: 1; color: #996633; background:#ccc url(tile-image.gif) repeat-x u góry po lewej; )

Nie bój się modyfikować samego resetowania CSS. Dostosuj go dla siebie, spraw, aby działał dla Ciebie. Modyfikuj, przebudowuj, usuwaj i dodawaj zgodnie z potrzebami w konkretnym przypadku.

Eric Meyer powiedział na ten temat: „nie jest to przypadek, w którym każdy powinien używać CSS Reset bez zmian”.



CSS Domyślny CSS dla elementów HTML (2)

Każda przeglądarka jest inna, więc:

  • Firefox (gekon):. Lub przejdź do resource://gre-resources/ i spójrz na html.css .
  • Chrome/Safari (WebKit):
    • Chrom (mrugnięcie):
  • Internet Explorer (trójząb), wcześniejsze wersje: http://web.archive.org/web/20170122223926/http://www.iecss.com/

Gdzie mogę znaleźć CSS dla domyślnego CSS przeglądarki?

Wiele elementów HTML ma kilka właściwości CSS domyślnie, co może czasami prowadzić do nieznanego/niechcianego zachowania. Na przykład pola wprowadzania są wyświetlane inaczej w różne przeglądarki. Szukam miejsca, które obejmuje nowe właściwości CSS3 i nowe elementy HTML5.

Widziałem inne (znacznie starsze) pytania (takie jak domyślne arkusze stylów CSS w przeglądarkach), które oferują rozwiązanie resetowania CSS. To rozwiązanie czasami nie jest konieczne, często chciałbym zachować kilka podstawowych właściwości (np. podświetlanie pól wejściowych w Chrome). Innymi słowy: Nie chcę się pozbywać rzeczy tylko dlatego, że nie wiem, co robią .

Więc, czy istnieje strona, która może mi podać wszystkie te informacje (a może większość)?

Można znaleźć repozytorium GitHub dla wszystkich specyfikacji HTML W3C i domyślnych arkuszy stylów CSS dla programistów

1.

2. Standardowe style dla Internet Explorera

3.

4. Standardowe style dla Opery

5. Style standardowe dla HTML4 (specyfikacja W3C)

6. Standardowe style dla HTML5 (specyfikacja W3C)

Przykład, zgodnie z domyślną specyfikacją W3C HTML4:

html, adres, cytat blokowy, body, dd, div, dl, dt, fieldset, formularz, ramka, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre (wyświetlanie: blok; unicode-bidi: embed ) li (wyświetlanie: list-item) head (wyświetlanie: brak ) table (wyświetlanie: table) tr (wyświetlanie: table-row ) thead (wyświetlanie: table-header- group ) tbody ( wyświetl: grupa wierszy-tabeli ) tfoot ( wyświetl: grupa stopki-tabeli ) col ( wyświetl: kolumna-tabeli ) colgroup ( wyświetl: grupa kolumn-tabeli ) td, th ( wyświetl: komórka-tabeli ) caption ( display: table-caption ) th ( font-weight: bolder; text-align: center ) caption ( text-align: center ) body ( margin: 8px ) h1 ( font-size: 2em; margin: .67em 0 ) h2 (rozmiar czcionki: 1,5em; margines: .75em 0 ) h3 (rozmiar czcionki: 1,17em; margines: .83em 0 ) h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu ( margines: 1.12em 0 ) h5 ( wielkość czcionki: .83em; margines: 1.5em 0 ) h6 ( wielkość czcionki: .75em; margines: 1.67em 0 ) h1, h2, h3, h4, h5, h6, b, strong ( font-weight: bolder ) blockquote ( marg w lewo: 40px; margin-right: 40px ) i, cite, em, var, address ( styl czcionki: kursywa ) pre, tt, code, kbd, samp ( font-family: monospace ) pre ( spacja: pre ) button, textarea, input, select ( display: inline-block ) big ( rozmiar czcionki: 1,17em ) small, sub, sup ( rozmiar czcionki: .83em ) sub ( vertical-align: sub ) sup ( vertical-align: super ) table ( border-spacing: 2px; ) thead, tbody, tfoot ( vertical-align: middle ) td, th, tr ( vertical-align: dziedziczenie ) s, strike, del ( text-decoration: line-through ) hr ( border: 1px wstawka ) ol, ul, dir, menu, dd ( margines-lewy: 40px ) ol ( typ-listy: dziesiętny ) ol ul, ul ol, ul ul, ol ol ( margines-góra: 0; margines-dolny: 0 ) u, ins ( text-decoration: underline ) br:before ( content: "\A"; spacje: pre-line ) center ( text-align: center ) :link, :visited ( text-decoration: underline ) :focus ( kontur: cienka kropkowana inwersja ) /* Rozpocznij ustawienia dwukierunkowości (nie zmieniaj) */ BDO ( kierunek: ltr; unicode-bidi: bidi-override ) BDO ( kierunek: rtl; unicode-bid i: bidi-override ) * ( kierunek: ltr; unicode-bidi: embed ) * ( kierunek: rtl; unicode-bidi: embed ) @media print ( h1 ( podział strony przed: zawsze ) h1, h2, h3, h4, h5, h6 ( podział strony po: unikaj ) ul, ol, dl ( podział strony - przed: unikaj ) )