Как сделать первую букву другого цвета css

Хочу изменить цвет первой буквы в каждом абзаце. Что мне для этого надо сделать?

Выделить другим цветом первую букву в каждом абзаце текста.

Решение

Удобнее всего воспользоваться стилевым псевдоэлементом :first-letter , добавляя его к селектору p . В стилях вначале указывается селектор, затем :first-letter , после чего в фигурных скобках пишется свойство color и его значение, как показано в примере 1.

Пример 1. Применение псевдоэлемента first-letter

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан ниже.

Вид текста, у которого изменен цвет первых букв в каждом абзаце

Рис. 1. Вид текста, у которого изменен цвет первых букв в каждом абзаце

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

Псевдоэлементы: первая буква и строка

Существует четыре псевдоэлемента: первая буква, первая строка, стили до и после элемента.

Первая буква

Давайте сделаем первую букву каждого абзаца больше, чем другие и красного цвета. Смотрим пример первый.

Первая строка

Довольно просто можно сделать красного цвета первую строку.

Стили "до" и "после" элемента

Допустим, нам нужно перед каждым абзацем ставить тире ( — ). Сделать это очень просто, при помощи псевдоэлемента before и правила для генерации содержимого content . Смотрим третий пример.

И еще вдруг нам нужно ставить точки в конце абзацев. Для этого есть псевдоэлемент after . Смотрим пример четыре.

Чтобы использовать все функции сайта (например, сохранение прогресса прохождения уроков), вам нужно авторизоваться

  1. Сделайте цвет первых букв (у четырех абзацев) красного цвета. HTML код менять нельзя. Используйте теорию из этого урока.

– Не пропускайте новостей, подпишитесь на нашу страницу ВК, Facebook или Twitter.

– Не знаете как сделать? Нажмите на кнопку Обсуждение и задайте вопрос!

CSS Преобразование текста

Свойство text-transform используется для указания заглавных и строчных букв в тексте.

Его можно использовать, чтобы преобразовать все в заглавные или строчные буквы или сделать первую букву каждого слова заглавной:

Пример

p.uppercase <
text-transform: uppercase;
>

p.lowercase <
text-transform: lowercase;
>

p.capitalize <
text-transform: capitalize;
>

ПАЛИТРА ЦВЕТОВ
ПРИСОЕДИНЯЙТЕСЬ!

Получите ваш
Сертификат сегодня!

Связь с админом

Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:

Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты

Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.

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

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