CSS prema zadanim postavkama. Resetirajte stilove pomoću CSS resetiranja. Gdje mogu pronaći CSS za CSS zadanu za preglednik

CSS CSS zadano za HTML elemente (2)

Za svaki preglednik se razlikuju, pa:

Firefox (Gecko): , Ili idite na resurs: // Gre-resursi / i pogledajte html.css.
Chrome / Safari (WebKit):
- Chrome (treptanje):
Internet Explorer. (Trozubac) , Ranije verzije: http://web.archive.org/web/20170122223926/http://www.iecsss.com/

Gdje mogu pronaći CSS za CSS zadanu za preglednik?

Mnogi HTML elementi imaju neke cSS svojstva Prema zadanim postavkama, što ponekad može dovesti do nepoznatog / neželjenog ponašanja. Na primjer, polja za unos prikazana su drugačije u različitim preglednicima. Tražim mjesto koje pokriva nove CSS3 svojstva i nove HTML5 elemente.

Vidio sam u drugima (mnogo starijim) problemima (kao što su CSS stilske listove po defaultu u preglednicima) koji nude CSS rješenja za resetiranje. Ovo rješenje ponekad nije potrebno, često bih želio spremiti neka osnovna svojstva (na primjer, odabir ulaznih polja u Chromeu). Drugim riječima: ne želim se riješiti stvari samo zato što ne znam što rade .

Tako, ima li mjesta koja mi može dati sve ove informacije (ili možda najviše)?

Github Repozitorij za sve HTML W3C specifikacije i CSS stil zadane tablice za programere mogu pronaći

1. 2. Standardni stilovi za Internet Explorer

3. 4. Standardni stilovi za operu

5. Standardni stilovi za HTML4 (Specifikacija W3C)

6. Standardni stilovi za HTML5 (Specifikacija W3C)

Primjer, pomoću zadane specifikacije W3C HTML4:

