Kako ukloniti podrazumevani styling pretraživača sa master stylesheetom

Dobijete činjenice sa ovim savjetima

Svi web pretraživači uključuju ono što se zna kao "stil defauly". To su stilovi koji diktiraju izgled i elemente HTML elementa u odsustvu bilo kakvih drugih stilskih informacija. Na primjer, u skoro svakom pretraživaču, podrazumevani izgled hiperlinkova je svijetle plave boje sa podvlačenjem. Evo kako ti linkovi izgledaju ako im ne kažete da se prikazuju na drugi način.

Podrazumevani stilovi pretraživača mogu biti korisni, ali u mnogim slučajevima web dizajneri žele da uklone ove stilove tako da mogu početi sveže sa stilovima koje imaju 100% kontrole. Ovo se radi pomoću onoga što je poznato kao "master stylesheet."

Glavni stilski stil trebalo bi da bude prvi stil koji pozivate u svim vašim dokumentima. Koristite master stylesheet da biste obrisali podrazumevane postavke pregledača koji mogu izazvati probleme u Web dizajnu unakrsnog pretraživača. Jednom kada ste počistili stilove pomoću master stylesheeta, vaš dizajn počinje sa istog mesta u svim pregledačima - kao čisto platno za slikanje.

Globalni Defaults

Vaš master stilski stil trebalo bi da započne nultom iznošenju margina, paddinga i granica na stranici. Neki Veb pregledači podrazumevaju tijelo dokumenta na 1 ili 2 piksla koji su urezani u ivice okna pregledača. Na ovaj način se svi prikazuju iste:

html, body {margin: 0px; padding: 0px; granica: 0px; }

Takođe želite da font bude konzistentan. Obavezno postavite veličinu fonta na 100% ili 1em, tako da je vaša stranica dostupna, ali veličina je i dalje konzistentna. I obavezno uključite visinu linije.

body {font: 1em / 1.25 Arial, Helvetica, sans-serif; }

Formatiranje naslova

Oznake naslova ili zaglavlja (H1, H2, H3, itd.), Obično podrazumevane podebljanim tekstom sa velikim marginama ili obloga oko njih. Čišćenjem težine, margina i paddinga, osigurate da ovi oznaci i dalje ostaju veći (ili manji) od teksta oko njih bez dodatnih stilova:

h1, h2, h3, h4, h5, h6 {margina: 0; padding: 0; font-weight: normal; font-family: Arial, Helvetica, sans-serif; }

Možda biste želeli da razmislite o postavljanju određenih veličina, razmaka slova i paddinga na naslovne oznake, ali to zaista zavisi od stila sajta koje dizajnirate i treba ga ostaviti izvan glavnog stila. Možete dodati više stilova za ove naslove po potrebi za vaš specifičan dizajn.

Oblikovanje običnog teksta

Osim naslova, postoje i druge tekstualne oznake koje biste trebali biti sigurni da će se očistiti. Jedan skup koji ljudi često zaboravljaju su oznake ćelija tablice (TH i TD) i oznake oblika (SELECT, TEXTAREA i INPUT). Ako ih ne podesite na istu veličinu kao tekst teksta i teksta, možda ćete biti neprijatno iznenađeni kako ih pregledači prikazuju.

p, th, td, li, dd, dt, ul, ol, blockquote, q, akronim, abbr, a, input, select, textarea {margin: 0; padding: 0; font: normalni normalni normalni 1em / 1.25 Arial, Helvetica, sans-serif; }

Takođe je lepo dati vaše citate (BLOCKQUOTE i Q), akronimi i skraćenice malo dodatni stil, tako da se ističu malo više:

blockquote {margin: 1.25em; padding: 1.25em} q {font-style: italic; } akronim, abbr {kursor: pomoć; granično-donje: 1px puknuto; }

Linkovi i slike

Linkovi se lako upravljaju i menjaju iz navedenog svetlo plavog podvučenog teksta. Više volim da uvek imaju veze sa mojim vezama, ali ako više volite drugačiji način, ove opcije možete podesiti odvojeno. Takođe ne uključujem boje u master stil listu, jer to zavisi od dizajna.

a, a: link, a: posjetio, a: aktivan, a: hover {text-decoration: underline; }

