Formatuoti išgalvotas CSS antraštes ir antraštes

Antraštės yra įprastos daugelyje tinklalapių. Tiesą sakant, beveik bet kuriame tekstiniame dokumente yra bent viena antraštė, kad jūs žinotumėte to, ką skaitote, pavadinimą. Šios antraštės užkoduotos naudojant HTML antraštės elementai - h1, h2, h3, h4, h5 ir h6.

Kai kuriose svetainėse galite pastebėti, kad antraštės yra koduojamos nenaudojant šių elementų. Vietoj to, antraštėse gali būti naudojamos pastraipos, prie kurių pridedami konkretūs klasės atributai, arba skyriai su klasės elementais. Priežastis, dėl kurios dažnai girdime apie šią neteisingą praktiką, yra ta, kad dizaineriui „nepatinka, kaip atrodo antraštės“. Pagal numatytuosius nustatymus antraštės yra paryškintos ir yra didesnio dydžio, ypač elementai „h1“ ir „h2“, kurie rodomi daug didesniu šriftu nei likęs puslapio tekstas. Atminkite, kad tai tik numatytoji šių elementų išvaizda! Su CSS, galite padaryti, kad antraštė atrodytų taip, kaip norite! Galite pakeisti šrifto dydį, pašalinti paryškintą ir dar daugiau. Antraštės yra tinkamas būdas koduoti puslapio antraštes. Štai keletas priežasčių, kodėl.

instagram viewer

Kodėl verta naudoti antraštes, o ne skirstymą

Tai yra geriausia priežastis naudoti antraštes ir naudoti jas teisinga tvarka (t. Y. h1, tada h2, tada h3 ir kt.). Paieškos sistemos suteikti didžiausią svorį tekstui, esančiam antraštės žymose, nes tam tekstui yra prasminė vertė. Kitaip tariant, pažymėdami savo puslapio pavadinimą H1, jūs pasakote paieškos sistemos vorui, kad tai yra puslapio pagrindinis dėmesys. H2 antraštėse pabrėžiamas numeris 2 ir t. T.

Žaidimo plytelių raidės

Jums nereikia prisiminti, kokias klases naudojote apibrėždami antraštes

Kai žinosite, kad visuose jūsų tinklalapiuose bus paryškintas, 2em ir geltonas H1 ženklas, tai galėsite vieną kartą apibrėžti savo stiliaus lape ir tai padaryti. Po 6 mėnesių, kai pridedate kitą puslapį, tiesiog pridėkite H1 žymą savo puslapio viršuje, jūs neturite grįžti į kitus puslapius, kad sužinotumėte, kokį stiliaus ID ar klasę naudojote apibrėždami pagrindinę antraštę ir antraštes.

Pateikite tvirtą puslapio kontūrą

Kontūrai palengvina teksto skaitymą. Štai kodėl dauguma JAV mokyklų mokė mokinius parašyti metmenis prieš jiems rašant darbą. Kai naudojate antraštės žymas kontūro formatu, jūsų tekstas turi aiškią struktūrą, kuri labai greitai išryškėja. Be to, yra įrankių, kurie gali peržiūrėti puslapio kontūrą, kad pateiktų santrauką, ir jie priklauso nuo antraštės žymių, skirtų kontūro struktūrai.

Jūsų puslapis bus prasmingas net ir išjungus stilius