HTML, adresa, blokiranje, tijelo, dd, DIV, DL, DT, Fefet, Oblik, okvir, FRAMESET, H1, H2, H5, H4, H5, H6, NOFRAMES, OL, P, UL, UL, UL, UL, DIR, DIR, DIL, DIL, READ Izbornik, PR (Prikaz: BLOCK; UNICODE-BIDI: Embed) Li (Zaslon: None) Tablica (Zaslon: tablica) TR (Zaslon: Stol-Header-Group) Tbody (Zaslon: Table-Footer-grupa grupa) Colgroup ( Prikaz: Stolna stupac grupa) TD, TH Colgroup (Zaslon: STOP-stupac grupa) TD, th (zaslon: stolni) naslov (zaslon: tablica naslov) th (težina fontova: hraniteljica; tekst-poravnati : Centar) naslov (tekst-poravnati: centar) tijelo (margina: 8px) H1 (veličina fonta: 2em; margina: .67em 0) H2 (veličina fonta: 1.5em; margina: .75em 0) H3 (fonta- Veličina: 1.17em; margina: .83em 0) H4, P, blokquote, ul, polet, oblik, ol, DL, dir, izbornik (margina: 1.12em 0) H5 (veličina fonta: .83em; margina: 1.5em; 0) H6 (veličina fonta: .75em; margina: 1.67em 0) H1, H2, H3, H4, H5, H6, B, jaka (masnoća fonta: hrabriji) blockquote (Marg na lijevoj strani: 40px; Margin-desno: 40px) i, citit, em, var, adresa (font-stil: kurac) pre, tt, code, kbd, SAPAM (FONT-Obitelj: MonoSpace) PR (White-prostor: PR) gumb, Textarea, Ulaz, odaberite (Zaslon: Inline-Block) Big (veličina fonta: 1.17em) mali, pod, pod (vertikalno-uskladiti: sub) sup (vertikalno-uskladiti: super) tablica (vertikalno-poravnati: super) razmak granice : 2px;) thead, tybody, tfoot (vertikalno-uskladiti: srednji) td, th, tr (vertikalno-uskladiti: naslijediti) s, štrajk, del (tekst-ukras: linija-kroz) hr (granica: 1px inset) ol , Ul, dir, izbornik, dd (margin-lijevo: 40px) ol (popis-stilski tip: decimal) ol ul, ul, ul ul, ol (margin-top: 0; margin-dno: 0) u , Ins (Tekst-dekoracija: podcrtavanje) Br: prije (sadržaj: ";"; bijeli prostor: pred-line) centar (tekst-poravnavanje: centar): link ,: posjećen (tekst-ukras: podcrtavanje): fokus): fokus (Nacrt: tanke postavke invertira (ne mijenjaju) * / BDO (smjer: LTR; Unicode-Bici: Bici-Overside) BDO (smjer: RTL; Unicode-ponuda I: Bici-Overside) * (smjer: ltr; Unicode-Bici: Embed) * (Smjer: RTL; Unicode-Bayi: Ugradite) @Media Ispis (H1 (Page-Paugh-prije: Uvijek) H1, H2, H3, H4, H5, H6 (Paugh-After: Izbjegavajte) UL, OL, DL (Paugh-Paugh-prije: Izbjegavajte))

U ovom članku ćemo govoriti o načinima resetiranja stilova i razmotrite primjer stvaranja takve datoteke reset.css.

Ideja bacanja stilova pojavila se prije 10 godina. Što je zapravo zaključilo da uz pomoć malog skupa CSS stilova, doveo je pogled na stranicu u svim preglednicima na isto. Naravno, ne radi uvijek, ali se neki trenuci mogu ispraviti - na primjer, granica ne razumije gdje se odnosno odvija u nekim verzijama. Ili plavi moždani udar (obris) u poljima.

Ne za jedan front-end developer nije tajna da su preglednici vrlo arogantni i svaki obrađuje HTML elemente na svoj način, dodajući njihove standardne stilove.

Budući da se ove ideje dugo zapalile, ne iznenađuje da već postoji spremni datoteke Resetiranje, obično se zove Reset.css i povezivanje s svim projektima.

Zašto u zasebnoj datoteci? Da, samo zato što je prikladnije prenijeti ih od projekta na projekt.

Ovdje je primjer Reset.css od 2007. godine:

/ * http://meyerweb.com/ics/tools/css/reset/ v2.0 | 20110126 Licenca: Ništa (javna domena) * / html, tijelo, div, raspon, aplet, objekt, iframe, H1, H2, H3, H4, H5, H6, P, blokQuote, pre-, a, abbr, akronim, Big, Cite, Code, Del, DFN, EM, IMG, INS, KBD, Q, S, SAPAM, mali, štrajk, jaki, Sub, SUP, TT, VAR, B, TT, VA, VAR, B, VAL, B, VA U, i, centar, dl, dt, dd, ol, ul, li, field, oblik, naljepnica, legenda, stola, opis, tybody, tfoot, thead, TR, TD, TR, TR, CANVA, Ugradite, figura, figura, podnožje, zaglavlje, hgroup, izbornik, nav, izlaz, rubin, odjeljak, sažetak, vrijeme, oznaka, audio, video (margina: 0; padding: 0; granica: 0; veličina fonta: 100% ; fonta: naslijediti; vertikalno-poravnati: osnovica;) / * html5 resetiranje uloga za starije preglednike * / članak, osim, detalje, figura, slika, podnožje, zaglavlje, hgroup, izbornik, NAV, odjeljak (zaslon: blok; ) Tijelo (visina linije: 1;) ol, ul (stil popisa: nitko;) blokquote, Q (citati: nitko;) blockquote: prije, blokquote: nakon toga, P: Prije, Q: Nakon (sadržaj: "; Sadržaj: Ništa;) Tablica (granica - kolaps: C. Ollapse; Razmak granice: 0; )

Ovo je samo standard ove datoteke od strane određenog kruga web developera.

Savjetujem vam, bilo da ste iskusni programer ili samo početnike da biste razvili datoteku za resetiranje. Kao osnova, možete uzeti gore opisani standard, dopuniti ga svojim selektorima ili promijeniti postojeće. Evo primjera takve datoteke koju sam razvio za sebe:

ulaz, Textarea, gumb, odaberite (Otvori: Nema) img (granica: nema;) hr (jasno: oba; granica: nema; pozadina:) * (pozadinsko ponavljanje: ne-ponavljanje;) / * HTML5 Prikaz resetiranja uloga za starije preglednike * / članak, osim, detalje, figup, slika, podnožje, zaglavlje, hgroup, izbornik, NAV, odjeljak (prikaz: blok;) tijelo (visina linije: 1;) ol, ul (popis -Tyle: Nitko; Margin: 0; Padding: 0;) BlockQuote, Q (Citati: Ništa;) BlockQuote: Prije, blokquote: nakon toga, P: Prije, Q: Nakon (sadržaj: ") (Granični kolaps: kolaps; razmak granice: 0;)

Možete kip bilo koji od gore navedenog koda za osobnu uporabu, ali ako ga koristite u svojim člancima - stavite link na izvor.

Ovaj članak je prvi od ciklusa na temu CSS pripitomljavanja. Danas ćemo pogledati tehnologiju CSS reset..

Zašto to trebate?

Svaki preglednik postavlja svoje zadane stilove za različite HTML elemente. IZ koristeći CSS. Resetiranje možemo razviti tu razliku kako bi se osigurala stilovi preglednika.

Na primjer, koristite stavku a. U dokumentu. Većina preglednika poput Internet Explorer i Firefox dodaju vezu plava boja i oštar, Međutim, zamislite da je u pet godina netko odlučio stvoriti novi preglednik (nazovimo ga ultrabrowser). Programeri preglednika nisu voljeli plavi i ljutili naglasak, pa su odlučili dodijeliti veze crvena i hrabar font, Temelji se na tome ako postavite osnovnu vrijednost stilova za stavku a., to će biti zajamčeno kao što želite vidjeti, a ne po želji da biste prikazali programere ultrabrowser.

Ali sada nemamo nikakve alinente, uključujući između pojedinačnih paragrafa! Što učiniti? Nemojte lagati i ne bojte se: ispod našeg pražnjenja opisujemo pravilo koje trebamo. To možete učiniti na različite načine: odrediti alineju odozdo ili na vrhu stavka, navedite ga u postocima, pikselima ili u em.

Najvažnija stvar, preglednik se sada svira prema našim pravilima, a ne mi prema njemu. Odlučio sam napraviti na taj način:

* (Margina: 0; padding: 0;) p (margina: 5px 0 10px 0;)

Kao rezultat toga, imali smo ono što se moglo vidjeti u trećem primjer.

Možete stvoriti vlastite stilove za resetiranje, ako riješite određeni zadatak u vašem projektu. Unatoč tome, ne postoji korak-po-korak priručnik za stvaranje vlastite CSS resetiranja. Preporučite svoja vlastita načela i vlastiti stil.

Da bi vam pomogao napraviti izbor, dat ću još nekoliko veza:

Manje je više - moj izbor Reset CSS (Ed Elliot).

2. Vaš CSS reset je prva stvar koju želite vidjeti preglednik

Resetirajte stilove nakon instalacije vlastitih stilova za stavke je pogrešan pristup. U ovom slučaju, ništa dobro čekati prikaz preglednika. Zapamtite da prvo uvijek spojite CSS resetiranje, a zatim sve ostale stilove.

Da, razumijem da je to smiješno, ali ovo je jedna od glavnih pogrešaka developera iz Male do sjajnog. Mnogi samo zaboravljaju na to.

Neki mogu pitati logično pitanje: zašto se događa? Odgovor je jednostavan: pravila zabilježena ispod teksta datoteke CSS-a (i čak niže za priključenje u dokumentu), prepisuju pravila koja su ranije.

Nemojmo se znatno kretati od teme i nastaviti. Primijenite Eric Meyer stilove u naš primjer, ali nakon Opisi naših nekretnina, kao što je prikazano u 4 primjera. Matematika bi izgovorila sljedeće: "Što je potrebno dokazati."

3. Koristite zaseban CSS dokument za CSS reset

Moram (ne, nisu me prisilili) da spomenemo ovaj savjet. Korištenje zasebne datoteke za CSS reset je uobičajena praksa koja podržava. veliki broj programeri.

Zapravo, pridržavam se položaja stvaranja jedna velika CSS datoteka Zbog veće performanse ovog pristupa. No, u ovom pitanju, tendenciju se slažem s većinom: CSS reset treba uzeti u zasebnu datoteku (obično se zove reset.css). U tom slučaju, možete ga koristiti u raznim projektima bez ikakvog napora za podstava od drugih CSS pravila.

4. Pokušajte izbjeći korištenje univerzalnog selektora

Unatoč činjenici da ovaj koncept radi, njegova primjena najčešće nije poželjna zbog nekompatibilnosti s nekim preglednicima (na primjer, ovaj selektor nepravilno obrađuje u programu Internet Explorer). Trebate koristiti ovu tehniku \u200b\u200bsamo za jednostavne, male, statičke i predvidljive stranice (ako ste to već morali učiniti).

Ovaj savjet je posebno važan kada razvijete rješenja kao što su CMS teme. Ne možete unaprijed predvidjeti kako će se koristiti i kako će se modificirati. Bolje je opisati temeljne CSS pravila za sve stavke nego za korištenje za ovaj nepredvidljiv (čak i manji volumen) mehanizam univerzalnih selektora.

5. Izbjegavajte redundantna svojstva kada koristite CSS resetiranje

Još jedan razlog zašto ne volim zasebnu datoteku za CSS resetiranje je potencijalna redundancija naknadnih deklaracija CSS svojstava. Ponavljanje pojedinaca vašeg stilova među cijelim skupom CSS datoteka je Movieoton i treba izbjegavati. Naravno, ponekad smo previše lijeni da pratimo stil stilova i kombinirate neke od njih, ali barem pokušajte!

Povratak na CSS reset s Eric. Postavlja zadane vrijednosti za visinu linije i pozadinu tijelo. Na sljedeći način:

Tijelo (visina linije: 1; boja: crno; pozadina: bijela;)

Pretpostavimo da već znate kako će element izgledati tijelo.:

boja pozadine: #cccccc;
boja: # 996633;
Želite horizontalno ponoviti određenu pozadinsku sliku.

U ovom slučaju, ne postoji potreba za stvaranjem novog selektora za opisivanje svojstava - možete ih jednostavno omogućiti u CSS resetiranju. Učinimo to:

Tijelo (visina linije: 1; boja: # 996633; pozadina: #ccc URL (popločano-image.gif) ponovite-x gornji lijevo;)

Nemojte se bojati mijenjati CSS resetiranje sebe. Postavite ga za sebe, učinite da radi na sebi. Promijenite, obnovite, uklonite i dodajte je kao što vam je potrebno u vašem slučaju.

Eric Meyer je rekao o tome: "Ovo nije slučaj kada svatko treba koristiti CSS resetirati bez promjena."

Sve HTML stavke Zadane stranice imaju vlastite vrijednosti. I, nažalost, nisu jednako tumačili različitim preglednicima. Kao rezultat toga, dizajn stranice pati, njegov dizajn se mijenja kada se promijeni preglednik (internet preglednik). Svrha postupka resetiranja styling je smanjenje nedosljednosti preglednika u takvim stvarima kao što je visina linije, polja, veličine naslovnih fontova itd.

Primjeri skripti CSS stila

Postoji mišljenje da bi svaki samopoštovni webmaster trebao napisati svoj vlastiti kod Resetirajte CSS. Ali ja sam pristalica drugog pristupa, uzmite gotove rješenje, razumijete i ispravite ako je potrebno.

Eric Meyer Css Reset

Ispravna skripta Eric Meyer, s riječima autora, namjerno vrlo čest. Na primjer, to nije navedeno u njemu za tijelo elemenata, bilo koju zadanu pozadinu. Stoga se mora promijeniti, uređivati, proširiti i na drugi način konfigurirati prema vašim potrebama. Dodajte željene boje za stranice, veze i tako dalje.

Yahoo! (Yui 3) resetirajte CSS

CSS YUI 3 stilovi omekšaju kontroverzni stil HTML elemenata preglednika, kao i bilo koju drugu CSS Reset skriptu kako bi se stvorila pouzdana osnova za kreiranje web stranica i web aplikacija.

/ * Yui 3.18.1 Copyright 2014 Yahoo! Dd Sva prava pridržana. Licencirane pod BSD licence. http://yuilibrary.com/license/ * / * todo će morati ukloniti postavke na HTML-u jer možemo "t imena. Todo s prefiksom, trebam li grupirati pomoću selektora ili imovine za uštede težine? * / HTML (boja) : # 000; pozadina: #fff;) / * todo uklanjanje postavki na tijelu jer ga možemo "t imena. * / / * Test todo stavljajući alass na glavu. - ne uspijeva na FF. * / Tijelo, div, dl, dt, dd, ul, ul, LI, H1, H2, H3, H4, H5, H6, PRE, Kôd, oblik, Felet, Legenda, InputQuare, Th, TD (margina: 0; padding: 0;) stol (granični kolaps: kolaps; granica-splikacija: 0;) postraditelj, IMG (granica: 0;) / * todo mislite o handing nasljednosti drugačije, možda puštanje IE6 ... * / Adresa, naslov, Cite, kod, DFN, EM, Strong, TH, VAR (Stil fonta: Normalno; Font-Težina: Normalno;) ol, ul (stil popisa:) naslov, th (Tekst-poravnanje: lijevo;) H1, H2, H3, H4, H5, H6 (veličina fonta: 100%; mase fonta: normalno;) P: Prije, Q: Nakon (sadržaj: ") abbr, Akronim (granica: 0; varijanta fonta: normalno;) / * za očuvanje visine linije i selektor izgled * / sup (vertikalno-poravnanja: tekst-vrh;) pod (vertikalno-poravnanje: tekst-dno;) unos, tekst , Odaberite (Font-Obitelj: naslijediti; Veličina fonta: naslijediti; Težina fonta: naslijediti; * Veličina fonta: 100%; / * da biste omogućili promjenu veličine za IE * /) / * jer legenda ne nasljeđuje u IE * / Legenda (boja: # 000;) / * yui CSS detektirati Ionska pečat * / # yui3-css-stag.cssReset (zaslon: Nema; )

Resetiranje stilova normalizira.css

Normalize.css je prilagođena CSS datoteka koja omogućuje preglednicima da prikazuju sve elemente dosljedno iu skladu s modernim standardima. Njegovi autori istraživali su razlike između stilova različitih preglednika prema zadanim postavkama, kako bi ispravili samo one stilove koji su potrebni normalizacija.

/ *! Normalize.css v6.0.0 | MIT licenca | gitt.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\u003d\u003d\u003d\u003d\u003d\u003d * / ** * 1. Ispravite visinu linije U svim preglednicima. * 2. Spriječiti podešavanje veličine fonta nakon promjene orijentacije u * tj Windows Phone i u ios. * / HTML (visina linije: 1.15; / * 1 * / -MS-Text-Veličina-Prilagodba: 100%; / * 2 * / -WebKit-Text-Veličina-Prilagodba: 100%; / * 2 * /) / * Sections \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / ** * Dodajte ispravan prikaz u IE 9-. * / Članak, po strani, podnožje, zaglavlje, NAV, odjeljak (Zaslon: Blok;) / ** * Ispravite veličinu fonta i margina o` H1` elemenata unutar 'odjela' i * `članak` conefox u Chrome, Firefox i Safari. * / H1 (veličina fonta: 2em; margina: 0.67em 0;) / * Grupiranje sadržaja \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * * Dodajte ispravan prikaz u IE 9-. * 1. Dodajte ispravan prikaz u IE. * / Figpaption, slika, glavni (/ * 1 * / prikaz: blok;) / ** * dodajte ispravnu marginu u IE 8. * / Slika (Margin: 1em 40px;) / ** * 1. Dodajte ispravan okvir Dimenzioniranje u Firefoxu. * 2. Prikaži preljevu na rubu i tj. * / HR (Box-dimenzioniranje: sadržaj-okvir; / \u200b\u200b* 1 * / visina: 0; / * 1 * / preljevi: vidljivo; / * 2 * /) / ** * 1. Ispravite baštinu i skaliranje veličine fonta U svim preglednicima. * 2. Ispravite neobične veličine fonta u svim preglednicima. * / Pre (Font-Obitelj: Monospace, Monospace; / * 1 * / Veličina fonta: 1em; / * 2 * /) / * Tekst-Level Semantic \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\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. Uklonite sivu pozadinu na aktivnim vezama u IE 10. * 2. Uklonite praznine u linkovima podcrtane u IOS 8+ i Safari 8+. * / A (boja pozadine: transparentno; / * 1 * / -webkit-text-dekoracija-skip: objekte; / * 2 * /) / ** * 1. Uklonite donju granicu u Chrome 57- i Firefox 39- , * 2. Dodajte ispravan uređenje teksta u Chrome, Edge, IE, Opera i Safari. * / ABBR (Border-dno: Ništa; / * 1 * / Tekst-Dekoracija: Podcrtavanje; / * 2 * / Tekst-Dekoracija: Podcrtana točkasta; / * 2 * /) / ** * Spriječiti duplikat primjenu `hranitelja "Sljedeće pravilo u Safari 6. * / B, snažno (težina fonta: nasljedite;) / ** * Dodajte ispravnu težinu fonta u Chrome, Edge i Safari. * / B, jaka (težina fonta: hrabriji;) / ** * 1. Ispravite nasljeđivanje i skaliranje veličine fonta u svim preglednicima. * 2. Ispravite neobične veličine fonta u svim preglednicima. * / Kod, KBD, SAMP (FONT-Obitelj: Monospace, MonoOSpace; / * 1 * / Font-Veličina: 1em; / * 2 * /) / ** * Dodajte ispravan stil fonta u Android 4.3-. * / DFN (stil fonta: kurziv;) / ** * Dodajte ispravnu pozadinu i boju u IE 9-. * / Mark (boja pozadine: # FF0; boja: # 000;) / ** * Dodajte ispravnu veličinu fonta u svim preglednicima. * / Mali (veličina fonta: 80%;) / ** * Spriječite "Sub" i "Sup" elemente koji utječu na visinu linije u * svim preglednicima. * / Sub, sup (veličina fonta: 75%; visina linije: 0; položaj: relativno; vertikalno-poravnanje: osnovica;) pod (dno: -0.25em;) sup (vrh: -0.5em;) / * Ugrađeni sadržaj \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / ** * Dodajte ispravan prikaz u IE 9-. * / Audio, video (zaslon: inline-blok;) / ** * dodajte ispravan prikaz u IOS 4-7. * / Audio: ne () (prikaz: nema; visina: 0;) / ** * Uklonite granicu na slikama unutar linkova u IE 10-. * / IMG (rubni stil: nema;) / ** * skrivanje prelijevanja u IE. * / SVG: ne (: root) (preljev: skriven;) / * obrasci \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / ** * Uklonite marginu u Firefoxu i Safariju. * / Gumb, ulaz, optgroup, odaberite, Texterea (margina: 0;) / ** * Prikaži preljev u IE. * 1. Prikaži preljevu na rubu. * / Gumb, unos (/ * 1 * / preljeva: vidljivo;) / ** * Uklonite nasljeđivanje teksta transformacije na rub, Firefox i tj. * 1. Uklonite nasljeđivanje teksta pretvorbe u Firefox. * / Gumb, odaberite (/ * 1 * / Text-Transformaciju: Ništa;) / ** * 1. Spriječite WebKit bug gdje (2) uništava autohtonu` Audio` i` Video` * kontrole u Android 4. * 2. Ispravite nesposobnost u obliku slova u IOS i SAFARI. * / Gumb, html, / * 1 * /, (-webkit-izgled: / * 2 * /) / ** * uklonite unutarnju granicu i obloge u Firefoxu. * / Gumb :: - Moz-Fokus-Inner ,: - Moz-Fokus-Inner ,: - Moz-Fokus-Inner ,:: - Moz-Fokus-Inner (granični stil: nema; padding: 0;) / ** * Vraćanje fokus stilova neunite se prema prethodnom pravilu. * / Gumb: -Moz-fokusing,: -moz-fokusing ,: -moz-fokusing ,: -moz-fokusing (nacrt: 1px dvid Buttentekst;) / ** * 1. Ispravite omatanje teksta na rubu i tj. * 2. Ispravite baštinu boja iz elemenata "Feelet` u IE. * 3. Uklonite padding tako da programeri nisu uhvaćeni kada nuli "Elementi" Fiderset "u svim preglednicima. * / Legenda (dimenzioniranje kutija: granična kutija; / * 1 * / boja: nasljedno; / * 2 * / prikaz: tablica; / * 1 * / max-width: 100%; / * 1 * / padding: 0 ; / * 3 * / bijeli prostor: normalno; / * 1 * /) / ** * 1. Dodajte ispravan prikaz u IE 9-. * 2. Dodajte ispravno vertikalno poravnanje u Chrome, Firefox i Opera. * / Napredak (Prikaz: inline-blok; / * 1 * / vertikalno-poravnati: osnovica; / * 2 * /) / ** * Uklonite zadanu vertikalnu klizač u IE. * / Texterea (preljeva: Auto;) / ** * 1. Dodajte ispravnu veličinu kutije u IE 10-. * 2. Uklonite oblogu u IE 10-. * /, (Dimenzija kutija: granična kutija; / * 1 * / padding: 0; / * 2 * /) / ** * ispravite kursor stil povećanja i smanjivanja gumba u Chromeu. * / :: - WebKit-Inner-spin-gumb, :: - WebKit-vanjski-spin-gumb (visina: auto;) / ** * 1. Ispravite neobičan izgled u Chrome i Safariju. * 2. Ispravite stil obrisa u Safariju. * / (-Webkit-izgled: Textfield; / * 1 * / Outline-offset: -2px; / * 2 * / * * ** * Uklonite unutarnju padding i poništite gumbe u Chrome i Safari na Macos. * / :: - WebKit-Search-Cancel-Button, :: - WebKit-Search-Dekoracija (-WebKit-izgled: Ništa;) / ** * 1. Ispravite nemogućnost u obliku slova u IOS i SAFARI. * 2. Promjena svojstava fonta u 'naslijediti' u Safariju. * / :: - WebKit-file-upload-gumb (-webkit-izgled: gumb; / * 1 * / font: nasljeđivanje; / * 2 * /) / * interaktivno \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / / * * Dodajte ispravan prikaz u IE 9-. * 1. Dodajte ispravan prikaz na rubu, tj. I Firefox. * / Detalji, / * 1 * / izbornik (Zaslon: Blok;) / * * Dodajte ispravan prikaz u svim preglednicima. * / Sažetak (Prikaz: Stavka popisa;) / * 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\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / ** * Dodajte ispravan prikaz u Tj. Devet-. * / Platno (prikaz: inline-blok;) / ** * dodajte ispravan prikaz u IE. * / Predložak (zaslon: Ništa;) / * Hidden \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d \u003d \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / ** * Dodajte ispravan prikaz u IE 10 -. * / (Prikaz: Nema;)

Resetirajte putem univerzalnog selektora * (zvjezdica)

Na prvi pogled, to se može činiti najjednostavnijem i jednostavnom rješenjem, zašto opisati sve html stavke i dodijeliti im kada možete koristiti selektor *, jer se njegovo djelovanje primjenjuje na sve HTML.

* (Margina: 0; padding: 0;)

Ali nažalost, to nije dobra praksa. Preglednik je vrlo teško (potrebno je mnogo vremena u usporedbi s drugim postupcima resetiranja CSS-a) primijeniti pravila na svaki element u dokumentu, posebno na velikim web stranicama, a također može uništiti mnoge dobre zadane stilove.

Resetiranje stila i WordPress

Ako želite koristiti jedan od gore opisanih metoda resetiranja CSS stilova za web-lokaciju na Wordpress, to se može učiniti na dva načina.

Prvi je da morate kopirati kôd za resetiranje na početak stil.css datoteke vaše WordPress teme (nakon linija autorstva i ime teme, to jest, nakon što je tekst uokviren i zvjezdicom / * ... * / ,

@import "Reset.css";

Ako postoji direktiva @import u CSS-u, onda mora biti na samom početku tablice (prije svih pravila). U suprotnom, preglednik ga može ignorirati.

Drugim riječima, kako bi se poboljšala brzina, CSS Stilovi stolovi, u pravilu su konfigurirani za jednu datoteku. Stoga koristite @import bez stvarne potrebe.

Kao što možete vidjeti, ispuštanje stilova u WordPress nije ništa posebno.

Hvala

Prilikom pisanja članka korišteni su sljedeći izvori.