• 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č (Zavolajme na to ultrabrosser). 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:

1. 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.:

1. pozadia-farba: #cccccc;
2. farba: # 996633;
3. 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 každý používať reset CSS bez zmeny."

Resetovať CSS. (Reset štýly) je nulovanie s CSS, niektoré z parametrov HTML prvky, ktoré prehliadače sú štandardne nainštalované. Tieto prvky zahŕňajú napríklad odseky (tag), ktoré spočiatku predstavujú nenulové vertikálne polia (CSS), označené zoznamy (tag), ktoré nemajú žiadne iba polia, ale aj určité typové značky (CSS) a tak ďalej.

Pozrime sa teraz na to, čo potrebujete tento resetovať CSS, čo nám môže dať? Nuž, predstavte si, že ste oslavovali stránky svojich stránok a zároveň nezmenili polia odsekov, ktoré prehliadače ponúkané štandardne, pretože ich veľkosť bola ú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 nastaviť rozloženie potrebné parametre Prvky, ale existuje riziko, že niekde niečo zmeškané a na určitom mieste všetko "pláva".

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 obnoviť štýly, a čo si vyberiete - záleží len na vás, ale môžem vám povedať jeden - najlepší reset je ten, ktorý ste vytvorili, založené na svojich skúsenostiach a zvykoch. 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, štítok, legenda, stôl, titulok, Tbody, tfoot, thead, tr, th, td, článok, stranou, plátno, detaily, vložiť, obrázok, figcaption, päty, záhlavie, hroup, menu, NAV, výstup, 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, Obrázok, päta, záhlavie, HRGUP, MENU, NAV, Sekcia (displej: / * Vyrábame blokové položky (pre staré prehliadače) * /) tela (výška linky: 1; / * riadkovanie Text na stránke * /) OL, UL (List-Style: Žiadne;) Blockquote: Pred, Blockquote: Po, Q: Pred, Q: Po (Obsah: ""; / * Odstráňte citácie na Q a BLOCKQUOTE * / Obsah: Žiadne; / * Pridať pre lojalitu * /) BLOCKQUOTE, Q (Citáty: Žiadne; / * Ďalší spôsob, ako odstrániť citácie * /) Tabuľka (hraničný kolaps: kolaps; hraničná vzdialenosť: 0;)

Popis príkladu

Nasledujúci spôsob, ako obnoviť CSS navrhol Eric Meyer (Eric Meyer) - webový vývojár známy v určitých kruhoch. Tu už pridal reset štýlov pre tagy z HTML 5, čo, v čase písania tohto článku, a sami sú stále veľmi zle podporované moderné prehliadače. Ale vždy sa musíte pozerať na perspektívu, že?

V skutočnosti by tento článok mohol pokračovať v nekonečno, pretože opäť opakujem, v určitom bode, každý rozchod prichádza do svojej verzie absolutória alebo ho vôbec nepoužíva, spolieha sa na jeho pozornosť.

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.

Každý má svoje predinštalované pravidlá pre navrhovanie webových stránok a prvkov na nich (užívateľské agent metrheet) pripojené automaticky štandardne. Avšak, väčšina Vesah pri vytváraní nového projektu pridáva špeciálne reset. CSS, ktorý robí úplný reset štýlov CSS a umožňuje vývojárom vytvoriť s "čistým listom". Prečo a ako je to všetko - sito v aktuálnom článku.

Ak sa pozriete na obrázok-ukážka príspevku, uvidíte, že obvyklý riadok v Safari, Chrome a Firefox sa zobrazí absolútne. rôznymi spôsobmi. Áno, niekedy sa pravidlá v nich zhodujú, napríklad, všetci skrývajú štítok hlavy prostredníctvom displeja: Žiadna možnosť, avšak v mnohých prípadoch existujú vážne rozdiely pri vykresľovaní objektov na stránke. Domnievam sa, že niektorí z vašich zákazníkov nemusia radi, keď sa konečná verzia rozloženia nevyzerá na usporiadanie.

