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

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

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

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

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

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

Навигация по странице :
  1. Новый абзац новым цветом!
  2. Абзац цветом через css style
  3. Абзац цветом через файл css
  4. Как сделать каждый абзац новым цветом php
  5. Код скрипта, который сделает каждый абзац новым цветом!
  6. Скачать можно здесь

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

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

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

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

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

    Код:

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

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

    Результат:

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

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

    Пример 2:

    Код:

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

    Результат:

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


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

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

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

    <style>

    .red{color:red;}

    </style>

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

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

    Результат:

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

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

    <style>

    .green{color:green;}

    </style>

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

    Результат:

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


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

  3. Как сделать цветной абзац через файл css!? Абсолютно так же, как и выше описанным способом, только стили размещаем в файле стилей css


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

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

    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)];

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

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

    4

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

    blue

    Теперь возьмите число и цвет и подымитесь наверх и посмотрите Цвета в данном массиве

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

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


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

  5. Для скрипта 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 , PHP , ЦВЕТ ,
Последняя дата редактирования : 2020-01-19 06:52
Название скрипта :Новый цвет абзаца через цикл
Скрипт № 33.2Ссылка на скачивение: Все скрипты на одной странице
Теги:
как залить абзац цветом htmlскрипт смена цвета абзаца

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