CSS în mod implicit. Resetați stilurile utilizând resetarea CSS. Unde pot găsi CSS pentru implicit CSS pentru browser

CSS CSS implicit pentru elementele HTML (2)

Pentru fiecare browser sunt diferite, deci:

Firefox (Gecko): . Sau mergeți la Resurse: // GRE-Resurse / și uitați la HTML.Css.
Chrome / Safari (WebKit):
- Chrome (clipește):
Internet Explorer. (Trident) , Versiuni anterioare: http://web.archive.org/web/20170122223926/http://www.iecss.com/

Unde pot găsi CSS pentru implicit CSS pentru un browser?

Multe elemente HTML au unele proprietăți CSS În mod implicit, care poate duce uneori la un comportament necunoscut / nedorit. De exemplu, câmpurile de introducere sunt afișate diferit în diferite browsere. Caut un loc care acoperă noi proprietăți CSS3 și noi elemente HTML5.

Am văzut în alte aspecte (mult mai vechi) probleme (cum ar fi foile de stil CSS în mod implicit în browsere) care oferă soluții de resetare CSS. Această soluție nu este uneori necesară, adesea aș dori să salvez câteva proprietăți de bază (de exemplu, selecția câmpurilor de introducere în crom). Cu alte cuvinte: nu vreau să scap de lucruri doar pentru că nu știu ce fac .

Asa de, există un site care să-mi dea toate aceste informații (sau poate cel mai mult)?

Depozitul GitHub pentru toate specificațiile HTML W3C și mesele implicite ale stilului CSS pentru dezvoltatori pot găsi

1. 2. Stiluri standard pentru Internet Explorer

3. 4. Stiluri standard pentru operă

5. Stiluri standard pentru HTML4 (specificație W3C)

6. Stiluri standard pentru HTML5 (Specificații W3C)

Exemplu, prin specificația implicită W3C HTML4:

