Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ 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
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

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

Последние комментарии :
Марат :
21/10/2020 12:15
Поиск по словам... м...м... может быть... не задумывался... в принципе скрипт поиска есть, надо подумать, как это…
подробнее.
Anton :
21/10/2020 09:29
Как добавить картинку (с ПК), видео (с хостинга или ПК) ?Будет ли поиск по словам в комментариях…
подробнее.
Марат :
15/10/2020 03:29
Сегодня нам дали очередную десяточку к "ИКС" - у, теперь…
подробнее.
Марат :
15/10/2020 03:16
Здравствуйте. Первое, что на ум пришло по вашему вопросу:Найти первое повторяющееся слово и выделить…
подробнее.
Майя :
15/10/2020 11:14
Добрый день, не могли бы вы подсказать, как выделить только первое или, например , только второе одинаковое…
подробнее.