Meitsje Fancy Headings mei CSS

Brûk lettertypen, rânen, en ôfbyldings om te skilderjen

Headlines binne algemien foar de measte websiden. In feite, in soad elke tekstdokus hat tenei op syn minst ien kopline te wêzen sadat jo de titel fan wat jo lêze kenne. Dizze headlines wurde codearre mei de HTML-titel eleminten - h1, h2, h3, h4, h5, en h6.

Op guon sites kinne jo fine dat koppen binne kodearre sûnder dizze eleminten te brûken. Ynstee kinne koppen lykwols paragrafen brûke mei spesifike klasse attributen dy't oan har tafoege, of divyzjes ​​mei klasse-eleminten. De reden dy't ik faaks hearre oer dizze ferkearde praktyk is dat de ûntwerper "net fynt fan 'e wize kopteksten". Standert binne de titelblêden yn fett werjûn en se binne grutter yn grutte, benammen de h1- en h2-eleminten dy 't yn in folle gruttere lettertypegrutte sjen litte as de oare tekst fan in side. Tink derom dat dit allinich it standertkaai fan dizze eleminten is! Mei CSS kinne jo kopiearje lykas jo wolle! Jo kinne de lettertypegrutte feroarje, de fette fuortsmite, en safolle mear. Liedingen binne de goede manier om de haadlinen fan in side te kodearjen. Hjir binne inkele reden wêrom.

Wêrom gebrûk meitsje fan tags tagong as DIV's en styling

Sykje moters lykas kaartsjes Tags


Dit is de bêste reden om headings te brûken en gebrûk te meitsjen yn 'e goede opdracht (bgl. H1, dan h2, dan h3, ensfh.). Sykje motors jouwe de heechste gewicht oan tekst dy't yn 'e koprblêdnûmer binne, om't der in semantyske wearde is oan dy tekst. Mei oare wurden, troch it labelen fan jo side-titel H1, fertelle jo de sykmasjine spider dat dit is it fokus # 1 fan 'e side. H2-headings hawwe # 2 aksint, en sa op.

Jo Don 't To Remember What Classes You Used To Define Your Headlines

As jo ​​witte dat jo alle websiden in H1 hawwe dy't fett, 2em, en giel hawwe, dan kinne jo it ienris yn jo stylblêd definiearje en wurde dien. 6 moanne letter, as jo in oare side oanmeitsje, jo in juste H1-tag taheakje oan 'e boppekant fan jo side, jo moatte net nei oare siden gean om te finen hokker styl ID of klasse jo brûkte om de haadletter te definiearjen headline en subkopen.

Se biede in sterke side-rûte

Untfangingen meitsje tekst makliker om te lêzen. Dêrom learen de measte US skoallen learlingen om in skriuwer te skriuwen foardat se it papier skriuwe. As jo ​​tagongstikken yn in skermformaat brûke, hat jo tekst in dúdlike struktuer dy't tige fluch wurdt. Fierder binne der ark dy't de side skerm bepale om in synopsis te leverjen, en dy steane op koptekst foar de skonstruktuer.

Jo side sil sin sin meitsje, sels mei de stilen ôfkamen

