Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

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

Поддержи проект!!!

Как покрасить первую букву в каждом новом абзаце. Ну или формулировка – «Оформление первой буквы абзаца через 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!


Вас может еще заинтересовать список тем : #CSS | #PARAGRAPH | #COLOR |
Последняя дата редактирования : 2020-04-30 07:52
https://dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

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

Последние комментарии :
Марат :
12/06/2020 10:07
Всегда пожалуйста! Приходите еще!!!
подробнее.
Александр :
04/06/2020 01:42
Спасибо
подробнее.
admin :
20/05/2020 10:36
Как бы смешно это не звучало! Но! Запускается новая система комментирования COMMENTS+ 1.5. в тестовом режиме!От…
подробнее.
Паула :
21/05/2020 04:48
Вообще мне очень нравится, что вы делаете! И ваш подход! И ваш стиль!И не обращайте внимание на всяких…
подробнее.
admin :
21/05/2020 05:03
Я Вас помню! Вы частенько оставляли сообщения на сайте!Все никак не мог спросить!? У Вас есть сайт -> зачем это…
подробнее.

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