Fè anpenpan Tit ak CSS

Sèvi ak Polis, Borders, ak Imaj yo dekoupe Headlines

Tit yo komen sou pifò paj wèb. An reyalite, bèl anpil nenpòt dokiman tèks gen tandans gen omwen yon gran tit pou ou konnen tit la nan sa w ap li. Tèt sa yo ap kode lè l sèvi avèk eleman yo HTML tit - h1, h2, h3, h4, h5, ak h6.

Sou kèk sit, ou ka jwenn ke tit yo kode san yo pa itilize eleman sa yo. Olye de sa, tit ka itilize paragraf ak atribi klas espesifik ajoute nan yo, oswa divizyon ak eleman klas la. Rezon ki fè mwen tande souvan sou pratik sa a kòrèk se ke designer a "pa renmen tit yo tit gade". Pa default, tit yo parèt nan fonse epi yo pi gwo nan gwosè, espesyalman eleman yo h1 ak h2 ki montre nan pi gwo gwosè font pase rès la nan tèks yon paj la. Kenbe nan tèt ou sa a se sèlman gade nan defo nan eleman sa yo! Avèk CSS, ou ka fè tit gade sepandan ou vle! Ou ka chanje gwosè a font, retire fonse a, ak anpil plis. Tit yo se fason apwopriye pou kòd yon tit paj. Men kèk rezon poukisa.

Poukisa Sèvi ak tit tit olye ke DIV ak kwaf

Motè rechèch tankou Heading Tags


Sa a se rezon ki fè pi bon yo itilize tit, epi sèvi ak yo nan lòd ki kòrèk la (sa vle di h1, Lè sa a, h2, Lè sa a, h3, elatriye). Motè rechèch bay pi gwo pondere nan tèks ki enkli andedan tit Tags paske gen yon valè semantik ak tèks. Nan lòt mo, pa etikèt paj tit ou H1, ou di spider motè rechèch la ke sa se konsantre # 1 nan paj la. H2 tit gen # 2 anfaz, ak sou sa.

Ou pa dwe sonje ki klas ou te itilize pou defini tit ou yo

Lè ou konnen ke tout paj entènèt ou yo pral gen yon H1 ki se fonse, 2em, ak jòn, Lè sa a, ou ka defini ke yon fwa nan style ou yo epi yo dwe fè. 6 mwa pita, lè w ap ajoute yon lòt paj, ou jis ajoute yon H1 tag nan tèt paj ou a, ou pa bezwen tounen nan lòt paj pou chèche konnen ki id ID oswa klas ou itilize pou defini prensipal la tit ak sub-tèt.

Yo bay yon Plan Page Strong

Eskli fè tèks pi fasil pou li. Se poutèt sa pi fò lekòl US te anseye elèv yo ekri yon plan anvan yo ekri papye a. Lè ou sèvi ak tit tit nan yon fòma, tèks ou gen yon estrikti klè ki vin aparan trè vit. Plus, gen zouti ki ka revize paj la paj bay yon Rezime, ak sa yo konte sou tit tit pou estrikti nan deskripsyon.

Paj ou pral fè sans menm ak estil yo vire soti

