Aprann Kòman pou kreye anpenpan anpenpan premye lè l sèvi avèk CSS ak imaj
Aprann Kòman pou w itilize CSS pou kreye anpenpan premye kapsil pou paragraf ou yo. Gen menm yon senp imaj ranplasman teknik yo sèvi ak yon imaj grafik pou bouchon premye ou.
Styles Debaz nan Caps Inisyal
Gen twa estil debaz nan bouchon premye nan dokiman:
- leve soti vivan - ki pi komen an, kote premye lèt la pi gwo ak sou liy lan menm jan ak tèks aktyèl la.
- tonbe - tou san patipri komen, kote premye lèt la pi gwo ak tonbe anba a liy lan premye nan tèks. Tèks sa a Lè sa a, flote bò kote l '.
- adjasan - kote premye lèt la se nan yon sèl kolòn bò kote rès la nan tèks la. Sa a se pi komen nan ekri ak lèt detache pase konsepsyon sit entènèt.
Bouchon Inisyal oswa bouchon gout yo trè abitye. Yo se yon bon fason yo abiye otreman long ak raz vole nan tèks. Se avèk pwopriyete CSS la: premye lèt, ou ka byen defini kòman pou fè premye lèt ou yo.
Kreye yon senp Inisyal Cap
Tout sa ou bezwen fè pou kreye yon senp leve soti vivan bouchon an premye se fè lèt la premye nan paragraf ou pi gwo nan gwosè ak premye-lèt pseudo-eleman an:
p: premye lèt {font-size: 3em; }}Men, navigatè anpil wè ke premye lèt la pi gwo pase rès la nan tèks la sou liy lan, se konsa yo fè dirijan egal a sa ki ta fè sans pou premye lèt, pa rès liy lan. Chans, sa a fasil ranje ak premye-liy pseudo-eleman an ak liy-wotè pwopriyete a:
p: premye lèt {font-size: 3em; } p: premye liy {liy-wotè: 1em; }}Jwe ak wotè liy lan nan dokiman ou jiskaske ou jwenn gwosè dwat la pou tèks ou.
Jwe ak Kap Inisyal ou
Yon fwa ou konprann ki jan yo kreye yon bouchon premye, ou ka abiye l 'nan rad anpenpan fè li kanpe deyò. Jwe ak koulè, koulè background, fwontyè, oswa tou sa frape anpenpan ou. Yon style jistis senp se ranvèse koulè yo nan font ou ak koulè background jis pou lèt la an premye:
p: premye lèt {font-size: 300%; background-koulè: # 000; koulè: # ff; } p: premye liy {liy-wotè: 100%; }}Yon lòt Trick se sant premye liy lan. Sa a ka difisil ak CSS, kòm nan mitan liy lan tèks ka diferan si Layout ou a se fleksib. Men, ak kèk ap jwe otou ak valè yo, ou ka endepte premye liy ou ase yo fè premye lèt la parèt yo dwe nan mitan an. Jis jwe ak pousantaj la sou tèks endent nan paragraf la jiskaske li sanble dwa:
p: premye lèt {font-size: 300%; background-koulè: # 000; koulè: # ff; } p: premye liy {liy-wotè: 100%; } p {tèks-endis: 45% ; }}Adjasan Inisyal Caps yo difisil ak CSS
Adjasan premye kapsil ka difisil ak CSS paske navigatè yo diferan montre polis yo yon fason diferan. Lide a dèyè kreye yon bouchon adjasan nan CSS se sèvi ak pwopriyete a tèks-endant sou premye liy lan pouse li soti (sou bò gòch la) yon valè negatif. Ou pral bezwen tou chanje Marge gòch la nan paragraf sa a pa kèk kantite lajan. Jwe ak nimewo sa yo jiskaske paragraf la sanble bon.
p {tèks-endis: -2.5em; Marge-bò gòch: 3em; } p: premye-lèt {font-size: 3em; } p: premye liy {liy-wotè: 100%; }}Lè w reyèlman anpenpan Caps Inisyal
Pi bon fason yo kreye yon anpenpan bouchon an premye se chanje font nan yon fanmi plis dekoratif font. Si ou itilize yon seri de polis ki te swiv pa yon font jenerik , li pral ede garanti ke bouch inisyal ou montre byen pou kliyan ou ka wè li, san yo pa resevwa nan pwoblèm aksè ak itilite.
p: premye lèt {font-size: 3em; font-family: "Edwardian Script ITC", "Bwòs Script MT", kousiv; } p: premye liy {liy-wotè: 100%; }}Epi, kòm dabitid, ou ka mete tout sijesyon sa yo ansanm yo kreye yon bouchon inisyal ki anons style nan paragraf ou.
Sèvi ak yon Cap inisyal grafik
Si, apre tout sa, ou toujou pa renmen ki jan bouchon inisyal ou gade sou paj la, ou ka resort grafik yo ka resevwa efè a egzak w ap chèche pou. Men, anvan ou deside pou avanse pou tou dwat nan grafik, ou ta dwe konnen nan dezavantaj yo nan metòd sa a:
- Kliyan san imaj pa pral wè bouchon inisyal la, epi yo pa ka wè tèks la kache ke imaj la ap ranplase. Sa ka fè paragraf la aksesib, oswa nan pi bon difisil li.
- Imaj toujou ajoute nan tan an download nan yon paj. Si ou gen yon anpil nan bouchon premye, ou ka siyifikativman ogmante tan an download pou yon bagay anpil moun ta santi yo ensiyifyan.
- Gen kèk navigatè ap montre tou de lèt la kache premye ak imaj la - ki ka fè tèks la paragraf gade enpè.
- Li trè difisil otomatize opsyon sa a, jan ou dwe konnen ekzakteman ki sa premye lèt la se konsa ke ou itilize grafik ki kòrèk la. Se konsa, chak fwa paragraf la modifye, ou ka bezwen kreye yon grafik nouvo.
Premyèman, ou bezwen kreye grafik la nan premye lèt la. Mwen te itilize fotoschop yo kreye lèt L la ak font "Edwardian Script ITC la". Mwen te fè li gwo - 300pt nan gwosè. Mwen Lè sa a, taye imaj la desann nan minimòm la fè alantou lèt la ak te note lajè lajè ak wotè.
Lè sa a, mwen te kreye yon klas "capL" pou paragraf mwen an. Sa a se kote mwen defini ki sa imaj yo itilize, dirijan (liy-wotè a), ak sou sa.
Ou bezwen sèvi ak lajè imaj la ak wotè yo mete tèks endependan an ak padding-tèt. Pou imaj L mwen, mwen te bezwen 95px endepandan ak 72px padding.
p.capL {liy-wotè: 1em; background-image: url (capL.gif); background-repete: pa gen okenn-repete; tèks endependan: 95px; padding-tèt: 72px; }}Men, sa se pa tout. Si ou kite li la, Lè sa a, premye lèt la ap double nan paragraf la - premye ak grafik la, Lè sa a, nan tèks la. Se konsa, mwen te ajoute yon span alantou premye eleman ak klas la "inisyal" - e li te di navigatè a pa montre lèt sa a:
span.initial {ekspozisyon: okenn; }}Ak grafik la Lè sa a, montre kòrèkteman. Ou ka jwe ak tèks-endis la sou paragraf la yo ka resevwa tèks la mele dwa jiska lèt la, sepandan ou ta renmen li nan montre.