• Transfer

Ovaj je članak prvi od ciklusa na temu pripisa CSS-a. Danas ćemo pogledati tehnologiju Resetiranje CSS-a..

Zašto vam treba?

Svaki pretraživač postavlja svoje zadane stilove za razne HTML elemente. Uz pomoć CSS resetiranja, možemo izjednačiti ovu razliku kako bismo osigurali stilove Cross pretraživača.

Na primjer, koristite predmet sVEDOK JOVANOVIĆ - ODGOVOR: U vašem dokumentu. Većina preglednika poput Internet Explorer. i Firefox Dodaj vezu plava boja i oštar. Međutim, zamislite da je za pet godina neko odlučio stvoriti novi pretraživač (Nazovimo ga ultrabrowser). Programeri pretraživača nisu voleli plavu i nervirani naglasak, pa su odlučili izdvajati veze crvena i bold font. Zasnovan je na tome ako postavite osnovnu vrijednost stilova za stavku sVEDOK JOVANOVIĆ - ODGOVOR:, Garantovat će se kao što želite vidjeti, a ne kao što je preferirano za prikaz programera ultrabrowsera.

Ali sada nemamo uvlake, uključujući između pojedinih odlomka! Šta učiniti? Ne lažite i ne bojte se: ispod našeg pražnjenja opisujemo pravilo koje nam treba. Učiniti da se to može učiniti različiti putevi: Navedite uvlačenje odozdo ili na vrh odlomka, navedite ga u procentima, pikselima ili u em.

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

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

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

Možete kreirati vlastite stilove za resetiranje, ako riješite određeni zadatak u svom projektu. Uprkos tome, nema korak po korak liderstvo Stvaranjem vlastitih CSS resetiranja. Preporučite vlastitim principima i vlastitim stilom.

Da bismo vam pomogli da napravite izbor, dat ću još par veze:

1. Manje je više - moj izbor resetiranja CSS (ED Elliot).

2. Vaše CSS resetiranje je prvo što je pregled pregledača

Poništite stilove nakon instaliranja vlastitih stilova za stavke je pogrešan pristup. U ovom slučaju ništa dobro čekati za prikaz pretraživača. Zapamtite da prvo uvijek povežite CSS resetiranje, a zatim sve ostale stilove.

Da, razumijem da je to smiješno, ali ovo je jedna od glavnih grešaka programera iz Male do velike. Mnogi zaboravljaju na to.

Neki mogu postaviti logično pitanje: zašto se događa? Odgovor je jednostavan: pravila zabilježena ispod teksta CSS datoteke (pa čak i niži po njihovoj vezi u dokumentu), prebrisati pravila koja su ranije deklarirana.

Nemojmo se kretati vrlo od teme i nastaviti. Primijenite Eric Meyer Styles na naš primjer, ali poslije Opisi naših imanja, kao što je prikazano u 4 primjera. Matematika bi rekla sljedeće: "Šta je bilo potrebno da dokaže."

3. Koristite zasebni CSS dokument za resetiranje CSS-a

Moram (ne, nisu me prisiljavali) da spominjem ovaj savjet. Korištenje zasebne datoteke za CSS resetiranje je uobičajena praksa koju veliki broj podrške programera.

U stvari, pridržavam se položaju stvaranja jedna velika CSS datoteka Zbog veće performanse ovog pristupa. Ali B. ovaj problem Sklona sam se slažem s najviše: CSS resetiranje treba uzimati u zasebnu datoteku (obično se nazivaju resetiranje.css). U ovom slučaju možete ga koristiti u različitim projektima, a da se ne potrudite za podružbu iz drugih CSS pravila.

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

Uprkos činjenici da ovaj koncept funkcionira, njegova primjena najčešće nije poželjna zbog nekompatibilnosti s nekim preglednicima (na primjer, ovaj selektor ne ostale obrađen u Internet Exploreru). Trebali biste koristiti ovu tehniku \u200b\u200bsamo za jednostavne, male, statičke i predvidljive stranice (ako to već morate učiniti).

