Pronađite činjenice s ovim savjetima
Svi web preglednici obuhvaćaju ono što je poznato kao "neodređeni stil". To su stilovi koji diktiraju izgled i dojam elemenata HTML-a u odsustvu bilo kakvih drugih stilskih informacija. Na primjer, u gotovo svakom pregledniku zadani je izgled hiperveza svijetle plave boje s podcrtom. Na taj se način gledaju veze, osim ako im ne kažete da se prikazuju na drugačiji način.
Zadani stilovi preglednika mogu biti korisni, ali u mnogim slučajevima web dizajneri žele ukloniti ove stilove kako bi mogli početi svježi stilovima koji su 100% kontrolirani. To se vrši pomoću onoga što se naziva "glavni stilski list".
Glavni stilski stil bi trebao biti prvi stilski obrazac koji zovete u svim vašim dokumentima. Koristite glavni stilski obrazac kako biste izbrisali zadane postavke preglednika koji mogu uzrokovati probleme u web-dizajnu unakrsnog preglednika. Kada izbrisate stilove s glavnim stilskim stilom, vaš dizajn počinje s istog mjesta u svim preglednicima - poput čistog platna za slikanje.
Globalni zadani postavci
Vaš glavni stilski stil bi trebao početi nulirati se marginama, paddings i granice na stranici. Neki web preglednici zadano su tijelo dokumenta na 1 ili 2 piksela uvučeni iz rubova okna preglednika. To osigurava da svi oni prikazuju isto:
html, tijelo {margina: 0px; padding: 0px; granica: 0px; }Također želite napraviti fondu dosljedan. Svakako postavite veličinu fonta na 100 posto ili 1em, tako da je vaša stranica dostupna, ali veličina je i dalje dosljedna. I uključite visinu retka.
tijelo {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Oblikovanje naslova
Oznake naslova ili zaglavlja (H1, H2, H3 itd.) Obično su zadane za podebljani tekst s velikim marginama ili padovima oko njih. Čišćenjem težine, margina i padova, osigurajte da ove oznake i dalje ostanu veće (ili manje) od teksta oko njih bez dodatnih stilova:
h1, h2, h3, h4, h5, h6 {margina: 0; padding: 0; font-težina: normalno; font-obitelj: Arial, Helvetica, sans-serif; }Možda biste trebali razmotriti postavljanje određenih veličina, razmaka slova i paddinga na naslovne oznake, ali to u stvari ovisi o stilu web-lokacije koju dizajnirate i koju biste trebali ostaviti izvan glavnog matrica stila. Možete dodati više stilova za te zaglavlja ako je potrebno za vaš specifičan dizajn.
Oblikovanje običnog teksta
Iza naslova, postoje i druge tekstne oznake koje biste trebali biti sigurni da ćete izbrisati. Jedan skup koji ljudi često zaboravljaju su tablice ćelija (TH i TD) i oznake obrasca (SELECT, TEXTAREA i INPUT). Ako ne postavite one iste veličine kao i vaše tijelo i tekst odlomka, možda ćete biti neugodno iznenađeni načinom na koji ih preglednici prikazuju.
p, th, td, li, dd, dt, ul, ol, blockquote, q, akronim, abbr, a, ulaz, odaberite, textarea {margin: 0; padding: 0; font: normalno normalno normalno 1em / 1.25 Arial, Helvetica, sans-serif; }Također je lijepo dati svoje navode (BLOCKQUOTE i Q), akronime i kratice malo dodatni stil, tako da se ističu još malo:
blockquote {margin: 1.25em; padding: 1.25em} q {font-style: kurziv; } akronim, abbr {kursor: pomoć; granični dno: 1px crtkani; }Linkovi i slike
Veze su jednostavne za upravljanje i promjenu iz gore spomenutog svijetlo plavog podvučenog teksta. Radije volim da su moje veze uvijek podcrtane, ali ako vam je draže drugačiji način, te opcije možete postaviti zasebno. Također ne sadržavam boje u glavnom stilu, jer to ovisi o dizajnu.
a, a: veza, a: posjećeno, a: aktivno, a: lebdjeti {text-decoration: underline; }S slikama važno je isključiti granice. Dok većina preglednika ne prikazuje granicu oko obične slike, kada je slika povezana, preglednici upućuju granicu. Da biste ovo riješili:
img {border: none; }stolovi
Iako se stolovi više ne koriste za svrhe izgleda, web-lokacija ih i dalje može koristiti za stvarne tabluar podatke. Ovo je dobra upotreba HTML tablica. Već smo se uvjerili da je zadana veličina teksta ista za vaše ćelije tablice, ali postoji nekoliko drugih stilova koje biste trebali postaviti tako da tablice ostanu iste:
tablica {margin: 0; padding: 0; granica: none; }obrasci
Kao i kod ostalih elemenata, trebali biste ukloniti margine i paddings oko oblika. Još jedna stvar koju volim raditi je prepisati oznaku obrasca kao " inline ", tako da ne dodaju dodatni prostor gdje stavite oznaku u kôd. Kao i kod ostalih elemenata teksta, definiram informacije fontova za odabir, tekstualni prostor i unos gore, tako da je isti kao i ostatak mog teksta.
obrazac {margin: 0; padding: 0; prikaz: inline; }Također je dobra ideja promijeniti kursor za svoje oznake. To pomaže ljudima da vide kako će oznaka učiniti nešto kada kliknu.
oznaka {kursor: pokazivač; }Zajedničke klase
Za ovaj dio master stilova, trebali biste definirati tečajeve koji imaju smisla za vas. Ovo su neke od klasa koje najčešće koristim. Imajte na umu da nisu postavljeni na određeni element pa ih možete dodijeliti onome što vam je potrebno:
.clear {jasno: oboje; }. floatLeft {float: lijevo; }. floatRight {float: pravo; } .textLeft {text-align: lijevo; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: blok; margina-lijevo: auto; margina-desno: auto; } / * ne zaboravite postaviti širinu * / .bold {font-weight: bold; } .italic {font-style: italic; } .nderline {text-decoration: underline; } .noindent {margin-left: 0; padding-lijevo: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {list-style: none; popis stila-slika: none; }Zapamtite da zato što su te klase napisane prije bilo kojih drugih stilova, a oni su samo razredi, lako ih je nadjačati s specifičnijim svojstvima stila koji se pojavljuju kasnije u kaskadi . Ako ustanovite da ste postavili zajedničku klasu na elementu i ne stupi na snagu, trebali biste provjeriti da u nekom od kasnijih stilskih profila koji utječu na isti element ne postoji neki drugi stil.
Cijeli Stilski list za Master
/ * Globalni zadani postavci * / html, tijelo {margina: 0px; padding: 0px; granica: 0px; } body {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Naslovi * / h1, h2, h3, h4, h5, h6 {margina: 0; padding: 0; font-težina: normalno; font-obitelj: Arial, Helvetica, sans-serif; } / * Stilovi teksta * / p, th, td, li, dd, dt, ul, ol, blockquote, q, akronim, abbr, ulaz, odabir, textarea {margin: 0; padding: 0; font: normalno normalno normalno 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {margin: 1.25em; padding: 1.25em} q {font-style: kurziv; } akronim, abbr {kursor: pomoć; granični dno: 1px crtkani; } mali {font-size: .85em; } veliki {font-size: 1.2em; } / * Linkovi i slike * / a: veza, a: posjetili, a: aktivni, a: lebdjeti {text-decoration: underline; } img {border: none; } / * Tablice * / tablica {margin: 0; padding: 0; granica: none; } / * Oblici * / obrazac {margina: 0; padding: 0; prikaz: inline; } label {kursor: pokazivač; } / * Zajedničke klase * / .clear {clear: both; }. floatLeft {float: lijevo; }. floatRight {float: pravo; } .textLeft {text-align: lijevo; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: blok; margina-lijevo: auto; margina-desno: auto; } / * ne zaboravite postaviti širinu * / .bold {font-weight: bold; } .italic {font-style: italic; } .nderline {text-decoration: underline; } .noindent {margin-left: 0; padding-lijevo: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {list-style: none; popis stila-slika: none; }Izvorni članak Jennifer Krynin. Uredio Jeremy Girard na 10/6/17