Хочу изменить цвет первой буквы в каждом абзаце. Что мне для этого надо сделать?
Выделить другим цветом первую букву в каждом абзаце текста.
Решение
Удобнее всего воспользоваться стилевым псевдоэлементом :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 по теме
Как покрасить буквы в слове?
Серёга, привет. Написал в теме письма, что вопрос по материалам сайта, просто потому, что не нашел другой подходящей категории.
Мой вопрос касается стилей css, ты же мастер У меня есть сайт на вордпресс (знаю, ты ими не занимаешься), но мой вопрос по стилям.
Заголовок моего сайта из 12 букв, мне надо чтобы он был трехцветным, то есть первые три буквы — белые (#ffffff), следующие пять букв — синие (#0060ff), и последние четыре — красные (#ff0000).
Как мне все это изобразить, ниже вставил в письмо код заголовка в файле style.css шаблона темы:
.site-title < font-family: Georgia, 'ubuntu', sans-serif; font-size: 44px; font-weight: bold; margin: 30px 0 0 16px; >.site-title a < color: #cc0000; text-decoration: none; >.site-title a:hover
Что мне надо там прописать, и можно ли вообще прописать каждую букву своим цветом? Искал информацию в сети по этой теме, ничего не нашел.
Раньше у меня была темка шаблона, где одна буква (первая) прописывалась своим цветом:
/*заголовок сайта*/ .logo a .logo a:first-letter
Может мой вопрос и лоховский. я не спец. Поможешь, скажу СПАСИБО.
Ответ на вопрос:
Привет Юра. В стилях можно задать отдельные значения как для первого символа так и для первой строки. Но если тебе надо покрасить в разный цвет буквы или слова в предложении. Рекомендую использовать парный тег — это так сказать «пустой» тег строчного типа. То есть оформление у него по умолчанию отсутствует и он идеально подходит для таких вот задач. Вот пример:
Исходный код:
.blue .red .green www. Master-CSS .com
В итоге получаем вот такую надпись (шрифт увеличил, что бы было лучше видно):
www. Master-CSS .com
Если остались вопросы — задавайте в комментариях.
Советую глянуть:
- Текст в input по умолчанию и про автозамену
- Как настроить модерацию комментариев?
- Как создать меню для сайта?
- Как самому создать XML Sitemap?
- Видео для сайта – где лучше?
Как выделить другим цветом фрагмент текста?
Изменить цвет произвольного фрагмента текста на желаемый.
Решение
Создайте новый класс (например, colortext ) и установите для него стилевое свойство color с желаемым значением цвета. После чего выделение фрагмента текста происходит с помощью тега , класс которого совпадает с именем класса, созданным выше.
Пример 1. Выделение фрагмента текста цветом
HTML5 CSS 2.1 IE Cr Op Sa Fx
Изменение цвета текста Lorem ipsum dolor sit amet, , sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Результат данного примера показан ниже.
Рис. 1. Текст, у которого фрагмент выделен с помощью цвета
Класс colortext , созданный в данном примере, можно использовать неоднократно, выделяя цветом текст в нужных местах документа. Если требуется использовать несколько цветов, тогда следует создать несколько классов и добавлять их по необходимости.