В этой статье мы познакомимся с возможностями HTML и CSS по смене цвета текста на страницах сайта. Будет рассмотрено несколько вариантов. Для каждого отдельного случая удобен свой конкретный способ.
Для начала отметим, что все цвета можно задавать в трех форматах:
- Название цвета (red, blue, green и т.д.)
- Шестнадцатеричный формат (#104A00, #0F0 и т.д.)
- Формат rgba (rgba(0,0,0,0.5) и т.д.)
На нашем сайте представлена полная палитра и названия html цветов для сайта, где можно выбрать подходящий цвет.
Способ 1. Через html тег
Самым простым способом изменить цвет текста в html является использование тега . Он позволяет изменить цвет, размер и стиль текста. Для этого у него есть три атрибута. Синтаксис:
На странице преобразуется в следующее
Новая версия стандарта HTML5 его не поддерживает. Но все современные браузеры понимают и еще видимо будут долго понимать. Тег font широко распространен на сайтах. Что впрочем легко объяснить его доступностью и простотой.
Способ 2. Через атрибут style
Есть второй похожий способ для изменения цвета шрифта. Для этого есть атрибут style, который можно применять к любым html тегам (
Синий цвет текста
Если текст не изменяет свой цвет, то можно попробовать воспользоваться декларацией !important
Также стоит чистить кэш браузера после каждого внесения изменения в файлы стилей .css.
Способ 3. Через стили CSS
Самый лучший способ поменять цвет текста на сайте это воспользоваться возможностями CSS-таблиц. Их можно подключать на сайт, а далее изменять значения в одном месте и внесенные поправки будут отображаться на всем сайте сразу.
Классы primer1 и primer2 можно применить к любым другим html тегам.
Если вы сами хотите сделать через теги на подобие FONT, SPAN и DIV, то здесь все очень просто, но в этом случай вам только нужно знать цвета. Вы на самом сайте можете увидеть прописные цвета, как "red, green, blue" но больше всего вам попадется 16-ричном код, который вам представлен ниже. И лучше безусловно его делать на фотошоп, как там вы просто видите курсор и смотрите какой оттенок и код автоматически появляется. Есть и скрипты оттенков, и там можно что то подобрать, но вам виднее будет.
Скрипт для использования в CSS:
Ставим его и настраиваем как вам нужно.
Но также давайте разберем такую ситуацию, что к примеру вам нужно где то в дизайн поставить красную или синее запись и здесь без тега не обойтись.
Здесь вы даже в этом случай можете использовать сам стиль и получиться так.
Оттенок цвета как #0000FF он и является является 16-ричным кодом.
Чтоб на фотошоп выбрать цвет, вам нужно зайти и открыть его, там появится #. и здесь мы видим небольшой круг, что кликом водим, и цифры и буквы меняются, это оттенок будет такой.
PS – а так кто в стилях немного понимает, он может просто найти тот кусок, который будет отвечать за гамму. Просто сайт построен на многих оттенках, и у него нет одного главного, под каждую запись идет свой оригинальный. И без всяких стилей вы в ручном режиме можете изменить.
Оформление текста на сайте
Также мы затронем, как можно оформить текст, как вам нужно, а это увеличить и уменьшить, и сделаем его также в ярких и оригинальных тонах, что на сайте безусловно может пригодиться.
Доброго времени суток!
Очень давно хотел написать эту статью, однако все никак руки не доходили. Хочу поделиться с Вами некоторыми фишками для чата. Про цветной текст думаю многие уже давно знают. Однако кроме цветного текста в чате еще есть возможность задавать некоторое форматирование, такое как жирность, курсив и т.д. А также вставлять игровые символы. Возможно в чате есть возможность использования еще каких-либо символов о которых мне не удалось узнать, поэтому если Вам известно что-то еще кроме того, что Вы увидите ниже — присылайте нам в группу в ВК.
Начнем с цветного текста. Для более лучшего восприятия я составил табличку с основными цветами и их кодами:
| Название | Цвет | Код |
| Голубой | [00FFFF] | |
| Черный | [000000] | |
| Синий | [0000FF] | |
| Фиолетовый | [FF00FF] | |
| Зеленый | [00FF00] | |
| Красный | [FF0000] | |
| Желтый | [FFFF00] |
При желании можно использовать еще и другие вариации цветов. Для этого достаточно открыть Photoshop и в палитре цветов выбрать желаемый оттенок. Или же просто воспользоваться поиском в Google. По поводу оттенков скажу сразу, что работают не все, поэтому советую не тратить свое время и пользоваться лишь основными цветами, представленными в табличке.
Теперь я думаю у Вас возникает вопрос, а каким же образом этими кодами пользоваться в чате? Все просто. Любой код в чате, будь-то код цвета, форматирования или символа прописывается в одном формате.
Например, если Вы напишите в чате:[FF00FF]Фиолетовый. То получите в результате слово «Фиолетовый» фиолетового цвета.
Теперь перейдем к кодам форматирования.
| Название | Пример | Код |
| Жирный | Жирный | [b] |
| Курсив | Курсив | [i] |
| Подчеркнутый | Подчеркнутый | [u] |
| Надстрочный | Надстрочный | [sup] |
| Подстрочный | Подстрочный | [sub] |
| Перечеркнутый | Перечеркнутый | [s] |
Коды цвета и форматирования можно комбинировать.
Например, если написать так: «[b][FF0000]Привет», то получим слово «Привет» красного цвета жирным шрифтом.
И теперь, пожалуй, самое интересное. Символы:
| Название | Код |
| Алмаз | [diamond] |
| Взрыв | [boom] |
| Дерево | [wood] |
| Еда | [food] |
| Железо | [metal] |
| Звезда | [xp] |
| Золото | [coin] |
| Кожа | [leather] |
| Корона | [crown] |
| Лес | [timber] |
| Мех | [fur] |
| Мрамор | [marble] |
| Нефть | [oil] |
| Рабочий | [work] |
| Свиток | [scrolls] |
| Сидр | [fruit] |
| Соль | [salt] |
| Сыр | [cheese] |
| Фарфор | [porcelain] |
| Чай | [tea] |
| Часы | [time] |
| Шелк | [silk] |
| Щит | [shield] |
Ниже Вы можете посмотреть как будут выглядеть некоторые символы в чате:
Принцип вставки кодов для значков такой же как и для цветного текста.
Пользуйтесь с удовольствием! Надеюсь эта статья была для Вас полезна!
