- High Star
- Таблица цветов
- Изменение цвета шрифта в CSS. Коды цветов HTML и CSS
- Навигация по статье:
- Как задать цвет шрифта css?
- Форматы задания цветов в CSS
- Таблица значений основных цветов HTML, RGB и в шестнадцатеричном коде
- Инструмент для определения значений цветов онлайн
- Код зеленых букв в html
- Коды цветов в HTML. Основы HTML для начинающих. Урок №11
- Как изменить цвет текста HTML и CSS
- Способ 2. Через атрибут style
- Способ 3. Через стили CSS
High Star
А можно ли сделать текст цветным? Да ради бога! Для этого существует атрибут . Вот с этим колером мы сейчас и поработаем. Вообще, цвета можно задавать двумя разными способами. Первый — можно использовать словесное обозначение цвета: blue, black, yellow, green, white и т.д. А можно — и их цифровое обозначение, только не забывайте перед цифровым эквивалентом ставить «решетку» — «#»! Так, цвет blue (голубой) имеет свое числовое значение #0000ff, цвет red (красный) — значение #FF0000 и так далее. То есть если мы напишем:
Обе эти записи идентичны. Приведу значения некоторых цветов:
Таблица цветов
Название цвета | Color | Код | Цвет |
---|---|---|---|
aква | Aqua | #00FFFF | |
Черный | black | #000000 | |
Синий | blue | #0000FF | |
Фуксия | fuchsia | #FF00FF | |
Серый | gray | #808080 | |
Зеленый | green | #008000 | |
Известь | lime | #00FF00 | |
Темно-бордовый | maroon | #800000 | |
Темно-синий | navy | #000080 | |
Оливковый | olive | #808000 | |
фиолетовый | purple | #800080 | |
Красный | red | #FF0000 | |
Серебряный | silver | #C0C0C0 | |
Чирок | teal | #008080 | |
Белый | white | #FFFFFF | |
желтый | yellow | #FFFF00 |
Ну а теперь от слов к практике?
- Заголовок напишем шрифтом Comic Sans MS, дадим крупный размер в 7 пунктов, разместим по центру и зальем красным цветом.
- Каждый куплет стихотворения раскрасим в свой цвет: первый — в синий, второй — в зеленый, ну а третий — в желтый. Причем, цвет первого куплета дадим в простом названии blue, второй и третий — в числовом эквиваленте зеленого и желтого цветов.
- Первый куплет напишем шрифтом Impact
- Размер второго куплета дадим размером в абсолютном размере 4 пункта
- Размер третьего куплета дадим в относительном размере +1 пункт
- Ну и автора задвинем в тег ADDRESS
Это не сложно
Это не важно
Просто отважно
В небо шагнуть
И осторожно
Там, где возможно
Темного облака
Край отогнуть.
Стертые лица,
Забытые профили
И многоточий упрямая нить.
Свет разливается
И проявляется
То, что уже никогда не забыть.
Сохраним наш файл под именем «text4.html» и затем откроем этот файл в окне браузера:
Вот они, цвета радуги! Прошу прощенья за дизайн. Вряд ли он может выдержать даже самую мягкую критику. Но, согласитесь, зато сразу стало многое понятно. Не только как правильно форматировать текст, но и то, что не нужно смешивать в одном тексте разные стили, размеры и цвета. Вот и подошел к концу наш очередной урок. Он был не таким уж и легким, согласитесь! Но зато мы теперь знаем самое необходимое, чтобы красиво оформить любой текст. А в следующем уроке мы научимся работать с фоном. И это будет последнее, что необходимо для нашей первой странички.
Изменение цвета шрифта в CSS. Коды цветов HTML и CSS
В данной статье я бы хотела более подробно рассказать про то как задать цвет шрифта в css и рассказать про основные форматы задания и коды цветов CSS и HTML.
Навигация по статье:
Данные коды цветов вы можете использовать как для задания цвета шрифта, так и фона для сайта, рамок и других элементов дизайна.
Как задать цвет шрифта css?
Для этого вы можете воспользоваться специальным CSS-свойством color
Где вместо black указывается значение цвета для шрифта текста.
Более подробно о значении цветов в CSS и их форматах я распишу ниже
Так же обратите внимание, что если внутри блока текст находится в теге абзаца, или ссылки или span, то цвет шрифта к нему может не примениться, в этом случае нужно будет в CSS задавать цвет шрифта конкретно для этого элемента.
Форматы задания цветов в CSS
Все цвета шрифта вы можете задавать в различных форматах. Вот наиболее распространённые:
где black – это черный цвет html.
Примеры конкретных значений цветов HTML и CSS смотрите ниже.
Где #000000; — это код черного цвета.
Если значение цвета в шестнадцатеричном коде имеет 6 одинаковых цифр или букв, то его можно сократить до трёх.
#ffffff – это код белого цвета
Его можно записать так: #fff
Данный формат представляет собой набор трёх числовых значений от 0 до 255.
Он основывается на использовании трёх цветов, путём смешивания которых получаются все остальные оттенки
R – (red) – числовое значение красного цвета
G – (green) – числовое зелёного
B – (blue) — числовое значение синего
Где 0, 155, 0 – это код зелёного цвета.
Таблица, в которой представлены основные цвета ргб, приведена ниже
Здесь принцип использования абсолютно такой же как и в предыдущем случае, но добавляется ещё один параметр – прозрачность. То есть вы можете регулировать не только оттенок, но и его прозрачность
Где 89, 107, 108 – это ргб код серого цвета, а 0,5 – это уровень прозрачности.
Прозрачность задаётся в виде десятичного значения от 0 до 1, где 0 – цвет совсем не виден, а 1 – цвет максимально непрозрачный
В одной из прошлых статей я писала про определение цвета на сайте. Там я давала несколько полезных инструментов по определению цветов.
Если вы её ещё не читали вот ссылка
Таблица значений основных цветов HTML, RGB и в шестнадцатеричном коде
Название | Цвет HTML | Шестнадцатеричный код | Цвет в формате RGB |
Чёрный | black | #000000 | 0, 0, 0 |
Серый | gray | #8A8A8A | 138, 138, 138 |
Светло-серый | silver | #C7C7C7 | 199, 199, 199 |
Белый | white | #FFFFFF | 255, 255, 255 |
Красный | red | #FF0D0D | 255, 0, 0 |
Розовый | fuchsia | #FF24FF | 255, 36, 255 |
Сиреневый | purple | #B300B3 | 179, 0, 179 |
Синий | blue | #0909FF | 0, 0, 255 |
Голубой | aqua | #15FFFF | 20, 255, 255 |
Зелёный | green | #009B00 | 0, 155, 0 |
Салатовый | lime | #05FF05 | 5, 255, 5 |
Жёлтый | yellow | #FFFF04 | 255, 255, 4 |
Оранжевый | orange | #FFAD15 | 255, 173, 21 |
Инструмент для определения значений цветов онлайн
Так же если значений этих цветов вам будет недостаточно, то можно воспользоваться специальным инструментом для подбора цветов для сайта.
Код зеленых букв в html
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, WordPress, Bootstrap
Коды цветов в HTML. Основы HTML для начинающих. Урок №11
Всем привет!
Продолжаем изучать основы HTML.
В этом уроке я вкратце покажу, как менять цвет текста, и в конце урока вы найдете таблицу цветов для HTML, которые вы сможете использовать для своих веб страниц.
Цвет в оформлении веб страниц, да и вообще в любой дизайнерской сфере, играет большую роль. Удачно подобранный цвет на сайте поможет создать приятную атмосферу.
Для того, чтобы поменять цвет текста, мы используем атрибут «color» для тега «font» (об этом я уже говорил в статье » Форматирование текста » ) :
Раньше в HTML, чтобы задать цвет тексту, мы использовали только названия цветов, т.е. прописывали их словами:
- Red (красный)
- Orange (оранжевый)
- Yellow (желтый)
- Green (зеленый)
- Blue (голубой)
- Indigo (синий)
- Violet (сиреневый)
- Purple (фиолетовый)
- Pink (розовый)
- Silver (серебряный)
- Gold (золотой)
- Beige (бежевый)
- Brown (коричневый)
- Gray (серый)
- Black (черный)
- White (белый)
красный оранжевый желтый зеленый голубой синий сиреневый фиолетовый розовый серебряный золотой бежевый коричневый серый черный белый
красный оранжевый желтый зеленый голубой синий сиреневый фиолетовый розовый серебряный золотой бежевый коричневый серый черный белый
Благодаря кодам, вы сможете получить массу различных цветов и оттенков.
Если использовать код цвета, то достаточно поставить в атрибуте «color» решетку «#», а потом код цвета:
Если вы хотите сделать красный немножко потемнее , тогда используйте другой код:
Результат: красный красный
○ Где брать код цвета?
Вы можете смотреть в таблицу цветов для html, выбирать подходящий цвет, копировать его код и вставлять на веб страницу. Ничего сложного .
А можно цвет кода выводить самому. Нужно только знать, что цвет задаётся в шестнадцатеричной системе счисления (цифры от «0» до «9» и латинские буквы от «a» до «f»).
Не знаю как вам, но мне проще знать кода основных цветов, а если нужны оттенки, я иду за помощью к своей таблице.
Как изменить цвет текста HTML и CSS
В этой статье мы познакомимся с возможностями HTML и CSS по смене цвета текста на страницах сайта. Будет рассмотрено несколько вариантов. Для каждого отдельного случая удобен свой конкретный способ.
Для начала отметим, что цвета можно задавать в трех форматах:
- Название цвета (red, blue, green, . );
- Шестнадцатеричный формат (#104A00, #0F0, . );
- Формат rgba (rgba(0,0,0,0.5), . );
На нашем сайте представлена полная палитра и названия html цветов для сайта, где можно выбрать подходящий цвет.
Способ 1. Через html тег
font [color value">Цвет"] [face value">Шрифт"] [size value">Размер"]>
html> body> Обычный шрифт font color css">blue">Синий шрифт/font> font color css">red" size css">4">Красный шрифт большего размера/font> /body> /html>
На странице преобразуется в следующее:
Новая версия стандарта HTML5 не поддерживает тег . Но все современные браузеры понимают и еще видимо будут долго понимать. Этот тег широко распространён в интернете. Что впрочем легко объяснить его доступностью и простотой.
Способ 2. Через атрибут style
html> body> p style css">color:#0000FF">Синий цвет текста/p> div style css">color:#00FF00">Зеленый цвет текста/div> /body> /html>
Если текст не изменяет свой цвет, то можно попробовать воспользоваться инструкцией декларацией !important:
p style css">color:#0000FF;!important">Синий цвет текста/p>
Стоит очищать кэш браузера после каждого внесения изменения в файлы стилей .css.
Способ 3. Через стили CSS
Самый лучший способ поменять цвет текста на сайте это воспользоваться возможностями CSS-таблиц. Их можно подключать в html код, изменять значения в одном месте, а внесенные поправки будут отображаться на всем проекте сразу.
html> head> style> .primer1< color: #FF00AA; > .primer2< color: #5511AA; > /style> /head> body> div class css">primer1">Пример №1. Значение color:#FF00AA;/div> div class css">primer2">Пример №2. Значение color:#5511AA;/div> /body> /html>
Классы primer1 и primer2 можно применить к любым другим html тегам.