Каждый новый абзац другим цветом примеры

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

Как сделать чтобы абзац отличался от предыдущего или последующего!?

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

<p>здесь текст</p> И делее к абзацу нужно добавить, либо в самом теге стили для нового цвета, либо цветные стили в class или id!

Рассмотрим несколько вариантов для создания цвета абзацу!

Все способы окрасить новый абзац новым цветом с примерами

Алгоритм покрасить новый абзац новым цветом!
Новый абзац новым цветом! -> построчно в теге
Абзац цветом через css style -> построчно в теге
Абзац цветом через файл css -> построчно в теге
Абзац цветом через файл css -> псевдокласс :nth-child
Как сделать каждый абзац новым цветом -> php
Код скрипта, который сделает каждый абзац новым цветом!
Скачать

Алгоритм покрасить новый абзац новым цветом!

Для того, чтобы сделать каждый абзац новым цветом, есть несколько вариантов решения данной задачки!

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

С использованием псевдокласса :nth-child -требование, что это будет какой-то блок. и внутри блока будут повторяющиеся теги. И потребуется прописать порядковый номер внутреннего тега с цветом.

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

Новый абзац новым цветом!

Каждому новому абзацу мы будем добавлять свой собственный цвет, прямо в теге!

style="color: red"

абзац.

выбираем нужный цвет.

Мы, например, хотим, чтобы цвет абзаца был красным…

И у вас должно получиться примерно так:

Код:

<p style="color: red">
Пример нового цветного абзаца, который отличается по цвету от основного текста.
</p>

Пример цветного абзаца.

Результат:

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

Ну и сделаем второй пример, чтобы было более наглядно. Теперь цвет абзаца хотим, чтобы был зеленым…

Пример 2:

Код:

<p style="color: green">
Данный текст нужен для того, чтобы было понятно, что и как может выглядеть, если мы к абзацу добавим цвет прям здесь на странице.
</p>

Результат:

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

Абзац цветом через css style

Для того, чтобы сделать каждый абзац новым цветом, либо просто покрасить абзац в какой-то цвет, можно каждому тегу абзаца присваивать новый class либо id

Если это делать через тег style прямо на странице, то это может выглядеть так:

<style>

.red{color:red;}

</style>

Текст с классом , который и будем выводить ниже:

<p class ="red">
Данный текст нужен для того, чтобы было понятно, что и как может выглядеть, если мы к абзацу добавим класс прямо здесь, на странице с цветом, который покрасит наш абзац в красный цвет .
</p>

Результат:

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

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

<style>

.green{color:green;}

</style>

<p class ="green">
Данный текст нужен для того, чтобы было понятно, что и как может выглядеть, если мы к абзацу добавим класс прямо здесь, на странице с цветом, который покрасит наш абзац в зеленый цвет .
</p>

Результат:

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

Абзац цветом через файл css

css

Абзац цветом через файл css -> псевдокласс :nth-child

Об этом способе покрасить каждый абзац новым цветом, я как-то и позабыл!

Для данного способа покраски абзаца в новый цвет потребуется какой-то div и внутри данного блока должен повторять какой-то другой тег, например:

<div class="example">
   <p>Здесь текст</p>
   <p>Здесь текст</p>
   <p>Здесь текст</p>
   ...
</div>

Далее нам потребуется псевдокласс :nth-child... и каждой строке по порядку прописываем цвет:

.example p:nth-child(1) {
color: red;
}
.example p:nth-child(2) {
color: green;
}
.example p:nth-child(3) {
color: orange;
}

Теперь возьмем тот же текст поместим его в div с классом example, для каждой строки припишем новый цвет... всего строк получились 10:

Результат окрашивания нового абзаца новым цветом через :nth-child

И так!

Погнали!

Это уже будет абзац номер 2, хотя порядковый номер будет №1 и цвет будет Yellow.

На самом деле! Я не хотел переделывать эту страницу о цветах абзаца!

Но тут, анализируя поисковые запросы увидел такой интересный запрос… :

на странице с абзацами сделать так, чтобы абзацы были цветами радуги, а ссылки великие на описаниях цветов в википедии.

