First letter: Псевдоэлемент :first-letter | htmlbook.ru

Leave a Comment / Разное / By /

Псевдоэлемент :first-letter | CSS справочник

CSS селекторы

Значение и применение

Псевдоэлемент ::first-letter позволяет создавать инициал (буквицу) — стилизовать начальный символ текстового блока. Такой метод часто можно встретить в печатных изданиях, например, в сказках.

Допустимые свойства, которые применяются с псевдоэлементом:

  • background
  • border
  • clear
  • color
  • float
  • font
  • line-height
  • margin
  • padding
  • text-decoration
  • text-transform
  • vertical-align (если float = «none»)

Обратите внимание, что в настоящее время используется синтаксис, который предусматривает двойное двоеточие перед псевдоэлементом. Не смотря на то, что браузеры поддерживают оба варианта, рекомендуется использовать синтаксис CSS 3:

/* синтаксис CSS 3 */
селектор::псевдоэлемент {  /* двойное двоеточие */
CSS свойство: значение;
}
/* синтаксис CSS 2 */ 
селектор:псевдоэлемент { /* одинарное двоеточие */
CSS свойство: значение;
}

Поддержка браузерами

Селектор
Chrome
Firefox
Opera
Safari
IExplorer
Edge
::first-letter1. 01.07.0*1.09.0*12.0

CSS синтаксис:

::first-letter {
блок объявлений;
}

Версия CSS

CSS1

Пример использования

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдоэлементы ::first-letter и ::first-line</title>
<style>
::first-letter { /* изменяем начальный символ текстового блока */
color: red; /* устанавливаем цвет шрифта красный */
font-size: 24px; /* задаем размер для первого символа */
}
.test::first-line{ /* изменяем первую строку элемента с классом test */
color: green; /* устанавливаем цвет шрифта первой строки зелёный */
font-family: Arial; /* устанавливаем шрифт Arial для первой строки */
}
</style>
</head>
	<body>
		<p>Яндекс. Найдется, всё.</p>
		<pre class = "test">У лукоморья дуб зелёный;
		Златая цепь на дубе том:
		И днём и ночью кот учёный
		Всё ходит по цепи кругом;
		Идёт направо - песнь заводит,
		Налево - сказку говорит.
  </pre>
	</body>
</html>

В этом примере с помощью псевдоэлемента ::first-letter мы установили, что первая буква каждого текстового блока (в нашем случае абзаца — элемент <p>) будет красного цвета и размером 24 пикселя. Кроме того, с использованием псевдоэлемента ::first-line, мы указали, что первая строка в элементе с классом test (элемент <pre>) будет шрифтом Arial зеленого цвета.

Результат нашего примера:

Пример использования псевдоэлементов :first-letter и :first-line.CSS селекторы

::first-letter — CSS — Дока

  1. Кратко
  2. Пример
  3. Как пишется
  4. Подсказки

Кратко

Скопировано

Псевдоэлемент ::first-letter позволяет задать стили для первой буквы первой строки блочного элемента, если перед текстом нет другого содержимого.

Пример

Скопировано

Напишем код, выделяющий первую букву в цитате:

blockquote::first-letter {  font-size: 1. 86rem;  font-weight: 700;  font-style: italic;  letter-spacing: 0.12rem;}
          blockquote::first-letter {
  font-size: 1.86rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.12rem;
}
Открыть демо в новой вкладке

Как пишется

Скопировано

Для псевдоэлемента сработает лишь небольшой набор CSS-свойств:

  • Шорткат font и шрифтовые свойства, начинающиеся на font-;
  • Шорткат background и свойства фона, начинающиеся на background-;
  • Шорткат margin и внешние отступы, начинающиеся на margin-;
  • Шорткат padding и внутренние отступы, начинающиеся на padding-;
  • Шорткат border и свойства рамок, начинающиеся на border-;
  • цвет текста color;
  • текстовые свойства text-decoration, text-shadow, text-transform, letter-spacing, word-spacing, line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align.

Подсказки

Скопировано

💡 Знаки препинания, которые предшествуют первой букве или непосредственно следуют за ней, попадают под ::first-letter. Как в примере выше, знак кавычки также имеет стили, заданные для первой буквы.

💡 Если вы создаёте содержимое с помощью ::before и content, стили указанные в ::first-letter всё равно будут распространяться на первую букву.

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

::placeholder

alt + ←

→

::first-line

alt + →

CSS ::Селектор по первой букве

❮ Предыдущий Справочник по селекторам CSS Далее ❯


Пример

Выберите и стилизуйте первую букву каждого элемента

:

p::first-letter {
  размер шрифта: 200%;
цвет: #8A2BE2;
}

Попробуйте сами »

Определение и использование

Селектор ::first-letter

используется для добавления стиля к первой букве указанного селектора.

Примечание: Следующие свойства можно использовать с ::first-letter: 

  • свойства шрифта
  • свойства цвета
  • свойства фона
  • маржинальные свойства
  • свойства заполнения
  • пограничные свойства
  • текстовое украшение
  • вертикальное выравнивание (только если float равно ‘none’)
  • преобразование текста
  • высота строки
  • поплавок
  • прозрачный

Примечание: Селектор ::first-letter можно использовать только с элементами блочного уровня.

Версия: CSS1

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает селектор.

Селектор
:: первая буква 1,0 9. 0 1,0 1,0 7,0

Синтаксис CSS

:: first-letter {
  объявления css ;
} Демонстрация

Связанные страницы

Учебник CSS: Псевдоэлементы CSS

❮ Предыдущая Справочник по селекторам CSS Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial

Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Лучшие примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

:: селектор псевдоэлементов CSS с первой буквой | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

?

:: селектор псевдоэлементов CSS first-letter

— РЕК

  • global»>
    Глобальное использование
    99,79% + 0,13% «=» 99,92%

Псевдоэлемент CSS, позволяющий стилизовать только первую «букву» текста внутри элемента. Полезно для реализации стиля начальных или буквиц.

Chrome
  1. 4: Partial support
  2. 5 — 8: Support unknown
  3. 9 — 109: Supported
  4. 110: Supported
  5. 111 — 113: Supported
Edge
  1. 12 — 109: Supported
  2. 110: поддерживается
Safari
  1. 3.1: Support unknown
  2. 3.2 — 4: Partial support
  3. 01% — Support unknown»> 5: Support unknown
  4. 5.1 — 16.2: Supported
  5. 16.3: Supported
  6. TP: Supported
Firefox
  1. 2 : Частичная поддержка
  2. 3: Частичная поддержка
  3. 3.5 — 109: Поддерживается
  4. 110: Поддерживается
  5. 111 — 112: Поддерживается
Opera
    9 -99.9: Неизвестно0251 10 — 11.5: Partial support
  1. 11.6 — 93: Supported
  2. 94: Supported
IE
  1. 5.5: Support unknown
  2. 02% — Partial support»> 6 — 7: Partial support
  3. 8: Partial support
  4. 9 — 10: Поддерживается
  5. 11: Поддерживается
Chrome для Android
  1. 109: Поддерживается
Safari на IOS
  1. 3,2 — 4,3: Поддержка Неизвестно
  2. 5- 16.2: 16.3: 16.2: 16.2: 16.2: 16.2: 16.2: 16.0029
Samsung Internet
  1. 4 — 18,0: Поддерживается
  2. 19,0: Поддержано
Opera Mini
  1. All: Поддержано
.
  • 73: Поддерживается
    • UC Browser для Android

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *