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.

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:

<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:

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