Net elkenien kin gebrûk meitsje fan stylblêden (en dit komt werom nei # 1 - sykmasines sjoch de ynhâld (tekst) fan jo side, net de stylblêden). As jo ​​tagongstikken brûke, meitsje jo siden tagonklikere om't de headlines ynformaasje jaan dy't in DIV-tag net hawwe soe.

It is brûkber foar skermlêzers en websteeënberikberens

Proper gebrûk fan headings soarget in logyske struktuer ta in dokumint. Dit is wat skermlêzers brûke om in side te lêzen oan in brûker mei fysynhâld, sadat jo side tagonklik foar minsken mei in beheining makket.

Stil de tekst en lettertype fan jo haadlinen

De maklikste manier om fuort te gean nei it "grutte, fet, en ûnsjoch" probleem fan koptekst is om de tekst te styljen op 'e manier wêrop jo se sykje wolle. Yn 't feit, as ik wurkje oan in nije webside, skriuw ik typysk de paragraaf, h1, h2, en h3 stipe earste ding. Ik haw meastentiids stien mei juste lettertypefamylje en grutte / gewicht. Bygelyks, dit kin in foarrige stylblêd wêze foar in nije side (dit binne gewoan bygelyks stilen dy't brûkt wurde kinne):

body, html {margin: 0; padding: 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; }

Jo kinne de lettertypen fan jo haadletters feroarje, of de tekststyl of sels de tekstkleur feroarje . Alle dingen sille jo "ûnsjoch" koptekst yn wat mear libbene en hâlden mei jo ûntwerp.

h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; marzje: 0; padding: 0; kleur: # e7ce00; }

Rânen kinne har oplade

Rânen binne in geweldige manier om jo headlines te ferbetterjen. En rânen binne maklik te tafoege. Mar ferjit net om te eksperimintearjen mei de grinzen - jo hawwe gjin grins op elke kant fan jo koptekst nedich. En jo kinne gebrûk meitsje fan mear dan allinnich gewoane bûgende grinzen.

h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; marzje: 0; padding: 0; kleur: # e7ce00; border-top: solid # e7ce00 medium; border-bottom: dotted # e7ce00; width: 600px; }

Ik tafoege in top en ûndergrins oan myn problemen foar haadstyl foar guon ynteressante visuele stilen. Jo kinne grinzen op elke manier tafoegje dat jo de ûntwerpstyl wolle jo berikke.

Foegje eftergrûnôfbyldings tafoegje nei jo haadlinen foar noch mear Pizazz

In soad websiden hawwe in koptekst op 'e top fan' e side dy't in koptekst bestiet - typysk de sidetitel en in grafyk. De measte ûntwerper tinke dat dit as twa ûnderskate eleminten, mar jo moatte net. As de grafyk is der gewoan de headline te dekorjen, dan wêrom it net oan 'e kopteksten tafoegje?

h1 {font: bold italic 3em / 1em "Times New Roman", "MS Serif", "New York", serif; background: #fff url ("fancyheadline.jpg") repeat-x bottom; padding: 0.5em 0; tekst-align: sintrum; marzje: 0; border-bottom: solid # e7ce00 0.25em; kleur: # e7ce00; }

It truc nei dizze kopline is dat ik wit dat myn byld is 90 pixels heech. Dus ik tafoege padding oan 'e boaiem fan' e kopfline fan 90px (padding: 0.5 0 90px 0p;). Jo kinne spielje mei de rânen, rigelhichte, en padding om de tekst fan 'e kopline te krijen om krekt wêr't jo it wolle.

Ien ding om te herinnearjen by it brûken fan bylden is dat as jo in bepaalde webside hawwe (wat jo moatte) mei in layout dat feroaret op basearre op skermgrutte en apparaten, jo koptekst sil net altyd deselde grutte wêze. As jo ​​jo haadletter nedich hawwe om in krekte grutte te kinnen, kin dit problemen feroarsaakje. It is ien fan 'e reden wêrom't ik alhiel eftergrûnôfbyldings foarkomme yn in koptekst, lykas koele as se kinne soms sjen.

Ofbylding ferwiderje yn haadlinen

Dit is in oare populêre technyk foar webûntwikkelders omdat it jo makket in grafyske kopiearje en de tekst fan it koptekst ferfange mei dy byld. Dit is wierliken in âldere praktyk fan web-ûntwerpers hie tagong ta hiel wat lettertypen en woe mear eksoatyske lettertypen yn har wurk brûke. De oplieding fan webfonts hat echt feroare hoe't ûntwerpers fan sitten binne. Headlines kinne no yn in breed ferskaat oan lettertypen ynsteld wurde en ôfbyldings mei dy foarkarren binne net mear nedich. As dysels fine jo allinich CSS-ôfbyldings ferfange foar titels op âldere plakken dy't noch net bywurke binne oan mear moderne praktiken.

Oarspronklik artikel fan Jennifer Krynin. Edited by Jeremy Girard on 9/6/17