Sa slikama, važno je isključiti granice. Dok većina pretraživača ne prikazuje granicu oko obične slike, kada je slika povezana, pretraživači uključuju granicu. Da biste ispravili ovo:

img {border: none; }

Tabele

Iako se tabele više ne koriste za svrhe rasporeda, lokacija se i dalje može koristiti za stvarne podatke tabluara. Ovo je dobra upotreba HTML tabela. Već smo se uverili da je podrazumevana veličina teksta ista za vaše ćelije u tablicama, ali ima još nekoliko stilova koje treba postaviti tako da vaše tabele ostaju iste:

tabela {margin: 0; padding: 0; granica: nema; }

Obrasci

Kao i kod drugih elemenata, trebalo bi da izbrišete margine i paddinge oko vaših formi. Još jedna stvar koju želim je da prepravim oznaku za formu kao " inline " tako da ne dodaje dodatni prostor gde postavljate oznaku u kodu. Kao i kod drugih tekstualnih elemenata, definišu informacije o fontu za odabir, tekst i upis gore gore, tako da je isti kao i ostatak mog teksta.

forma {margin: 0; padding: 0; display: inline; }

Takođe je dobra ideja da promenite kursor za vaše etikete. Ovo pomaže ljudima da vide da će etiketa učiniti nešto kada kliknu na njega.

oznaka {kursor: pokazivač; }

Zajedničke klase

Za ovaj deo master stylesheeta, trebalo bi da definišete klase koje imaju smisla za vas. Ovo su neke od klasa koje koristim najčešće. Imajte na umu da oni nisu postavljeni na neki određeni element, tako da ih možete dodeliti onome što vam je potrebno:

jasno: jasno: oboje; } .floatLeft {float: left; } .floatRight {float: desno; } .textLeft {tekstualno poravnanje: lijevo; } .textRight {text-align: right; } .textCenter {text-align: centar; } .textJustify {text-align: justify; } .blockCenter {display: block; margin-left: auto; margin-right: auto; } / * zapamtite da postavite širinu * / .bold {font-weight: bold; } .italic {font-style: italic; } .underline {text-decoration: underline; } .noindent {margin-left: 0; padding-left: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {lista-stil: nema; list-style-image: nema; }

Zapamtite to zato što su ove klase upisane pre bilo kog drugog stila i one su samo klase, oni se lako mogu nadoknaditi sa specifičnim stilovima koji se pojavljuju kasnije u kaskadi . Ako nađete da postavljate zajedničku klasu na elementu i da ne stupi na snagu, proverite da li želite da u nekoj od vaših kasnijih stilova koji utiču na isti element ne postoji neki drugi stil.

Celokupan Master Stylesheet

/ * Globalne podrazumevane vrednosti * / html, tijelo {margin: 0px; padding: 0px; granica: 0px; } body {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Naslovi * / h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; font-weight: normal; font-family: Arial, Helvetica, sans-serif; } / * Tekstualne stilove * / p, th, td, li, dd, dt, ul, ol, blockquote, q, akronim, abbr, a, input, select, textarea {margin: 0; padding: 0; font: normalni normalni normalni 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {margin: 1.25em; padding: 1.25em} q {font-style: italic; } akronim, abbr {kursor: pomoć; granično-donje: 1px puknuto; } mala {font-size: .85em; } velika {font-size: 1.2em; } / * Linkovi i slike * / a, a: link, a: posjećeni, a: aktivan, a: hover {tekstualna dekoracija: podvlačiti; } img {border: none; } / * Tabele * / tabela {margin: 0; padding: 0; granica: nema; } / * Obrasci * / forma {margin: 0; padding: 0; display: inline; } oznaka {kursor: pokazivač; } / * Common Classes * /. Clear (oboje: oboje; } .floatLeft {float: left; } .floatRight {float: desno; } .textLeft {tekstualno poravnanje: lijevo; } .textRight {text-align: right; } .textCenter {text-align: centar; } .textJustify {text-align: justify; } .blockCenter {display: block; margin-left: auto; margin-right: auto; } / * zapamtite da postavite širinu * / .bold {font-weight: bold; } .italic {font-style: italic; } .underline {text-decoration: underline; } .noindent {margin-left: 0; padding-left: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {lista-stil: nema; list-style-image: nema; }

Originalni članak Jennifer Krynin. Uredio Jeremy Girard 10.6.17