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

Kapcsolódó bejegyzések:
  • Word Spacing: a szavak közötti távolságot lehet vele megadni, csak a hosszúság mértékegységek használhatóak, a negatív előjelet is figyelembe veszi.Pl.P …

  • Egy tag-hez készíthetünk több különböző, ún. stílusosztályt is: a tag neve után egy ponttal elválasztva adjuk meg az osztály nevét (módosítót), pl.code.ht …

  • A PHP segítségével könnyen megoldható, hogy egy lapon váltogatni lehessen a stílusok és template-k között (attól is függ hogy a CSS-ben csak a formázásra vonatko …

  • Felmerült egy kérdésként, hogy lehetne egy login oldal tartalmánál (belépési név és jelszót kell megadni) jelezni a felhasználók számára azt, hogy melyik mező mi …

  • Valid XHTML transitional doctype, Valid XHTML transitional sablon Az alábbi kódot amolyan segítség leginkább magamnak, hogy ne kelljen mindig megírnom az alapok …

A cikket beküldte: BlackY ()

2 hozzászólás

  1. samson84 says:

    Hali!
    Erre van egy sokkal egyszerűbb megoldás is. Ajánlom a text-transform capitalize tulajdonságát :)

    http://www.w3schools.com/css/pr_text_text-transform.asp

  2. péter says:

    samson84: A capitalize minden egyes szóra alkalmazza a nagy kezdőbetűt. Szerintem itt nem ez volt a cél…

Szólj hozzá
a Nagy kezdőbetű CSS-el c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>