::first-letter
Stylizuje pierwszą literę pierwszego wiersza w bloku tekstu. Klasyczny sposób na inicjał na początku artykułu.
Przykład
#.article p:first-of-type::first-letter {
float: left;
margin: 4px 8px 0 0;
font-family: Georgia, serif;
font-size: 3.4em;
line-height: 0.8;
color: #c4b5fd;
}<article class="article">
<p style="margin: 0 0 8px;">Każdy świat w CodeWorlds zaczyna się od krótkiej historii. Inicjał podkreśla, że to początek opowieści, a nie zwykły akapit z instrukcją.</p>
<p style="margin: 0; color: #a1a1aa;">Drugi akapit nie ma inicjału, bo reguła dotyczy tylko pierwszego akapitu w artykule.</p>
</article>Definicja i zastosowanie
#Pseudoelement ::first-letter wybiera pierwszą literę (albo cyfrę) pierwszego wiersza elementu blokowego. Najczęściej służy do inicjału, czyli dużej, ozdobnej litery na początku artykułu, znanej z książek i gazet.
Przeglądarka dolicza do niej interpunkcję stojącą tuż przed literą, np. cudzysłów otwierający: w tekście zaczynającym się od „Ala inicjałem staje się cały fragment „A. Pseudoelement działa tylko w elementach blokowych (block, inline-block, list-item, komórki tabeli), więc w zwykłym span nic nie zmieni.
Obsługuje właściwości tekstu i pudełka: czcionkę, kolor, tło, marginesy, dopełnienie, obramowanie i float. Inicjał na kilka wierszy robi się właśnie przez float: left z dużym font-size i dopasowaną line-height.
Składnia
#selektor::first-letter { właściwość: wartość; }Typowe style
#- Większa, kolorowa pierwsza litera, nadal w linii tekstu.
- Inicjał, który tekst opływa przez kilka wierszy.
- Pierwsza litera w kolorowym kafelku.
::first-letterobsługuje tło, dopełnienie i marginesy.
Typowe style w praktyce
#font-size
.demo::first-letter { font-size: 2em; color: #a78bfa; }float: left
.demo::first-letter {
float: left;
margin: 4px 8px 0 0;
font-family: Georgia, serif;
font-size: 3.2em;
line-height: 0.8;
color: #a78bfa;
}background
::first-letter obsługuje tło, dopełnienie i marginesy..demo::first-letter {
margin-right: 4px;
padding: 2px 8px;
border-radius: 6px;
background: #7c3aed;
color: #fff;
font-weight: 700;
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Łącz
::first-letterz:first-of-type, żeby inicjał dostał tylko pierwszy akapit artykułu, a nie każdy. - Inicjał to czysta dekoracja. Nie wydzielaj pierwszej litery do osobnego elementu w HTML, bo czytniki ekranu mogą wtedy przeczytać słowo w kawałkach.
Powiązane hasła
#- ::first-lineStylizuje pierwszy wiersz tekstu w elemencie blokowym, niezależnie od tego, ile słów się w nim zmieści.
- ::beforeTworzy wirtualny element na początku zawartości elementu. Służy do ikon, ozdobników i etykiet bez dodatkowego HTML.
- :nth-of-type()Wybiera elementy według pozycji wśród rodzeństwa z tym samym znacznikiem, na przykład co drugi obrazek albo trzeci akapit.
- floatPrzesuwa element do lewej lub prawej krawędzi, a tekst opływa go z drugiej strony.
- font-sizeUstawia rozmiar czcionki.
Widzisz błąd albo brakuje przykładu? Napisz do nas.