Õppige, kuidas seda kasutada CSS loomapeen lõikude esialgsed piirid. Graafilise pildi kasutamiseks oma esialgse ülempiiri jaoks on isegi lihtne pildi asendamise tehnika.
Esmaste mütside põhistiilid
Dokumentides on kolm peamist algsuuruse stiili:
- Tõstetud - kõige tavalisem, kus esimene täht on suurem ja samal joonel praeguse tekstiga.
- Langes - ka üsna tavaline, kus esimene täht on suurem ja langeb esimese tekstirea alla. Seejärel hõljub järgmine tekst selle ümber.
- Kõrval - kus esimene täht on ühes veerus ülejäänud teksti kõrval. See on trükistes rohkem levinud kui veebidisain.
Esialgsed või tilgakorkid on väga tuttavad. Need on suurepärane viis muidu pikkade ja igavate tekstivahemike riietamiseks. Ja CSS-i atribuudiga: esimene täht, saate hõlpsasti määratleda, kuidas muuta oma esimesed tähed fänniks.
Looge lihtne algne kork
Lihtsalt kõrgendatud esialgse ülemmäära loomiseks peate tegema ainult lõigu esimese tähe suuruse esimese tähega pseudoelemendiga:
p: esimene täht {font-size: 3em; }
Aga paljud brauserid vaata, et esimene täht on suurem kui kogu ülejäänud tekst tekstil, nii et nad muudavad esikoha võrdseks sellega, mis oleks selle esimese tähe jaoks mõistlik, mitte ülejäänud reaga. Õnneks on seda esimese rea pseudoelemendi ja reakõrguse omadusega lihtne parandada:
p: esimene täht {font-size: 3em; }
p: esimene rida {joone kõrgus: 1em; }
Mängi dokumendis joone kõrgusega, kuni leiate tekstile sobiva suuruse.
Mängige oma esialgse mütsiga
Kui olete aru saanud, kuidas luua esialgne kork, saate selle väljapaistmiseks riietuda uhketesse riietesse. Mängige värvide, taustavärvide, piiride või muuga, mis teie väljamõeldisesse puutub. Üsna lihtne stiil on muuta fondi ja taustavärvi värvid ainult esimese tähe jaoks:
p: esimene täht {
fondi suurus: 300%;
taustavärv: # 000;
värv: #fff;
}
p: esimene rida {joone kõrgus: 100%; }
Teine nipp on esimese joone tsentreerimine. CSS-i puhul võib see olla keeruline, kuna tekstirea keskosa võib olla erinev, kui teie paigutus on paindlik. Kuid kui mõned mängivad väärtustega ringi, saate oma esimese rea piisavalt taandada, et esimene täht oleks keskel. Lihtsalt mängige lõigu teksti taandes oleva protsendiga, kuni see tundub õige:
p: esimene täht {
fondi suurus: 300%;
taustavärv: # 000;
värv: #fff;
}
p: esimene rida {joone kõrgus: 100%; }
p {teksti taane: 45%; }
Külgnevad esialgsed mütsid on CSS-iga rasked
Kõrvalolevad algsed suurtähed võivad CSS-i abil olla rasked, kuna erinevad brauserid kuvavad fonte erinevalt. CSS-is külgneva katte loomise idee on kasutada esimese rea teksti-taande omadust negatiivse väärtuse (vasakule) välja surumiseks. Samuti peate selle lõigu vasakut veerist mõne summa võrra muutma. Mängige nende numbritega, kuni lõik näeb hea välja.
p {
teksti taane: -2,5em;
veeris vasakul: 3em;
}
p: esimene täht {font-size: 3em; }
p: esimene rida {joone kõrgus: 100%; }
Päris uhkete esialgsete mütside saamine
Parim viis väljamõeldud esialgse ülempiiri loomiseks on fondi muutmine dekoratiivsemaks fontide perekonnaks. Kui kasutate a fontide seeria millele järgneb a üldine font, see aitab garanteerida, et teie esialgne ülempiir on hästi nähtav, nii et teie kliendid saavad seda näha, ilma et oleks vaja juurdepääsetavuse ja kasutatavuse probleeme.
p: esimene täht {
fondi suurus: 3em;
font-family: "Edwardian Script ITC", "Brush Script MT", kursor;
}
p: esimene rida {joone kõrgus: 100%; }
Ja nagu tavaliselt, võite kõik need soovitused kokku panna, et luua esialgne piir, mis reklaamib teie lõiku.
Graafilise algkatte kasutamine
Kui pärast seda ei meeldi teile ikkagi see, kuidas teie esialgsed mütsid lehel välja näevad, võite otsitava efekti saamiseks kasutada graafikat. Kuid enne kui otsustate liikuda otse graafika juurde, peaksite olema teadlik selle meetodi puudustest:
- Ilma piltideta kliendid ei näe esialgset ülempiiri ega pruugi näha peidetud teksti, mida pilt asendab. See võib muuta lõike ligipääsmatuks või parimal juhul raskesti loetavaks.
- Pildid lisavad alati lehe allalaadimise aega. Kui teil on palju esialgseid ülempiire, saate märkimisväärselt pikendada allalaadimisaega, mida paljud inimesed tunneksid tähtsusetuna.
- Mõni brauser kuvab nii peidetud esimese tähe kui ka pildi, mis muudab lõigu teksti kummaliseks.
- Selle valiku automatiseerimine on väga raske, kuna õige graafika kasutamiseks peate täpselt teadma, mis on esimene täht. Seega peate iga lõigu muutmise korral looma uue graafika.
Esiteks peate looma esimese tähe graafika. Me kasutasime Photoshopi, et luua L-täht fondiga "Edwardian Script ITC". Tegime selle tohutuks - 300pt suuruseks. Seejärel kärpisime pilti tähe ümber miinimumini ja märkisime pildi laiuse ja kõrguse.
Seejärel lõime oma lõigu jaoks klassi "capL". Siin määratleme, millist pilti kasutada, eesmist (joone-kõrgust) jne.
Lõigu teksti taande ja padding-top'i määramiseks peate kasutama pildi laiust ja kõrgust. Meie L-pildi jaoks vajasime 95px taanet ja 72px polsterdust.
p.capL {
joone kõrgus: 1em;
taustapilt: url (capL.gif);
taust-kordus: ei-kordus;
teksti taane: 95 pikslit;
top-top: 72px;
}
Kuid see pole veel kõik. Kui jätate selle sinna, kopeeritakse esimene täht lõigus, kõigepealt graafikaga, seejärel tekstiga. Lisasime selle esimese elemendi ümber vahemiku klassiga "algus" ja käskisime brauseril seda tähte mitte kuvada:
span.initial {kuva: puudub; }
Seejärel kuvatakse graafika õigesti. Võite mängida lõigu teksti taandega, et tekst oleks täpselt tähe külge kinnitatud, kuid soovite seda siiski kuvada.