Začetnica - CSS-triki

Anonim

initial-letter je lastnost CSS, ki izbere prvo črko elementa, kjer je uporabljen, in določi število vrstic, ki jih črka zaseda.

Morda ste kaj takega že videli na spletnih mestih z novicami, kjer je prva črka vodilnega odstavka večja od ostale vsebine.

Spletna stran New Yorkerja oblikuje začetno črko

Trik pri oblikovanju prve vsebinske črke je bil nekdaj kramp, kjer črko zavijete v in za oblikovanje uporabite razred:

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


Once upon a time in a faraway land…

To sicer deluje, vendar gre za več oznak HTML, kot si želimo, in razbije našo vsebino. Poleg tega je bolečina, če morate ta razred uporabiti ročno, kadar koli ga želite uporabiti.

To, kar initial-letterpride:

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


Once upon a time in a faraway land…

To je čistejše! Drug pristop je, da ga ::first-letternamesto tega uporabite za izbirnik psuedo:

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

Ali si videl to? initial-letterLastnost samodejno izračuna tako velikost pisave in število vrstic, ki so potrebne za ustvarjanje naše stilizirano spusti kapo! Želite, da zavzame natanko 2, 3, 4 ali več vrstic? Povejte nepremičnini, da bo težko dvignilo.

Spreminjanje lastnosti v 1, 2 in 4 vrstice

Sintaksa in vrednosti

initial-letter: normal | ( );

initial-letter sprejema naslednje vrednosti:

  • normal: Na prvo črko ne uporabi učinka skaliranja. To je lahko koristno za ponastavitev vrednosti, pri kateri bi bila lahko podedovana od kaskade.
  • : Koliko vrstic naj zavzame črka, kjer negativne vrednosti niso dovoljene.
  • : Koliko vrstic mora črka potoniti tam, kjer negativne vrednosti niso dovoljene. To je priročno, če morate črko postaviti nižje, da se lahko spoprimete s težavnimi težavami z razmikom, vendar, če ni določeno, upošteva vrednost

Primeri

Spustite pokrovček, dvignjen pokrovček in zamašek z začetnico

Oblikovanje začetne črke lahko uporabimo za doseganje nekaterih modnih metod tipografskega oblikovanja. Upoštevajte, da Safari trenutno podpira le naslednje primere.

Kapice so verjetno najbolj znani primer uporabe:

Glej začetno črko Pen: Drop Cap avtorja Geoff Graham (@geoffgraham) na CodePen.

Še en primer so Raised Caps :

Glej začetno črko Pen: Raised Cap avtorja Geoff Graham (@geoffgraham) na CodePen.

Block Caps se vračajo k starim pravljicam:

Glej začetno črko Pen: Block Cap avtorja Geoff Graham (@geoffgraham) na CodePen.

Podpora za brskalnik

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.

Namizje

Chrome Firefox IE Rob Safari
Ne Ne Ne Ne TP *

Mobilni / tablični računalnik

Android Chrome Android Firefox Android iOS Safari
Ne Ne Ne 14,0-14,4 *

Sorodno

  • ::first-letter
  • Odlomek spustite kapice

Več informacij

  • Modul vrstice postavitve CSS 3. stopnja: uradne specifikacije
  • Laboratoriji Jen Simmons: Predstavitve in primeri primerov uporabe
  • Vstopnica za Firefox: odprta vstopnica za podporo funkcije
  • Vstopnica za Internet Explorer: odprta vstopnica za podporo funkcije