Ovaj savjet je posebno važan kada razvijate rješenja poput CMS tema. Ne možete unapred predvidjeti kako će se koristiti i kako će biti izmijenjena. Bolje je opisati temeljna CSS pravila za sve stavke nego koristiti za ovaj nepredvidiv (čak i manji svezak) mehanizam univerzalnih selektora.

5. Izbjegavajte suvišne svojstva kada koristite CSS resetirajte

Drugi razlog zašto ne volim zasebnu datoteku za CSS resetiranje je potencijalno višak naknadnih deklaracija o Svojstvu CSS-a. Ponavljanje pojedinaca vaših stilova među cijelim setom CSS datoteka je pokretni i treba ih izbjegavati. Naravno, ponekad smo previše lijeni da bismo pratili stil stilova i kombiniramo neke od njih, ali barem pokušaj!

Vratimo se na CSS resetiranje s Eric-a. Postavlja zadane vrijednosti za liniju visinu, boju i pozadinu telo. Na sledeći način:

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

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

1. boja pozadine: #cccccc;
2. boja: # 996633;
3. Želite horizontalno da ponovite određenu pozadinu.

U ovom slučaju ne treba stvarati novi selektor za opisivanje svojih svojstava - jednostavno ih možete omogućiti u CSS resetiranju. Učinimo to:

