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

Как сделать абзац цветом

Когда я написал про абзац , то неожиданно моя страница стала появляться в поиске по запросу - как сделать каждый абзац своим цветом html. И поскольку, данной информации на той странице не было, то я решил написать такую страницу, посвящённую разноцветным абзацам.

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

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

Для этого надо изменить его, к примеру, добавить класс "class" или ид "id".

И далее…

Начнём с того, что сделать цветные абзацы можно нескольким способами.

1.

Вариант номер один - Изменение цвета абзаца прямо в той строке, которую нужно выделить цветом…

Изменить абзац именно на этой странице.

Добавим свойство цвета

style="color: red"

в сам абзац. И нам нужен цвет, вернее код цвета, или цветной код, в общем идем сюда и выбираем нужный цвет.

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

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

Код:

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

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

Результат:

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

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

Пример 2:

Код:

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

Результат:

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

Как сделать абзац цветом через css

Для иллюстрации этого мы сделали отдельную страницу.

3.

Как сделать абзац цветом через цикл

Что касаемо всех двух пунктов верхних изменения цвета абзаца на отдельной странице, в отдельной строке, либо же через файл css - это классно!

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

Есть такое предложение использовать циклы!

Надо ваш текст поместить в переменную – пропустить через цикл и в цикле каждой строке абзаца прибавлять новый цвет!

Есть предложение как это сделать!?

В чем я вижу главную проблему!?

Абзацев может быть больше чем 7 цветов! Поэтому нам придется каждой цифре от 0 до 9 приравнять свой цвет! Т.е. используя 7 основных цветов найти ещ3 промежуточных…

И каждый абзац будем иметь свой порядковый номер! И как только в нашем цикле последняя цифра порядкового номера будет равна одной из цифр от 0 до 9, то и будем присваивать нашему абзацу новый цвет!

0.Красный – red

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

Что дальше нам нужно!?

Нам нужен массив получить из нашего текста, например можем его получить с помощью explode – делитель в данном случае является перенос…

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

Создаём цикл for:

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

Далее полуимя последнюю цифру в порядковом номере цикла:

И если оно равно какому –то числу. Например 0:

if (substr($i, -1) == '0') { echo '<span style="color:red ">'.$text[$i].'</span> <br>'; }

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

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

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

Посмотреть пример и скачать можно по ниже идущей ссылке

Скрипт № 32.3
Название скрипта и номер :Новый цвет абзаца через цикл
Пример - Новый цвет абзаца через цикл
Скачать - архив
Все скрипты на одной страницеНаписать комментарий.
С вашими куками, что-то не то..., попробуете перезагрузить страницу..