Dysgu sut i greu Capiau Cychwynnol Fancy Defnyddio CSS a Delweddau
Dysgwch sut i ddefnyddio CSS i greu capiau cychwynnol ffansi ar gyfer eich paragraffau. Mae hyd yn oed dechneg ddelwedd syml i ddefnyddio delwedd graffigol ar gyfer eich cap cychwynnol.
Dulliau Sylfaenol Capiau Cychwynnol
Mae yna dair arddull sylfaenol o gapiau cychwynnol mewn dogfennau:
- Codwyd - y mwyaf cyffredin, lle mae'r llythyr cyntaf yn fwy ac ar yr un llinell â'r testun presennol.
- wedi ei ollwng - hefyd yn weddol gyffredin, lle mae'r llythyr cyntaf yn fwy ac wedi gostwng i lawr islaw'r llinell gyntaf. Mae'r testun canlynol wedyn yn llofftu o'i gwmpas.
- wrth ymyl - lle mae'r llythyr cyntaf mewn un golofn wrth weddill y testun. Mae hyn yn fwy cyffredin mewn print na dylunio gwe.
Mae capiau cychwynnol neu gapiau gollwng yn gyfarwydd iawn. Maent yn ffordd wych o wisgo rhychwantu testunau hir a diflas fel arall. Ac ag eiddo CSS: llythyr cyntaf, gallwch chi ddiffinio yn hawdd sut i wneud eich llythyrau cyntaf yn fancier.
Creu Cap Cychwynnol Syml
Y cyfan sydd angen i chi ei wneud i greu cap cychwynnol syml yw gwneud llythyr cyntaf eich paragraff yn fwy o faint gyda'r ffug-elfen llythrenn gyntaf:
p: llythyr cyntaf {font-size: 3em; }Ond mae llawer o borwyr yn gweld bod y llythyr cyntaf yn fwy na gweddill y testun ar y llinell, felly maen nhw'n gwneud yr un blaen yn gyfwerth â beth fyddai'n gwneud synnwyr ar gyfer y llythyr cyntaf hwnnw, nid gweddill y llinell. Yn ffodus, mae hyn yn hawdd ei osod gyda'r ffug-elfen gyntaf a'r eiddo uchder llinell:
p: llythyr cyntaf {font-size: 3em; } p: llinell gyntaf {llinell-uchder: 1em; }Chwarae gyda uchder y llinell yn eich dogfen nes y byddwch yn dod o hyd i'r maint cywir ar gyfer eich testun.
Chwarae gyda'ch Cap Cychwynnol
Unwaith y byddwch chi'n deall sut i greu cap cychwynnol, gallwch ei wisgo i fyny mewn dillad ffansi i'w gwneud yn amlwg. Chwarae gyda liwiau, lliwiau cefndir, ffiniau, neu beth bynnag sy'n taro'ch ffansi. Arddull eithaf syml yw gwrthdroi lliwiau eich ffont a'ch lliw cefndir yn unig ar gyfer y llythyr cyntaf:
p: llythyr cyntaf {font-size: 300%; cefndir-liw: # 000; lliw: #fff; } p: llinell gyntaf {llinell-uchder: 100%; }Trick arall yw canoli'r llinell gyntaf. Gall hyn fod yn anodd gyda CSS, gan y gall canol y llinell destun fod yn wahanol os yw'ch cynllun yn hyblyg. Ond gyda rhywfaint o chwarae o gwmpas gyda'r gwerthoedd, gallwch chi osod eich llinell gyntaf yn ddigon i wneud y llythyr cyntaf yn ymddangos yn y canol. Dim ond chwarae gyda'r canran ar bentent testun y paragraff nes ei fod yn edrych yn iawn:
p: llythyr cyntaf {font-size: 300%; cefndir-liw: # 000; lliw: #fff; } p: llinell gyntaf {llinell-uchder: 100%; } p {text-indent: 45% ; }Mae Capiau Cychwynnol Cyfagos yn Galed â CSS
Gall capiau cychwynnol cyfagos fod yn anodd gyda CSS oherwydd bod y gwahanol borwyr yn arddangos y ffontiau'n wahanol. Y syniad y tu ôl i greu cap cyfagos yn CSS yw defnyddio'r eiddo gosodiad testun ar y llinell gyntaf i'w wthio (i'r chwith) yn werth negyddol. Bydd angen i chi hefyd newid rhywfaint ar ymyl chwith y paragraff hwnnw. Chwarae gyda'r rhifau hyn nes bod y paragraff yn edrych yn dda.
p {text-indent: -2.5em; ymyl-chwith: 3em; } p: llythyr cyntaf {font-size: 3em; } p: llinell gyntaf {llinell-uchder: 100%; }Cael Capiau Cychwynnol Ffansi
Y ffordd orau o greu cap cychwynnol ffansi yw newid y ffont i deulu ffont mwy addurnol. Os ydych chi'n defnyddio cyfres o ffontiau a ddilynir gan ffont generig , bydd yn helpu i sicrhau bod eich cap cychwynnol yn dangos yn dda fel y gall eich cwsmeriaid ei weld, heb fynd i hygyrchedd a materion defnyddioldeb.
p: llythyr cyntaf {font-size: 3em; ffont-deulu: "Script Sgript Edwardaidd", "Brush Script MT", cyrchfyfyr; } p: llinell gyntaf {llinell-uchder: 100%; }Ac, fel arfer, gallwch chi roi'r holl awgrymiadau hyn gyda'i gilydd i greu cap cychwynnol sy'n hysbysebu'n arddull i'ch paragraff.
Defnyddio Cap Cychwynnol Graffegol
Os, ar ôl yr holl hynny, rydych chi'n dal i ddim yn hoffi sut mae'ch capiau cychwynnol yn edrych ar y dudalen, gallwch fynd i graffeg i gael yr union effaith rydych chi'n chwilio amdani. Ond cyn i chi benderfynu symud yn syth i graffeg, dylech fod yn ymwybodol o anfanteision y dull hwn:
- Ni fydd cwsmeriaid heb ddelweddau yn gweld y cap cychwynnol, ac efallai na fyddant yn gweld y testun cudd y mae'r ddelwedd yn ei le. Gall hyn wneud y paragraff yn anhygyrch, neu ar y gorau anodd ei ddarllen.
- Mae delweddau bob amser yn ychwanegu at amser lawrlwytho tudalen. Os oes gennych lawer o gapiau cychwynnol, gallwch chi gynyddu'r amser lawrlwytho'n sylweddol ar gyfer rhywbeth y byddai llawer o bobl yn teimlo'n annigonol.
- Bydd rhai porwyr yn arddangos y llythyr cyntaf cudd a'r ddelwedd - a all wneud i'r testun paragraff edrych yn od.
- Mae'n anodd iawn awtomeiddio'r opsiwn hwn, gan fod rhaid ichi wybod yn union beth yw'r llythyr cyntaf er mwyn i chi ddefnyddio'r graffig cywir. Felly, bob tro y caiff y paragraff ei olygu, efallai y bydd angen i chi greu graffig newydd.
Yn gyntaf, mae angen ichi greu graffig y llythyr cyntaf. Defnyddiais Photoshop i greu'r llythyr L gyda'r ffont "Script Sgript Edwardaidd". Fe'i gwnaeth yn enfawr - 300c o ran maint. Yna rhoddais y ddelwedd i lawr i'r lleiafswm isaf o gwmpas y llythyr a nododd lled a uchder y ddelwedd.
Yna fe wnes i greu "capL" dosbarth ar gyfer fy mharagraff. Dyma lle rwy'n diffinio pa ddelwedd i'w defnyddio, y blaen (uchder llinell), ac yn y blaen.
Mae angen i chi ddefnyddio lled a uchder y ddelwedd i osod gosodiad testun a phap padio'r paragraff. Ar gyfer fy llun L, roedd angen indent 95px a padding 72px arnaf.
p.capL {llinell-uchder: 1em; cefndir-ddelwedd: url (capL.gif); cefndir-ailadrodd: dim-ailadrodd; text-indent: 95px; top padio: 72px; }Ond nid dyna'r cyfan. Os byddwch chi'n ei adael yno, bydd y llythyr cyntaf yn cael ei ddyblygu yn y paragraff - yn gyntaf gyda'r graffig, yna yn y testun. Felly, ychwanegais rychwant o amgylch yr elfen gyntaf honno gyda'r dosbarth "cychwynnol" - a dywedodd wrth y porwr i beidio â dangos y llythyr hwnnw:
span.initial {arddangos: dim; }Ac mae'r graffig wedyn yn arddangos yn gywir. Gallwch chi chwarae gyda'r testun-indent ar y paragraff i gael y testun yn gyflym hyd at y llythyr, ond yr hoffech ei arddangos.