Naučite se uporabljati CSS ustvaritifancy začetne zgornje meje za vaše odstavke. Obstaja celo preprosta tehnika zamenjave slike, s katero grafično sliko uporabite za prvotno zgornjo mejo.
Osnovni slogi začetnih omejitev
V dokumentih obstajajo trije osnovni slogi začetnih omejitev:
- Dvignjeno - najpogostejši, kjer je prva črka večja in v isti vrstici kot trenutno besedilo.
- Spuščeno - tudi dokaj pogosti, kjer je prva črka večja in pade pod prvo vrstico besedila. Nato naslednje besedilo plava okoli njega.
- Sosednji - kjer je prva črka v enem stolpcu poleg preostalega dela besedila. To je bolj pogosto pri tisku kot pri spletnem oblikovanju.
Začetne ali kapice so zelo znane. So odličen način za oblačenje sicer dolgih in dolgočasnih razponov besedila. In z lastnostjo CSS: prva črka lahko enostavno določite, kako narediti svoje prve črke ljubše.
Ustvarite preprosto začetno kapico
Vse, kar morate storiti, da ustvarite preprosto dvignjeno začetno kapico, je, da s črkovnim psevdoelementom prve črke povečate velikost prve črke odstavka:
p: prva črka {velikost pisave: 3em; }
Toda mnogi brskalniki glejte, da je prva črka večja od preostalega besedila v vrstici, zato so vodilne enake tistim, ki bi bile smiselne za prvo črko, in ne preostali del vrstice. Na srečo je to enostavno odpraviti s psevdoelementom prve vrstice in lastnostjo line-height:
p: prva črka {velikost pisave: 3em; }
p: prva vrstica {višina vrstice: 1em; }
Igrajte se z višino črte v dokumentu, dokler ne najdete prave velikosti besedila.
Igrajte se z začetno kapico
Ko enkrat razumete, kako ustvariti začetno kapico, jo lahko oblečete v modna oblačila, da izstopa. Igrajte se z barvami, barvami ozadja, obrobami ali čim drugim, kar vam je všeč. Precej preprost slog je obrniti barve pisave in barve ozadja samo za prvo črko:
p: prva črka {
velikost pisave: 300%;
barva ozadja: # 000;
barva: #fff;
}
p: prva vrstica {višina vrstice: 100%; }
Drug trik je centriranje prve vrstice. Pri CSS je to lahko težavno, saj je sredina vrstice besedila lahko drugačna, če je vaša postavitev prilagodljiva. Toda pri nekaterih igranjih z vrednostmi lahko prvo vrstico zamaknete dovolj, da se zdi, da je prva črka na sredini. Preprosto se igrajte z odstotkom na zamiku besedila odstavka, dokler ni videti pravilno:
p: prva črka {
velikost pisave: 300%;
barva ozadja: # 000;
barva: #fff;
}
p: prva vrstica {višina vrstice: 100%; }
p {zamik besedila: 45%; }
Sosednje začetne kape so s CSS težke
Sosednje začetne zgornje meje so s CSS lahko težavne, ker različni brskalniki prikazujejo pisave drugače. Ideja ustvarjanja sosednje zgornje meje v CSS je, da z lastnostjo zamika besedila v prvi vrstici potisnete negativno vrednost (na levo). Prav tako boste morali za nekaj zneskov spremeniti levi rob tega odstavka. Igrajte se s temi številkami, dokler odstavek ne bo videti dobro.
p {
zamik besedila: -2,5em;
rob-levo: 3em;
}
p: prva črka {velikost pisave: 3em; }
p: prva vrstica {višina vrstice: 100%; }
Pridobivanje resnično modnih začetnic
Najboljši način za ustvarjanje modne začetnice je, da spremenite pisavo v bolj okrasno družino pisav. Če uporabljate vrsto pisav čemur sledi a generična pisava, pomagalo vam bo zagotoviti, da se vaša začetna omejitev dobro prikaže, tako da jo bodo stranke lahko videle, ne da bi se lotili težav z dostopnostjo in uporabnostjo.
p: prva črka {
velikost pisave: 3em;
družina pisav: "Edwardian Script ITC", "Brush Script MT", pisava;
}
p: prva vrstica {višina vrstice: 100%; }
Kot običajno lahko vse te predloge sestavite, da ustvarite začetno omejitev, ki bo oblikovala oglase za vaš odstavek.
Uporaba grafične začetne kapice
Če vam po vsem tem še vedno ni všeč, kako izgledajo vaše začetne zgornje meje na strani, se lahko zatečete k grafiki, da dobite natančen učinek, ki ga iščete. Toda preden se odločite za neposredno prehod na grafiko, se morate zavedati pomanjkljivosti te metode:
- Kupci brez slik ne bodo videli začetnega pokrovčka in morda ne bodo videli skritega besedila, ki ga slika nadomešča. Zaradi tega lahko odstavek postane nedostopen ali v najboljšem primeru težko berljiv.
- Slike se vedno dodajo času prenosa strani. Če imate veliko začetnih omejitev, lahko bistveno podaljšate čas prenosa za nekaj, kar bi se marsikomu zdelo nepomembno.
- Nekateri brskalniki bodo prikazali skrito prvo črko in sliko, zaradi katere bo besedilo odstavka videti čudno.
- To možnost je zelo težko avtomatizirati, saj morate natančno vedeti, kaj je prva črka, da boste lahko uporabili pravilno grafiko. Torej, vsakič ko uredite odstavek, boste morda morali ustvariti novo grafiko.
Najprej morate ustvariti grafiko prve črke. Z Photoshopom smo ustvarili črko L s pisavo "Edwardian Script ITC". Naredili smo ga ogromnega - velikosti 300pt. Nato smo sliko obrezali na najmanjšo možno mero okoli črke in zabeležili širino in višino slike.
Nato smo za naš odstavek ustvarili razred "capL". Tu določimo, katero sliko uporabiti, vodilno (višina črte) itd.
Za nastavitev zamika besedila in oblazinjenja odstavka morate uporabiti širino in višino slike. Za našo sliko L smo potrebovali 95px zamik in 72px oblazinjenje.
p.capL {
višina črte: 1em;
slika ozadja: url (capL.gif);
background-repeat: no-repeat;
zamik besedila: 95 slikovnih pik;
oblazinjenje: 72 slikovnih pik;
}
To pa še ni vse. Če ga pustite tam, bo prva črka podvojena v odstavku, najprej z grafiko, nato v besedilu. Tako smo okrog tega prvega elementa dodali razpon z razredom "začetnica" in brskalniku rekli, naj te črke ne prikaže:
span.initial {zaslon: noben; }
Nato se grafika pravilno prikaže. Lahko se igrate z zamikom besedila na odstavku, da se besedilo prileže do črke, vendar želite, da se prikaže.