Izmantojiet fontus, malas un attēlus, lai izrotātu virsrakstus
Virsraksti ir izplatīti lielākajā daļā tīmekļa lapu. Faktiski gandrīz jebkuram teksta dokumentam parasti ir vismaz viens virsraksts, lai jūs zināt, ko jūs lasāt. Šīs virsraksti tiek kodēti, izmantojot HTML pozīcijas elementus - h1, h2, h3, h4, h5 un h6.
Dažās vietnēs jūs varat atrast, ka virsrakstus kodē, neizmantojot šos elementus. Tā vietā virsraksti var izmantot punktus ar īpašiem klases atribūtiem, kas tiem pievienoti, vai sadalījumu ar klases elementiem. Iemesls, ko bieži dzirdu par šo nepareizo praksi, ir tāds, ka dizainers "nepatīk, kā izskatās pozīcijas". Pēc noklusējuma pozīcijas tiek parādītas treknrakstā, un tās ir lielākas, jo īpaši h1 un h2 elementi, kas parāda daudz lielāku fonta lielumu nekā pārējais lapas teksts. Paturiet prātā, ka šis ir tikai šo elementu noklusējuma izskats! Ar CSS, jūs varat padarīt pozīciju izskatās tomēr vēlaties! Varat mainīt fonta lielumu, noņemt treknrakstu un vēl daudz vairāk. Virsraksti ir pareizs veids, kā kodēt lapas virsrakstus. Tālāk ir minēti daži iemesli.
Kāpēc lietot virsrakstus, nevis DIV un stilu
Meklētājprogrammas, piemēram, virsrakstu birkas
Tas ir labākais iemesls, kā izmantot pozīcijas, un izmantot tos pareizā secībā (ti, h1, tad h2, pēc tam h3 utt.). Meklētājprogrammas dod visaugstāko svērumu tekstā, kas iekļauts rubrikā "tagi", jo šim tekstam ir semantiska vērtība. Citiem vārdiem sakot, marķējot lapas nosaukumu H1, jūs informējat meklētājprogrammu zirnekli, ka tas ir lapas pirmais fokuss. H2 virsrakstos ir # 2 uzsvars, un tā tālāk.
Jūs don & # 39; t atcerēties, kādas klases jūs izmantojat, lai noteiktu jūsu virsrakstus
Kad jūs zināt, ka visām jūsu tīmekļa lapām būs H1, kas ir treknā, 2em un dzeltenā krāsā, tad to var definēt vienu reizi savā stilu tabulā un izdarīt. 6 mēnešus vēlāk, kad pievienojat citu lapu, jūs vienkārši pievienojat H1 tagu savas lapas augšdaļā, jums nav jāatgriežas citās lapās, lai uzzinātu, kurš stila ID vai klase jums ir izmantota, lai noteiktu galveno virsraksts un apakšgrupas.
Tie nodrošina spēcīgu lappusi
Konstruēšana padara tekstu vieglāk lasāmu. Tāpēc lielākā daļa ASV skolas mācīja skolēnus uzrakstīt aprakstu, pirms viņi uzrakstīja papīru. Kad jūs izmantojat virsraksta tagus vispārīgā formātā, jūsu tekstam ir skaidra struktūra, kas izpaužas ļoti ātri. Turklāt ir arī rīki, kas var pārskatīt lapas aprakstu, lai sniegtu kopsavilkumu, un tie balstās uz virsraksta struktūras tagu virsrakstiem.
Jūsu lapa darīs skaņu, pat ja stili ir izslēgti
Ne visi var apskatīt vai izmantot stila lapas (un tas atgriežas pie # 1 - meklētājprogrammās tiek apskatīts lapas saturs (teksts), nevis stilu lapas). Ja izmantojat frāžu tagus, padarāt savas lapas pieejamākas, jo virsrakstos tiek sniegta informācija, ka DIV tags nebūtu.
Tas ir noderīgi ekrāna lasītājiem un tīmekļa vietņu pieejamībai
Pareiza pozīciju izmantošana rada dokumentam loģisku struktūru. Tas ir tas, ko ekrāna lasītāji izmantos, lai "lasītu" vietni lietotājam ar redzes traucējumiem, padarot jūsu vietni pieejamu cilvēkiem ar invaliditāti.
Stiliet savu virsrakstu tekstu un fontu
Vienkāršākais veids, kā izvairīties no "lielas, treknējas un neglītas" pozīcijas tagu problēmas, ir teksta stils tā, kā vēlaties tos meklēt. Faktiski, kad es strādāju pie jauna tīmekļa vietnes, vispirms rakstot rindkopu, h1, h2 un h3 stilus. Es parasti pieskaros tikai fontu saimei un izmēram / svaram. Piemēram, tā var būt sākotnējā stila lapa jaunai vietnei (šie ir tikai daži piemēri, kurus var izmantot):
ķermenis, html (margin: 0; polsterējums: 0; } p {font: 1em Arial, Geneva, Helvetica, sans-serif; } h1 {font: bold 2em "Times New Roman", Times, serif; } h2 {font: bold 1.5em "Times New Roman", Times, serif; } h3 {font: bold 1.2em Arial, Geneva, Helvetica, sans-serif; }Varat mainīt sava virsraksta fontus vai mainīt teksta stilu vai pat teksta krāsu . Visi šie padara jūsu "neglītu" virsrakstu par kaut ko vairāk dinamisku un atbilstoši jūsu dizainam.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; starpība: 0; polsterējums: 0; krāsa: # e7ce00; }Robežas var saģērbt virsrakstus
Robežas ir lielisks veids, kā uzlabot virsrakstus. Un robežas ir viegli pievienot. Bet neaizmirstiet eksperimentēt ar robežām - jums nevajag robežu katrā virsrakstā. Un jūs varat izmantot ne tikai vienkāršas urbšanas robežas.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; starpība: 0; polsterējums: 0; krāsa: # e7ce00; border-top: solid # e7ce00 vidēja; robeža-apakšā: punktēts # e7ce00 plāns; platums: 600 pikseļi; }Mana parauga virsrakstā es pievienoju augšējo un apakšējo malu, lai ieviestu interesantus vizuālos stilus. Jūs varētu pievienot robežas tādā veidā, kā jūs gribējāt sasniegt vēlamo dizaina stilu.
Pievienojiet fona attēlus jūsu virsrakstiem vēl vairāk Pizazz
Daudzām tīmekļa vietnēm ir galvenes sadaļa lapas augšdaļā, kas ietver virsrakstu - parasti vietnes nosaukumu un grafiku. Lielākā daļa dizaineru to uzskata par diviem atsevišķiem elementiem, bet jums to nav. Ja grafika ir tikai, lai izrotātu virsrakstu, tad kāpēc ne pievienot to pozīcijas stiliem?
h1 {font: bold italic 3em / 1em "Times New Roman", "MS Serif", "New York", serif; fons: #fff url ("fancyheadline.jpg") atkārtot-x apakšā; polsterējums: 0.5em 0 90px 0; teksta izlīdzināšana: centrs; starpība: 0; border-bottom: cietais # e7ce00 0.25em; krāsa: # e7ce00; }Šim virsrakstam triks ir tas, ka es zinu, ka mans attēls ir 90 pikseļu garš. Tāpēc es pievienoju polsterējumu 90px virsraksta apakšai (polsterējums: 0.5 0 90px 0p;). Jūs varat spēlēt ar starpību, līnijas augstumu un polsterējumu, lai iegūtu virsraksta tekstu, lai parādītu tieši to vietu, kur to vēlaties.
Viena lieta, kas jāatceras, lietojot attēlus, ir tāda, ka, ja jums ir pielāgojama vietne (kas jums vajadzētu) ar izkārtojumu, kas mainās atkarībā no ekrāna izmēriem un ierīcēm, virsraksts ne vienmēr būs vienāda izmēra. Ja jums ir nepieciešams, lai jūsu virsraksts būtu precīzs izmērs, tas var radīt problēmas. Tas ir viens no iemesliem, kāpēc es vispār izvairītos no fona attēla virsrakstā, tikpat jaudīgi, kā dažreiz var izskatīties.
Attēlu aizstāšana virsrakstos
Šī ir vēl viena populāra Web izstrādātāju tehnoloģija, jo tā ļauj jums izveidot grafisko virsrakstu un aizvietot virsraksta tagu ar šo attēlu. Tas ir patiesi pagātnes laiks, kad tīmekļa dizaineriem bija pieeja pavisam nedaudziem fontiem un viņi vēlējās izmantot savā darbā eksotiskus fontus. Interneta fontu pieaugums patiešām ir mainījis to, kā dizaineri tuvojas vietnēm. Tagad virsrakstus var iestatīt dažādos fontos, un šie fonti vairs nav vajadzīgi. Tādējādi jūs atradīsit CSS attēlu noņemšanu tikai virsrakstos vecākajās vietnēs, kuras vēl nav atjauninātas, lai veidotu mūsdienīgākas darbības.
Jennifera Krīnina oriģinālais raksts. Rediģējis Džeremijs Girards no 9/6/17