Oblikujte modne naslove in naslove CSS

click fraud protection

Naslovi so pogosti na večini spletnih strani. Pravzaprav ima skoraj vsak besedilni dokument ponavadi vsaj en naslov, tako da poznate naslov tega, kar berete. Ti naslovi so kodirani z uporabo HTML elementi naslova - h1, h2, h3, h4, h5 in h6.

Na nekaterih spletnih mestih boste morda ugotovili, da so naslovi kodirani brez uporabe teh elementov. Namesto tega lahko naslovi uporabljajo odstavke z dodanimi posebnimi atributi razreda ali oddelke z elementi razreda. Razlog, da o tej napačni praksi pogosto slišimo, je, da oblikovalcu "ni všeč, kako izgledajo naslovi". Privzeto so naslovi prikazani krepko in so večje velikosti, zlasti elementi h1 in h2, ki so prikazani v veliko večji velikosti pisave kot ostalo besedilo strani. Upoštevajte, da je to le privzeti videz teh elementov! S CSS, naslov lahko naredite tako, kot želite! Spremenite lahko velikost pisave, odstranite krepko pisavo in še veliko več. Naslovi so pravilen način kodiranja naslovov strani. Tu je nekaj razlogov, zakaj.

Zakaj uporabljati oznake naslovov namesto delitev

instagram viewer

To je najboljši razlog za uporabo naslovov in njihovo uporabo v pravilnem vrstnem redu (tj. h1, nato h2, nato h3 itd.). Iskalniki dajte največjo utež besedilu, ki je vključeno v oznake naslovov, ker ima besedilo semantično vrednost. Z drugimi besedami, z oznako naslova strani H1 povejte pajku iskalnika, da je to prvo mesto na strani. Naslovi H2 imajo poudarek # 2 itd.

Črke igralnih ploščic

Ni vam treba zapomniti, katere razrede ste uporabljali za določanje naslovov

Ko veste, da bodo vse vaše spletne strani imele H1 krepko, 2em in rumeno, lahko to enkrat določite v svojem slogu in končate. 6 mesecev kasneje, ko dodajate drugo stran, na vrh strani samo dodate oznako H1, ki je nimate da se vrnete na druge strani in ugotovite, s katerim ID-jem sloga ali razredom ste uporabili glavni naslov in podnaslove.

Navedite močan oris strani

Obrisi olajšajo branje besedila. Zato je večina ameriških šol učil učence, da napišejo oris, preden napišejo prispevek. Ko uporabljate oznake naslovov v orisni obliki, ima vaše besedilo jasno strukturo, ki postane zelo očitna. Poleg tega obstajajo orodja, ki lahko pregledajo oris strani, da zagotovijo povzetek, ki se zanašajo na oznake naslovov za strukturo orisa.

Vaša stran se bo začutila tudi z izklopljenimi slogi

Nihče si ne more ogledati ali uporabljati slogovnih listov (in to se vrne na 1. mesto - iskalniki si ogledujejo vsebino (besedilo) vaše strani in ne slogovnih listov). Če uporabljate oznake naslovov, svoje strani naredite bolj dostopne, ker naslovi vsebujejo informacije, ki jih a Oznaka DIV nebi.

To je koristno za bralnike zaslona in dostopnost do spletnih mest

Pravilna uporaba naslovov ustvari logično strukturo dokumenta. To bodo bralniki zaslona uporabili za "branje" spletnega mesta uporabniku z okvaro vida, s čimer bodo vaše spletno mesto postale dostopne invalidom.

Oblikujte besedilo in pisavo naslovov

Najlažji način, da se odmaknete od "velike, drzne in grde" težave z naslovnimi oznakami, je, da besedilo oblikujete tako, kot želite. Pravzaprav je pri delu na novem spletnem mestu najbolje najprej napisati sloge odstavkov, h1, h2 in h3. Držite se samo družine pisav in velikosti / teže. Na primer, to je lahko predhodni slogovni list za novo spletno mesto (to je le nekaj primerov slogov, ki bi jih lahko uporabili):

Lahko spremenite pisave naslova ali spremenite slog besedila ali celo barvo besedila. Vse to bo vaš "grdi" naslov spremenilo v nekaj bolj živahnega in skladnega z vašim dizajnom.

Meje lahko oblečejo naslove

Meje so odličen način za izboljšanje naslovov in jih je enostavno dodati. Toda ne pozabite eksperimentirati z mejami - na vsaki strani naslova ne potrebujete obrobe. Uporabite lahko tudi več kot zgolj dolgočasne obrobe.

Vzorčnemu naslovu smo dodali zgornjo in spodnjo obrobo, da predstavimo nekaj zanimivih vizualnih stilov. Obloge lahko dodate na kakršen koli način, s katerim želite doseči želeni slog oblikovanja.

Dodajte slike v ozadje svojim naslovom za še več Pizazza

Mnoga spletna mesta imajo na vrhu strani odsek z glavo, ki vključuje naslov - običajno naslov mesta in grafiko. Večina oblikovalcev na to gleda kot na dva ločena elementa, vendar vam tega ni treba. Če je grafika namenjena le okrasitvi naslova, zakaj je potem ne bi dodala slogom naslovov?

Trik tega naslova je, da vemo, da je naša slika visoka 90 slikovnih pik. Tako smo na dnu naslova 90 pik dodali oblazinjenje (oblazinjenje: 0,5 0 90 slikovnih pik 0p;). Lahko se igrate z robovi, višino črte in oblazinjenjem, da se besedilo naslova prikaže točno tam, kjer želite.

Pri uporabi slik si morate zapomniti nekaj, če imate odzivno spletno mesto (kar bi morali) s postavitvijo, ki se spreminja glede na velikost zaslona in naprav, vaš naslov ne bo vedno enake velikosti. Če želite, da je naslov natančno velik, lahko to povzroči težave. To je eden od razlogov, da se na splošno izogibamo slikam ozadja v naslovu, tako kul, kot so včasih videti.

Zamenjava slike v naslovih

To je še ena priljubljena tehnika za spletne oblikovalce, saj omogoča ustvarjanje grafičnega naslova in zamenjavo besedila oznake naslova s ​​to sliko. To je resnično starodavna praksa spletnih oblikovalcev, ki so imeli dostop do zelo malo pisav in so želeli pri svojem delu uporabiti bolj eksotične pisave. Porast spletnih pisav se je zares spremenil, kako oblikovalci pristopajo k spletnim mestom. Naslove lahko zdaj nastavite v najrazličnejših pisavah in slike z vdelanimi pisavami niso več potrebne. Kot takšni boste našli nadomestne slike CSS za naslove le na starejših spletnih mestih, ki še niso posodobljene na sodobnejše prakse.

Uredil Jeremy Girard

instagram story viewer