Хочу изменить цвет первой буквы в каждом абзаце. Что мне для этого надо сделать?
Выделить другим цветом первую букву в каждом абзаце текста.
Решение
Удобнее всего воспользоваться стилевым псевдоэлементом :first-letter , добавляя его к селектору p . В стилях вначале указывается селектор, затем :first-letter , после чего в фигурных скобках пишется свойство color и его значение, как показано в примере 1.
Пример 1. Применение псевдоэлемента first-letter
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан ниже.
Рис. 1. Вид текста, у которого изменен цвет первых букв в каждом абзаце
В данном примере псевдоэлемент :first-letter применяется для изменения цвета первой буквы. Аналогично можно изменить размер символа и гарнитуру шрифта.
Выделить цветом первую букву каждого слова в предложении
Это можно сделать только посредством css не оборачивая слова в html?
Поиск по google дал ::first-letter и text-transform , но это не то.
Сделать это средствами css невозможно. Более того, выделение предложения — непростая семантическая задача. Точки не годятся (г. Москва, 1990 г.р., гр. Иванов и т.д. и т.п.)
Разумные результаты по выделению предложений мне удалось получить лишь с помощью Томита-парсера от Яндекс. Но он работает на php.
Как покрасить одну букву в html
Для того, чтобы продемонстрировать изменение цвета первой буквы в блоке, создадим несколько предложений.
И все данные предложения будут находится в одном блоке!
Изменим чуть-чуть высоту первой буквы и покрасим её в синий
Результат изменения цвета первой буквы :
Результат вы увидели уже в первых строках данного пункта!
Пример изменения цвета первой буквы
Как покрасить первую букву в каждом новом абзаце. Ну или формулировка – «Оформление первой буквы абзаца через css»
Итак! Мы видим, что уже в данном тексте, первая буква каждого абзаца имеет тот цвет и размер, который мы ранее прописали в стилях!
Давайте попробуем разобраться как сделать первую букву первого слова отличной от других. К первой букве абзаца мы можем применить вообще любой стиль: цвет, размер и .т.д.
Для этого нам понадобится :
Ну в нашем случае… именно на этой странице мы использовали данный псевдо класс таким образом: