Как сделать цвет в php
Добавил пользователь Валентин П. Обновлено: 05.10.2024
В этом уроке вы узнаете, как менять цвет фона и текста любых элементов HTML-страницы. Вообще, в языке HTML у некоторых тегов есть специальные атрибуты меняющие цвет, например bgcolor (цвет фона). Но, во-первых, эти атрибуты являются устаревшими (думаю помните, что это значит), а во-вторых, как я уже сказал, они есть не у всех тегов. И вот, допустим, вы захотели изменить цвет фона у параграфа текста. И как вы это будете делать, ведь у тега
нет такого атрибута? Поэтому, как и в предыдущих уроках, мы будем использовать стили (CSS), то есть универсальный атрибут style , который позволит нам менять цвет там, где мы захотим.
Как можно указывать цвет?
Цвета в HTML (и CSS) можно указывать несколькими способами, я покажу вам самые популярные и распространенные:
Раньше в HTML рекомендовалось использовать только безопасную палитру цветов, которая гарантированно отображалась во всех браузерах и на всех мониторах одинаково. Но сегодня ей ограничиваться совершенно не обязательно, так как и браузеры и мониторы давно научились правильно отображать гораздо больший список цветов. А вот указывать цвета по именам я вам как раз и не рекомендую, дело в том, что многие браузеры до сих пор с одним и тем же именем связывают разные цвета. Поэтому в данном учебнике я буду всегда использовать именно HEX-коды цветов.
Как изменить цвет текста?
Чтобы изменить цвет текста в любом элементе HTML-страницы надо указать внутри тега атрибут style . Общий синтаксис следующий:
style= "color:имя цвета" >. — указание цвета текста по имени.
И как обычно, чтобы изменить цвет текста на всей странице — достаточно указать атрибут style в теге . А если необходимо изменить цвет шрифта для фрагмента текста, то заключите его в тег и примените атрибут к нему.
Пример изменения цвета текста
Результат в браузере
Красный текст заголовка
Синий текст параграфа.
Зеленый курсив. Красный текст.
Как изменить цвет фона?
Цвет фона любого элемента страницы меняется также с помощью атрибута style . Общий синтаксис такой:
style= "background:имя цвета" >. — указание цвета фона по имени.
Пример изменения цвета фона
Результат в браузере
Заголовок.
Жирный текст. Обычный текст.
Когда меняешь цвет фона элементов, то становится очень хорошо видно, какую на самом деле ширину занимает каждый из них. Как видите, блочные элементы, такие как параграфы и заголовки, в основном занимают всю доступную ширину, даже если они содержат очень мало текста, а вот встроенные (inline) теги по ширине равны своему содержимому. Кстати, последний параграф в примере тоже занимает всю ширину, просто его фон прозрачный, поэтому сквозь него виден фон страницы. Вообще, фон всех элементов на странице, в которых он не указан явно — прозрачный, вот и все.
В этой статье мы познакомимся с возможностями HTML и CSS по смене цвета текста на страницах сайта. Будет рассмотрено несколько вариантов. Для каждого отдельного случая удобен свой конкретный способ.
Для начала отметим, что цвета можно задавать в трех форматах:
На нашем сайте представлена полная палитра и названия html цветов для сайта, где можно выбрать подходящий цвет.
Способ 1. Через html тег
Самым простым способом изменить цвет текста в html является использование тега . Он позволяет изменить цвет, размер и стиль текста. Для этого у него есть три атрибута. Синтаксис:
На странице преобразуется в следующее:
Новая версия стандарта HTML5 не поддерживает тег . Но все современные браузеры понимают и еще видимо будут долго понимать. Этот тег широко распространён в интернете. Что впрочем легко объяснить его доступностью и простотой.
Способ 2. Через атрибут style
Второй способ для изменения цвета шрифта через атрибут style, который можно применять к любым html тегам (
Синий цвет текста
Если текст не изменяет свой цвет, то можно попробовать воспользоваться инструкцией декларацией !important:
Стоит очищать кэш браузера после каждого внесения изменения в файлы стилей .css.
Способ 3. Через стили CSS
Самый лучший способ поменять цвет текста на сайте это воспользоваться возможностями CSS-таблиц. Их можно подключать в html код, изменять значения в одном месте, а внесенные поправки будут отображаться на всем проекте сразу.
Обе эти записи идентичны. Приведу значения некоторых цветов:
Таблица цветов
Ну а теперь от слов к практике?
- Заголовок напишем шрифтом Comic Sans MS, дадим крупный размер в 7 пунктов, разместим по центру и зальем красным цветом.
- Каждый куплет стихотворения раскрасим в свой цвет: первый - в синий, второй - в зеленый, ну а третий - в желтый. Причем, цвет первого куплета дадим в простом названии blue, второй и третий - в числовом эквиваленте зеленого и желтого цветов.
- Первый куплет напишем шрифтом Impact
- Размер второго куплета дадим размером в абсолютном размере 4 пункта
- Размер третьего куплета дадим в относительном размере +1 пункт
- Ну и автора задвинем в тег ADDRESS
Задача ясна? Ну тогда поехали! Открываем наш незаменимый шаблон shablon.html и вставляем туда то, что нам надо:
Листинг 10. Стихотворение
Стертые лица,
Забытые профили
И многоточий упрямая нить.
Свет разливается
И проявляется
То, что уже никогда не забыть.
Сохраним наш файл под именем "text4.html" и затем откроем этот файл в окне браузера:
Вот они, цвета радуги!
Прошу прощенья за дизайн. Вряд ли он может выдержать даже самую мягкую критику. Но, согласитесь, зато сразу стало многое понятно. Не только как правильно форматировать текст, но и то, что не нужно смешивать в одном тексте разные стили, размеры и цвета.
Вот и подошел к концу наш очередной урок. Он был не таким уж и легким, согласитесь! Но зато мы теперь знаем самое необходимое, чтобы красиво оформить любой текст.
А в следующем уроке мы научимся работать с фоном. И это будет последнее, что необходимо для нашей первой странички.
Тренировка!
Введите в форму любой текст, необходимые теги, нажмите на "посмотреть" и любуйтесь на свою работу!
Иногда нужно добавить на простенькую страницу немного цветов для лучшего восприятия информации. И сделать это не просто так, а опираясь на саму информацию.
Описание задачи
Нередко нужно еще не просто сгенерировать цвет, а сделать это предсказуемым образом. Так чтобы определённому объекту всегда соответствовал предсказуемый цвет. В случае с графиками, это полезно чтобы указать цвета в легенде рядом с основными данными. Но это может пригодиться и для подсвечивания ников в чате или еще чего-нибудь подобного.
Как можно задать цвет в css?
В css есть разные способы задать цвета. Можно использовать текстовые названия из английского языка. Например вот так:
Получим вот такой текст.
Такой способ задания цвета сложно автоматизировать. Разве что перебором массива заранее заданных цветов и запоминанием индекса нужного цвета в этом массиве. Но это плохое решение.
Можно использовать цвета rgb или rgba. С ними предыдущий пример выглядел бы вот так (я добавил еще и альфа канал в color для наглядности):
Текст будет выглядеть также.
Это более удобный вариант. Я часто его использую, в сочетании с генератором случайных чисел. Но у этого решения есть минус – сложно сделать цвет предсказуемым. Только если сохранять его где-то, но это нарушает изначальную идею о том, чтобы цвет нигде не хранился, а подбирался по заранее известному правилу.
Есть еще аналогичный вариант с цветами в формате HSL и HSLA, но он ничем не отличается от rgb.
Самый простой способ задать предсказуемый цвет
Нам поможет шестнадцатеричное (HEX) представление цвета. Оно является самым популярным в сети. С ним предыдущий пример выглядел бы вот так (чёрный я намерено не сокращал, для наглядности.):
Остаётся только получить шестнадцатеричное число. Если у ваших объектов на графике есть какое-то десятичное представление, то можно использовать php функцию dechex
Но гораздо более универсальным решением будет использовать md5 хэш от любой строки из объекта данных. Этой строкой может быть название линии, колонки, или сегмента, или её ID в базе данных и вообще что угодно (даже ник в чате). Вот как происходит генерация цвета:
Md5 хэш представляет собой последовательность из 32 шестнадцатеричных цифр. Для генерации цвета фона мы берём первые 6 символов из хэша, для основного цвета текста следующие 6 символов, и аналогично для границы снизу. Это абсолютно предсказуемый результат, который можно повторить в любом месте программы не запоминая значения этих цветов. Главное знать правило, по которому генерируется цвет (нужно не забывать описывать это правило в документации)
Мало того, необязательно сдвигать строку на 6 символов, даже если сдвинуть позицию в строке для следующего цвета на один символ, то цвет уже будет другим. Ну и для более серьёзной разницы в цветах можно использовать сокращённую запись цвета из трёх символов.
Как добавить эти цвета на страницу?
Самым простым способом добавить эти цвета на страницу будет inline css в самих тегах.
Но это некрасивый вариант, потому что такие цвета потом сложно переопределить (если вдруг это понадобится). Лучше генерировать в php тег style и добавить его на страницу.
Можно реализовать тоже самое в javascript и оттуда менять стили нужных элементов. Но это уже тема для другой записи.
Читайте также: