Skip to main content

Oblikujte navdušujoče CSS naslove in naslove

Anonim

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

Na nekaterih mestih lahko ugotovite, da so naslovnice kodirane brez uporabe teh elementov. Namesto tega naslovi lahko uporabijo odstavke s posebnimi atributi razreda, ki so jim dodani, ali delitve z elementi razreda. Razlog, zaradi katerega pogosto slišim o tej napačni praksi, je, da oblikovalec "ne maram, kako izgledajo postavke". Naslovnice so privzeto prikazane s krepko in so večje po velikosti, še posebej elementi h1 in h2, ki se prikažejo v veliko večji velikosti pisave kot ostalo besedilo strani. Imejte v mislih, da je to privzeti videz teh elementov! S CSS lahko postavite naslov, vendar hočeš! Velikost pisave lahko spremenite, odstranite krepko in še veliko več. Naslovi so ustrezen način za kodiranje naslovov strani. Tukaj je nekaj razlogov, zakaj.

Zakaj uporabite oznake naslovov namesto DIV in styling

Iskalniki kot oznake naslovov

To je najboljši razlog za uporabo naslovov in jih uporabite v pravilnem vrstnem redu (tj. H1, nato h2, nato h3 itd.). Iskalniki dajejo najvišjo težo besedilu, ki je vključeno v oznake naslovov, ker ima to besedilo pomensko vrednost. Z drugimi besedami, z označevanjem naslova svojega naslova H1 poveste iskalnemu pahu, da je to osrednji del strani # 1. Naslovi H2 imajo poudarek # 2 in tako naprej.

Nimate se spomniti, katere razrede ste uporabili za določanje naslovov

Ko veste, da bodo vse vaše spletne strani imele H1, ki je krepko, 2em in rumeno, potem lahko to določite enkrat v slogovnem listu in se naredite. Šest mesecev kasneje, ko dodate še eno stran, na vrhu strani dodate oznako H1, vam ni treba iti nazaj na druge strani, če želite izvedeti, kakšen ID ali razred sloga, s katerim ste določili glavno naslov in podnaslovi.

Zagotavljajo močno stranico

Izrisi lažje branje besedila. Zato je večina ameriških šol poučevala dijake, naj napišejo napis, preden napišeta papir. Ko uporabljate oznake naslovov v obliki obrisa, ima vaše besedilo jasno strukturo, ki postane očitna zelo hitro. Poleg tega obstajajo orodja, ki lahko pregledajo obris strani, da zagotovijo povzetek, in ti se sklicujejo na oznake naslovov za okvirno strukturo.

Vaša stran bo naredila občutek tudi s slogom

Vsi ne morejo videti ali uporabljati slogovnih listov (in to se vrne v # 1 - iskalniki pregledajo vsebino (besedilo) vaše strani in ne slogovne tabele). Če uporabljate oznake naslovov, naredite svoje strani bolj dostopne, saj naslovi vsebujejo informacije, ki jih oznaka DIV ne bi omogočala.

Je uporabno za bralnike zaslona in dostopnost spletnih mest

Pravilna uporaba naslovov ustvarja logično strukturo za dokument. To bo tisto, kar bralci zaslona uporabljajo za »branje« spletnega mesta uporabniku z motnjami vida, zaradi česar je vaše spletno mesto dostopno osebam s posebnimi potrebami.

Stil besedilo in pisavo vaših naslovov

Najlažji način, da se premaknete stran od težkih naslovov, velikih, drznih in grdih, je, da besedilo prilagajate tako, kot želite, da izgledajo. Pravzaprav, ko delate na novi spletni strani, je najbolje, da najprej naredite prvi odstavek, h1, h2 in h3 stilov. Držite se le družine pisave in velikosti / teže. To je na primer lahko predhodni slogovni list za novo spletno mesto (to so samo nekateri slogi primerov, ki bi jih lahko uporabili):

Spremenite lahko pisave svojega naslova ali spremenite slog besedila ali celo barvo besedila. Vse to bo spremenilo vaš "grd" naslov v nekaj bolj živahnega in v skladu z vašo zasnovo.

Borders lahko obleko gor naslovnice

Borders so odličen način za izboljšanje naslovov in jih je enostavno dodati. Toda ne pozabite poskusiti z mejami - na vsaki strani vašega naslova ne potrebujete meje. In lahko uporabite več kot samo navadne dolgočasne meje.

Dodal sem zgornjo in spodnjo mejo na moj naslovni naslov, da predstavim nekaj zanimivih slikovnih stilov. Lahko bi dodali meje na kakršenkoli način, s katerim si želel doseči slog dizajna, ki ga želite.

Dodajte ozadje v svoje naslove za še več pizza

Na vrhu strani ima veliko spletnih mest, ki vsebujejo naslov - običajno naslov strani in grafiko. Večina oblikovalcev misli o tem kot dveh ločenih elementih, vendar vam ni treba. Če grafika obstaja samo za okrasitev naslova, zakaj je ne dodajajte v sloge naslova?

Trik na tem naslovu je, da vem, da je moja slika 90 slikovnih pik. Zato sem dodal oblogo na spodnji del naslova 90px (polnilo: 0,5 0 90px 0p;). Lahko se predvajate z robovi, višino vrstice in oblazinjenjem, da besedilo besedila natisnete natanko tam, kjer ga želite.

Ena stvar, ki jo je treba zapomniti pri uporabi slik, je, da če imate odzivno spletno stran (ki jo potrebujete) s postavitvijo, ki se spreminja glede na velikost zaslona in naprave, vaš naslov ne bo vedno enak. Če potrebujete naslov, ki je natančna velikost, lahko to povzroči težave. To je eden od razlogov, zakaj se v ozadju običajno izognemo slikam v ozadju, kar je všeč, saj lahko včasih izgledajo.

Zamenjava slike v naslovnicah

To je še ena priljubljena tehnika za spletne oblikovalce, ker vam omogoča, da ustvarite grafični naslov in nadomestite besedilo oznake naslova s ​​to sliko.To je resnično starinska praksa spletnega oblikovalca, ki je imel dostop do zelo malo pisav in si želel uporabiti bolj eksotične pisave pri svojem delu. Vzpon spletnih fontov se je resnično spremenil, kako se oblikovalci obračajo na spletna mesta. Naslovi so zdaj lahko nastavljeni v široko paleto pisav in slike z vdelanimi pisavami niso več potrebne. Kot take, boste našli samo nadomestne CSS slike za naslove na starejših spletnih mestih, ki še niso bila posodobljena v bolj sodobne prakse.

Uredil Jeremy Girard dne 9/6/17