Algustäht - CSS-trikid

Anonim

initial-letter on CSS-i atribuut, mis valib elemendi esimese tähe, kus seda kasutatakse, ja määrab tähtede hõivatud ridade arvu.

Võib-olla olete midagi sellist näinud uudistesaitidel, kus juhtiva lõigu esimene täht on ülejäänud sisust suurem.

New Yorkeri sait kujundab algustähe

Esimese sisutähe kujundamise nipp kasutas väikest häkkimist, kus mähisite tähte tähte a ja kasutate selle kujundamiseks klassi:

/* Style that first letter! */ .first-letter ( font-size: 35px; line-height: 70px; )


Once upon a time in a faraway land…

See töötab, kuid see on HTML-i märgistus rohkem kui me tahame ja lõhub meie sisu. Lisaks on valus, kui peate seda klassi käsitsi rakendama igal ajal, kui soovite seda kasutada.

See, kuhu initial-lettertuleb:

/* Style that first letter! */ .subhead ( initial-letter: 2; )


Once upon a time in a faraway land…

See on puhtam! Teine lähenemisviis on selle rakendamine selle ::first-letterasemel psuedo-valijale:

/* Style that first letter! */ .subhead::first-letter ( initial-letter: 2; )

Kas sa nägid seda? initial-letterVara automaatselt arvutab nii font suurus ja ridade arvu vaja luua meie stiliseeritud tilk kork! Kas soovite, et see võtaks täpselt 2, 3, 4 või rohkem rida? Öelge kinnistule ja see teeb raske tõstmise.

Vara muutmine hõivamiseks 1, 2 ja 4 rida

Süntaks ja väärtused

initial-letter: normal | ( );

initial-letter aktsepteerib järgmisi väärtusi:

  • normal: Esimese tähe jaoks ei rakendata mastaapsusefekti. See võib olla kasulik väärtuse lähtestamiseks, kui selle võib kaskaadist pärida.
  • : Mitu rida täht peaks hõivama, kui negatiivsed väärtused pole lubatud.
  • : Mitu rida peaks täht vajuma seal, kus negatiivsed väärtused pole lubatud. See on mugav, kui peate paigutama tähe madalamale, et mahutada keerulisi vaheprobleeme, kuid kui see pole täpsustatud, võtab see väärtuse

Näited

Lohistage kork, tõstetud kork ja blokeerige kork, kasutades algustähte

Algustähe kujundamist saab kasutada mõne väljamõeldud tüpograafilise kujundusmeetodi saavutamiseks. Pange tähele, et järgmisi näiteid toetab praegu ainult Safari.

Drop Caps on ilmselt kõige tuttavam kasutusjuht:

Vaadake CodePenil Pliiatsi algustähte: Geoff Graham (@geoffgraham).

Veel üks näide on tõstetud mütsid :

Vaadake Pliiatsi algustähte: Geoff Graham (@geoffgraham) tõstis korki CodePenis.

Blokeeri mütsid tagasi vanade muinasjuttude juurde:

Vaadake CodePenil pliiatsi algustähte: Geoff Graham (@geoffgraham) ploki kork.

Brauseri tugi

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.

Töölaud

Chrome Firefox IE Edge Safari
Ei Ei Ei Ei TP *

Mobiil / tahvelarvuti

Android Chrome Android Firefox Android iOS-i Safari
Ei Ei Ei 14,0–14,4 *

Seotud

  • ::first-letter
  • Caps Caps jupp

Rohkem informatsiooni

  • CSS-i sisese paigutuse moodul 3. tase: ametlikud spetsifikatsioonid
  • Jen Simmons Labs: Demod ja kasutusjuhtumite näited
  • Firefoxi pilet: funktsiooni toetamiseks avatud pilet
  • Internet Exploreri pilet: funktsiooni toetamiseks avatud pilet