Preto, ak ste nováčik Web Developer, publikácia bude jednoznačne užitočná pre všeobecný rozvoj. Je to preklad tejto poznámky s prehľadom CSS obnoví podmienky v roku 2018. Som si istý, že v roku 2019 a neskôr to všetko bude stále relevantné, pretože Táto téma už bola viac ako 10 rokov (od okamihu uvoľnenia prvého podobného riešenia).

Prečo potrebujete nastavenia resetovania CSS

Ako ste už pochopili z pristúpenia, umožňujú vám eliminovať rozšírenie medzi základnými štýlmi webových prehliadačov a viesť ich do jednej štandardizovanej mysle plus-mínus. Vždy aplikovať na samom začiatku iného vlastného vývoja. V článku Erik Meyer o resetovaní CSS pred desiatimi rokmi sa spomína hlavným dôvodom tohto prístupu, ktoré roky stále relevantné:

Problém spočíva v tom, že rôzne prehliadače majú predvolené nastavenia a všetky z nich nie sú rovnaké. Myslíme si, že náš kód zmení počiatočnú konštrukciu stránky, ale to nie je úplne tak, a s pomocou resetovacích súborov môžeme urobiť tento štandardný typ dokumentu viac monasses pre všetky programy. Preto bude menej času na boj proti boja proti základnému zariadenia Firefox, Chróm atď.

Ale teraz je situácia menej v rozpore s rozložením?

Áno, v našom čase, v našom čase sa mnohé parametre v užívateľskom agente stali podobnejšími. Takmer všade hlavička H1 nastaví veľkosť písma 2EM a horizontálnu zarážka 0,67EM. Toto sú však všetky relatívne nové zmeny a minimálne, musíte zohľadniť podporu starých verzií programov, kde nie je takáto konzistencia.

Okrem toho, v niektorých prípadoch, v závislosti od typu Nulovania CSS (o tomto nižšie), tento čip je pre nás stále užitočný, aj keď boli zvážené len moderné webové prehliadače.

Aj naše štýly aplikujeme, prinášame základné základné?

Tento prístup je jedným z hlavných abstraktov protivníkov tohto prístupu - nakoniec, v každom prípade, tieto alebo iné parametre sú nahradené svojím vlastným štýlom.css, tak prečo pridať ďalší extra súbor a znížiť? Napriek tomu, že v tejto frási dáva zmysel, použitie reset je odôvodnené dvoma momentmi:

• Po prvé, pomáha napísať čistejší kód. Budeme ho posunúť do niekoľkých častí: samostatne pre návrh webového projektu a súbor pravidiel zameraných v špecifikách konkrétnych prehliadačov. Toto nie je vyliezť na hlavný súbor CSS so všetkými druhmi IE hackov atď.
• Po druhé, všetky resetuje veľmi málo, a ich sťahovanie nevyžaduje veľké číslo čas.

Typy resetovanie CSS (môžete prevziať odkazy v článku)

Počnúc vzdialeným rokom 2004, keď sa objavil prvý takýto vývoj, teraz existuje mnoho metód, ktoré sa líšia v ťažkostiach a ich špecifickosti. V skutočnosti existujú 3 góly, ktoré sa snažia vyriešiť reset štýlov CSS:

1. Opravte chybu v štýle užívateľa.
2. Zrušenie neštandardného pôvodného dizajnu v internetových prehliadačoch.
3. Vytvorenie univerzálnej základne kompatibilného štýlu.

Existujú možnosti, ktoré rozhodujú o všetky tri úlohy a tie, ktoré sú ostré len pod jedným konkrétnym problémom.

Korekcia / korekcia chýb

Zvážte prvú z cieľov vyjadrených vyššie. Ako ste už pochopili, eliminácia rôznych nedostatkov a húfov prehliadačov je najdôležitejšie pre podporu zastaraných vydaní. Jedným z dobrých príkladov takejto situácie - keď po vzniku HTML5 rovnaký Internet Explorer 9 neplatil správny typ displeja na nové objekty.

Preto v riešeniach podľa typu normalize.cs, všetky chyby sa zohľadňujú a spracúvajú: \\ t

/ ** * Pridajte správny displej v IE. * / Hlavný (displej: blok;)

/ ** * Pridajte správny displej v IE. * / Hlavná (Displej: Blok;)