Se pa tout moun ki ka wè oswa sèvi ak dra style (ak sa a tounen nan # 1 - motè rechèch wè kontni an (tèks) nan paj ou, pa fèy papye yo style). Si ou sèvi ak tit tit, w ap fè paj ou yo plis aksesib paske tit yo bay enfòmasyon ke yon tag DIV pa ta.

Li se Itil pou lektè ekran ak aksè nan sit wèb

Bon itilizasyon nan tit kreye yon estrikti ki lojik nan yon dokiman. Sa a se ki lektè ekran pral itilize nan "li" yon sit nan yon itilizatè ak andikap vizyon, fè sit ou aksesib a moun ki gen andikap.

Style tèks la ak font nan tit ou

Fason ki pi fasil pou avanse pou pi lwen "gwo, fonse, ak lèd" pwoblèm nan tit Tags se style tèks la fason ke ou vle yo gade. An reyalite, lè mwen ap travay sou yon nouvo sit wèb, mwen tipikman ekri paragraf la, h1, h2, ak h3 Styles premye bagay. Mwen anjeneral bwa ak font fanmi jis ak gwosè / pwa. Pou egzanp, sa a ta ka yon fèy style preliminè pou yon sit nouvo (sa yo, se sèlman kèk estil egzanp ki ta ka itilize):

kò, HTML {Marge: 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 Women", Times, serif; } h3 {font: bold 1.2em Arial, Geneva, Helvetica, sans-serif; }}

Ou ka modifye polis yo nan gran tit ou a oswa chanje style la tèks oswa menm koulè tèks la . Tout moun sa yo ap vire ou "lèd" tit nan yon bagay ki pi vibran e nan kenbe ak konsepsyon ou.

h1 {font: bold italic 2em / 1em "Times New Women", "MS Serif", "New York", serif; Marge: 0; padding: 0; koulè: # e7ce00; }}

Borders ka rad moute tit

Borders se yon bon fason pou amelyore tit ou yo. Ak sou fwontyè yo se fasil yo ajoute. Men, pa bliye eksperyans ak fwontyè yo - ou pa bezwen yon fwontyè sou chak bò nan gran tit ou. Epi ou ka itilize plis pase jis sou fwontyè raz.

h1 {font: bold italic 2em / 1em "Times New Women", "MS Serif", "New York", serif; Marge: 0; padding: 0; koulè: # e7ce00; fontyè-top: solid # e7ce00 mwayen; fontyè-anba: pwent # e7ce00 mens; lajè: 600px; }}

Mwen te ajoute yon fwontyè tèt ak anba nan echantiyon gran tit mwen an prezante kèk estil enteresan vizyèl. Ou ta ka ajoute sou fwontyè nan nenpòt fason ke ou te vle reyalize style la konsepsyon ou vle.

Add Imaj Istorik nan Tit ou pou menm plis Pizazz

Sit entènèt Anpil gen yon seksyon header nan tèt paj la ki gen ladan yon tit - tipikman sit la sit ak yon grafik. Pifò konsèpteur panse sa a kòm de eleman separe, men ou pa bezwen. Si grafik la ki gen jis dekore tit la, Lè sa a, poukisa pa ajoute li nan estil yo tit?

h1 {font: Itali fonse 3em / 1em "Times New Women", "MS Serif", "New York", serif; background: #fff URL ("fancyheadline.jpg") repete-x anba; padding: 0.5em 0 90px 0; tèks aliman: sant; Marge: 0; fontyè-anba: solid # e7ce00 0.25em; koulè: # e7ce00; }}

Trick a sa a gran tit se ke mwen konnen imaj mwen an se 90 piksèl wotè. Se konsa, mwen te ajoute padding nan fon an nan gran tit la nan 90px (padding: 0.5 0 90px 0p;). Ou ka jwe ak marges yo, liy-wotè, ak padding yo ka resevwa tèks la nan gran tit la montre egzakteman ki kote ou vle li.

Youn nan bagay yo sonje lè w ap itilize imaj se ke si ou gen yon sit entènèt ki reponn (ki ou ta dwe) ak yon Layout ki chanjman ki baze sou gwosè ekran ak aparèy, ou gran tit pa pral toujou gen menm gwosè a. Si ou bezwen tit ou yo dwe yon gwosè egzak, sa ka lakòz pwoblèm. Li se youn nan rezon ki fè mwen jeneralman evite imaj background nan yon gran tit, tankou fre jan yo ka pafwa gade.

Imaj Ranplasman nan Tit

Sa a se yon lòt teknik popilè pou Designers entènèt paske li pèmèt ou kreye yon gran grafik epi ranplase tèks la nan tag nan tit ak sa imaj. Sa a se verite yon pratik antiqued soti nan konsèpteur entènèt te gen aksè a polis trè kèk e yo te vle sèvi ak polis plis ekzotik nan travay yo. Te monte nan polis entènèt reyèlman chanje kouman konsèpteur apwòch sit. Tit yo kounye a ka mete nan yon gran varyete polis ak imaj ak sa yo polis entegre yo pa nesesè ankò. Kòm sa yo, ou pral jwenn sèlman CSS imaj ranplasman pou tit sou sit ki pi gran ki pa gen ankò yo te mete ajou plis pratik modèn.

Original atik pa Jennifer Krynin. Edited by Jeremy Girard sou 9/6/17