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 …
Tweet This
Share on Facebook
Digg This
Save to delicious
Stumble it
RSS Feed
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
samson84: A capitalize minden egyes szóra alkalmazza a nagy kezdőbetűt. Szerintem itt nem ez volt a cél…