CSS Academy · Урок

::placeholder ::selection и ::marker

Оформляйте заполнители ввода, выделенный текст и маркеры списков с помощью псевдоэлементов.

Урок 2 из 413 шагов

«::placeholder ::selection и ::marker» — бесплатный урок CSS Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

::placeholder

::placeholder задаёт стиль текста-подсказки внутри элементов формы для ввода и текста. Поддерживается только часть свойств CSS.

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

Поддерживаемые свойства ::placeholder

Не все свойства CSS работают с ::placeholder. Поддерживаются, в частности: color, font-size, font-weight, font-style, letter-spacing, opacity и некоторые другие. Свойства макета не поддерживаются.

Доступность текста-подсказки

Текст-подсказка исчезает, когда пользователь начинает вводить текст, поэтому его нельзя использовать вместо элементов <label>. Всегда добавляйте видимые подписи к полям формы. Контраст текста-подсказки также должен соответствовать соотношению WCAG 4.5:1.

::selection

::selection задаёт стиль текста, который пользователь выделил курсором. С его помощью можно создать фирменные цвета выделения.

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

Поддерживаемые свойства ::selection

С ::selection работают лишь несколько свойств: color, background-color, text-shadow и text-decoration. Остальные игнорируются.

::marker

::marker задаёт стиль маркера элемента списка — точки или номера в списках <ul> и <ol>.

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

Поддерживаемые свойства ::marker

Поддерживаемые свойства ::marker включают: color, content, font-size, font-family, font-weight, font-style и unicode-bidi.

Пользовательские маркеры списка с помощью ::marker

Используйте эмодзи или специальные символы в качестве маркеров списка:

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

::first-line

::first-line задаёт стиль первой отображаемой строки блочного элемента — фактической строки в отображении, а не первого переноса строки в HTML. Это полезно для оформления вступительного абзаца в стиле буквицы.

<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 выбирает первую букву первой отформатированной строки. Классический пример использования — буквицы в типографике журнального стиля.

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

::cue для оформления субтитров

::cue задаёт стиль субтитров VTT в элементах HTML <video> — это специализированный, но важный псевдоэлемент для доступных медиафайлов.

<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>

Быстрая проверка

Какой псевдоэлемент позволяет задать стиль точки или номера элемента списка?

Ответь в интерактивном уроке

Повторение

::placeholder задаёт стиль текста-подсказки в поле ввода. ::selection задаёт стиль выделенного текста. ::marker задаёт стиль точек и номеров списков. ::first-letter и ::first-line позволяют выполнять тонкую типографскую настройку. Все они поддерживают только ограниченный набор свойств CSS.

Можно начать бесплатно

Изучай CSS с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 40
Уроки: 159

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «::placeholder ::selection и ::marker» бесплатный?

Да — полный текст урока «::placeholder ::selection и ::marker» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «::placeholder ::selection и ::marker»?

Оформляйте заполнители ввода, выделенный текст и маркеры списков с помощью псевдоэлементов. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «::placeholder ::selection и ::marker»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к CSS Academy