Inicjał. Właściwie to trochę zbyt dużo powiedziane… Bo w końcu co to jest inicjał? Na pewno każdy z nas widział, że w niektórych książkach (szczególnie o tematyce historycznej) pierwsza litera napisana jest inaczej niż pozostałe, czasem rozciąga się na kilka wierszy.
Zazwyczaj jest to rysunek kształtem przypominający literę, bądź litera wkomponowana w rysunek. W CSS rzecz jasna nie stworzymy przepięknego inicjału (ale np. w Adobe Photoshop czy Corel Draw możemy!). Nasz inicjał będzie miał niewiele wspólnego w prawdziwym – tylko to, że będzie inny od pozostałych liter. A więc…
Zabieramy się do pracy
Ale przedtem zapytajmy, do czego taki „inicjał” się przyda? Otóż element ten czasem jest stosowany w różnych e-zinach. Czasem na zwykłych stronach… Nie ma on oczywiście innego zadania niż upiększyć naszą stronę. Nie zawsze wygląda ładnie, ale przy odrobinie fantazji… W każdym razie warto nauczyć się nowej sztuczki!
Za określenie pierwszej litery bloku (niech w naszym przypadku będzie to akapit) odpowiada tzw. pseudoelement first-letter.
| P:first-letter {cecha:wartość; cecha:wartość} |
W naszym przypadku zwykły tekst w akapicie pisać będziemy Verdaną o wielkości 9 punktów w kolorze ciemnoniebieskim (navy), a pierwszej literze nadamy tą samą czcionkę, tylko że pogrubioną, w kolorze zielonym i o wielkości 15 punktów. Całość umieścimy w stylu osadzonym, choć równie dobrze możnaby do tego celu użyć stylu zewnętrznego.
| <style type=”text/css”> <!– body { P {font-family:verdana; font-size:9pt; color:navy} P:first-letter {font-family:verdana: font-weight:bold; font-size:15pt; float:left; color:green} –> </style> |
W deklaracji stylu dla pseudoelementu first-letter zastosowaliśmy właściwość float:left, aby nasz 'inicjał’ wcinał się w tekst. Aby się o tym przekonać, proszę zrezygnować z tego parametru i zobaczyć różnicę… I to już właściwie wszystko! Pozostaje nam tylko sprawdzić efekt naszej pracy! Zobacz przykład: www.webinside.pl/materialy/rozne/inicjal.html
