Resetovať CSS. (Obnoviť štýly) je nula pomocou CSS., niektoré z parametrov prvky HTML, ktoré sú prehliadače nainštalované štandardne. Napríklad tieto prvky zahŕňajú odseky (tag), ktorá pôvodne prítomné nenulovej vertikálne pole (CSS), ktoré sú označené zoznamy (tag), ktoré sú už tak polia, ale aj niektoré markery typu (CSS), a tak ďalej.
Pozrime sa teraz na to, čo potrebujete tento resetovať CSS, čo nám môže dať? No, predstavte si, že ste oslávil stránky vášho webu a zároveň sa nemení pole bodov, ktoré prehliadače ponúka v predvolenom nastavení, pretože ich veľkosť je úplne usporiadaný. Ale povedz mi, prosím, a kde ste sa rozhodli, že všetky prehliadače sveta, ktorí už existujú a stále sa objavia, vytvoria polia rovnakej veľkosti? Okrem toho, prečo si myslíte, že prehliadače, v ktorých ste testovali vaše usporiadanie, sa nezmení v ich Ďalšie verzie Veľkosť týchto polí nie je vôbec úplne odstránená? Cítite, čo vonia?
Takže, vyhodenie CSS, verše sú jednoducho obmedzené z takýchto nedorozumení, to znamená, že prvýkrát resetujú všetky "kritické" hodnoty vlastností CSS a potom ho pridajú späť, ale s vlastnými veľkosťami. Takže si môžete byť istí, že vo všetkých prehliadačoch bude stránka rovnako vyzerať. Určite nemôžete resetovať štýly, ale jednoducho v priebehu rozloženia, nastaviť potrebné parametre na položky, ale je tu riziko, že niekde sa stratí a v určitom bode sa všetko zlomí.
Na základe vyššie uvedeného sa jedným z vlastností reliéf CSS, je, že po jeho používaní mnohé prvky HTML stratia svoj obvyklý vzhľad. A ak je strata polí v odsekoch pre začiatočníkov, niečo očakávané pre začiatočníkov, potom napríklad skutočnosť, že tlačidlá vytvorené pomocou tagov alebo náhle sa stali externe podobné obvyklému textu - je úplné prekvapenie. Ale to by nemalo byť v rozpakoch, pretože pre tieto štýly a sú resetovaní, takže peigreer potom nezabudol ich špecifikovať v novom.
Existuje mnoho spôsobov, ako vynulovanie štýly, a to, čo Či už si vyberiete - záleží len na vás, ale môžem vám povedať jednu - za najlepší resetu je ten, ktorý ste vytvorili sami, na základe vašich skúseností a návykov. Ak ešte nemáte takéto skúsenosti, môžete použiť jednu z vyššie uvedených možností.
Vždy zadajte štýly na resetovanie CSS na samom začiatku kódu, inak niektoré z parametrov nemusia fungovať, pretože style Priorityktoré sú nainštalované prehliadače pri spracovaní stránky HTML a CSS kódu.
Resetovať CSS s univerzálnym voličom
* (Font-Rodina: Dedint; / * Všetky prvky zdedia z ich materského fontu Headset * / Font-Style: Dedint; / * Zdediť dizajn * / Font-Hmotnosť: Dedint; / * Zdediť mastné * / vertikálne zarovnanie: Baseline; / * Vertikálne zarovnanie čias * / Veľkosť písma: 100%; / * Veľkosť písma 100% * / Pozadie: Transparentné; / * Pozadie všetkých prvkov Transparentné * / Hranica: 0; / * Odstráňte rám * / Obrys: 0; / * Odstrániť kontúry * / Margin: 0; / * Odstráňte polia * / Padding: 0; / * Odstráňte zarážky * /)Popis príkladu
V tomto príklade univerzálny volič Zadané štýly sa okamžite vynulujú vo všetkých prvkoch HTML, ktoré budú prítomné na stránke. Ako vidíte, väčšina nehnuteľností je určená presne pre bezpečnostnú sieť, ako ich hodnoty a tak, že prehliadače musia štandardne nahradiť podľa špecifikácie CSS. Ale ako už viete, v praxi to všetko je úplne iné a ak je majetok skutočne zdedil prvky od svojich rodičov vo všetkých popredných prehliadačoch, rovnaké externé polia určené vlastnosťou CSS nie sú vždy pôvodne rovné nule.
Ale veľkosť rámca (CSS) a kontúr (CSS) nie sú štandardne nula, ale už podľa špecifikácie. Ich hrúbka bola resetovaná, takže meradlo by nezabudli špecifikovať jasne, kde by bolo potrebné.
Reset CSS z Yahoo!
Telo, DIV, DL, DT, DD, UL, OL, LI, H1, H2, H3, H4, H5, H6, PRE, FORMULOSTI, FIRESTEST, INPUTNOSŤ, TEXTAWAREA, P, BLOCKQUOTE, TH, TD (Margin: 0; Polstrovanie: 0;) Fieldset, IMG, ABBR, Acronym (hranice: 0;) Adresa, titulka, Citácia, kód, DFN, EM, SIRT, TH, VAR (Font-štýl: Normal; Font-Hmotnosť: Normálna;) Tabuľka (Border-Collapse: Kolaps; / * Bežné hranice pre tabuľky tabuliek * / Border-Dreveing: 0; / * Nulovanie Vzdialenosť medzi bunkami * /) Titulok, TH (Zarovnanie textu: vľavo; / * Zarovnanie textu na ľavý okraj * /) OL, UL (List-Style: Žiadne, / * Odstráňte značky zoznamov * /) H1, H2, H3, H4, H5, H6 (veľkosť písma: 100%; Font-Hmotnosť: Normal;) Q: Pred, Q: Po (Obsah: "" / * Zrušujeme citácie z tagu q * /)Popis príkladu
Yahu naraz vyvinul svoju vlastnú verziu očí. Tu sú vlastnosti špecifických prvkov sa už menia, čo umožňuje dosiahnuť väčšiu flexibilitu pri ich kontrolách. externé druhy. Napríklad markery sú odstránené zo zoznamov a štítok je citáty pomocou vlastnosti CSS. Výhody tohto prístupu sú zrejmé, ale mínusy zahŕňajú viac objemnejší a niekedy redundantný kód. Ale nikto ťa nemožje, aby ste zmenili žiadne CSS reset na vaše potreby. Predpokladajme, že vám môžete odstrániť niektoré zbytočné. tagné selektory Alebo nielen odstrániť citácie, ale okamžite ich požiadajte o potrebné vzhľad.
Obnoviť CSS z Eric Meyer
HTML, telo, Div, Span, Applet, Objekt, Iframe, H1, H2, H3, H4, H5, H6, P, Lockquote, Pre, A, ABBR, AKRONYM, adresa, veľký, citový kód, kód, del, dfn, EM, IMG, INS, KBD, Q, S, SAMP, MALÉ, STROJE, SIRT, SUB, SUP, TT, VAR, B, U, I, CENTRUMENTY, DL, DT, DD, OL, UL, LI, FIELDSET, forma, Label, Legend, stolík, titulok, tbody, tfoot, thead, TR, TH, TD, článok, zrušený, plátno, Detaily, Vložiť, Obrázok, Figcaption, päty, hlavičky, Hgroup, Menu, Nav, Output, Ruby, Sekcia, zhrnutie, čas, značka, audio, video (okraj: 0; čalúnenie: 0; hranice: 0; font-veľkosť: 100%; font: zdedenie; vertikálne-align: základná línia;) článok, stranou, podrobnosti, figcaption, postavou, päty, hlavičky, Hgroup, Menu, Nav oddiel (Displej: / * Vyrábame blokové položky (pre staré prehliadača) * /) telo (line-height: 1; / * riadkovanie Text na strane * /) OL, UL (list-style: none;) Blockquote: Predtým Blockquote: Po, Q: Pred, Q: Po (obsah ""; / * Odstránenie citácie v Q a blockquote * / Obsah: žiadne; / * Pridať za vernosť * /) blockquote, Q (citácia: none; / * Ďalším spôsobom, ako odstrániť citácie * /) Tabuľka (Border Zbaliť: Zbaliť; Border-rozteč 0)Popis príkladu
Ďalším spôsobom, ako obnoviť CSS navrhol Eric Meyer (Eric Meyer) - webový vývojár známy v niektorých kruhoch. Tu sa už pridal vypúšťanie štýly pre tagy z HTML 5, ktorý, mimochodom, v čase písania tohto článku, a samy o sebe sú stále veľmi zle podporovaných moderných prehliadačoch. Ale vždy sa musíte pozerať na perspektívu, že?
V skutočnosti je tento článok by mohol pokračovať do nekonečna, pretože som ešte raz opakujem, v určitom bode, každý rozchod príde na svojej verzii vypúšťanie alebo ich nepoužíva vôbec, sa spoliehať na jeho pozornosti.
Všetko HTML položky Predvolené stránky majú svoje vlastné hodnoty. A, bohužiaľ, nie rovnako interpretované rôznymi prehliadačmi. Výsledkom je, že návrh stránky trpí, jeho konštrukčné zmeny, keď sa prehliadač zmení (internetový prehliadač). Účelom postupu resetovania styling je zníženie nekonzistentnosti prehliadača v takýchto veciach ako výška čiary, polí, veľkosť titulných fontov atď.
Príklady skriptov CSS
Predpokladá sa, že každý samostatný webmaster by mal napísať svoj vlastný kód resetovania CSS. Ale som priaznivca iného prístupu, vezmite si hotové riešenie, pochopte ho a v prípade potreby opravte.
Eric Meyer CSS Reset
Výboj skriptu z Eric Meyer, so slovami samotného autora, úmyselne veľmi bežné. Napríklad nie je v ňom špecifikovaná pre teleso prvku, akékoľvek predvolené pozadie. Preto sa musí zmeniť, upravovať, rozšíriť a inak nakonfigurovaný podľa vašich potrieb. Pridajte požadované farby pre stránky, odkazy a tak ďalej.
/ * http:///meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licencia: Žiadne (Public Domain) * / HTML, telo, Div, Span, Applet, Objekt, Iframe, H1, H2, H3, H4, H5, H6, P, Blockquote, Pre, A, ABBR, ARRONYM, adresa, Veľký, citovať, kód, del, dfn, em, img, ins, kbd, q, s, smamp, malý, štrajk, silný, sub, sup, tt, var, b, u, i, tt, var, b, U, i, centrum, dl, dd, dd, ol, ul, li, fédium, tvar, štítok, legenda, stôl, titulok, Tody, tfoot, thead, tr, th, td, článok, stranou, plátno, detaily, Vložiť, Obrázok, Obrázok, Footer, Header, Hroup, Menu, NAV, výstup, Ruby, Sekcia, Súhrn, Čas, Mark, Audio, Video (okraj: 0; Padding: 0; Hranica: 0; Font-Veľkosť: 100% Písmo: Dedinné; Vertikálne-ALIGN: základná línia;) / * HTML5 REUŠENIE REUŠENIA PRE STAROSTNÉHO PROSTREDIA * / ČLÁNKU, PODMIENKY, PODROBNOSTI, FIGCAPTION, Obrázok, päty, záhlavie, HRGOUP, MENU, NAV, sekcii (Displej: BLOCK; ) Body (výška linky: 1;) ol, ul (zoznam-štýl: žiadny;) blockquote, q (citácie: žiadne;) blockquote: predtým, Blockquote: Pointer, Q: Pred, Q: Po (Obsah: ""; Obsah: Žiadny;) Tabuľka (hraničný kolaps: C. Olipse; Hraničným rozstupom: 0; )
Yahoo! (YUI 3) Reset CSS
CSS YUI 3 SYLES Zjemňuje kontroverzný štýl prehliadačov HTML prvky, ako aj akýkoľvek iný skript resetovania CSS vytvoriť spoľahlivý základ pre vytváranie webových stránok a webových aplikácií.
/ * YUI 3.18.1 Copyright 2014 Yahoo! Inc. Všetky práva vyhradené. Licencované v rámci licencie BSD. http://yuilibrary.com/license/ * / * Todo musieť odstrániť nastavenie na HTML pretože my môžeme "T Menný to. Todo s predponou by som Group voličom alebo majetku za rok Hmotnosť úsporám? * / HTML (Color : # 000; Pozadie: #FFF;) / * TODO Odstrániť nastavenia na tele, pretože môžeme "t menpace to. * / / * TODO TODO TEST UVEDENIE ALASS NA HLAVOU. - zlyhá 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 (okraj: 0, vypínenie: 0;) Tabuľka (hraničný kolaps: kolaps; hraničnú sakciu: 0;) Fieldset, IMG (hranice: 0;) / * TODO premýšľať o Hanlding Dedinituce inak, možno nechať IE6 zlyhať ... * / Adresa, titulok, citovať, kód, dfn, em, silný, th, var (font-style: normálne; font-hmotnosť: normálne;) ol, ul (zoznam-štýl: žiadny;) titulok, th (Text-ALIGN: vľavo;) H1, H2, H3, H4, H5, H6 (veľkosť písma: 100%; Font-hmotnosť: Normal;) Q: Pred, Q: Po (Obsah: "";) ABBR, skratka (Border: 0; font-variant: Normal) / * Ak chcete zachovať line-height a voliča Vzhľad * / sup (vertical-align: Text-Top) Sub (Vertical-Align: Text-Bottom) vstupu, textová SELECT (font-family: Inherit; font-size: dedia; font-váha: dedia; * font-size: 100%; / * k tomu, aby zmeny veľkosti pre tj * /) / *, pretože legenda Nemá "t dostaneš v IE * / Legenda (farba: # 000;) / * YUI CSS detekovať Iónová pečiatka * / # yui3-CSS-Stamp.cssReset (Zobraziť: Žiadne; )
Resetovanie štýlov normalize.css
Normalize.css je vlastný súbor CSS, ktorý umožňuje prehliadače zobraziť všetky prvky konzistentne av súlade s modernými normami. Jeho autori preskúmali rozdiely medzi štýlmi rôznych prehliadačov, aby opraviť iba tie štýly, ktoré potrebujú normalizáciu.
/ *! Normalize.css v6.0.0 License MIT github.com/necolas/normalize.css * / / * dokument \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / / ** * 1. Správna výška The Line Vo všetkých prehliadačoch. * 2. Zabráňte nastaveniu veľkosti písma po zmene orientácie v * tj Windows telefón a v iOS. * / HTML (Line-Výška: 1,15; / * 1 * / -MS-Text-Veľkosť-Úprava: 100%; / * 2 * / -webkit-Text-Veľkosť-Úprava: 100%; / * 2 * /) / * v \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / ** * Pridajte správne zobrazenie v IE 9-. * / Article, zrušený, päty, hlavičky, Nav oddiel (Display: Block) / ** * korigovať veľkosť písma a okraje on` H1` prvkov vnútri `Section` a *` article` conefox v Chrome, Firefox, a Safari. * / H1 (Veľkosť písma: 2em; rozpätie: 0.67 0) / * zoskupovanie obsah \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / / ** * Pridajte správne zobrazenie v IE 9-. * 1. Pridajte správny displej v IE. * / FigCaption, obor, Main (/ * 1 * / Display: block) / ** * pridajte správny okraj v IE 8. * / obrázku (margin: 40px 1em) / ** * 1. pridajte správny rámik Veľkosť vo Firefoxe. * 2. Ukážte prepad na okraj a tj. * / HR (Box-Dimenzovanie: Content-Box; / * 1 * / výška: 0; / * 1 * / overflow: viditeľná; / * 2 * /) / ** * 1. opraviť dedičnosť a úpravu veľkosti písma vo všetkých prehliadačoch. * 2. Opravte ODD` EM` písma Dimenzovanie vo všetkých prehliadačoch. * / Pre (font-family: monospace, monospace, / * 1 * / font-size: 1em; / * 2 * /) / * Text-Level sémantika \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / / ** * 1. Odstráňte sivom pozadí na aktívne odkazy v IE 10. * 2. Odstrániť Medzery v odkazy Podčiarknuté v IOS 8+ a Safari 8+. * / A (pozadia-farba: transparentná; / * 1 * / -webkit-text-dekorácie-preskočiť: objektov; / * 2 * /) / ** * 1. Vyberte spodnú hranice v Chrome 57- a 39- Firefox . * 2. Pridajte správnu textovú dekoráciu v Chrome, Edge, IE, Opera a Safari. * / Skr (border-bottom: none; / * 1 * / text-dekorácie: podčiarknutie; / * 2 * / text-dekorácie: podčiarknutie bodkovaný; / * 2 * /) / ** * zabrániť duplicitné uplatnenie `Bolder `Pri ďalšom pravidlom v safari 6. * / B, Strong (font-weight: Zdediť;) / ** * pridajte správny font Weight v Chrome, Edge a Safari. * / B, Strong (font-weight: Bolder) / ** * 1. opraviť dedičnosť a úpravu veľkosti písma vo všetkých prehliadačoch. * 2. Opravte ODD` EM` písma Dimenzovanie vo všetkých prehliadačoch. * / Code, KBD, SAMP (font-family: monospace, monospace, / * 1 * / font-size: 1em; / * 2 * /) / ** * pridajte správny štýl písma v Android 4.3-. * / DFN (Font-štýl: kurzíva) / ** * pridať správne pozadie a farba v IE 9-. * / Mark (background-color: # FF0; color: # 000;) / ** * Pridať správnu veľkosť písma vo všetkých prehliadačoch. * / Small (font-size: 80%;) / ** * Zabrániť `Sub` and` SUP` Elements od obmedzovala výška * všetkých prehliadačoch. * / Sub, SUP (font-size: 75%; line-výška: 0; poloha: relatívna zvislý-align: základná) Sub (Dole: -0.25EM) SUP (TOP: -0.5) / * vložený obsah \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / ** * Pridajte správne zobrazenie v IE 9-. * / Audio, Video (Display: Inline-Block;) / ** * Pridajte správny displej v iOS 4-7. * / Audio: nie () (Displej: Žiadne; Výška: 0;) / ** * Odstráňte hranicu na obrázky vo vnútri odkazov v IE 10-. * / IMG (Border-Style: Žiadny) / ** * Hide prepadu v IE. * / SVG: nie (root) (pretečenie: Skrytý) / * Formy \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / ** * Odstráňte Margin vo Firefoxe a Safari. * / Tlačidlo, vstup, OptGroup, Select, TextArea (Margin: 0;) / ** * Zobraziť prepad v IE. * 1. Ukážte pretečenie na okraji. * / Button, Input (/ * 1 * / overflow: viditeľná;) / ** * Odstráňte pozostalosti Text Transform v hrán, Firefox a Internet Explorer. * 1. Odstráňte dedičstvo textu transformácie vo Firefoxe. * / Button, Select (/ * 1 * / text-transform: none;) / ** * 1. zabrániť WebKit Bug Kde (2) zničí Native `Audio` And` Video` * Kontroly v Android 4. * 2. korigovať neschopnosť Style clickable typov v Ios a Safari. * / Tlačidlo, HTML, / * 1 * /, (-webkit-vzhľad: Tlačidlo; / * 2 * /) / ** * Odstráňte vnútornú hranicu a polstrovanie vo Firefoxe. * / Tlačidlo :: - Moz-Focus-Inner, :: - Moz-Focus-Inner, :: - Moz-Focus-Inner, :: - Moz-Focus-Inner (Border-Style: Žiadne; Čalúnenie: 0;) / ** * Obnovte štýly zaostrenia do predchádzajúceho pravidla. * / Tlačidlo: -moz-focusring ,: -moz-focusring,: -moz-focusring,: -moz-focusring (Outline: 1px bodkovaný ButtonText) / ** * 1. Správna Text prebalom hrán a IE. * 2. Opravte dedičstvo farby z prvkov "Fieldset" v IE. * 3. Vyberte tesnenie takže vývojári nie sú pristihnutý pri ktorým Zero Out * `Fieldset` Elements vo všetkých prehliadačoch. * / Legenda (Box-Dimenzovanie: Border-Box, / * 1 * / Farba: Inherit; / * 2 * / displej: Stôl; / * 1 * / max-šírka: 100%; / * 1 * / vložka: 0 ; / * 3 * / White-Space: Normal; / * 1 * /) / ** * 1. Pridajte správne zobrazenie v IE 9-. * 2. pridajte správny Vertical Alignment v Chrome, Firefox a Opera. * / Progress (display: inline-block; / * 1 * / vertikálne zarovnanie: Východisková; / * 2 * /) / ** * odobrať predvolené zvislý posúvač v IE. * / TextArea (Prepad: AUTO;) / ** * 1. Pridajte správnu skrinku v IE 10-. * 2. Vyberte výplň IE 10-. * /, (Box-Dimenzovanie: rámček truhlík; / * 1 * / vložka: 0; / * 2 * /) / ** * korigovať tvar kurzora prírastku a Decro tlačidla v Chrome. * / :: - WebKit-Inner-Spin-Button, :: - WebKit-Outer-Spin-Button (výška: auto;) / ** * 1. Správna Odd Vzhľad v Chrome a Safari. * 2. Opravte štýl obrysu v safari. * / (-Webkit-Vzhľad: TextField; / * 1 * / obrys-offset: -2px; / * 2 * /) / ** * Odstráňte vnútorné vypchávkou a Zrušiť v Chrome a Safari pre Mac OS. * / :: - WebKit-Search-Cancel-Button :: - WebKit-Search dekorovanie (-webkit-Vzhľad: none;) / ** * 1. Správna neschopnosť Typy Style clickable v Ios a Safari. * 2. Zmeňte vlastnosti písma na "Dedint" v Safari. * / :: - WebKit-File-Upload-Button (-webkit-Vzhľad: Button; / * 1 * / font: zdedí; / * 2 * /) / * Interaktívny \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / * * Pridajte správny displej v IE 9-. * 1. Pridajte správne zobrazenie na hrane, čiže a Firefox. * / Detaily, / * 1 * / Menu (Displej: Block) / * * Pridajte správne zobrazenie vo všetkých prehliadačoch. * / Zhrnutie (Display: List-Item) / * skriptovací \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / ** * Pridajte správne zobrazenie v IE devätnásť. * / Canvas (Display: Inline-Block;) / ** * Pridajte správny displej v IE. * / Template (display: none;) / * skryté \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / / ** * Pridajte správne zobrazenie v IE 10 -. * / (Displej: Žiadne;)
Resetovať cez univerzálny volič * (hviezdička)
Na prvý pohľad sa to môže zdať najjednoduchšie a jednoduché riešenie, prečo opísať všetky položky HTML a priradiť ich, keď ich môžete použiť, keď môžete použiť volič *, pretože jeho činnosť sa vzťahuje na všetky HTML.
* (Margin: 0, čalúnenie: 0;)
Ale bohužiaľ to nie je dobrá prax. Prehliadač je veľmi tvrdý (trvá veľa času v porovnaní s inými postupmi resetovania CSS) Aplikujte pravidlá na každý prvok v dokumente, najmä na veľkých webových stránkach, a môže tiež zničiť mnoho dobrých predvolených štýlov.
Štýl reset a wordpress
Ak chcete použiť jeden z vyššie opísaných štýlov CSS resetovať metódy pre stránku na wordpress, môže sa vykonať dvoma spôsobmi.
Prvým je, že musíte skopírovať resetovací kód na začiatok súboru style.css wordPress Témy (Po riadkoch autorstva a titulnej témy, to znamená, že po vytvorení textu frakciou a hviezdičkou / * ... * /.
S výnimkou IE a Opera Mini Rodiny.
Vzhľadom k tomu, tj nedostatok podpory môže spôsobiť problém, tu sú niektoré z spôsobov, ako resetovať niektoré vlastnosti CSS na ich počiatočné hodnoty:
Reset-to (animácia: žiadna; animácia-oneskorenie: 0; animácie-smer: normálne; animácie-trvanie: 0; animácia-výplňový režim: Žiadny; animácie-iterácia-gróf: 1; Animation-Názov: Žiadna; -State: Beh; Animation-Thoming-Function: Ease; Backface-Viditeľnosť: Viditeľné; Pozadie: 0; Pozadie-Prídavné zariadenie: Scroll; pozadie-Clip: Border-Box; pozadia-Farba: Transparentné; -Organizácia: polstrovanie; pozadia: 0 0; pozadia-poloha-x: 0; pozadia-poloha-y: 0; pozadia-opakovanie: Opakovanie; na pozadí - veľkosť: Auto Auto; Hranica: 0; Border- Style : Žiadne; hraničná šírka: stredná; hraničná farba: zdedená; hraničné dno: 0; Border-Bottom-Farba: Dedit; Border-Bottom-Bound-Radius: 0; Border-Bottom-Pravý-Radius: 0; hranice Bottom-style: Žiadne; Border-Bott-Botth-Stupeň: Médium; Border-Collaps: oddelený; hraničný obraz: Žiadny; Border-Left: 0; hraničná ľavá - farba: NONE; Ľavá šírka: Stredná; Border-R ADIUS: 0; Hranica: 0; Border-pravotočivé farby: dedičstvo; Hraničný pravý štýl: Žiadny; Hraničná pravá šírka: médium; Hraničným rozstupom: 0; Hranica-top: 0; Border-top-Color: Dedint; Radius vľavo-horného vľavo: 0; Radius horného pravého pravého: 0; Hraničný štýl: Žiadny; Hraničná špičková šírka: médium; Dno: auto; Box-Shadow: Žiadne; SIZUKTOVANIE: CONTENT-BOX; Titulok-Side: TOP; Vymazať: Žiadne; Klip: AUTO; Farba: Dedint; Stĺpce: AUTO; Počet stĺpcov: AUTO; Stĺpec-výplň: zostatok; Medzera kolóny: normálna; Pravidlo stĺpca: Stredné Žiadne AKTIVITYCOLOR; Farba kolóny - Farba: AKTIVITACOLOR; Stĺpec-Pravidlo-štýl: Žiadne; Šírka kolóny: Žiadne; Stĺpec-span: 1; Šírka stĺpca: AUTO; Obsah: Normal; Proti-prírastok: Žiadne; Proti-resetovanie: Žiadne; Kurzor: AUTO; Smer: LTR; Displej: Inline; Prázdne-bunky: show; Float: žiadny; font: normálne; FONT-RODINA: INHERTIT; Veľkosť písma: médium; Font-štýl: normálne; Font-variant: normálny; Písma: normálne; Výška: AUTO; Pomlčky: Žiadne; Vľavo: Auto; Dostupný odstup: normálne; Výška linky: normálne; Zoznam-štýl: Žiadny; Zoznam-štýl-obrázok: Žiadny; Poloha zoznamu: vonku; Typ štýlu zoznamu: disk; Marža: 0; OBROKOVÉ DOPLOSTI: 0; Margin-Left: 0; RIGHT-PRAVDY: 0; margin-top: 0; Max-výška: žiadna; Max-šírka: Žiadna; Min-Výška: 0; Min-šírka: 0; Opacity: 1; Siroty: 0; Obrys: 0; Obrys-farba: invertovať; Osvetľovací štýl: Žiadny; Osnova - Šírka: Médium; Prechod: Viditeľné; Prepad-X: Viditeľné; Prepad-y: viditeľné; Čalúnenie: 0; Polstrovanie dno: 0; Polstrovanie vľavo: 0; Padovanie - vpravo: 0; Polstrovanie-top: 0; Page-Break-Po: Auto; Strana-Break-Pred: AUTO; Page-Break-Inside: Auto; Perspektíva: Žiadna; Perspektíva - pôvod: 50% 50%; Pozícia: Statická; / * Možno bude potrebné zmeniť citácie pre rôzne lokality (napr. FR) * / citácie: "201" "" 201d "" "" 2019 "; Právo: Auto; Veľkosť karty: 8; Rozloženie tabuľky: AUTO; Zarovnanie textu: Dedint; Text-ALIGN-posledný: AUTO; Text-dekorácia: Žiadna; Text-dekorácia - farba: zdedenie; Text-dekorácie-linka: Žiadne; Text-dekorácie štýl: tuhá; Textová zarážka: 0; Text-tieň: žiadny; Text-transformácia: žiadny; Top: Auto; Transform: Žiadne; Transform-štýl: byt; Prechod: Žiadny; Prenosové oneskorenie: 0s; Trvanie prechodu: 0s; Prechod - Nehnuteľnosť: Žiadne; Prechodová funkcia: Jednoduchosť; Unicode-BideI: Normal; Vertikálne-ALIGN: základná línia; Viditeľnosť: Viditeľné; Biely-space: normálne; vdovy: 0; Šírka: AUTO; Slovo-rozstup: normálne; Z-index: AUTO; / * Základná moderná patch * / Všetky: počiatočné; Všetko: Unset; ) / * Základná moderná patch * / # reset-This-root (všetky: počiatočné; * (všetko: Unset;))
- Príslušné github repo s decembrom 2017 presvedčivý zoznam
Ako je uvedené v Komentáre používateľa @ Usmer566245:
to je pravda v zásade, ale individuálny počet kilometrov sa môže líšiť. Napríklad niektoré prvky, ako napríklad TEXTAREA, majú hranicu pomocou tohto resetovania, znížia hranicu textarea.
Zakúpené, aby sa stal modernou normou, používateľom JOOST
# Reset-this-rodič (všetko: počiatočné; * (všetko: Unset;)
Príklad z W3.
To môže byť užitočné pre koreňový prvok "widget" zahrnutý v stránke, ktorá nechce zdediť štýly vonkajšej strany. Upozorňujeme však, že akýkoľvek predvolený štýl používaný na tento prvok (napríklad napríklad: Displej: Blok z tabuľky uA na blokových prvkoch, napríklad), bude tiež vymazaný.
Nikto zamýšľal o inom, okrem CSS, obnoviť CSS? Áno?
Tam je taký urgentný nástroj:
getelementsByTagnem ("*") Vráti všetky prvky z DOM. Potom môžete nastaviť štýly pre každý prvok v kolekcii:
VAR ALLYS \u003d DOCUMENT.GELEDSBERYTYTAGENTAGE ("* *"); pre (var i \u003d 0, len \u003d aliments.Length; i< len; i++) { var element = allElements[i]; // element.style.border = ... }
So všetkým sa hovorí; Nemyslím si, že reset CSS je niečo, čo nedokončíme len s jedným webovým prehliadačom. Ak je na konci nastavený "prehliadač" na konci ".
Pre porovnanie je tu zoznam hodnôt Firefoxu 40.0 pre
Kde font-štýl: šikmú prevádzku Run DOM.Zarovnajte obsah: Unset; Zarovnávacie položky: UNSET; ALIGN-SELL: UNSET; Animácia: Unsets; Vzhľad: Unset; Viditeľnosť v oblasti backface: Unset; Režim na pozadí - režim: UNSET; SÚVISLOSTI: UNSTOUS; Väzba: UNSTEST; Veľkosť bloku: Unset; Hraničný blok-koniec: UNSET; Začiatok hraničného bloku: Unset; Border-Collaps: Unset; Hranica-inline-end: UNSET; Border-inline-Start: Unset; Border-Radius: Uspat; Border-rozstup: UNSET; Hranica: Uspat; Dno: duste; Box-ALIGN: UNSTEST; Box-dekorácie-Break: Unset; Smer boxu: UNSET; Box-Flex: Ustes; Box-ordinal-Group: Unset; Box-Orient: Unset; Box-balenie: Unset; Box-Shadow: Unset; Box-veľkosti: unset; Titulátor - strana: Unset; Jasné: unset; Clip-path: unset; Clip-pravidlo: unset; Klip: Unset; COLOR-Nastavenie: Unset; Farebné interpolačné filtre: UNSET; Farba-Interpolácia: Unset; Farba: Unset; Výplň stĺpca: UNSET; Stĺpec GAP: UNSET; Pravidlo stĺpca: Unset; Stĺpce: UNSET; Obsah: UNSTEST; Viditeľnosť na kontrolu znakov: UNSET; Proti-prírastok: UNSET; Counter-reset: Unset; Kurzor: Unset; Zobrazenie: Unset; Dominantná-základná línia: Uspat; Prázdne-bunky: unset; Náplň: Unset; Pravidlo vyplnenia: Unset; Vyplňte: Unset; Filter: Unset; FLEX-FLOWS: UNDASTE; Flex: Unsets; Edge-Edge: Unset; Plavák: unset; Farba povodní: UNSET; Povodnotná nepriehľadnosť: Uspat; FONDY FAMILY: UNSTEST; Nastavenia Font-Feature: Unset; Font-Kerning: Unset; Font-Language-Language-Languare: Unset; prispôsobenie veľkosti písma: unset; Veľkosť písma: Unset; Font-Stretch: Unset; Font-štýl: šikmé; Syntéza fontu: Unset; FONT-VARIANT: UNSTEST; hmotnosť písma: UNSET; písmo:; Ikona sily-Broken-Image: Unset; Výška: Unset; Pomlčky: unset; Orientácia obrazu: Unset; Image-Region: Unset; Rending image: Unset; IME-MODE: UNSTEST; Veľkosť inline: Unset; Izolácia: Unset Ospravedlňujúci obsah: UNSET; Odôvodnenie-Položky: UNSET; Ospravedlnenie-self: unset; vľavo: Unset; List-Dreveing: Unset; Osvetľovacia farba: UNSASTE; Výška riadkov: UNSET; Zoznam štýlov: Unset; Okrajový blok-koniec: Unset; Margin-Block-Start: Unset; margin-inline-end: unset; Margin-inline-Start: Unset; Rozpätie: Unset; Značka-offset: UNSET; Značka: Unset; Typ masky: Unset; Maska: Unset; Max-Block-Veľkosť: Unset; Max-výška: unset; Max-inline-Veľkosť: Unset; Max-šírka: Unset; Min-Block-Veľkosť: Unset; Min-výška: unset; Min-inline-veľkosť: Unset; Min-šírka: unset; Mix-Blend-Mode: Unset; Objekt-FIT: UNSET; Objektová pozícia: UNSET; Offset-Block-End: Unset; Offset-Block-Start: Unset; Offset-inline-End: Unset; Offset-inline-Start: Unset; Opacity: Unset; Objednávka: UNSET; Orientácia: Unset; Osudok Offset: Unset; Oslobodenie-polomer: Unset; Obrys: Unset; Prepad: Unset; Polstrovanie-blok-koniec: unset; Polstrovanie-blok-štart: unset; Polstrovanie-inline-end: unset; Polstrovanie-inline-štart: unset; Čalúnenie: Unset; Strana-Break-Po: Unset; Page-Break-Break - Pred: Unset; Page-Break-Inside: Unset; Objednávka na farbu: UNSET; Perspektíva-Pôvod: UNSET; PERSPEKTÍVNY: UNSTOUS; Ukazovanie Ukazovateí: UNSTEST; Pozícia: Uspat; Citáty: Unset; Zmena veľkosti: Unset; Právo: Uspat; RUBY-ALIGN: UNDASTE; Pozícia Ruby: Unset; Scroll-správanie: unset; Scroll-Snap-Coordinate: Unset; Scroll-Snap-Destinant: Unset; Scroll-Snap-Body-X: Unset; Scroll-Snap-Body-Y: Unset; Scroll-Snap-Type: Unset; tvaru-rendering: unset; ŠKOJECTOVACÍ Stop-Color: Unset; STOP-OPACITY: UNSTEST; Stroke-DashArray: Unset; Stroke-Dashoffset: Unset; Zdvih-linecap: unset; Zdvih-linejoin: unset; Mŕtvica-mitralimit: unset; Zdvita-opacita: Unset; Šírka zdvihu: Unset; Mŕtvica: Unset; Veľkosť kariet: Unset; Usporiadanie tabuľky: Unset; Text-ALIGN-posledný: Unset; Textový text: UNSET; Text-kotva: Unset; Text-kombinovaný - vzpriamene: Unset; Text-dekorácia: Unset; Znenie - dôraz - pozícia: Unset; Znenie - dôraz: UNSET; Textová zarážka: Unset; Orientácia textu: Unset; Text-Overflow: Unset; Vykresľovanie textu: Unset; Text-tieň: Unset; Nastavenie veľkosti textu: UNSET; Text-transformácia: Unset; Top: Unset; Transform-Pôvod: UNSET; Transform-štýl: Unset; Transform: Ustes; Prechod: Uspat; User-Focus: Ustes; Užívateľsky vstup: UNSET; User-Modify: Unset; Užívateľ-Select: Unset; Vektorový efekt: Unset; Vertikálne-zarovnanie: unset; Viditeľnosť: Uspats; Biely-space: Unset; Šírka: Unset; Zmena: UNSET; Ťahanie okien: unset; Slovo-Break: Unset; Slovo-rozstup: Unset; Word-Wrap: Unset; Režim písania: UNSET; Z-index: UNSET;
Používa sa mnoho vrcholov CSS reset.slúžiť na odstránenie funkcií rôznych prehliadačov. Vlastne, tento súbor Štýly obnoví všetky predvolené vlastnosti CSS. V tomto článku preukážem kód tohto súboru a poviem stojí za to používať CSS reset alebo nie.
Videl som veľa rôznych CSS reset.Všetci sú približne rovnaké. Môžete to použiť:
Html, telo, div, rozpätie, applet, objekt, iframe,
H1, H2, H3, H4, H5, H6, P, BLOCKQUOTE, PRE,
A, ABBR, skratka, adresa, veľký, citový kód,
Del, DFN, EM, FONT, IMG, INS, KBD, Q, S, SAMP,
Malý, štrajk, silný, sub, sup, tt, var,
B, u, i, centrum,
DL, DT, DD, OL, UL, LI,
Fieldset, forma, štítok, legenda,
Tabuľka, titulok, Tbody, tfoot, thead, tr, th, td (
Pozadie: transparentné;
Hranica: 0;
Veľkosť písma: 100%;
Marža: 0;
Obrys: 0;
Čalúnenie: 0;
Vertikálne-ALIGN: základná línia;
}
Telo (
Výška linky: 1;
}
Ol, ul (
Zoznam-štýl: Žiadny;
}
Blockquote, Q (
Citáty: Žiadne;
}
Blockquote: Pred, blockquote: po,
Q: Pred, Q: Po (
Obsah: "";
Obsah: Žiadny;
}
: Zameranie (
Obrys: 0;
}
Tabuľka (
Hraničný kolaps: Zbaliť;
Hraničným rozstupom: 0;
}Myslím si, že jeho použitie je spôsobené a tak pochopiteľné, ale prečo napríklad nepoužívam, rovnako ako mnoho ďalších vertikerov, stojí za to hovoriť o tom. Po prvé extra súbor, Po druhé, pochopenie Na spracovanie, ale čo je najdôležitejšie - mám rád predvolené vlastnosti. Napríklad rovnaké polia pri stole. Koniec koncov, všetky predvolené vlastnosti nielen to, ale ako najviac optimálna možnosť Zobrazenie rôznych prvkov. Uisťujem vás, resetujte vypchávka Bunky tabuľky, s najväčšou pravdepodobnosťou, vrátite ho do hlavného súboru. A ďaleko od skutočnosti, že hodnota sa bude líšiť od toho, čo bolo predvolené. Ukázalo sa tak, že to najprv vyčistíme a potom to isté vrátenie. A spolu s prvými nedostatkami (extra súbor a extra kódom), mnohí vertilers nie sú vôbec používané. CSS reset..
Mimochodom, použitie stylingového výboja nie je zlé, takže ho môžete bezpečne používať, ak si myslíte, že zjednodušenie adaptácie lokality v rôznych prehliadačoch vás skutočne zjednoduší na celom svete.
- Prevod
Tento článok je prvým cyklom na tému Skrotenie CSS. Dnes sa pozrieme na technológiu CSS reset..
Prečo to potrebujete?
Každý prehliadač nastaví svoje predvolené štýly pre rôzne prvky HTML. S pomocou resetovania CSS môžeme dosiahnuť tento rozdiel, aby sme zabezpečili krížový prehliadač štýlov.Používate napríklad položku a. Vo vašom dokumente. Väčšina prehliadačov Internet Explorer. a Firefox Pridať odkaz modrá farba a ostrý. Predstavte si však, že za päť rokov sa niekto rozhodol vytvoriť nový prehliadač (poďme nazvať IT Ultrabrowser). Vývojári prehliadača nemali radi modré a naštvaný dôraz, takže sa rozhodli prideliť odkazy Červený a tučné písmo. Vychádza z toho, ak nastavíte základnú hodnotu štýlov pre položku a., Bude to zaručené, ak chcete vidieť, a nie je to uprednostňované na zobrazenie vývojárov ultrabrosíka.
Ale teraz nemáme žiadne zarážky vôbec, vrátane medzi jednotlivými odsekmi! Čo robiť? Neklame a nebojte sa: Pod nášmu absolutómu opisujeme pravidlo, ktoré potrebujeme. Môže to urobiť rôzne cesty: Uveďte zarážku pod alebo na vrchol odseku, špecifikujte ho v percentách, pixeloch alebo v em.
Najdôležitejšia vec, prehliadač teraz hrá podľa našich pravidiel, a nie my podľa neho. Rozhodol som sa týmto spôsobom:
* (Okraj: 0; čalúnenie: 0;) p (okraj: 5px 0 10px 0;)V dôsledku toho sme mali to, čo by sme mohli vidieť v treťom príklade.
Môžete si vytvoriť vlastné štýly pre reset, ak vyriešite určitú úlohu vo vašom projekte. Napriek tomu nie je vedenie krok za krokom Vytvorením vlastného resetovania CSS. Odporúčame svojmu vlastnému princípu a vlastnému štýlu.
Aby sme vám mohli vybrať, dám pár ďalších odkazov:
- Menej je viac - moja voľba resetovania CSS (ED ELLIOT).
2. Váš reset CSS je prvá vec, ktorú chcete zobraziť prehliadač
Reset štýly Po inštalácii vlastných štýlov pre položky je nesprávnym prístupom. V tomto prípade nič dobré čakať na zobrazenie prehliadača. Nezabudnite, že najprv vždy pripojte CSS reset, a potom všetky ostatné štýly.Áno, chápem, že to bolo smiešne, ale to je jedna z hlavných chýb vývojárov z Mala na skvelé. Mnohí len na to zabudnúť.
Niektorí sa môžu opýtať logickú otázku: Prečo sa to deje? Odpoveď je jednoduchá: Pravidlá zaznamenané pod textom súboru CSS (a dokonca nižší ich spojenie v dokumente), prepíšte pravidlá deklarované skôr.
Poďme sa veľmi pohybovať z témy a pokračovať. Použite Eric Meyer štýly do nášho príkladu, ale po Popisy našich vlastností, ako je uvedené v 4 príkladoch. Matematika by povedala: "Čo bolo potrebné dokázať."
3. Použite samostatný dokument CSS pre reset CSS
Musím (nie, neboli mi nútené) uviesť túto radu. Používanie samostatného súboru pre reset CSS je spoločná prax, že veľký počet podporných vývojárov.V skutočnosti dodržiavam pozíciu stvorenia jeden veľký súbor CSS Vzhľadom na väčší výkon tohto prístupu. Ale B. táto záležitosť Mám tendenciu súhlasiť s väčšinou: reset CSS by sa mal prevziať do samostatného súboru (zvyčajne nazývaného reset.css). V tomto prípade ho môžete použiť v rôznych projektoch bez toho, aby sa vynaložilo úsilie o pobočku od iných pravidiel CSS.
4. Snažte sa vyhnúť používaniu univerzálneho voliča
Napriek tomu, že táto koncepcia funguje, jeho aplikácia je najčastejšie nie je žiaduca žiaduca z dôvodu nekompatibility s niektorými prehliadačmi (napríklad tento volič je nespracovaný v programe Internet Explorer). Túto techniku \u200b\u200bby ste mali používať len pre jednoduché, malé, statické a predvídateľné stránky (ak ste to už museli urobiť).Táto rada je obzvlášť dôležitá, keď vyvíjate riešenia, ako napríklad CMS Témy. Vopred si nemôžete predpovedať, ako sa bude používať a ako bude upravená. Je lepšie opísať základné pravidlá CSS pre všetky položky, ako je použitie pre tento nepredvídateľný (aj menší objem) mechanizmus univerzálnych voličov.
5. Vyhnite sa redundantným vlastnostiam pri používaní resetovania CSS
Ďalším dôvodom, prečo sa mi nepáči samostatný súbor pre reset CSS, je potenciálna redundancia následných vyhlásení o nehnuteľnosti CSS. Opakovanie jednotlivcov svojich štýlov medzi celými súbormi CSS sú movietone a treba sa vyhnúť. Samozrejme, niekedy sme príliš leniví, aby sme držali krok s štýlom štýlov a spojili niektoré z nich, ale aspoň skúste!Poďme sa vrátiť do CSS reset z ERIC. Nastaví predvolené hodnoty pre výška riadkov, farby a pozadie telo. Nasledujúcim spôsobom:
Telo (výška linky: 1; farba: čierna; pozadie: biela;)
Predpokladajme, že už viete, ako vyzerá prvok telo.:
- pozadia-farba: #cccccc;
- farba: # 996633;
- Chcete horizontálne opakovať konkrétny obrázok na pozadí.
V tomto prípade nie je potrebné vytvoriť nový volič na opis vašich vlastností - jednoducho im môžete povoliť v resetovaní CSS. Poďme na to:
Telo (line-výška: 1; Farba: # 996633; pozadia: #ccc URL (tlies-image.gif) Repeat-X TOP vľavo;)
Nebojte sa upraviť resetovanie CSS. Nastavte ho pre seba, urobte to na sebe. Zmeniť, prestavať, odstrániť a pridať ho, ako potrebujete vo vašom konkrétnom prípade.Eric Meyer o tom povedal: "Toto nie je prípad, keď by mal všetci používať reset CSS bez zmien."
