DWWEB.RU
СКРИПТЫ

Первая буква абзаца цветом

2019/10/09 Марат 92 0 CSS |

Как покрасить первую букву в каждом новом абзаце. Ну или формулировка – «Оформление первой буквы абзаца через css»

Итак! Мы видим, что уже в данном тексте, первая буква каждого абзаца имеет тот цвет и размер, который мы ранее прописали в стилях!

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

Для этого нам понадобится :

Псевдо класс :first-letter

Ну в нашем случае… именно на этой странице мы использовали данный псевдо класс таким образом:

p:first-letter

Каждый новый абзац в html будет иметь вид:

<p>Здесь текст, каждого нового абзаца!</p>

Добавляем стили к первой букве абзаца:

p:first-letter {
font-family: "Times New Roman", Times, serif;
font-size: 150%;
color: red;
font-style: italic;
}

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

Не забудь !
Оставить комментарийCOMMENTS+
Сообщений пока нет - Вы можете стать первым
BBcode
нажмите, чтобы загрузить аватар
Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

Закрыть
+ =
Подписаться
Теги:
первая буква абзаца цветомпервые буквы абзацев цвет

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2019