Pridobite dejstva s temi nasveti
Vsi spletni brskalniki vključujejo tisto, kar se imenuje "defauly styles." To so slogi, ki narekujejo videz in občutek elementov HTML, če ni drugih informacij o slogu. Na primer, v skoraj vsakem brskalniku je privzeti videz hiperpovezav svetlo modra barva s podčrtano. Tako gledajo te povezave, če jim ne povejte, da se prikazujejo na drugačen način.
Privzeti slogi brskalnikov so lahko v pomoč, toda v mnogih primerih spletni oblikovalci želijo odstraniti te sloge, tako da lahko začnejo sveže s slogi, ki jih nadzirajo 100%. To se naredi z uporabo tisto, kar je znano kot "master stylesheet."
Glavna slogovna predloga bi morala biti prva slogovna shema, ki jo pokličete v vseh dokumentih. Za odstranitev privzetih nastavitev brskalnika, ki lahko povzročijo težave pri spletnem oblikovanju spletnih brskalnikov, uporabite glavno slogovno sliko. Ko ste sloge očistili z glavnim slogovnim predlogom, se vaš design začne z istega mesta v vseh brskalnikih - kot čisto platno za slikanje.
Globalne privzete nastavitve
Vaša glavna slogovna lestvica bi morala začeti z ničliranjem robov, kazalcev in robov na strani. Nekateri spletni brskalniki privzamejo telo dokumenta na 1 ali 2 piksla, razčlenjeno iz robov okna brskalnika. Tako se vsi prikazujejo enako:
html, body {margin: 0px; padding: 0px; border: 0px; }Prav tako želite, da se pisava uskladi. Prav tako nastavite velikost pisave na 100 odstotkov ali 1em, tako da je vaša stran dostopna, vendar je velikost še vedno skladna. In ne pozabite vključiti višine linije.
body {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Oblikovanje naslova
Oznake naslova ali glave (H1, H2, H3 itd.), Ki so običajno privzeto krepko besedilo z velikimi robovi ali oblogami okoli njih. S čiščenjem teže, robov in oblazinjenja zagotovite, da so te oznake še vedno večje (ali manjše) od besedila okoli njih brez dodatnih stilov:
h1, h2, h3, h4, h5, h6 {rob: 0; oblazinjenje: 0; font-weight: normal; font-family: Arial, Helvetica, sans-serif; }Morda boste želeli razmisliti o nastavitvi določenih velikosti, pisemskih razmikov in pomnilnikov v naslovne oznake, vendar je to res odvisno od sloga spletnega mesta, ki ga načrtujete, in ga je treba pustiti na glavnem slogovanem listu. Za te postavke lahko dodate več slogov, kot je potrebno za vašo specifično obliko.
Oblikovanje navadnega besedila
Poleg naslovov so še druge oznake besedila, ki jih morate prepričati, da jih črtate. En niz, ki ga ljudje pogosto pozabljajo, so tablične celične oznake (TH in TD) in oznake obrazca (SELECT, TEXTAREA in INPUT). Če jih ne nastavite na enako velikost kot besedilo vašega telesa in odstavka, ste morda neprijetno presenečeni nad tem, kako jih prikazujejo brskalniki.
p, th, td, li, dd, dt, ul, ol, blockquote, q, akronim, abbr, a, input, select, textarea {margin: 0; oblazinjenje: 0; pisava: normalna normalna normalna 1em / 1.25 Arial, Helvetica, sans-serif; }Prav tako je lepo dati svoje citate (BLOCKQUOTE in Q), kratice in okrajšave malo dodatnega sloga, tako da se izstopajo še malo:
blockquote {margin: 1.25em; padding: 1.25em} q {font-style: italic; } akronim, abbr {kazalec: pomoč; meja spodaj: 1px črta; }Povezave in slike
Povezave so enostavne za upravljanje in spreminjanje iz navedenega svetlo modrega podčrtanega besedila. Rada imam vedno, da so moje povezave še vedno podčrtane, če pa vam je všeč drugače, lahko te možnosti nastavite ločeno. Prav tako ne vključujejo barv v glavnem slogovnem listu, ker je to odvisno od zasnove.
a, a: link, a: obiskan, a: aktiven, a: hover {tekst-dekoracija: podčrtaj; }S slikami je pomembno, da izklopite meje. Medtem ko večina brskalnikov ne prikazuje meje okoli navadne slike, ko je povezava povezana, brskalniki vklopijo mejo. Če želite to popraviti:
img {border: none; }Tabele
Medtem ko se tabele ne uporabljajo več za namene postavitve, jih lahko še vedno uporabljajo za dejanske podatke v tabluarju. To je dobra uporaba tabele HTML. Prepričali smo se, da je privzeta velikost besedila enaka za vaše celice v tabeli, vendar morate nastaviti še nekaj drugih slogov, da bodo vaše tabele ostale enake:
tabela {rob: 0; oblazinjenje: 0; meja: nič; }Obrazci
Tako kot pri drugih elementih morate odstraniti robove in paddine okoli vaših obrazcev. Druga stvar, ki jo želim storiti, je, da oznako obrazca napišete kot " inline ", tako da ne dodaja dodatnega prostora, v katerem postavite oznako v kodo. Kot pri drugih besedilnih elementih določim tudi informacije o pisavi za izbiro, besedilo in vnos zgoraj, tako da je enako kot preostanek mojega besedila.
obrazec {margin: 0; oblazinjenje: 0; prikaz: inline; }Prav tako je dobro zamenjati kazalec za svoje nalepke. To pomaga ljudem, da vidijo, da bo oznaka naredila nekaj, ko jo klikne.
oznaka {kazalec: kazalec; }Skupni razredi
Za ta del master stylesheet morate določiti razrede, ki so smiselne za vas. To so nekateri razredi, ki jih najpogosteje uporabljam. Upoštevajte, da niso nastavljeni na noben določen element, zato jih lahko dodelite tistim, kar potrebujete:
. jasno (jasno: oboje; } .floatLeft {float: levo; } .floatRight {float: desno; } .textLeft {poravnava besedila: levo; } .textRight {poravnava besedila: desno; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: block; margin-left: auto; margin-right: auto; } / * ne pozabite nastaviti širine * / .bold {font-weight: bold; } .italic {font-style: italic; } .underline {text-decoration: underline; } .noindent {margin-levo: 0; oblazinjenje-levo: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {slog seznama: noben; list-style-image: nič; }Ne pozabite, da so ti razredi napisani pred katerimkoli drugim slogom in so le razredi, jih je mogoče preprosto preglasiti z bolj specifičnimi lastnostmi sloga, ki se pojavijo kasneje v kaskadi . Če ugotovite, da določite skupni razred na elementu in da nima učinka, morate preveriti, ali v enem od vaših poznejših slogovnih listov, ki vplivajo na isti element, ni nobenega drugega sloga.
Celoten Master Stylesheet
/ * Globalne privzete vrednosti * / html, telo {margin: 0px; padding: 0px; border: 0px; } body {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Naslovi * / h1, h2, h3, h4, h5, h6 {margin: 0; oblazinjenje: 0; font-weight: normal; font-family: Arial, Helvetica, sans-serif; } / * Slogi besedila * / p, th, td, li, dd, dt, ul, ol, blockquote, q, akronim, abbr, a, input, select, textarea {margin: 0; oblazinjenje: 0; pisava: normalna normalna normalna 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {margin: 1.25em; padding: 1.25em} q {font-style: italic; } akronim, abbr {kazalec: pomoč; meja spodaj: 1px črta; } majhna {font-size: .85em; } velika {font-size: 1.2em; } / * Povezave in slike * / a, a: link, a: obiskan, a: aktiven, a: hover {tekst-dekoracija: podčrtaj; } img {border: none; } / * Tabele * / tabela {margin: 0; oblazinjenje: 0; meja: nič; } / * Obrazci * / obrazec {margin: 0; oblazinjenje: 0; prikaz: inline; } oznaka {kazalec: kazalec; } / * Skupni razredi * / .clear {jasno: oboje; } .floatLeft {float: levo; } .floatRight {float: desno; } .textLeft {poravnava besedila: levo; } .textRight {poravnava besedila: desno; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: block; margin-left: auto; margin-right: auto; } / * ne pozabite nastaviti širine * / .bold {font-weight: bold; } .italic {font-style: italic; } .underline {text-decoration: underline; } .noindent {margin-levo: 0; oblazinjenje-levo: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {slog seznama: noben; list-style-image: nič; }Izvorni članek Jennifer Krynin. Uredil Jeremy Girard dne 10.6.17