Как выделить первую букву в css
Перейти к содержимому

Как выделить первую букву в css

  • автор:

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

В CSS нет свойства, которая делает первую букву заглавной. Но можно выбрать первый символ текста через псевдоэлемент :first-letter, и применить к нему свойство text-transform: uppercase. Псевдоэлемент :first-letter работает только с блочными элементами (не будет работать например со ). Чтобы :first-letter работало со строчными элементами, данному элементу надо задать свойство «inline-block» или «block».

p::first-letter  text-transform: uppercase; > 

Примеры оформления первой буквы абзаца

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

/*первый абзац*/ p:first-letter < font-size: 2em; margin-right: 2px; color: #EE9966; font-weight: bold; text-shadow: -1px -1px 1px white, 1px 1px 1px #9E9D99; >p:first-line /*второй абзац*/ p:first-letter < font-size: 1.2em; padding: 5px 10px; margin-right: 5px; background: #EE9966; color: #FAF4F4; float: left; border-radius: 50% 0; font-weight: bold; >/*третий абзац*/ p:first-letter < font-size: 1.2em; padding: 5px 10px; margin-right: 5px; margin-bottom: 2px; background: #EE9966; color: #FAF4F4; float: left; font-weight: bold; >/*четвертый абзац*/ p:first-letter < font-size: 1.2em; padding: 3px 10px; margin-right: 5px; background: #EE9966; color: #FAF4F4; float: left; font-weight: bold; border-radius: 50%; >/*пятый абзац*/ p:first-letter < font-size: 1.5em; padding: 2px 10px; margin-right: 5px; background: #FAF4F4; border: 6px double; color: #EE9966; float: left; font-weight: bold; >/*шестой абзац*/ p:first-letter< font-size: 1.5em; padding: 2px 10px; margin-right: 5px; background: url(https://html5book.ru/wp-content/uploads/2015/01/border-orange.png); border: 2px solid #EE9966; color: #544E3E; float: left; font-weight: bold; box-shadow: 1px 1px 1px #9E9D99; >
Поделиться:
  • HTML
    • 1.1. Основы HTML
    • 1.2. HTML-элементы
    • 1.3. HTML-атрибуты
    • 1.4. HTML-текст
    • 1.5. HTML-ссылки
    • 1.6. HTML-изображения
    • 1.7. HTML-таблицы
    • 1.8. HTML-списки
    • 1.9. Спецсимволы HTML
    • 1.10. HTML-генераторы
    • 1.11. Семантические элементы HTML5
    • 1.11.1. Элемент документа
    • 1.11.2. Метаданные документа
    • 1.11.3. Разделы документа
    • 1.11.4. Группировка содержимого
    • 1.11.5. Семантика уровня текста
    • 1.11.6. Правки документа
    • 1.11.7. Встраиваемое содержимое
    • 1.11.8. Ссылки
    • 1.11.9. Табличные данные
    • 1.11.10 Формы
    • 1.11.11. Интерактивные элементы
    • 1.11.12. Скрипты
    • 1.12. HTML5-аудио
    • 1.13. HTML5-видео
    • 1.14. Необязательные теги HTML5-разметки
    • 1.15. HTML5-формы
    • 1.16. Контентная модель HTML5
    • 2.1. Основы CSS
    • 2.2. CSS блочная модель
    • 2.3. Блочные и строчные элементы
    • 2.4. CSS-позиционирование
    • 2.5. CSS-текст
    • 2.6. CSS-шрифты
    • 2.7. CSS-ссылки
    • 2.8. CSS-таблицы
    • 2.9. CSS-списки
    • 2.10. CSS-фон
    • 2.11. CSS-рамка
    • 2.12. CSS content
    • 2.13. CSS-цвета
    • 2.14. CSS-генераторы
    • 2.15. CSS3 UI
    • 2.16. CSS-градиент
    • 2.17. CSS3-рамка
    • 2.18. CSS3-оформление текста
    • 2.19. CSS-тень блока
    • 2.20. CSS-переходы
    • 2.21. CSS-трансформации
    • 2.22. CSS-анимация
    • 2.23. CSS flexbox
    • 2.24. CSS колонки
    • 2.25. CSS 3D-трансформации
    • 2.26. CSS-медиазапросы
    • 2.27. CSS-фильтры
    • 2.28. CSS Grid
    • 2.29. CSS3-шрифты
    • 2.30. CSS3-переполнение
    • 2.31. CSS3-способы письма
    • 2.32. Объединение и смешивание слоев
    • 2.33. CSS-фрагментация
    • 3.1. Основы JavaScript
    • 3.2. Выражения в JavaScript
    • 3.3. Циклы JavaScript
    • 3.4. DOM — объектная модель документа
    • 3.10. Введение в jQuery
    • 3.11. Методы jQuery
    • 3.11.1. Манипуляции HTML-элементами
    • 3.11.2. Чтение и изменение CSS-свойств, классов и атрибутов
    • 3.11.3. Обход DOM и выборка HTML-элементов
    • 3.11.4. jQuery анимация
    • 3.11.5. Методы объекта window
    • 3.12. События jQuery
    • 3.13. Селекторы jQuery
    • 4.1. Пять принципов выбора и использования шрифтов
    • 4.2. Выбираем шрифт для сайта
    • 4.3. Правила веб-типографики
    Последние записи

    2014-2024 © Елена Назарова,

    Коммерческое использование материалов сайта HTML5BOOK.RU запрещено. В остальных случаях обязательно наличие индексируемой ссылки со словом «Источник» на сайт или на страницу, содержащую этот материал.

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

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

    Решение

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

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

    HTML5 CSS 2.1 IE Cr Op Sa Fx

        Цвет буквы   

    Основная идея социально–политических взглядов К. Маркса была в том, что субъект политического процесса однозначно верифицирует институциональный гуманизм

    Последнее особенно ярко выражено в ранних работах В.И. Ленина.

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

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

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

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

    Буквица

    Буквица является художественным приемом оформления текста и представляет собой увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой линии основного текста. Заметьте, что это не просто увеличенный символ, буквица не выступает над блоком текста, а является его частью. Чтобы выделить первую букву воспользуемся псевдоэлементом ::first-letter , он устанавливает стиль первого символа текста. Для этого добавим его к селектору p , как это показано в примере 1.

    Пример 1. Создание буквицы

    Результат данного примера показан на рис. 1. Для начала увеличиваем размер буквицы через свойство font-size и устанавливаем желаемые поля вокруг буквы. Чтобы происходило обтекание используем свойство float со значением left . Тогда первые буквы будут выравниваться по левому краю, а остальной текст обтекать их справа и снизу. Свойство float может затронуть и нижние абзацы текста и получится некрасиво, поэтому для каждого абзаца отменяем его действие через clear . Положение буквы по вертикали относительно остального текста можно регулировать с помощью line-height . Экспериментируйте со значениями и получите разные варианты буквиц.

    Буквица

    Если убрать свойство float и margin-right в примере, то мы получим выступающий инициал (рис. 2) — так называется увеличенная первая буква предложения, базовая линия которой совпадает с базовой линией основного текста. В отличие от буквицы выступающий инициал располагается на одной линии с текстом.

    Выступающий инициал

    Рис. 2. Выступающий инициал

    См. также

    • float
    • float в CSS
    • Влияние float
    • Выравнивание картинок
    • Описание float
    • Подробнее о позиционировании
    • Поток
    • Примеры использования float
    • Псевдоэлемент ::first-letter
    • Псевдоэлементы

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

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