Przejdź do treści

Pierwsza litera :first-letter

W jaki sposób zmienić wygląd pierwszej litery tekstu?

selektor:first-letter { cecha: wartość }
Selektorem może być dowolny znacznik wyświetlany w bloku [zobacz: Wstawianie stylów].

Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach.

Aby selektor zadziałał, blok musi się rozpoczynać tekstem, a nie np. obrazkiem ani tabelką.

Polecenie pozwala na nadanie określonych cech pierwszej literze treści, znajdującej się wewnątrz znacznika, na który wskazuje selektor.

UWAGA! Polecenie nie interpretuje MSIE 5, natomiast w MSIE 6 wszystko jest w porządku.

Przykład :first-letter

Jeżeli w arkuszu stylów została umieszczona następująca reguła:
p:first-letter { color: red }
to pierwsza litera każdego akapitu będzie mieć czerwony kolor:

To jest akapit.

Jeśli używasz Internet Explorera 5, wszystkie litery w powyższym akapicie będą tego samego koloru (nie zobaczysz efektu). Natomiast w MSIE 6 wszystko jest w porządku.


Inny ciekawy przykład:

p:first-letter { color: red; font-family: 'Times New Roman', serif; font-size: 300%; float: left }

W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe... W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe... W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe... W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe... W ten sposób często rozpoczynają się rozdziały książek lub artykuły prasowe...

Przeglądarki


Chrome

Firefox

Edge

Opera

Safari
:first-letter1
2008-12-11
1
2004-11-09
12
2015-07-29
7
2003-01-28
1
2003-06-23

Komentarze

Zobacz więcej komentarzy

Facebook