Html, adresa, blockquote, corp, dd, div, dl, dt, sell set, formă, cadru, cadru, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, centru, dir, hr, Meniu, Pre (afișaj: bloc; Unicode-Bidi: Embed) Li (Afișaj: Nici unul) Tabel (Afișaj: Table) TR (Afișaj: Table-Header-Group) Tbody (Afișaj: Table-Row-Footer-group) Colgroup ( Afișaj: Grupul de tabel-coloană) TD, TH Colgroup (Afișaj: Table-coloană-grup) TD, TH (Afișare: Cell-celulă) THE (Afișaj: Tabel-caption) TH (Greutate de tabel: Blored, Text-Align : Centru) Caption (text-align: centru) Corp (margine: 8px) H1 (dimensiune font: 2em; margine: .67em 0) H2 (dimensiune font: 1,5Em; margine: .75em 0) H3 (Font- Dimensiune: 1.17EM; Marginea: .83em 0) H4, P, Blockquote, UL, set, formular, ol, dl, dir, meniu (margine: 1.12EM 0) H5 (font-dimensiune: .83em; Marginea: 1.5EM 0) H6 (dimensiune font: .75EM; margine: 1.67EM 0) H1, H2, H3, H4, H5, H6, B, puternic (greutate font-greutate: mai îndrăzneț) (marg în stânga: 40px; Margin-dreapta: 40px) I, cite, em, var, adresa (font-stil: italic) pre, tt, cod, kbd, sov (font-familie: monospace) pre (alb-space: pre) buton, textarea, Intrare, selectați (Afișaj: Inline-Block) Big (font-dimensiune: 1.17EM) Mic, sub, sub (vertical-align: sub) sup (vertical-align: super) (vertical-align: super) : 2px;) Tead, Tbody, Tfoot (vertical-align: mijlocul) TD, TH, TR (vertical-align: moștenire) s, grevă, del (decorare text: linie-prin) hr (margine: 1px inset) ol , UL, Dir, Meniu, DD (margine-stânga: 40px) OL (List-Style-Type: zecimal) OL UL, UL OL, UL UL, OL OL (Margin-top: 0; Margin-Bottom: 0) U , INS (text-decorare: subliniere) Br: Înainte (Conținut: "\\ A"; White-Space: Pre-line) Centrul (Text-Align: Centrul): Link, vizitat (decorațiuni text: Subline): Focus (Schiță: Setări subțiri subțiri (nu se schimbă) * / BDO (Direcția: LTR, Unicode-Biddi: Bidi-suprascriere) BDDO (Direcția: RTL; Unicode-sumbră I: Bidi-suprascriere) * (Direcția: LTR; Unicode-Bidi: Embed) * (Direcția: RTL; Unicode-Biddi: Embed) @Media Imprimare (H1 (pagină-Break-Înainte: întotdeauna) H1, H2, H3, H4, H5, H6 (pagină-Break-ulterioară: Evitați) UL, OL, DL (pagină-sparge-înainte: Evitați))

În acest articol vom vorbi despre resetarea stilurilor și luați în considerare un exemplu de creare a unui astfel de fișier de resetare.CSS.

Ideea de a arunca stiluri a apărut acum 10 ani. Care au ajuns la concluzia că, cu ajutorul unui set mic de stiluri CSS, a adus vederea paginii în toate browserele la aceleași. Bineînțeles că nu funcționează întotdeauna, dar unele momente pot fi corectate - de exemplu, granița nu înțelege unde se desfășoară în unele versiuni. Sau accident vascular cerebral albastru (contur) în câmpuri.

Nu pentru un dezvoltator frontal nu este un secret că browserele sunt foarte arogante și fiecare gestionează elementele HTML în felul lor, adăugând stilurile lor standard.

Din moment ce aceste idei au luat foc pentru o lungă perioadă de timp, nu este surprinzător faptul că există deja fișiere gata Resetați, de obicei numit resetare.css și conectați la toate proiectele.

De ce într-un fișier separat? Da, doar pentru că este mai convenabil să le transferați de la proiect la proiect.

Iată un exemplu Reset.Css din 2007:

/ * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licență: Niciuna (Domeniul Public) * / HTML, corp, div, span, apple, obiect, iframe, H5, H2, H3, H4, H5, H6, P, Blockquote, Pre, A, Abbr, Acronim, Adresa, Mare, cite, cod, del, dfn, em, img, ins, kbd, q, s, sov, mic, grevă, puternic, sub, sup, tt, var, b, u, i, tt, var, b, U, I, Center, DL, DT, DD, OL, UL, Li, set, Formă, Etichetă, Legendă, Tabelă, Tation, Tbod, Tfoot, Tead, Tr, Th, Td, Articol, deoparte, Canvas, detalii, Embed, Figura, Figuri, Footer, Header, HGroup, Meniu, Nav, Ieșire, Ruby, Secțiune, Rezumat, Timp, Marcare, Audio, Video (margine: 0; Hadding: 0; Border: 0; Font-dimensiune: 100% ; font: moștenire; vertical-align: linia de bază;) / * resetarea rolului de afișare HTML5 pentru browserele mai vechi * / articol, deoparte, detalii, figuri, figuri, subsol, antet, hgroup, meniu, nav, secțiune (afișaj: bloc; ) Corpul (înălțimea liniei: 1;) OL, UL (List-Style: Nici unul;) Blockquote, Q (Quotes: Nici unul;) Blockquote: înainte, Blockquote: Afterter, Q: Înainte, Q: după (Conținut: ""; Conținut: Nici unul;) Tabel (colaps de frontieră: C. Ollapse; Spațierea frontierei: 0; )

Acesta este doar standardul acestui fișier luat de un anumit cerc de dezvoltatori web.

Vă sfătuiesc, indiferent dacă sunteți un programator experimentat sau începători pentru a vă dezvolta fișierul de resetare. Ca bază, puteți lua standardul descris mai sus, completați-l cu selectorii sau schimbați cele existente. Iată un exemplu al unui astfel de dosar pe care l-am dezvoltat pentru mine:

intrare, textarea, butonul A, selectați (contur: none) img (graniță: nici unul;) HR (clar: ambele; margine: nici unul; fundal: nici unul;) * (fundal-repetare: fără repetare;) / * HTML5 Resetarea rolului de afișare pentru browserele mai vechi * / articol, deoparte, detalii, figura, figura, subsol, antet, hgroup, meniu, nav, secțiune (afișaj: bloc;) corp (linia-înălțime: 1;) OL, UL (listă -Style: Nici unul; Marginea: 0; Padding: 0;) Blockquote, Q (Quotes: Nici unul;) Blockquote: Înainte, Blockquote: Afterter, Q: Înainte, după (Conținut: "" Conținut: Nici unul; (Prăbușirea frontierei: colaps, spațierea frontierei: 0;)

Puteți face kip oricare dintre codurile de mai sus pentru uz personal, dar dacă îl utilizați în articolele dvs. - puneți un link la sursă.

Acest articol este primul ciclu de pe tema Taming CSS. Astăzi ne vom uita la tehnologie Resetare css..

Pentru ce ai nevoie?

Fiecare browser stabilește stilurile implicite pentru diferite elemente HTML. DIN folosind CSS. Resetare Putem la nivelul acestei diferențe pentru a furniza stiluri încrucișate.

De exemplu, utilizați un element a. În documentul dvs. Cele mai multe browsere precum Internet Explorer și Firefox Adaugă link culoarea albastră și c. Cu toate acestea, imaginați-vă că, în cinci ani, cineva a decis să creeze un nou browser (să-i numim Ultrabrowser). Dezvoltatorii de browser nu au plăcut un accent albastru și supărat, așa că au decis să aloce linkuri roșu și bold Font.. Se bazează pe acest lucru dacă setați valoarea de bază a stilurilor pentru element a., va fi garantat ca fiind așa cum doriți să îl vedeți și nu la fel de preferat să afișați dezvoltatorii de Ultrabrowser.

Dar acum nu avem niciun liniuță, inclusiv între paragrafe individuale! Ce să fac? Nu mințiți și nu vă fie frică: sub descărcarea noastră descriu regula de care avem nevoie. Puteți face acest lucru în moduri diferite: pentru a specifica o liniuță din partea de jos sau deasupra paragrafului, specificați-o în procente, pixeli sau în em.

Cel mai important lucru, browserul joacă acum în conformitate cu regulile noastre, și nu în conformitate cu aceasta. Am decis să fac în acest fel:

* (Marja: 0; Padding: 0;) P (margine: 5px 0 10px 0;)

Ca rezultat, am avut ceea ce ar putea fi văzut în al treilea exemplu.

Puteți crea propriile stiluri pentru resetare, dacă rezolvați o anumită sarcină în proiectul dvs. În ciuda acestui fapt, nu există un manual pas cu pas pentru crearea propriei resetare CSS. Recomandă-ți propriile principii și stil propriu.

Pentru a vă ajuta să faceți o alegere, voi da mai multe linkuri:

Mai puțin este mai mult - alegerea mea de resetare CSS (Ed Elliot).

2. Resetarea CSS este primul lucru pentru a vedea browserul

Resetați stilurile după instalarea propriilor stiluri pentru elementele este o abordare incorectă. În acest caz, nimic bun să așteptați afișarea browserului. Amintiți-vă că ați conectat întotdeauna resetarea CSS și apoi toate celelalte stiluri.

Da, înțeleg că a fost ridicol, dar aceasta este una dintre greșelile majore ale dezvoltatorilor de la Mala la Mare. Mulți uită doar de asta.

Unii pot pune o întrebare logică: de ce se întâmplă? Răspunsul este simplu: regulile înregistrate sub textul fișierului CSS (și chiar mai mic prin conexiunea lor în document), suprascrie regulile declarate mai devreme.

Să nu ne mișcăm foarte mult din subiect și să continuăm. Aplicați stilurile Eric Meyer în exemplul nostru, dar după Descrierea proprietăților noastre, așa cum se arată în 4 exemple. Matematica ar spune următoarele: "Ceea ce trebuia să dovedească".

3. Utilizați un document CSS separat pentru resetarea CSS

Trebuie să (nu, nu m-au forțat) să menționez acest sfat. Utilizarea unui fișier separat pentru resetarea CSS este practica obișnuită care acceptă. număr mare. dezvoltatori.

De fapt, eu aderă la poziția creației un fișier CSS mare Datorită performanței mai mari a acestei abordări. Dar, în această întrebare, am tendința de a fi de acord cu majoritatea: resetarea CSS ar trebui să fie luată într-un fișier separat (numit de obicei RESET.CSS). În acest caz, îl puteți utiliza în diverse proiecte fără a face nici un efort de a ramura din alte reguli CSS.

4. Încercați să evitați utilizarea unui selector universal

În ciuda faptului că acest concept funcționează, cererea sa nu este de dorit din cauza incompatibilității cu unele browsere (de exemplu, acest selector este procesat în mod incorect în Internet Explorer). Ar trebui să utilizați această tehnică numai pentru pagini simple, mici, statice și previzibile (dacă ați fi avut deja acest lucru).

Acest sfat este deosebit de important atunci când dezvoltați soluții, cum ar fi teme CMS. Nu puteți prezice în avans cum va fi folosit și cum va fi modificat. Este mai bine să descrieți regulile CSS fundamentale pentru toate elementele decât utilizarea pentru acest mecanism imprevizibil (chiar și un volum mai mic) al selectoarelor universale.

5. Evitați proprietățile redundante atunci când utilizați resetarea CSS

Un alt motiv pentru care nu-mi place un fișier separat pentru resetarea CSS este redundanța potențială a declarațiilor ulterioare ale proprietăților CSS. Repetarea indivizilor din stilurile dvs. printre întregul set de fișiere CSS este o moietonă și ar trebui evitată. Desigur, uneori suntem prea leneși să ținem pasul cu stilul stilurilor și să combinăm unele dintre ele, dar cel puțin încercați!

Să revenim la resetarea CSS de la Eric. Acesta stabilește valorile implicite pentru elementul de înălțime, culor și fundal corp. În felul următor:

Corp (înălțime de linie: 1; Culoare: negru; fundal: alb;)

Să presupunem că știți deja cum va arăta elementul corp.:

culoare de fundal: #CCCCCC;
culoare: # 996633;
Doriți să repetați orizontal o imagine de fundal specifică.

În acest caz, nu este nevoie să creați un selector nou pentru a descrie proprietățile dvs. - le puteți activa pur și simplu în resetarea CSS. S-o facem:

Corp (înălțime de linie: 1; Culoare: # 996633; fundal: #CCC URL (Teles-imagine.gif) Repetați-X sus stânga;)

Nu vă fie frică să modificați resetarea CSS în sine. Stabiliți-o pentru dvs., faceți-o să funcționeze asupra dvs. Schimbați, reconstruiți, eliminați și adăugați-l după cum aveți nevoie în cazul dvs. particular.

Eric Meyer a spus despre acest lucru: "Acest lucru nu este cazul când toată lumea ar trebui să utilizeze resetarea CSS fără schimbare".

Tot Elementele HTML. Paginile implicite au propriile valori. Și, din păcate, nu sunt interpretate în mod egal de diferite browsere. Ca rezultat, proiectarea site-ului suferă, designul său se schimbă atunci când o schimbare de browser (browser de internet). Scopul procedurii de resetare a stilului este de a reduce inconsecvența browserului în astfel de lucruri ca înălțimea liniei, câmpurile, dimensiunea fonturilor titlurilor etc.

Exemple de scripturi de resetare a stilului CSS

Există o opinie că fiecare webmaster de auto-respect ar trebui să-și scrie cod propriu. Resetați CSS. Dar eu sunt un susținător al unei alte abordări, luați o soluție gata făcută, înțelegeți-o și corectați dacă este necesar.

Eric Meyer CSS Reset

Scriptul de descărcare de la Eric Meyer, cu cuvintele autorului însuși, în mod intenționat foarte comune. De exemplu, nu este specificat în el pentru un corp de element, orice fundal implicit. Prin urmare, trebuie schimbat, editat, extins și configurat în alt mod în funcție de nevoile dvs. Adăugați culorile dorite pentru pagini, linkuri și așa mai departe.

/ * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licență: Niciuna (Domeniul Public) * / HTML, corp, div, span, apple, obiect, iframe, H5, H2, H3, H4, H5, H6, P, Blockquote, Pre, A, Abbr, Acronim, Adresa, Mare, cite, cod, del, dfn, em, img, ins, kbd, q, s, sov, mic, grevă, puternic, sub, sup, tt, var, b, u, i, tt, var, b, U, I, Center, DL, DT, DD, OL, UL, Li, set, Formă, Etichetă, Legendă, Tabelă, Tation, Tbod, Tfoot, Tead, Tr, Th, Td, Articol, deoparte, Canvas, detalii, Embed, Figura, Figuri, Footer, Header, HGroup, Meniu, Nav, Ieșire, Ruby, Secțiune, Rezumat, Timp, Marcare, Audio, Video (margine: 0; Hadding: 0; Border: 0; Font-dimensiune: 100% ; font: moștenire; vertical-align: linia de bază;) / * resetarea rolului de afișare HTML5 pentru browserele mai vechi * / articol, deoparte, detalii, figuri, figuri, subsol, antet, hgroup, meniu, nav, secțiune (afișaj: bloc; ) Corpul (înălțimea liniei: 1;) OL, UL (List-Style: Nici unul;) Blockquote, Q (Quotes: Nici unul;) Blockquote: înainte, Blockquote: Afterter, Q: Înainte, Q: După (Conținut: ""; Conținut: Nici unul;) Tabel (colaps de frontieră: C. Ollapse; Spațierea frontierei: 0; )

Yahoo! (YUI 3) Resetați CSS

CSS YUI 3 stiluri înmoaie stilul controversat al browserelor de elemente HTML, precum și orice alt script de resetare CSS pentru a crea o bază fiabilă pentru crearea de site-uri web și aplicații web.

/ * Yui 3.18.1 Copyright 2014 Yahoo! Inc Toate drepturile rezervate. Licențiat sub licența BSD. http://yuilibrary.com/license/ * / * TODO va trebui să elimine setările pe HTML deoarece nu putem "spațiul de nume. Todo cu prefixul, ar trebui să grup de selector sau de proprietate pentru economii de greutate? * / HTML (Culoare : # 000; fundal: #fff;) / * todo eliminați setările pe corp, deoarece nu putem spaca. * / * TODO TESTARE Pune-l pe cap. - nu reușește pe FF. * / Corp, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, cod, formă, sediu, legendă, intrare, textarea, p, blockquote, th, Td (margine: 0; padding: 0; ... * / adresa, caption, cite, cod, dfn, em, puternic, th, var (font-stil: normal; greutate font: normal;) ol, ul (stil de listă: niciunul;) caption, th (Text-align: stânga;) H1, H2, H3, H4, H5, H6 (h6-dimensiune: 100%; greutate font: normal;) Q: înainte, Q: după (conținut: "";) abbr, Acronim (frontiera: 0, varianta de font: normal;) / * pentru a conserva linia-înălțime și aspect selector * / sup (vertical-alinign: text-top;) sub (vertical-alinign: text-fund;) intrare, textarea , Selectați (Font-Family: moștenire; font-dimensiune: moștenire; Font-greutate: moștenire; * font-dimensiune: 100%; / * pentru a permite redimensionarea pentru IE * /) / * deoarece legenda nu moștenește în IE * / Legendă (culoare: # 000;) / * yui css detect Ion ștampila * / # yui3-css-stamp.cssretset (afișaj: nici unul; )

Resetarea stilurilor normalizate.Css.

Normalizați.css este un fișier CSS personalizat care permite browserelor să afișeze toate elementele mai în mod constant și în conformitate cu standardele moderne. Autorii săi au explorat diferențele dintre stilurile diferitelor browsere, pentru a corecta numai acele stiluri care au nevoie de normalizare.

/ *! Normalize.css v6.0.0 |. MIT LICENȚĂ | github.com/nescolas/normalize.css * / / * document \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\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. Corectați înălțimea liniei În toate browserele. * 2. Preveniți ajustările dimensiunii fontului după modificarea orientării în * IE ON Windows Phone și în ios. * / HTML (înălțimea liniei: 1.15; / * 1 * / -MMS-Dimensiune-reglaj: 100%; / * 2 * / -webkit-dimensiune-reglaj: 100%; / * 2 * /) / * Secțiuni \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / ** * Adăugați afișajul corect în IE 9-. * / Articol, deoparte, subsol, antet, NAV, secțiune (afișaj: bloc;) / ** * Corectați dimensiunea fontului și marginea lui "H1" în interiorul "secțiunii" și a articolului "Conefox în Chrome, Firefox și Safari. * / H1 (dimensiune font: 2em; margine: 0.67EM 0;) / * Gruparea conținutului \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / / ** * Adăugați afișajul corect în IE 9-. * 1. Adăugați afișajul corect în IE. * / Figcaption, Figura, Main (/ * * * Afișare: bloc;) / * * Adăugați marja corectă în IE 8. * / Figura (margine: 1em 40px;) / ** * 1. Adăugați caseta corectă Dimensiune în Firefox. * 2. Afișați depășirea în margine și adică. * / HR (Dimensiune: Conținut-cutie; / * 1 * / Înălțime: 0; / * 1 * / Overflow: vizibil; / * 2 * /) / ** * 1. Corectați moștenirea și scalarea dimensiunii fontului În toate browserele. * 2. Corectați dimensiunea fontului EM "în toate browserele. * / Pre (Font-Family: Monospace, Monospace; / * 1 * / Font-dimensiune: 1em; / * 2 * /) / * Semantics la nivel de text \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\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. Scoateți fundalul gri pe legăturile active din IE 10. * 2. Îndepărtați golurile din link-urile subliniate în iOS 8+ și Safari 8+. * / A (fundal-culoare: transparent; / * 1 * / -webkit-text-decorare-skip: obiecte; / * 2 * /) / * 1. Scoateți marginea de jos în crom 57- și Firefox 39- . * 2. Adăugați decorarea corectă a textului în Chrome, Edge, Ie, Opera și Safari. * / abbr (fundul de frontieră: Niciuna; / * 1 * / text-decorare: subliniază; / * 2 * / text-decorare: subliniat punctat; / * 2 * /) / ** * prevenirea aplicației duplicate de "îndrăzneață `Prin următoarea regulă din Safari 6. * / B, puternică (greutate font: moștenire;) / ** * Adăugați greutatea corectă a fontului în crom, margine și safari. * / B, puternic (greutate font: mai îndrăzneț;) / ** * 1. Corectați moștenirea și scalarea dimensiunii fontului în toate browserele. * 2. Corectați dimensiunea fontului EM "în toate browserele. * / Cod, KBD, Samp (Font-Family: Monospace, Monospace; / * 1 * / Font-dimensiune: 1em; / * 2 * /) / ** * Adăugați stilul corect de font în Android 4.3-. * / DFN (Font-Style: Italic;) / ** * Adăugați fundalul și culoarea corectă în IE 9-. * / Mark (fundal-culoare: # ff0; Culoare: # 000;) / * * Adăugați dimensiunea corectă a fontului în toate browserele. * / Mic (font-dimensiune: 80%;) / ** * Prevenirea elementelor `și" sup` din afectarea înălțimii liniei în * toate browserele. * / Sub, sup (font-dimensiune: 75%; înălțime de linie: 0; poziție: rudă; vertical-align: linia de bază;) sub (partea de jos: -0,25em;) / * Conținut încorporat \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d. \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / ** * Adăugați afișajul corect în IE 9-. * / Audio, Video (Afișaj: Inline-Block;) / ** * Adăugați afișajul corect în iOS 4-7. * / Audio: Nu () (afișaj: Nici unul; înălțime: 0;) / ** * Scoateți marginea pe imaginile din interiorul legăturilor din adică 10-. * / Img (stil de frontieră: none;) / * * Ascundeți depășirea în IE. * / Svg: Nu (: rădăcină) (deversare: ascunsă;) / * forme \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / ** * Eliminați marginea în Firefox și Safari. * / Buton, intrare, optgroup, selectați, textarea (marginea: 0;) / * * Afișați depășirea în IE. * 1. Afișați supraîncărcarea în margine. * / Buton, intrare (/ * 1 * / overflow: vizibil;) / ** * Scoateți moștenirea textului transformarea în margine, Firefox și IE. * 1. Îndepărtați moștenirea transformării textului în Firefox. * / Buton, selectați (/ * 1 * / text-transformare: Nici unul;) / ** * 1. Preveniți un bug webkit unde (2) distruge nativul "audio" și "video" * Controls în Android 4. * 2. Corectați incapacitatea de a servi tipuri de clicuri în iOS și Safari. * / Buton, HTML, / * 1 * /, (-Webkit-aspect: buton; / * 2 * /) / ** * Scoateți marginea interioară și umplutura în Firefox. * / Button :: - Moz-Focus-Inner, :: - Moz-Focus-Inner, :: - Moz-Focus-Inner, :: - Moz-Focus-Inner (stil de frontieră: Nici unul; Padding: 0;) / ** * Restaurați stilurile de focalizare prin regula anterioară. * / Buton: -moz-focalizează,: -Moz-focalizează, -moz focalizează, -moz focalizează (contur: 1px punctat buttontext;) / ** * 1. Corectați ambalarea textului în margine și IE. * 2. Corectați moștenirea culorii de la elementele `Fieldset` în IE. * 3. Scoateți paddingul, astfel încât dezvoltatorii să nu fie prinși atunci când elementează * `Fieldset` elemente în toate browserele. * / Legenda (dimensionare: Border-cutie; / * 1 * / Culoare: moștenire; / * 2 * / afișaj: tabel; / * 1 * / max lățime: 100%; / * 1 * / padding: 0 ; / * 3 * / spațiu alb: normal; / * 1 * /) / ** * 1. Adăugați afișajul corect în IE 9-. * 2. Adăugați alinierea verticală corectă în Chrome, Firefox și Opera. * / Progres (Afișaj: Inline-Block; / * 1 * / vertical-align: linia de bază; / * 2 * /) / ** * Scoateți bara de derulare verticală implicită în IE. * / Textarea (Overflow: Auto;) / ** * 1. Adăugați caseta corectă de dimensionare în IE 10-. * 2. Scoateți umplutura în IE 10-. * /, (Dimensionare: cutie de margine; / * 1 * / padding: 0; / * 2 * /) / ** * Corectați stilul cursorului de increment și butoanele descrise în crom. * / :: - Butonul WebKit-Inner-Spin-Button, :: - Butonul WebKit-Outer-Spin (Înălțime: Auto;) / ** * 1. Corectați aspectul ciudat în Chrome și Safari. * 2. Corectați stilul de contur în Safari. * / (-Webkit-aspect: textField; / * 1 * / contur-offset: -2px; / * 2 * /) / ** * Scoateți butoanele interioare și anulați butoanele din Chrome și Safari pe MacOS. * / :: - WebKit-Search-Cancel-buton, :: - Webkit-căutare-decorare (-Webkit-aspect: Nici unul;) / ** * 1. Corectați incapacitatea de a servi tipuri clicabile în iOS și Safari. * 2. Schimbați proprietățile fontului pentru a "moșteni" în safari. * / :: - Butonul WebKit-File-Upload (-Webkit-aspect: buton; / * 1 * / font: moștenire; / * 2 * /) / * interactiv \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d. \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / * * Adăugați afișajul corect în IE 9-. * 1. Adăugați afișajul corect în margine, adică și Firefox. * / Detalii, / * 1 * / MENU (Afișaj: Block;) / * * Adăugați afișajul corect în toate browserele. * / Rezumat (afișaj: listă;) / * scripting \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / ** * Adăugați afișajul corect în Adică nouă -. * / Canvas (Afișaj: Inline-Block;) / ** * Adăugați afișajul corect în IE. * / șablon (afișaj: Nici unul;) / * ascuns \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / ** * Adăugați afișajul corect în IE 10 -. * / (Afișaj: Nici unul;)

Resetați prin selectorul universal * (Asterisk)

La prima vedere, aceasta poate părea cea mai simplă și simplă soluție, de ce să descrieți toate elementele HTML și să le atribuiți atunci când puteți utiliza selectorul *, deoarece acțiunea sa se aplică tuturor HTML.

* (Marja: 0; Hadding: 0;)

Dar, din păcate, aceasta nu este o practică bună. Browserul este foarte greu (durează mult timp în comparație cu alte proceduri de resetare CSS) Aplicați regulile fiecărui element din document, în special pe paginile web mari și pot distruge și multe stiluri bune de implicite.

Resetarea stilului și WordPress

Dacă doriți să utilizați una dintre metodele de resetare a stilurilor CSS descrise mai sus pentru site-ul de pe WordPress, se poate face în două moduri.

Primul este că trebuie să copiați codul de resetare la începutul fișierului stil.css al tema WordPress (după linii de autor și numele subiectului, adică după textul încadrat și asterisc / * ... * / .

@import "RESET.CSS";

În cazul în care există o directivă @Import în CSS, atunci trebuie să se situeze chiar la începutul tabelului (înainte de toate regulile). În caz contrar, browserul o poate ignora.

Cu alte cuvinte, pentru a spori viteza, tabelele stilurilor CSS, de regulă, sunt configurate într-un singur fișier. Prin urmare, utilizați @import fără nevoie reală.

După cum puteți vedea, o descărcare de stiluri în WordPress nu este nimic special.

Mulțumiri

La scrierea articolului, au fost utilizate următoarele surse.