Keďže tieto akcie sú potrebné len pre starý softvér, dáva zmysel používať postcss postprocesor, ako sú postcss normalizovať spolu s prehliadačom, aby ich pridali len vtedy, keď potrebujete implementovať podporu určitých prehliadačov.

Ďalší príklad kódu z čistého CSS, ktorý je vhodný vrátane moderných webových programov - opraviť prvky a atribút skrytý.

[Skryté] (Displej: Žiadne! DÔLEŽITÉ; // jeden z dobrých prípadov použitia! }

(Displej: Žiadne! Dôležité; // Jeden z dobrých prípadov! Dôležité)

Odstráňte zvláštne štýly prehliadačov

Toto je druhý dôvod pre resetovanie nastavení CSS. Každý z ich názorov na akú realizáciu v štýle užívateľa-agent je považovaná za "zvláštnu". Definícia pôvodného oznámenia autora je pomerne logická: toto je štýl, ktorý nie je "nahá" verzia zobrazenia prvku.. Napríklad pridávanie zarážky pre titulky v 2EM (koľko to urobí), myšlienka nie je zlá, ale prečo je 2EM, a nie 3EM alebo nie 4EM. V tomto prípade by základnou možnosťou bola absencia akéhokoľvek výskytu, to znamená, že nulová marža.

Najjednoduchší univerzálny prístupOdstránenie zarážky / Značky poľa:

* (Margin: 0, čalúnenie: 0;)

* (Margin: 0, čalúnenie: 0;)

Táto metóda je príliš radikálna, pretože Sa vzťahuje na všetky objekty, aj keď neočakávate (v rovnakom vstupe). Alternatívne sa často používa ERIC Meyer reset CSS, ktorý odstraňuje parametre marže / polstrovania, hraniciach a veľkosť písma (v 0 alebo žiadnom), kde je logicky odôvodnené:

HTML, telo, Div, Span, Applet, Objekt, Iframe, H1, H2, H3, H4, H5, H6, P, Lockquote, Pre, A, ABBR, ARRONYM, 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, štítok, legenda, stôl, titulok, Tbody, tfoot, thead, tr, th, td, článok, stranou, plátno, detaily, vložiť, obrázok, figcaption, päty, záhlavie, hroup, menu, NAV, výstup, RUBY, Sekcia, zhrnutie, čas, značka, zvuk, video (okraj: 0; čalúnenie: 0; hranice: 0; font- veľkosť: 100%; font: zdedenie; vertikálne - zarovnanie: základná línia;)

hTML, telo, Div, Span, Applet, Objekt, Iframe, H1, H2, H3, H4, H5, H6, P, Lockquote, Pre, A, ABBR, ARRONYM, 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, štítok, legenda, stôl, titulok, Tbody, tfoot, thead, tr, th, td, článok, stranou, plátno, detaily, vložiť, obrázok, figcaption, päty, záhlavie, hroup, menu, NAV, výstup, RUBY, Sekcia, zhrnutie, čas, značka, audio, video (okraj: 0; čalúnenie: 0; hranice: 0; veľkosť písma: 100%; font: zdedenie; vertikálne-zarovnanie: základná línia;)

Prepísať štýly

Na rozdiel od predchádzajúcej časti tu nie je hlavnou úlohou resetovať CSS z určitých objektov, ale prepíše ich s vlastnými aktuálnymi hodnotami.

Napríklad namiesto nastavenia všetkej veľkosti 1EM a marginov \u003d 0 v sanitrize.css sú nastavené aj iné hodnoty:

/ ** * Opravte veľkosť písma a marže na "H1" prvky v rámci "sekcií" a * `` `` `` `` kontext v chróm, firefox a safari. * / H1 (veľkosť fontu: 2EM; rozpätie: 0. 67EM 0;)

/ ** * Opravte veľkosť písma a marže na "H1" prvky v rámci "sekcií" a * `` `` `` `` kontext v chróm, firefox a safari. * / H1 (veľkosť písma: 2EM; Margin: 0,67EM 0;)

Reboot Bootstrap nájde ďalšiu ilustráciu aktuálnej úlohy. Vývojári šli trochu ďalšie a predpísané fonty a farbu pozadia pre telo.

// telo // // 1. Odstráňte maržu vo všetkých prehliadačoch. // 2. Ako najlepšia prax, aplikujte predvolené "Color" // 3. Nastavte explicitnú hodnotu zarovnania textu, aby sme neskôr mohli používať // dedičná "hodnota na veci"	`Prvky. Telo (marža: 0; // 1 Font- Rodina: $ Font - Family- Base; Font- Veľkosť: $ Font - Veľkosť-Base; Font- Hmotnosť: $ Font - Základňa; Line- Výška: $ Line - výška - Base; Farba: $ Body - Farba; Text - Zarovnanie: vľavo, // 3 pozadia - Farba: $ Body - BG; // 2)

// Telo // // 1. Odstráňte maržu vo všetkých prehliadačoch. // 2. Ako najlepšia prax, aplikujte predvolené "Color" // 3. Nastavte explicitné počiatočné hodnotu zarovnania textu, aby sme neskôr mohli použiť "dedičnú" hodnotu na veci ako` `Prvky. Telo (okraj: 0; // 1 Font-Rodina: $ font-face-base; font-veľkosť: $ font-veľkosť-základ; font-hmotnosť: $ font-weight-base; výška linky: $ line-výška -Base; Farba: $ Body-Color; Text-ALIGN: vľavo, // 3 na pozadí - Farba: $ Body-BG; // 2)

CELKOM. Čo si môžete vybrať

V pôvodnej poznámke je výsledok zodpovedajúceho prieskumu

V tomto článku budeme hovoriť o resetovanie štýlov a zvážiť príklad vytvorenia takéhoto súboru reset.css.

Myšlienka hádzania štýlov sa objavila asi pred 10 rokmi. Ktoré skutočne dospel k záveru, že pomocou malého sady štýlov CSS priniesli zobrazenie stránky vo všetkých prehliadačoch na to isté. Samozrejme, že nie vždy funguje, ale niektoré momenty môžu byť opravené - napríklad hranice nechápe, kde sa koná v niektorých verziách. Alebo modrý zdvih (obrys) v poliach.

Nie pre jedného front-end vývojára nie je tajomstvo, že prehliadače sú veľmi vyberané a každé procesy hTML prvky Vlastným spôsobom pridávanie štandardných štýlov.

Keďže tieto myšlienky zachytili požiar na dlhú dobu, nie je prekvapujúce, že už existuje pripravené súbory Reset, zvyčajne nazývaný reset.css a pripojiť sa ku všetkým projektom.

Prečo samostatný súbor? Áno, len preto, že je pohodlnejšie preniesť ich z projektu do projektu.

Tu je príklad reset.css od roku 2007:

/ * 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; )

Toto je len štandard tohto súboru prijaté určitým kruhom webových vývojárov.

Odporúčam vám, či ste skúsený programátor alebo len začiatočníci, aby ste vytvorili váš resetovací súbor. Ako základ môžete vykonať štandard popísaný vyššie, doplniť ho s jeho voličmi alebo zmeniť existujúce. Tu je príklad takéhoto súboru, ktorý som vyvinula pre seba:

vstup, TEXTAWAREA, A, TLAČIDLO, Zvoľte (Osnova: Žiadne) IMG (Border: Žiadne;) HR (CLEAR: Obaja; Border: Žiadne; pozadie: Žiadne;) * (Sighting-Repeat: NO-REPEAP;) / * HTML5 RESET REZPLATNOSTI PRE STAROSTI PREHRÁVNATEĽOV * / ČLÁNKU, PODROBNOSTI, PODROBNOSTI, FIGCAPTION, Obrázok, päty, hlavičku, HGroup, Menu, NAV, Sekcia (Display: Block;) Body (výška linky: 1;) OL, UL (zoznam -Style: Žiadne, rozpätie: 0; Padding: 0;) Blockquote, Q (citácie: Žiadne;) Blockquote: Pred, Blockquote: Pointer, Q: Pred, Q: Po (Obsah: ""; Obsah: Žiadny;) Tabuľka (Border Collaps: Kolaps; hraničnú vzdialenosť: 0;)

Môžete kip niektorý z vyššie uvedeného kódu pre osobné použitie, ale ak ho používate vo svojich článkoch - položte odkaz na zdroj.