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

Цветной абзац через css

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

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

И цветной абзац можно сделать несколькими способами!

1.

Можно сделать цветной абзац через css на самой странице.

Для этого в шапке сайта прописываем стили css + класс + цветное свойство абзаца.

Стили:

<style>

.primer-abzatsa{

color: #15CB19; /* Цвет   абзаца */

</style>

Цвет подбираем здесь.
Копируем код здесь.

Там же можно посмотреть результат работы кода, который покрасит вам абзац в цвет с помощью css

В сам абзац прописываем класс "class" или ид "id".

Код:

<p class="primer-abzatsa">Пример нового цветного абзаца, который  отличается по цвету от основного текста. </p> 

Результат:

Пример нового цветного абзаца на самой странице, через css, который отличается по цвету от основного текста.

2.

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

Создаём файл css,  назовём его :
Tsvetnoy-abzats-cherez-css.css
прикрепляем его к  странице.

 Создаём класс:

class=" Tsvetnoy-abzats-cherez-css"

В классе прописываем цвет:

.Tsvetnoy-abzats-cherez-css{

color:#2793D7;

}

код строки:

<p class="Tsvetnoy-abzats-cherez-css">Пример второго цветного абзаца </p>  Смотрим пример и там же копируем код.

Вас может еще заинтересовать список тем : #HTML | #ЦВЕТ | Теги:
Как сделать Цветной абзац через css

Последние комментарии :
Александр :
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