CSS Academy · Lekcja

::placeholder ::selection i ::marker

Nauczy się Pan/Pani stylizować placeholdery pól, zaznaczenia tekstu oraz punktory list za pomocą pseudo-elementów.

Lekcja 2 z 413 kroki

::placeholder ::selection i ::marker to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.

::placeholder

::placeholder stylizuje tekst zastępczy wewnątrz elementów formularza input i textarea. Obsługiwany jest tylko podzbiór właściwości CSS.

<input type="text" placeholder="Type your name…" />

Właściwości obsługiwane przez ::placeholder

Nie wszystkie właściwości CSS działają z ::placeholder. Obsługiwane właściwości obejmują: color, font-size, font-weight, font-style, letter-spacing, opacity i kilka innych. Właściwości układu nie są obsługiwane.

Dostępność tekstu zastępczego

Tekst zastępczy znika, gdy użytkownik zaczyna pisać, dlatego NIE należy używać go zamiast elementów <label>. Pola formularza zawsze powinny mieć widoczne etykiety. Kontrast tekstu zastępczego musi również spełniać wymaganie współczynnika kontrastu WCAG 4.5:1.

::selection

::selection stylizuje tekst zaznaczony przez użytkownika kursorem. Umożliwia nadanie zaznaczeniu kolorów marki.

<p>Select this text with your cursor to see the branded highlight color.</p>

Właściwości obsługiwane przez ::selection

Tylko kilka właściwości działa z ::selection: color, background-color, text-shadow i text-decoration. Pozostałe są ignorowane.

::marker

::marker stylizuje marker elementu listy — wypunktowanie lub numer na listach <ul> i <ol>.

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>
<ol>
  <li>Step one</li>
  <li>Step two</li>
</ol>

Właściwości obsługiwane przez ::marker

Obsługiwane właściwości ::marker obejmują: color, content, font-size, font-family, font-weight, font-style i unicode-bidi.

Niestandardowe markery list za pomocą ::marker

Jako markery listy należy stosować emoji lub znaki specjalne:

<ul>
  <li>Normal item</li>
  <li class="warning">Warning item</li>
</ul>

::first-line

::first-line stylizuje pierwszy wyrenderowany wiersz elementu blokowego — rzeczywisty wiersz w renderowanym układzie, a nie pierwszy znak końca wiersza w kodzie HTML. Jest to przydatne do stylizacji akapitu wprowadzającego przypominającej inicjał.

<p>This is the opening line of a paragraph that wraps onto a second line once it runs out of horizontal room in its container, so you can see the effect clearly.</p>

::first-letter

::first-letter wskazuje pierwszą literę pierwszego sformatowanego wiersza. Klasyczne zastosowanie to inicjały w typografii w stylu czasopism.

<p>Once upon a time, a designer discovered the drop cap and typography was never the same again.</p>

::cue do stylizacji napisów

::cue stylizuje napisy VTT w elementach HTML <video> — jest to wyspecjalizowany, ale ważny pseudoelement na potrzeby dostępnych multimediów.

<p style="color:#888;">::cue styles VTT subtitle text inside a &lt;video&gt; element (no visible effect without an active video/track, shown here for reference).</p>
<video controls style="max-width:100%;"></video>

Szybkie sprawdzenie

Jaki pseudoelement umożliwia stylizowanie wypunktowania lub numeru elementu listy?

Odpowiedz w interaktywnej lekcji

Podsumowanie

::placeholder stylizuje tekst zastępczy pól wejściowych. ::selection stylizuje zaznaczony tekst. ::marker stylizuje wypunktowania i numery list. ::first-letter i ::first-line umożliwiają precyzyjne dostosowanie typografii. Wszystkie te pseudoelementy obsługują tylko ograniczony podzbiór właściwości CSS.

Bezpłatny start

Ucz się CSS dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 40
Lekcje: 159

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „::placeholder ::selection i ::marker” jest bezpłatna?

Tak — pełny tekst „::placeholder ::selection i ::marker” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „::placeholder ::selection i ::marker”?

Nauczy się Pan/Pani stylizować placeholdery pól, zaznaczenia tekstu oraz punktory list za pomocą pseudo-elementów. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć CSS Academy?

Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „::placeholder ::selection i ::marker”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?

Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do CSS Academy