Ne visi gali peržiūrėti ar naudoti stiliaus lapus (ir tai grįžta prie nr. 1 - paieškos sistemos žiūri ne į stiliaus, o į jūsų puslapio turinį (tekstą). Jei naudojate antraštės žymas, jūs darote savo puslapius lengviau pasiekiamus, nes antraštėse pateikiama informacija, kurią a DIV žyma nebūtų.

Tai naudinga ekrano skaitytojams ir interneto prieinamumui

Tinkamai naudojant antraštes sukuriama loginė dokumento struktūra. Tai ekrano skaitytuvai naudos „skaitydami“ svetainę regėjimo negalią turintiems vartotojams, kad jūsų svetainė būtų prieinama žmonėms su negalia.

Sukurkite antraščių tekstą ir šriftą

Lengviausias būdas atsiriboti nuo „didelių, drąsių ir negražių“ antraštės žymų problemų yra stiliaus tekstas taip, kaip norite. Tiesą sakant, dirbant naujoje svetainėje geriausia pirmiausia rašyti pastraipas, h1, h2 ir h3 stilius. Laikykitės tik šriftų šeimos ir dydžio / svorio. Pavyzdžiui, tai gali būti preliminarus naujos svetainės stiliaus lapas (tai tik keli pavyzdžiai, kuriuos galima naudoti):

Galite modifikuoti šriftus antraštės ar pakeisti teksto stilių ar net teksto spalvą. Visa tai pavers jūsų „negražią“ antraštę gyvesne ir jūsų dizainą atitinkančia.

Sienos gali puošti antraštes

Sienos yra puikus būdas patobulinti antraštes ir jas lengva pridėti. Tačiau nepamirškite eksperimentuoti su kraštinėmis - jums nereikia krašto kiekvienoje antraštės pusėje. Ir jūs galite naudoti ne tik paprastas nuobodžias sienas.

Prie pavyzdinės antraštės pridėjome viršutinę ir apatinę kraštines, kad pristatytume įdomių vaizdinių stilių. Galite pridėti kraštus bet kokiu būdu, kad norite pasiekti norimą dizaino stilių.

Pridėkite foninių vaizdų antraštėse, kad gautumėte dar daugiau „Pizazz“

Daugelyje svetainių puslapio viršuje yra antraštės skiltis, kurioje yra antraštė - paprastai svetainės pavadinimas ir grafika. Daugelis dizainerių mano, kad tai yra du atskiri elementai, bet jūs to neturite. Jei grafika skirta tik antraštei papuošti, tai kodėl gi nepridėjus jos antraštės stiliams?

Šios antraštės gudrybė yra ta, kad mes žinome, kad mūsų vaizdas yra 90 taškų aukščio. Taigi pridėjome užpildymą ant 90 taškų antraštės apačios (užpildymas: 0,5 0 90 taškų 0p;). Galite žaisti su paraštėmis, linijos aukščiu ir užpildu, kad antraštės tekstas būtų rodomas tiksliai ten, kur norite.

Vienas dalykas, kurį reikia atsiminti naudojant vaizdus, ​​yra tas, kad jei turite reaguojanti svetainė (kurio turėtumėte) su išdėstymu, kuris keičiasi atsižvelgiant į ekrano dydį ir įrenginius, antraštė ne visada bus vienodo dydžio. Jei norite, kad antraštė būtų tiksli, tai gali sukelti problemų. Tai yra viena iš priežasčių, kodėl apskritai vengiame foninių vaizdų antraštėje, kad ir kokie šaunūs kartais gali atrodyti.

Vaizdo pakeitimas antraštėse

Tai dar viena populiari interneto dizainerių technika, nes ji leidžia jums sukurti grafinę antraštę ir pakeisti antraštės žymos tekstą tuo vaizdu. Tai iš tikrųjų yra pasenusi interneto dizainerių praktika, kurie turėjo prieigą prie labai nedaug šriftų ir norėjo savo darbuose naudoti egzotiškesnius šriftus. Žiniatinklio šriftų populiarumas iš tikrųjų pakeitė dizainerių požiūrį į svetaines. Antraštes dabar galima nustatyti įvairiausiais šriftais, o vaizdai su įterptais šriftais nebereikalingi. Taigi CSS vaizdus galite pakeisti tik antraštėse senesnėse svetainėse, kurios dar nebuvo atnaujintos į modernesnes praktikas.

Redagavo Jeremy Girard

instagram story viewer