Хочу изменить цвет первой буквы в каждом абзаце. Что мне для этого надо сделать?
Выделить другим цветом первую букву в каждом абзаце текста.
Решение
Удобнее всего воспользоваться стилевым псевдоэлементом :first-letter , добавляя его к селектору p . В стилях вначале указывается селектор, затем :first-letter , после чего в фигурных скобках пишется свойство color и его значение, как показано в примере 1.
Пример 1. Применение псевдоэлемента first-letter
HTML5 CSS 2.1 IE Cr Op Sa Fx
Цвет буквы Основная идея социально–политических взглядов К. Маркса была в том, что субъект политического процесса однозначно верифицирует институциональный гуманизм
Последнее особенно ярко выражено в ранних работах В.И. Ленина.
Результат данного примера показан ниже.
Рис. 1. Вид текста, у которого изменен цвет первых букв в каждом абзаце
В данном примере псевдоэлемент :first-letter применяется для изменения цвета первой буквы. Аналогично можно изменить размер символа и гарнитуру шрифта.
CSS по теме
- color
- Псевдоэлемент :first-letter
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Псевдоэлемент :first-letter
Псевдоэлемент :first-letter определяет стиль первого символа в тексте элемента, к которому добавляется. К этому псевдоэлементу могут применяться только стилевые свойства, связанные со свойствами шрифта, полями, отступами, границами, цветом и фоном.
Синтаксис
Значения
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
first-letter Луч фонарика высветил старые скрипучие ступени, по которым не далее как пять минут назад в дом поднялся Паша. Оля осторожно приоткрыла дверь и посветила внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую завесу из мрака и пыли.
Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого не было, и лишь на полу валялась порванная туфля Паши.
Результат примера показан на рис. 1. В данном примере изменяется шрифт, размер и цвет первой буквы каждого абзаца текста.
Рис. 1. Результат использования псевдоэлемента :first-letter
Браузеры
Internet Explorer до версии 7 включительно, Firefox до версии 2.0 включительно игнорируют свойство letter-spacing , когда оно применяется к псевдоэлементу :first-letter .
CSS по теме
Как сделать первую букву другим цветом?
Привет Как сделать для определенных слов в тексте первую букуву другого цвета, чтобы не заносить эту букву в отдельный тег (не разрывать к коде слово тегами)? Как сделать я нашел, но при этом идет перевод каретки после слова 🙁 а у меня дальше идет текст и все корявится.
На сайте с 16.11.2004
11 февраля 2007, 15:52
Сервис полуавтоматического рерайта текста (http://topwriter.ru/)
На сайте с 15.09.2006
11 февраля 2007, 16:06
.bukva:first-letter
<
color: red;
font-size: 36pt;
float: left;
>
.
.bukva2:first-letter
<
color: red;
>
.
На сайте с 30.11.2004 11 февраля 2007, 17:26dlyanachalas:
Можно так:
.bukva:first-letter
<
color: red;
font-size: 36pt;
float: left;
>
.
.bukva2:first-letter
<
color: red;
>
.
На сайте с 15.09.2006 11 февраля 2007, 18:01
.bukva:first-letter
<
display: inline;
color: red;
>
На сайте с 30.11.2004 12 февраля 2007, 09:06 dlyanachalas:
.bukva:first-letter
<
display: inline;
color: red;
>
display: inline; помогает убрать перевод каретки, но при этом буква не красная :( На сайте с 15.06.2005 12 февраля 2007, 09:32
p <
font:.8em Tahoma,Helvetica,sans-serif;
color:#000;
>
p:first-letter <
font-size:2.2em;
color:#F00;
>
Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем…
IE 5.5+, Opera 9, Firefox 2. Все окей.
На сайте с 30.11.2004
12 февраля 2007, 20:50
Flack:
p <
font:.8em Tahoma,Helvetica,sans-serif;
color:#000;
>
p:first-letter <
font-size:2.2em;
color:#F00;
>
Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем…
IE 5.5+, Opera 9, Firefox 2.
Все окей.Те же грабли. Мне нужно пару слов сделать с первой буквой другого цвета внутри абзаца текста. Не первую букву обзаца, как у вас в примере.
Псевдоэлементы
Псевдоэлементы позволяют задать стиль элементов не определённых в дереве элементов документа, а также генерировать содержимое, которого нет в исходном коде текста.
Синтаксис использования псевдоэлементов следующий.
Вначале следует имя селектора, затем пишется двоеточие, после которого идёт имя псевдоэлемента. Каждый псевдоэлемент может применяться только к одному селектору, если требуется установить сразу несколько псевдоэлементов для одного селектора, правила стиля должны добавляться к ним по отдельности, как показано ниже.
Псевдоэлементы не могут применяться к внутренним стилям, только к таблице связанных или глобальных стилей.
Далее перечислены все псевдоэлементы, их описание и свойства.
:after
Применяется для вставки назначенного контента после содержимого элемента. Этот псевдоэлемент работает совместно со стилевым свойством content , которое определяет содержимое для вставки. В примере 16.1 показано использование псевдоэлемента :after для добавления текста в конец абзаца.
Пример 16.1. Применение :after
HTML5 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx
Псевдоэлементы Метод ловли льва простым перебором.
Результат примера показан на рис. 16.1.
Рис. 16.1. Добавление текста к абзацу с помощью :after
В данном примере к содержимому абзаца с классом new добавляется дополнительное слово, которое выступает значением свойства content .
Псевдоэлементы :after и :before , а также стилевое свойство content не поддерживаются браузером Internet Explorer до седьмой версии включительно.
:before
По своему действию :before аналогичен псевдоэлементу :after , но вставляет контент до содержимого элемента. В примере 16.2 показано добавление маркеров своего типа к элементам списка посредством скрытия стандартных маркеров и применения псевдоэлемента :before .
Пример 16.2. Использование :before
HTML5 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx 4
Результат примера показан ниже (рис. 16.2).
Рис. 16.2. Изменение вида маркеров с помощью :before
В данном примере псевдоэлемент :before устанавливается для селектора LI , определяющего элементы списка. Добавление желаемых символов происходит путём задания значения свойства content . Обратите внимание, что в качестве аргумента не обязательно выступает текст, могут применяться также символы юникода.
И :after и :before дают результат только для тех элементов, у которых имеется содержимое, поэтому добавление к селектору img или input ничего не выведет.
:first-letter
Определяет стиль первого символа в тексте элемента, к которому добавляется. Это позволяет создавать в тексте буквицу и выступающий инициал.
Буквица представляет собой увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой линии основного текста. Выступающий инициал — увеличенная прописная буква, базовая линия которой совпадает с базовой линией основного текста.
Рассмотрим пример создания выступающего инициала. Для этого требуется добавить к селектору P псевдоэлемент :first-letter и установить желаемый стиль инициала. В частности, увеличить размер текста и поменять цвет текста (пример 16.3).
Пример 16.3. Использование :first-letter
HTML5 CSS 2.1 IE Cr Op Sa Fx
Псевдоэлементы Луч фонарика высветил старые скрипучие ступени, по которым не далее как пять минут назад в дом поднялся Паша. Оля осторожно приоткрыла дверь и посветила внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую завесу из мрака и пыли.
Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого не было, и лишь на полу валялась порванная туфля Паши.
Результат примера показан ниже (рис. 16.3).
Рис. 16.3. Создание выступающего инициала
В данном примере изменяется шрифт, размер и цвет первой буквы каждого абзаца текста.
:first-line
Определяет стиль первой строки блочного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и т.д.
К псевдоэлементу :first-line могут применяться не все стилевые свойства. Допустимо использовать свойства, относящиеся к шрифту, изменению цвет текста и фона, а также: clear , line-height , letter-spacing , text-decoration , text-transform , vertical-align и word-spacing .
В примере 16.4 показано использование псевдоэлемента :first-line применительно к абзацу текста.
Пример 16.4. Выделение первой строки текста
HTML5 CSS 2.1 IE Cr Op Sa Fx
Псевдоэлементы Интересно, а существует ли способ действительно практичного применения свойства first-line? Нет, не такого, чтобы можно было бы показать, что это возможно, а чтобы воистину захватило дух от красоты решения, загорелись глаза от скрытых перспектив, после чего остается только сказать себе, что вот это вот, это самое сделать по-другому, также изящно и эффектно просто невозможно.
Результат примера показан на рис. 16.4.
Рис. 16.4. Результат применения псевдоэлемента :first-line
В данном примере первая строка выделяется красным цветом и курсивным начертанием. Обратите внимание, что при изменении ширины окна браузера, стиль первой строки остается постоянным, независимо от числа входящих в нее слов.
Вопросы для проверки
1. Какой псевдоэлемент позволяет добавить текст в начало предложения?
- :after
- :before
- :first-line
- :first-text
- :first-letter
2. Что делает следующий стиль?
OL LI:first-letter <
color: red;
>
- Изменяет цвет первой буквы элемента маркированного списка.
- Изменяет цвет первой буквы элемента нумерованного списка.
- Изменяет цвет первой строки в маркированном списке.
- Изменяет цвет первой строки в нумерованном списке.
- Изменяет цвет текста всего списка.
3. Какой селектор написан с ошибкой?
- p.new:before
- abbr:first-line
- p.new.back:after
- div:before:first-letter
- a:hover:before
Ответы
2. Изменяет цвет первой буквы элемента нумерованного списка.
- 1.1. Введение в CSS
- 1.2. Преимущества стилей
- 1.3. Способы добавления стилей на страницу
- 1.4. Типы носителей
- 1.5. Базовый синтаксис CSS
- 1.6. Значения стилевых свойств
- 1.7. Селекторы
- 1.8. Классы
- 1.9. Идентификаторы
- 1.10. Псевдоклассы
- 1.11. Псевдоэлементы
- 1.12. Группирование
- 1.13. Наследование
- 1.14. Каскадирование
- 1.15. Валидация CSS
- 1.16. Идентификаторы и классы
- 1.17.Написание эффективного кода
- 2.1. Слайдер на CSS3
- 2.2 Визитка на CSS3
- 2.3 Оригинальное оформление ссылок
- 2.4 Анимация
- 2.6 Вертикальное меню
- 2.7 Тень
- 2.8 Переходы
- 2.9 Трансформации
- 2.10 Градиент