ГЛАВНАЯ | HTML | CSS | PHP | JS | ЕЩЁ |

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

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

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

1.

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

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

Стили:

<style>

.primer-abzatsa{

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

</style>

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

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

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

Код:

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

Результат:

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

2.

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

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

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

class=" Tsvetnoy-abzats-cherez-css"

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

.Tsvetnoy-abzats-cherez-css{

color:#2793D7;

}

код строки:

<p class="Tsvetnoy-abzats-cherez-css">Пример второго цветного абзаца </p>  Смотрим пример и там же копируем код.
Не забудь !
Оставить комментарийCOMMENTS+
Сообщений пока нет - Вы можете стать первым
BBcode
нажмите, чтобы загрузить аватар
Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

Закрыть
+=
Подписаться
Теги:
Как сделать Цветной абзац через css

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