Nagy kezdőbetű CSS-el

Gyakran jöhet jól, ha egységesíteni tudjuk oldalunk tartalmát. Címek esetében jól jöhet, ha egységes módon (pl.: nagy kezdőbetű, utána végig kis betűk) írjuk őket. Ezt meg lehet oldani mind szerver- mind kliensoldali szkriptekkel is, én most egy CSS-es megoldást mutatok.

Természetesen a megoldást bármilyen elemre érvényesíthetjük, én a h1 elemhez fogom használni: a bemutatott CSS kód az elem szöveges tartalmát kisbetűsíti, így egy több mondatos szövegnél súlyos helyesírási hibákat okozna. Egy cím azonban többnyire csak egy mondatból áll.

1
2
3
4

h1, h2, h3, h4, h5, h6
    {
    text-transform: lowercase;
    }

Ezzel a kóddal a h1-h6 elemek szövegeit kisbetűsítettük.
Tehát egy ilyenből:

1

<h3>TuToRiAl.hU - rEnGeTeG gRaFiKaI éS wEbSzErKeSztés témájú leírás</h3>

ez lenne:

TuToRiAl.hU – rEnGeTeG gRaFiKaI éS wEbSzErKeSztés témájú leírás

A címben azonban nagy kezdőbetűt írtam, így hát a first-letter pszeudó-elemmel kiegészítjük a kódot:

1
2
3
4
5
6
7
8
9

h1:first-letter,
h2:first-letter,
h3:first-letter,
h4:first-letter,
h5:first-letter,
h6:first-letter
   {
   text-transform: uppercase;
   }

És a címeink máris egységesek:

TuToRiAl.hU – rEnGeTeG gRaFiKaI éS wEbSzErKeSztés témájú leírás