Цвета в HTML — Как создать сайт
Способы указания цвета в языке HTML
Цвета HTML
HTML цвета и способы их указания
В языке HTML, существует два способа указать цвет:
1. С помощью имени цвета,
2. С помощью системы RGB, где цвета заданы в шестнадцатеричном формате.
Имя цвета
Имя цвета в HTML указывается английскими словами, например red или green. Имя цвета выступает в качестве значения атрибута HTML-тега. Имён цветов очень много, в этой статье мы рассмотрим лишь основные из них.
Обычно для задания цвета, в языке HTML используют два атрибута:
1. Атрибут color="имя_цвета" — цвет текста,
2. Атрибут bgcolor="имя_цвета" — цвет фона.
Примеры использования цветовых атрибутов:color="red" — назначаем тексту красный цвет,bgcolor="green" — назначаем фону зелёный цвет.
Таблица основных имён цветов HTML:
| Имя цвета | Его вид | Перевод |
|---|---|---|
| white | Белый | |
| ivory | Слоновая кость | |
| silver | Серебряный | |
| gray | Серый | |
| black | Чёрный | |
| maroon | Тёмно-бордовый | |
| red | Красный | |
| orange | Оранжевый | |
| gold | Золотой | |
| yellow | Жёлтый | |
| olive | Оливковый | |
| lime | Лайм | |
| green | Зелёный | |
| aqua | Морская волна | |
| blue | Синий | |
| navy | Нави | |
| teal | Бирюзовый | |
| fuchsia | Фуксиновый | |
| purple | Пурпурный |
Шестнадцатеричная система счисления
В повседневной жизни мы пользуемся десятичной системой счисления от 0 до 9.
Программисты и дизайнеры часто используют шестнадцатеричную систему счисления от 0 до 15, где:
10 = A11 = B12 = C13 = D14 = E15 = F
Практически каждый цвет и оттенок видимый нашему зрению можно записать в шестнадцатеричной системе, например красный цвет red (красный) в шестнадцатеричной системе будет равен ff0000
color="red" — красный цвет, по имени,color="#ff0000" — красный цвет, в шестнадцатеричной системе счисления.
В языке HTML, перед шестнадцатеричным числом, в значении атрибута ставят знак решётки #
RGB
Перед тем как начать указывать цвета в HTML с помощью шестнадцатеричной системы счисления, вам для начала нужно узнать о таком понятии как RGB
RGB — это сокращение от слов Red Green Blue (Красный Зелёный Синий).
Цвет в HTML, записанный в шестнадцатеричной системе состоит из трех блоков чисел 00 00 00, где каждый блок отвечает за один из цветов RGB, первый блок за красный цвет, второй за зелёный цвет, третий за синий цвет. Числа могут варьироваться от 00 до ff.
Где, ff — это 255 в десятичной системе счисления.
Схема RGB:
Red — от 00 до ff
Green — от 00 до ff
Blue — от 00 до ff
В итоге получаем число из шести цифр 000000, где первые два числа отвечают за красный цвет, вторые два числа отвечают за зелёный цвет, третьи два числа отвечают за синий цвет.
Если мы хотим получить красный цвет, то пишем ff0000, зелёный цвет 00ff00, синий цвет 0000ff. Например, если хотим получить тёмно красный цвет, то нужно уменьшить первый блок чисел и вместо ff (который равен в десятичной системе счисления 255), записать например 96 (который равен в десятичной системе счисления 150).
Приведём для наглядности, примеры цветов и их шестнадцатеричный код:
| Цвет | Его вид | Шестнадцатеричный код |
|---|---|---|
| Красный | #ff0000 | |
| Тёмно-красный | #960000 | |
| Зелёный | #00ff00 | |
| Тёмно-зелёный | #009600 | |
| Синий | #0000ff | |
| Тёмно-синий | #000096 | |
| Белый | #ffffff | |
| Чёрный | #000000 |
Смешиваем цвета в HTML
Если вы в школе не пропускали занятия по рисованию, то наверняка помните, что при равномерном смешивании красного и зеленого цвета можно получить жёлтый,
при добавлении к красному цвету немного зелёного можно получить оранжевый и т.д.
Цвета, заданные с помощью шестнадцатеричной системы счисления и RGB, тоже можно смешивать:
| Цвет | Его вид | Шестнадцатеричный код | Что смешали |
|---|---|---|---|
| Желтый | #ffff00 | Красный и зелёный | |
| Оранжевые оттенки | #ff8800 | Красный и немного зелёного | |
| Фиолетовый | #ff00ff | Красный и синий | |
| Фиолетовые оттенки | #8800ff | Немного красного и синий | |
| Голубой | #00aaff | Синий и немного зелёного | |
| Голубые оттенки | #0055ff | Немного зелёного и синий | |
| Серые оттенки | #aaaaaa | Равномерно смешать все три цвета |
Экспериментируя с шестнадцатеричной системой счисления и RGB, вы со временем освоитесь и сами сможете подбирать себе цвет, какой только захотите.
Программы подбора цвета
(На данный момент, сервис от Яндекса отключили, обещают скоро включить.)
В мире существуют множество программ, которые помогут вам подобрать цвет. Например, если в Яндексе набрать слово RGB, то под поиском появится виджет, в котором можно подобрать для себя цвет.
Читать далее: Единицы измерения в HTML
- Category: Разное
Дата публикации поста: 5 февраля 2016
Дата обновления поста: 16 октября 2014
Бесплатный хостинг от компании Бегет, для начинающих: beget.com/ru/hosting/free
Как установить цвет страницы HTML
Для того, чтобы изменить цветовой фон страницы применяется тег bgcolor=»#цвет». Вместо слова цвет вставляются цвета HTML модели RGB, из 3 основных цветов — красный, зеленый, синий. Каждый цвет состоит из 2 знаков от 0 до 9или букв от A до F.
Пример записи черного цвета — «#000000»,
белого — «#FFFFFF»,
красного — «#FF0000»,
зеленого — «#33CC00»,
желтого — «#FFFF00».
Что бы установить цвет фона всей страницы пишем : <body bgcolor=»#??????»> (порядок: красный/ зеленый/ синий). Тег bgcolor также вставляется в тот тег, который вы хотите изменить. Например
<tr bgcolor=»#0000FF»> или <td bgcolor=»#58F786″>.
Можно сделать фоном картинку или фото <body background=»?»> Чтобы изменить цвет текста на всей странице применяется параметр — text. Его надо вставить в тег<body text=»#FF0000″>. Если вам надо изменить цвет определенного участка текста надо применить тег <font> </font>. Запись этого будет такая<font color=»#FF0000″> текст </font>.
Если вы хотите изменить цвет гиперссылок, то этот параметр записывается так:
<body link=»#FF0000″>.Также вы можете задать цвет активной ссылки <body alink=»#цвет»> и пройденной ссылки <body vlink=»#цвет»>
Имя | Значение | Цвет |
| aliceblue | #F0F8FF | |
| antiquewhite | #FAEBD7 | |
| aquamarine | #7FFFD4 | |
| azure | #F0FFFF | |
| beige | #F5F5DC | |
| bisque | #FFE4C4 | |
| black | #000000 | |
| blanchedalmond | #FFEBCD | |
| blue | #0000FF | |
| blueviolet | #8A2BE2 | |
| brown | #A52A2A | |
| burlywood | #DEB887 | |
| cadetblue | ||
| chartreuse | #7FFF00 | |
| chocolate | #D2691E | |
| coral | #FF7F50 | |
| cornflowerblue | #6495ED | |
| cornsilk | #FFF8DC | |
| crimson | #DC143C | |
| cyan | #00FFFF | |
| darkblue | #00008B | |
| darkcyan | #008B8B | |
| darkgoldenrod | #B8860B | |
| darkgray | #A9A9A9 | |
| darkgreen | #006400 | |
| darkkhaki | #BDB76B | |
| darkmagenta | #8B008B | |
| darkolivegreen | #556B2F | |
| darkorange | #FF8C00 | |
| darkorchid | #9932CC | |
| darkred | #8B0000 | |
| darksalmon | #E9967A | |
| darkseagreen | #8FBC8F | |
| darkslateblue | #483D8B | |
| darkslategray | #2F4F4F | |
| darkturquoise | #00CED1 | |
| darkviolet | #9400D3 | |
| deeppink | #FF1493 | |
| deepskyblue | #00BFFF | |
| dimgray | #696969 | |
| dodgerblue | #1E90FF | |
| firebrick | #B22222 | |
| floralwhite | #FFFAF0 | |
| forestgreen | #228B22 | |
| fuchsia | #FF00FF | |
| gainsboro | #DCDCDC | |
| ghostwhite | #F8F8FF | |
| gold | #FFD700 | |
| goldenrod | #DAA520 | |
| gray | #808080 | |
| green | #008000 | |
| greenyellow | #ADFF2F | |
| honeydew | #F0FFF0 | |
| hotpink | #FF69B4 | |
| indianred | #CD5C5C | |
| indigo | #4B0082 | |
| ivory | #FFFFF0 | |
| khaki | #F0E68C | |
| lavender | #E6E6FA | |
| lavenderblush | #FFF0F5 | |
| lawngreen | #7CFC00 | |
| lemonchiffon | #FFFACD | |
| lightblue | #ADD8E6 | |
| lightcoral | #F08080 | |
| lightcyan | #E0FFFF | |
| lightgoldenrodyellow | #FAFAD2 | |
| lightgreen | #90EE90 | |
| lightgrey | #D3D3D3 | |
| lightpink | #FFB6C1 | |
| lightsalmon | #FFA07A | |
| lightseagreen | #20B2AA | |
| lightskyblue | #87CEFA | |
| lightslategray | #778899 | |
| lightsteelblue | #B0C4DE | |
| lightyellow | #FFFFE0 | |
| lime | #00FF00 | |
| limegreen | #32CD32 | |
| linen | #FAF0E6 | |
| magenta | #FF00FF | |
| maroon | #800000 | |
| mediumaquamarine | #66CDAA | |
| mediumblue | #0000CD | |
| mediumorchid | #BA55D3 | |
| mediumpurple | #9370DB | |
| mediumseagreen | #3CB371 | |
| mediumslateblue | #7B68EE | |
| mediumspringgreen | #00FA9A | |
| mediumturquoise | #48D1CC | |
| mediumvioletred | #C71585 | |
| midnightblue | #191970 | |
| mintcream | #F5FFFA | |
| mistyrose | #FFE4E1 | |
| moccasin | #FFE4B5 | |
| navajowhite | #FFDEAD | |
| navy | #000080 | |
| oldlace | #FDF5E6 | |
| olive | #808000 | |
| olivedrab | #6B8E23 | |
| orange | #FFA500 | |
| orangered | #FF4500 | |
| orchid | #DA70D6 | |
| palegoldenrod | #EEE8AA | |
| palegreen | #98FB98 | |
| paleturquoise | #AFEEEE | |
| palevioletred | #DB7093 | |
| papayawhip | #FFEFD5 | |
| peachpuff | #FFDAB9 | |
| peru | #CD853F | |
| pink | #FFC0CB | |
| plum | #DDA0DD | |
| powderblue | #B0E0E6 | |
| purple | #800080 | |
| red | #FF0000 | |
| rosybrown | #BC8F8F | |
| royalblue | #4169E1 | |
| saddlebrown | #8B4513 | |
| salmon | #FA8072 | |
| sandybrown | #F4A460 | |
| seagreen | #2E8B57 | |
| seashell | #FFF5EE | |
| sienna | #A0522D | |
| silver | #C0C0C0 | |
| skyblue | #87CEEB | |
| slateblue | #6A5ACD | |
| slategray | #708090 | |
| snow | #FFFAFA | |
| springgreen | #00FF7F | |
| steelblue | #4682B4 | |
| tan | #D2B48C | |
| teal | #008080 | |
| thistle | #D8BFD8 | |
| tomato | #FF6347 | |
| turquoise | #40E0D0 | |
| violet | #EE82EE | |
| wheat | #F5DEB3 | |
| white | #FFFFFF | |
| whitesmoke | #F5F5F5 | |
| yellow | #FFFF00 | |
| yellowgreen | #9ACD32 |
Как добавить цвет на веб-страницу
- Стили HTML
- HTML-ссылки
Цвета применяются к элементу HTML с помощью CSS.
Вы также можете выбрать, к какой части элемента применить цвет.
Мы только что рассмотрели различные способы применения стилей к HTML-документу. Некоторые из этих примеров включали добавление цвета в документ. Поскольку цвет является важной частью дизайна любого веб-сайта, давайте более подробно рассмотрим применение цвета к веб-странице.
Цвет переднего плана
Цвет переднего плана используется для изменения цвета текста элемента.
Цвет переднего плана определяется следующим образом: color:orange; .
Например:
Цвета HTML
Попробуйте
Цвет переднего плана также может (косвенно) влиять на цвет других частей элемента, включая его границу.
Это может быть или не быть желаемым эффектом. Однако его всегда можно переопределить, явно указав цвет затронутого свойства.
Попробуйте это
Ниже приведен пример, где указана граница вместе с ее цветом.
Удалить border-color:olivedrab; из стилей, затем нажмите Запустить , чтобы посмотреть, как изменится цвет границы.
Цвет фона
Цвет фона задается следующим образом: background-color:yellow
Например:
У меня есть цвет фона.
Попробуйте
Цвет рамки
Мы уже видели пример указания цвета границы элемента (выше). Это один из способов указания различных свойств границы.
Вы также можете указать несколько граничных свойств за один раз (вместо того, чтобы разделять их по разным объявлениям). Это можно сделать с помощью свойства ярлыка border , которое позволяет указать ширину, стиль и цвет границы в одном месте.
Вот пример:
У меня есть цвет границы.
Попробуйте
Встроенные и внешние стили
В примерах на этой странице используются встроенные стили.
Как и во всех стилях, вы также можете использовать встроенный метод или внешний метод.
Названия цветов
В приведенных выше примерах я использовал имена цветов для указания цветов.
Вы можете указать цвет по его имени (например, синий ), его шестнадцатеричному значению (например, #0000ff ), значению RGB (например, rgb(0,0,255) ) или его значение HSL (например, hsl(240,100%,100%) ).
Новичкам может быть проще задавать цвета по их названиям, так как названия цветов, вероятно, намного легче запомнить, чем другие параметры. Хотя имена цветов легче запомнить, шестнадцатеричная нотация, RGB и HSL предоставляют вам больше вариантов цвета.
Шестнадцатеричные коды цветов представляют собой комбинацию букв и цифр. Цифры идут от 0 до 9, а буквы идут от A до F. При использовании шестнадцатеричных значений цвета в HTML/CSS перед значением ставится решетка (#). Хотя шестнадцатеричные значения поначалу могут показаться немного странными, вы скоро к ним привыкнете.
Если вы используете графическое программное обеспечение, такое как Adobe Photoshop или GIMP, возможно, вы привыкли к методам RGB или HSL.
В приведенной ниже таблице показаны некоторые примеры названий цветов вместе с соответствующими им шестнадцатеричными и RGB-значениями.
| Название цвета | Шестнадцатеричный код RGB | Десятичный код RGB |
|---|---|---|
| Черный | 000000 | 0,0,0 |
| Серебро | C0C0C0 | 192 192 192 |
| Серый | 808080 | 128 128 128 |
| Белый | ФФФФФФ | 255 255 255 |
| Бордовый | 800000 | 128,0,0 |
| Красный | FF0000 | 255,0,0 |
| Название цвета | Шестнадцатеричный код RGB | Десятичный код RGB |
|---|---|---|
| Фиолетовый | 800080 | 128,0,128 |
| Фуксия | ФФ00ФФ | 255,0,255 |
| Зеленый | 008000 | 0,128,0 |
| Лайм | 00FF00 | 0,255,0 |
| Олива | 808000 | 128 128,0 |
| Желтый | FFFF00 | 255 255,0 |
| Название цвета | Шестнадцатеричный код RGB | Десятичный код RGB |
|---|---|---|
| Военно-морской флот | 000080 | 0,0,128 |
| Синий | 0000FF | 0,0,255 |
| Бирюзовый | 008080 | 0 128 128 |
| Аква | 00FFFF | 0 255 255 |
Эта таблица представляет собой небольшой образец огромного диапазона цветов, доступных в HTML.
Чтобы узнать больше, ознакомьтесь с цветовыми кодами HTML.
Вы можете придумать свои собственные цвета, просто введя любое шестизначное шестнадцатеричное значение (перед которым ставится решетка).
В следующем примере мы задаем один и тот же цвет тремя разными способами. Полученный цвет такой же.
Имя цвета
Шестнадцатеричный
Значение RGB
Попробуйте
Если бы мы хотели изменить оттенок синего на другой, мы могли бы немного изменить наше значение следующим образом:
Имя цвета
Шестнадцатеричный
Значение RGB
Попробуйте
Прозрачность
Вы также можете использовать alpha , чтобы указать уровень непрозрачности, который должен иметь цвет. Это доступно только для нотаций RGB и HSL . Для этого к функциональному обозначению нужно добавить букву «а» (например, RGBA и HSLA ).
Например, rgba(0,0,255,0.5) дает полупрозрачный синий цвет, как и hsla(240, 100%, 50%, 0,5) .
Вот пример использования RGBA для изменения непрозрачности.
Нет прозрачности
Полупрозрачность
Много прозрачности
Попробуйте
Вот пример использования HSLA для изменения прозрачности.
Нет прозрачности
Полупрозрачность
Много прозрачности
Попробуйте
Выбор цвета — простой способ
При использовании шестнадцатеричной системы счисления, RGB или HSL у вас есть выбор из более чем 16 миллионов различных цветов. Например, вы можете начать с #000000 и увеличивать на одно значение вплоть до #FFFFFF . Каждое другое значение представляет немного другой цвет.
Но не волнуйтесь — вам не нужно будет запоминать каждое шестнадцатеричное значение цвета! Палитра цветов HTML и цветовая диаграмма упрощают выбор цветов для вашего веб-сайта.
- Стили HTML
- HTML-ссылки
css — HTML: изменение цвета определенных слов в текстовой строке
спросил
Изменено 10 месяцев назад
Просмотрено 737 тысяч раз
У меня есть сообщение ниже (слегка изменено):
«Участвуйте в розыгрыше до 30 января 2011 года, и вы сможете выиграть до $$$$ — включая потрясающие летние поездки!»
Сейчас у меня есть:
форматирование текстовой строки, но вы хотите изменить цвет «30 января 2011 г.» на #FF0000 и «лето» на #0000A0.
Как это сделать только с помощью HTML или встроенного CSS?
- html
- css
- текст
- цвета
- встроенный
<р> Участвуйте в конкурсе через 30 января 2011 г.и вы можете выиграть до $$$$, включая удивительные лето поездки!
Или вместо этого вы можете использовать классы CSS:
<голова>
<тип стиля="текст/CSS">
п {
размер шрифта: 14px;
цвет:#538b01;
вес шрифта: полужирный;
стиль шрифта: курсив;
}
.дата {
цвет: #ff0000;
}
.season { /* Хорошо, немного надуманно... */
цвет: #0000a0;
}
<тело>
Участвуйте в конкурсе через
30 января 2011 г.
и вы можете выиграть до $$$$, включая удивительные
лето
поездки!
3
Вы можете использовать тег HTML5 :
Участвовать в конкурсе, 30 января 2011 г. и вы можете выиграть до $$$$, включая удивительные летние поездки!
И используйте это в CSS:
p {
размер шрифта: 14px;
цвет:#538b01;
вес шрифта: полужирный;
стиль шрифта: курсив;
}
отметка. красный {
цвет:#ff0000;
фон: нет;
}
отметка.синий {
цвет:#0000A0;
фон: нет;
}
красный {
цвет:#ff0000;
фон: нет;
}
отметка.синий {
цвет:#0000A0;
фон: нет;
}
Тег имеет цвет фона по умолчанию… по крайней мере, в Chrome.
4
<р>
Участвуйте в розыгрыше до 30 января 2011 г. и вы можете выиграть до $$$$, включая потрясающие летние поездки!
Элементы span являются встроенными, поэтому не нарушают поток абзаца, а только стиль между тегами.
использовать пролеты. пр) 30 января 2011 г.
Это какой-то текст!
Это сработало лучше всего для меня, когда я хотел изменить только одно слово в предложении на красный цвет.
3
Вы также можете сделать класс:
я в желтом цвете!!!!!!
затем в файле css сделать:
.
