Pierwsza litera :first-letter
W jaki sposób zmienić wygląd pierwszej litery tekstu?
selektor:first-letter { cecha: wartość }
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-letter | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 7 2003-01-28 | 1 2003-06-23 |