Tijelo (visina linije: 1; boja: # 996633; pozadina: #ccc url (popločani-image.gif) ponoviti-x gornji lijevi;)

Ne bojte se modificirati sam Resetiranje. Podesite ga za sebe, učinite da radite na sebi. Promjena, obnovite, uklonite i dodajte ga kao što vam treba u vašem konkretnom slučaju.

Eric Meyer rekao je o ovome: "To nije slučaj kada bi svi trebali koristiti CSS resetirati bez promjene."

Resetirajte CSS. (Resetiranje stilova) je nuliranje s CSS-om, neki od parametara HTML elemenata koji su pretraživači instalirani prema zadanim postavkama. Na primjer, ovi elementi uključuju odlomke (oznaka), koji u početku predstavljaju vertikalnu polja (CSS), označene liste (TAG) koji nemaju samo polja, već i određene markere tipa (CSS) i tako dalje.

Sada razmislimo o onome što vam treba ovaj resetiranje CSS-a, šta nam može dati? Pa, zamislite da ste proslavili stranice svoje web stranice i istovremeno niste promijenili polja odlomka koji su preglednici ponudili prema zadanim postavkama, jer se njihova veličina u potpunosti uređena. Ali recite mi, molim vas i gdje ste odlučili da će svi preglednici svijeta, koji već postoje i još uvijek pojavljuju, stvorit će polje iste veličine? Štaviše, zašto mislite da preglednici u kojima ste testirali svoj izgled neće se promijeniti u svojim sljedeće verzije Veličina ovih polja nije u potpunosti uklonjena u potpunosti? Osetite šta miriše?

Dakle, izbacivanje CSS-a, stihovi su jednostavno zatvoreni iz takvih nesporazuma, odnosno prvo resetiraju sve "kritične" vrijednosti CSS svojstava, a zatim ga dodaju natrag, ali sa vlastitim veličinama. Dakle, možete biti sigurni da će u svim pretraživačima web mjesto izgledati jednako. Svakako ne možete resetirati stilove, već jednostavno postaviti izgled potrebni parametri Elementi, ali postoji rizik da će negde nešto promašiti i na određeno vrijeme sve "pliva".

Na osnovu prethodnog, jedna od značajki olakšice CSS-a je da nakon njegovog korištenja, mnogi HTML elementi gube svoj uobičajeni izgled. A ako je gubitak polja u paragrafima za početnike, nešto što se očekuje za početnike, tada, na primjer, činjenica da su gumbi kreirani pomoću oznaka ili iznenada postali vanjski slični uobičajenom tekstu - potpuno je iznenađenje. Ali to ne bi trebalo biti neugodno, jer za tog stilova i resetiraju se, tako da pododjeljnik tada nije zaboravio da ih navedi u novom.

Postoji puno načina za resetiranje stilova i šta odaberete - to ovisi samo o vama, ali mogu vam reći jedno - najbolje resetiranje je onaj koji ste sami stvorili na osnovu vašeg iskustva i navika. Ako još nemate takvo iskustvo, možete koristiti jednu od opcija predloženih u nastavku.

Uvijek odredite stilove za resetiranje CSS-a na samom početku koda, u protivnom, neki od parametara možda neće raditi jer prioriteti stilakoji su instalirani preglednici prilikom obrade HTML stranice i CSS koda.

Resetirajte CSS sa univerzalnim selektorom

* (Porodica fonta: nasljeđivanje; / * Svi elementi nasljeđuju iz njihovog roditeljske slušalice * / font-stil: nasljeđivanje; / * nasljeđuje dizajn * / font-težina: nasljeđivanje; osnovna linija; / * Vertikalna osnovna poravnanja * / Veličina fonta: 100%; / * Veličina fonta 100% * / pozadina: prozirna; / * Pozadina svih elemenata transparentna * / brend: 0; / * Uklonite okvir * / outline: 0; / * Uklonite konture * / margina: 0; / * Uklonite polja * / obloga: 0; / * Uklonite ugradnju * /)

Opis primjera

U ovom primjeru sa univerzalni selektor Navedeni stilovi se odmah resetiraju na svim HTML elementima koji će biti prisutni na stranici. Kao što vidite, većina nekretnina je precizno određena za sigurnosnu mrežu, kao njihove vrijednosti i tako da preglednici moraju zamijeniti podrazumevano prema specifikaciji CSS-a. Ali kao što već znate, sve je to potpuno drugačije i ako je nekretnina uide na nasljeđene elementi svojih roditelja u svim vodećim preglednicima, isti vanjski polja određena imovinom CSS-a nisu uvijek u početku jednako jednako jednako jednako nulu.

Ali veličine okvira (CSS) i kontura (CSS) prema zadanim postavkama nisu nula, ali već prema specifikaciji. Međutim, njihova debljina je resetirana, tako da mjerač ne bi zaboravio da ga jasno odredi gdje bi bilo potrebno.

Resetirajte CSS iz Yahoo!

Tijelo, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, oblik, teren, ulaz, textarea, p, blockquote, th, td (margina: 0; Padding: 0;) Teretni teret, img, abbr, akronim (granica: 0;) Adresa, opis, cite, kod, dfn, em, jak, th, var (font-the (težina): normalna težina: normalna;) (Collapse: kolaps; / * uobičajene granice za tablice tablica * / granični razmak: 0; / * nultiing udaljenost između stanica * /) opis (religing teksta: / * Poravnavanje teksta na lijevu ivicu * /) ol, ul (lista: nijedna; / * Ukloni markere lista * /) H1, H2, H3, H4, H5, H6 (Veličina fonta: TEŽINA: NORMAL;) P: Prije, P: Nakon (sadržaj: ""; / * otkazujemo citate iz oznake Q * /)

Opis primjera

Yahu u jednom trenutku razvio je svoju verziju za resetiranje očiju. Ovdje se ne mijenja svojstva specifičnih elemenata, što omogućava postizanje veće fleksibilnosti u kontroli. vanjske vrste. Na primjer, markeri se uklanjaju sa lista, a oznaka je navodnici koristeći svojstvo CSS-a. Prednosti ovog pristupa su očigledne, ali minusi uključuju više voluminijeg i ponekad suvišnog koda. Ali niko vas ne smeta da promijenite bilo koji CSS resetirajte na svoje potrebe. Pretpostavimo da vam možete izbrisati nepotrebne. odabir oznake Ili ne samo uklonite citate, ali odmah ih postavite potreban izgled.

Resetirajte CSS iz Eric Meyera

Html, tijelo, div, span, apprem, objekt, iframe, h1, h3, h3, h3, h3, h3, h3, h3, h, h3, h6, p, blockquote, pre, a, abbr, akronim, adresa, velika, cite, kod, del, dfn, Em, img, ins, kbd, q, s, samp, mali, štrajk, jak, sub, sup, tt, var, b, u, i, centar, dl, dt, dd, ol, ul, li, zemlja, polje, Oblik, naljepnica, legenda, tablica, opis, tbod, tfoot, thead, tr, th, td, članak, po strani, platno, detalji, ugrađivanje, zaglavlje, hrpa, meni, nav, izlaz, ruby, Odjeljak, sažetak, vrijeme, oznaka, audio, video (marža: 0; obrub: 0; veličina fonta: 100%; font: nasljedstvo; Okomito-poravnanje: osnovni, po strani, figcapcija, FICK, FOOTER, HAPER, HGROUP, MENU, NAV, Odjeljak (prikaz: / * Napravljamo blok predmete (za stare preglednike) * /) tijelo (visina linije: 1; / * prored Tekst na stranici * /) ol, ul (list-stil: nema;) blockquote: prije, blockquote: nakon, q: prije, q: nakon (sadržaj: ";" "uklonite citate na Q i blockquote * / sadržaj: Nijedan; / * dodaj za lojalnost * /) blockquote, q (citati: nema; / * drugi način uklanjanja citata * /) tablica (granični kolaps: 0;)

Opis primjera

Sljedeći način za resetiranje CSS-a sugerirao je Eric Meyer (Eric Meyer) - web programer poznat u određenim krugovima. Ovdje je već dodao resetiranje stilova za oznake od HTML-a, koji, usput, u vrijeme pisanja ovog članka, i sami su još uvijek vrlo slabo podržani moderni preglednici. Ali uvijek trebate pogledati perspektivu, zar ne?

U stvari, ovaj bi se ovaj članak mogao nastaviti beskonačnošću, jer opet ponavljam, u određenoj tački, svaki mjerač dolazi do njegove verzije pražnjenja ili ga uopće ne koristi, oslanjajući se na svoju pažnju.

Mnogi vevermenti koriste se tzv Resetiranje CSS-a.Posluživanje za uklanjanje karakteristika različitih preglednika. Zapravo, ova datoteka Styles resetira sve CSS zadane nekretnine. U ovom ću članku pokazati kodeks ove datoteke i reći vrijedno je koristiti CSS resetiranje ili ne.

Vidio sam mnogo različitih Resetiranje CSS-a.Svi su otprilike isti. Možete koristiti ovo:

Html, tijelo, div, span, applet, objekt, iframe,
H1, H2, H3, H4, H5, H6, P, Blockquote, pre,
A, ABBR, akronim, adresa, velika, cite, kod,
Del, dfn, em, font, img, ins, kbd, q, s, samp,
Mali, štrajk, jak, sub, sup, tt, var,
B, u, i, centar,
DL, DT, dd, ol, ul, li,
Zemlja, oblik, oznaka, legenda,
Stol, opis, tbod, tfoot, thead, tr, th, td (
Pozadina: prozirna;
Granica: 0;
Veličina fonta: 100%;
margina: 0;
Okvir: 0;
Padding: 0;
Vertikalno poravnavanje: osnovna linija;
}
Tijelo (
Visina linije: 1;
}
Ol, ul (
Stil liste: Nema;
}
Blockquote, Q (
Citati: Nema;
}
Blockquote: Prije, Blockquote: nakon,
P: Prije, P: nakon (
Sadržaj: "";
Sadržaj: Nema;
}
: fokus (
Okvir: 0;
}
Tablica (
Granični kolaps: kolaps;
Razmak između granice: 0;
}

Mislim da je njegova upotreba zbog toga i tako razumljiva, ali zašto, na primjer, ne koristim, kao i mnogi drugi vertikeri, vrijedi reći o tome. Prvo jeste dodatna datoteka, Drugo, razumevanje Za obradu, ali najvažnije - sviđa mi se zadana svojstva. Na primjer, ista polja za stolom. Uostalom, sva zadana svojstva nisu se baš tako sviđala, već kao i najviše optimalna opcija Prikaz raznih elemenata. Uvjeravam vas, resetirajte padding. Stanice tablice, najvjerovatnije, vratit ćete ga u glavnu datoteku. I daleko od činjenice da će se vrijednost razlikovati od onoga što je bilo zadano. Dakle, ispada da ga prvo čistimo, a zatim isti povratak. A zajedno sa prvim nedostacima (dodatna datoteka i dodatni kod), mnogi veverleri se uopće ne koriste. Resetiranje CSS-a..

Ionako, korištenje stilskog pražnjenja nije loše, Znači, možete sigurno koristiti ako mislite da će vam pojednostavljenje prilagodbe web lokacije pod različitim preglednicima zaista pojednostaviti u cjelini.

Svako ima svoje unaprijed instalirane pravila za dizajn web stranica i elemenata na njima (korisnički agent stilove) koji se automatski povezuje prema zadanim postavkama. Ipak, većina vezera prilikom kreiranja novog projekta dodaje posebno resetiranje datoteke. CSS, što čini potpuno resetiranje CSS stilova i omogućava programerima da stvaraju sa "čistim listom". Zašto i kako se sve radi - sito u trenutnom članku.

Ako pogledate prikaz slike postu, vidjet ćete da se uobičajena linija u Safariju, Chrome i Firefox prikazuje apsolutno. na različite načine. Da, ponekad se pravila u njima podudaraju, na primjer, svi sakriju glavnu oznaku putem ekrana: NONE opcija, međutim, u mnogim slučajevima postoje ozbiljne razlike prilikom prikazivanja objekata na stranici. Sumnjam da neki od vaših kupaca ne mogu voljeti kada konačna verzija izgleda izgleda ne na rasporedu.

Stoga, ako ste novak web programer, publikacija će biti nedvosmisleno korisna za opći razvoj. To je prijevod ove bilješke s pregledom CSS-a resetira uvjete u 2018. godini. Siguran sam da će 2019. godine i kasnije sve ovo i dalje biti relevantno, jer Ova je tema već bila više od 10 godina (od trenutka oslobađanja prvog sličnog rješenja).

Zašto vam trebaju postavke resetiranja CSS-a

Kao što ste već razumjeli iz pristupanja, oni vam omogućuju eliminiranje proširenja između osnovnih stilova web pretraživača i voditi ih na jedan plus-minus standardizovan um. Uvijek se nanesite na samom početku do drugih prilagođenih događaja. U članku Erik Meyer o resetiranju CSS-a prije deset godina, spomenut je glavni razlog ovog pristupa, koji su godinama još relevantni:

Problem leži u činjenici da različiti preglednici imaju zadane postavke, a svi nisu isti. Smatramo da naš kôd mijenja početni dizajn stranice, ali to nije u potpunosti, a uz pomoć resetiranja datoteka možemo napraviti ovu standardnu \u200b\u200bvrstu dokumenta više momenata za sve programe. Stoga će biti manje vremena za potrošnju na borbu protiv Basic-a instalacije Firefox, Chrome itd. Po defaultu.

Ali sada je situacija manje u suprotnosti sa izgledom?

Da, zaista, u naše vrijeme mnogi parametri u korisničkom agentu postali su sve sličniji. Gotovo svugdje zaglavlje H1 postavlja veličinu fonta 2em i horizontalno uvlačenje 0.67em. Međutim, ovo su sve relativno nove promjene, a najmanje morate uzeti u obzir podršku starih verzija programa, gdje nema takve konzistentnosti.

Pored toga, u nekim slučajevima, ovisno o vrsti CSS-a nula (o tome u nastavku), ovaj je čip još uvijek koristan i ako su uzeti u obzir samo moderni web pretraživači.

Ali primjenjujemo li naše stilove, prevladavajući osnovni?

Ovaj je pristup jedan od glavnih sažetaka protivnika ovog pristupa - na kraju, svejedno, oni ili drugi parametri zamjenjuju se vlastitim stilom.css, pa zašto dodati drugu dodatnu datoteku i smanjiti se? Uprkos činjenici da u ovoj frazi ima smisla, upotreba resetiranja opravdava se dva trenutka:

• Prvo pomaže u pisanju čistijeg koda. Moći ćemo ga podijeliti na nekoliko dijelova: odvojeno za dizajn web projekta i skup pravila orijentiranih prema specifičnostima određenih preglednika. Ovo se ne može popeti na glavnu CSS datoteku sa svim vrstama IE Hack-a itd.
• Drugo, svi resetiraju vagaju vrlo malo, a njihovo preuzimanje ne zahtijeva veliki broj vrijeme.

Vrste RESET CSS (možete preuzeti linkove u članku)

Počevši od udaljenog 2004. godine, kada se pojavilo prvi takav razvoj događaja, sada postoje prilično mnogo metoda koje se razlikuju u poteškoćama i njihovoj specifičnosti. U stvari, postoje 3 gola koja pokušavaju riješiti resetiranje CSS stilova:

1. Popravite grešku u korisničkom listu od korisnika stilova.
2. Otkazivanje nestandardnog originalnog dizajna u internetskim preglednicima.
3. Izrada univerzalne baze kompatibilne stila.

Postoje opcije koje odlučuju sva tri zadatka i one koji su izošljeni samo pod jednim određenim problemom.

Ispravljanje korekcije / greške

Razmislite o prvim od gore navedenih ciljeva. Kao što ste već razumjeli, eliminacija različitih nedostataka i plićaka preglednika najvažnije je za podršku zastarjelim izdanjima. Jedan od dobrih primjera takve situacije - kada nakon pojave HTML5 isti internet Explorer 9 nije primijenio ispravnu vrstu zaslona na nove objekte.

Stoga, u rješenjima prema tipu normalizacije.css, sve greške uzimaju se u obzir i obrađuju:

/ ** * Dodajte tačan prikaz u IE. * / Glavni (prikaz: blok;)

/ ** * Dodajte tačan prikaz u IE. * / Glavni (prikaz: blok;)

Budući da su ove akcije potrebne samo za stari softver, ima smisla koristiti postcss postprocessor poput postcks-a normalizirati zajedno s preglednikom kako bi ih dodali samo kada trebate implementirati podršku određenih preglednika.

Drugi primjer koda iz čistih CSS-a, koji je prikladan, uključujući moderne web programe - popraviti elemente zaslona i sakriveni atribut.

[Skriveno] (prikaz: Nijedan! Važno; // jedna od dobrog korištenja slučajeva! Važno }

(Displej: nijedan! Važno; // Jedna od dobrog korištenja! Važno)

Uklonite osebujne stilove pretraživača

Ovo je drugi razlog za resetiranje CSS postavki. U principu, svaka od njihovih mišljenja o tome što se povrati u korisnik-agent stilove smatraju "osebujnim". Autorska definicija originalne note je sasvim logična: ovo je stil koji nije "gola" verzija prikaza elementa.. Na primjer, dodavanje udžbenika za naslove u 2EM (koliko to čini) ideja nije loša, ali zašto je to 2Em, a ne 3EM ili ne 4EM. U ovom slučaju, osnovna opcija bi bila odsustvo bilo kakve incidencije, odnosno nulte margine.

Najjednostavniji univerzalni pristupUklanjanje uvlaka / polja Oznake:

* (Margina: 0; obloga: 0;)

* (Margina: 0; obloga: 0;)

Ova metoda je previše radikalna, jer Primjenjuje se na sve objekte, čak i tamo gdje ne očekujete (u istom ulazu). Alternativno, Eric Meyer Resetiraj CSS se često koristi, što uklanja parametre marže / obloga, granice i veličine fonta (u 0 ili nijedno) gdje je logično opravdano:

Html, tijelo, div, span, apprem, objekt, iframe, h1, h3, h3, h3, h3, h3, h3, h3, h, h3, h6, p, blockquote, pre, a, abbr, akronim, adresa, velika, cite, kod, del, dfn, Em, img, ins, kbd, q, s, samp, mali, štrajk, jak, sub, sup, tt, var, b, u, i, centar, dl, dt, dd, ol, ul, li, zemlja, polje, Oblik, naljepnica, legenda, tablica, opis, tbod, tfoot, thead, tr, th, td, članak, po strani, platno, detalji, ugrađivanje, zaglavlje, hrpa, meni, nav, izlaz, ruby, Odjeljak, sažetak, vrijeme, oznaka, audio, video (margina: 0; obloga: 0; granica: 0; Veličina fonta: 100%; font: nasljedstvo; vertikalna: osnovna linija;)

html, tijelo, div, span, apprem, objekt, iframe, h1, h3, h3, h3, h3, h3, h3, h3, h, h3, h6, p, blockquote, pre, a, abbr, akronim, adresa, velika, cite, kod, del, dfn, Em, img, ins, kbd, q, s, samp, mali, štrajk, jak, sub, sup, tt, var, b, u, i, centar, dl, dt, dd, ol, ul, li, zemlja, polje, Oblik, naljepnica, legenda, tablica, opis, tbod, tfoot, thead, tr, th, td, članak, po strani, platno, detalji, ugrađivanje, zaglavlje, hrpa, meni, nav, izlaz, ruby, Odjeljak, sažetak, vrijeme, oznaka, audio, video (margina: 0; obloga: 0; granica: 0; veličina fonta: 100%; font: nasljedstvo; vertikalno-poravnanje: osnovna linija;)

Obnovi stilovi

Za razliku od prethodnog odjeljka, ovdje glavni zadatak nije resetiranje CSS-a iz određenih objekata, već ih nadjačati vlastitim trenutnim vrijednostima.

Na primjer, umjesto da postavite svu veličinu 1Em i margina \u003d 0 u Sanitize.css, ostale vrijednosti su postavljene:

/ ** * Ispravite veličinu fonta i marginu na "H1" elemente unutar "sekcije" i * `` članafa` u Chromeu, Firefoxu i Safari. * / H1 (Veličina fonta: 2EM; MARGIN: 0. 67EM 0;)

/ ** * Ispravite veličinu fonta i marginu na "H1" elemente unutar "sekcije" i * `` članafa` u Chromeu, Firefoxu i Safari. * / H1 (veličina fonta: 2em; margina: 0.67Em 0;)

Bootstrap-ov ponovno pokret će pronaći drugu ilustraciju trenutnog zadatka. Programeri su otišli malo dalje i propisani fontovi i boju pozadine za tijelo.

// tijelo // // 1. Uklonite maržu u svim pretraživačima. // 2. Kao najbolja praksa, primijenite zadanu `boju pozadine` // 3. Podesite eksplicitnu početnu vrijednost za usklađivanje teksta tako da kasnije možemo koristiti // vrijednost naslijeđene na stvarima poput`	`Elementi. Tijelo (marža: 0; // 1 FONT - Porodica: $ font - porodična baza; Veličina fonta: $ fontovi - veličina - baza fontova: $ fontovi - visina: $ Line - visina - visina - baza; boja: $ karoserija - boja; udžbenik: levo; // 3 pozadina - boja: $ karoserija - bg; // 2)

// tijelo // // 1. Uklonite marginu u svim pretraživačima. // 2. Kao najbolja praksa, primijenite zadanu `boju pozadine` // 3. Podesite eksplicitnu početnu vrijednost tekstual-usklađen tako da kasnije možemo koristiti vrijednost //` na nasljeđenu na stvarima poput ` `Elementi. Tijelo (marža: 0; // 1 porodica fontova: $ font-lica-base; veličina fonta: $ fontova-veličina-baza; težina fonta: $ fonto-težina-visina: $ visina -Base; $ Boja karoserije; Poravnavanje teksta: Levo; // 3 Boja pozadine: $ Body-BG; // 2)

Ukupno. Šta birati

U originalnoj nozi postoji rezultat odgovarajuće ankete od

U ovom ćemo članku razgovarati o resetiranju stilova i razmotriti primjer stvaranja takve resetiranja.CSS datoteke.

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

Nije za jedan programer za prednji kraj nije tajna da su pretraživači vrlo izbirljivi i svaki procesi hTML elementi Na svoj način dodajući standardne stilove.

Budući da su ove ideje dugo zapalile, nije iznenađujuće da već postoji ready Datoteke Resetiranje, obično se naziva resetiranje.css i povežite se sa svim projektima.

Zašto odvojena datoteka? Da, samo zato što je prikladnije prenijeti ih iz projekta na projekt.

Evo primjera resetiranja.css iz 2007:

/ * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licenca: Nijedan (Public Domain) * / HTML, tijelo, Div, Span, Applet, objekta, IFrame, H1, H2, H3, H4, H5, H6, P, Blockquote, Pre, A, skr, Akronim, adresa, Big, Cite, Code, Del, DFN, EM, IMG, INS, KBD, Q, S, Samp, Mala, Strike, Strong, Sub, Sup, TT, Var, B, U, I, TT, Var, B, U, i, centar, dl, dt, dd, ol, ul, li, zemlja, oblik, oznaka, legenda, stol, opis, tbody, tfoot, thead, tr, th, td, članak, na stranu, platno, detalji, Ugradi, figcapcija, podnožje, zaglavlje, HGROUP, MENU, NAV, izlaz, ruby, odjeljak, sažetak, vrijeme, oznaka, audio, video (margina: 0; obrub: 0; Veličina fonta: 100% ; Font: Okomiti-poravnanje: osnovna linija;) / * HTML5 resetiranje zaslona za starije preglednike * / članak, po strani, detalji, figcapcija, broj, footer, zaglavlje, hrgoup, meni, nav, blok; ) Tijelo (visina linije: 1;) OL, ul (lista: nema;) blockquote, q (citati: nema;) blockquote: prije, blockquote: nakon, q: nakon (sadržaj: ""; Sadržaj: Nema;) Tabela (granični kolaps: C. Ollapse; Razmak između granice: 0; )

Ovo je samo standard ove datoteke koji je preuzeo određeni krug web programera.

Savjetujem vam, bilo da ste iskusni programer ili samo početnici za razvijanje vaše resetiranja datoteke. Kao osnova, možete preuzeti gore opisani standard, dopuniti je svojim selektorima ili promjena postojećih. Evo primjera takve datoteke koju sam razvio za sebe:

ulaz, Textarea, A, gumb, odaberite (Outline: None) IMG (granica: nema;) HR (Clear: Oba; Oboje; Granica: Nema; Pozadina: Nijedna;) (Ponovno ponavljanje: Neponošenje;) / * HTML5 Resetiranje uloga za starije preglednike * / članak, po strani, detalji, figcapcija, figura, podnožje, zaglavlje, HGROUP, MENU, NAV, odjeljak (prikaz: blok;) Tijelo (line-ol, ul (lista) -Style: nema; 0; bodding: 0;) blockquote, q (citati: nema;) blockquote: prije, blockquote: nakon, q: q: nakon (sadržaj: nema) stola (Granični kolaps: kolaps; razmak granica: 0;)

Možete kipiti bilo koji od gore navedenog koda za ličnu upotrebu, ali ako ga koristite u svojim člancima - stavite vezu na izvor.