Вообще! На самом деле я не знаю, что это такое, но было интересным. Как же можно сделать это таким образом. Чтобы каждый абзац автоматически красился в тот цвет, который мы ему назначим!

И тут меня затянуло, вроде бы и подумать-то такая глупая задачка, но я люблю решать задачки – меня хлебом не корми – дай задачку решить!

И дописав до 7 строки, решил сходить посмотреть! И желтый явно не очень, его нужно немного сделать темным!

И еще .. промежуточный цвета для абзацев не очень заметно отличаются от основных!

Чтобы явно было отличие цвета – надо сделать например квадрат с цветом…

И это последний...измененный цветом

Как сделать каждый абзац новым цветом php

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

1). Первое это текст, который и будет выступать экспериментальным, каждый новый абзац отделен от предыдущего переносом строки \n - вот так он выглядит в переменной!

2). Теперь нам нужно этот текст разбить в массив с помощью explode:

$text = explode("\n" , $text) ;

3). Далее нам потребуется массив с цветами:

$array_color = array("red","orange ","yellow ","green ","blue ","indigo ","violet ","#78ff00","#00ffd2","#ff8300");

Цвета в данном массиве:

0.Красный – red
1.Оранжевый – orange
2.Желтый .Yellow
3.Зеленый Green
4.Голубой Blue
5.Синий indigo
6.Фиолетовый – violet
7.Между зеленым и желтым – 78ff00
8.Между зеленым и голубым – 00ffd2
9.Между красным и желтым – ff8300

4).

for

for ($i=0; $i < count($text); $i++)

{

$new_str .='<span style="color: '.$array_color[substr($i, -1)].' ">'.$text[$i]. "</span><br> ";

}

echo $new_str;

Здесь наверное все понятно, как будет добавляться цвет каждому новому абзацу, единственная часть цикла, которая наверное вызывает проблему для понимания это :

$array_color[substr($i, -1)]

Что это значит!? Давайте прямо здесь поэкспериментируем чтобы понимать, как это работает - нет ничего лучше примера:

$i = 124;

echo "Это будет последняя цифра :

".substr($i, -1). "

ну и далее, думаю вы догадались, здесь будет название цвета :

" . $array_color[substr($i, -1)];

И результат вы приведенного примера:

Это будет последняя цифра :

ну и далее, думаю вы догадались, здесь будет название цвета :

blue

Цвета в данном массиве

Результат работы скрипта, который делает каждый абзац новым цветом!:

И так!
Погнали!
Это уже будет абзац номер 2, хотя порядковый номер будет №1 и цвет будет Yellow.
На самом деле! Я не хотел переделывать эту страницу о цветах абзаца!
Но тут, анализируя поисковые запросы увидел такой интересный запрос… :
на странице с абзацами сделать так, чтобы абзацы были цветами радуги, а ссылки великие на описаниях цветов в википедии.
Вообще! На самом деле я не знаю, что это такое, но было интересным. Как же можно сделать это таким образом. Чтобы каждый абзац автоматически красился в тот цвет, который мы ему назначим!
И тут меня затянуло, вроде бы и подумать-то такая глупая задачка, но я люблю решать задачки – меня хлебом не корми – дай задачку решить!
И дописав до 7 строки, решил сходить посмотреть! И желтый явно не очень, его нужно немного сделать темным!
И еще .. промежуточный цвета для абзацев не очень заметно отличаются от основных!
Чтобы явно было отличие цвета – надо сделать например квадрат с цветом…
И это последний...измененный цветом

Код скрипта, который сделает каждый абзац новым цветом!

Для скрипта php, который сделает все абзацы другим цветом, выделим отдельный пункт:

$text = "здесь текст с переносами";

$text = explode("\n" , $text) ;

$array_color = array("red","orange ","yellow ","green ","blue ","indigo ","violet ","#78ff00","#00ffd2","#ff8300");

for ($i=0; $i < count($text); $i++)

{

$new_str .='<span style="color: '.$array_color[substr($i, -1)].' ">'.$text[$i]. "</span><br> ";

}

echo $new_str;

Не стесняемся говорить спасибо!

Теги:
как залить абзац цветом html
скрипт смена цвета абзаца

На сайте сейчас :