Цвет в css: Применение цвета к HTML-элементам с помощью CSS — CSS

Предопределённые цвета HTML и CSS

• A B C D F G H I K L M N O P R S T V W Y
• Все
• Стандартные

Предопределённые цвета HTML и CSS — это 140 цветов (17 стандартных и 123 дополнительных), которые определены в спецификации; также их ещё называют «зарезервированными».

Предопределённые цвета можно использовать через их шестнадцатеричные коды или их собственные имена.

Использование имени цвета не гарантирует одинаковое его отображение во всех браузерах, так как цвет может иметь разные оттенки в силу того, что разработчики браузеров — разные люди.

Регистр написания шестнадцатеричного кода и имени цвета значения не имеет: #FF0000 = #Ff0000 = #ff0000
Red = rEd = red

Все

#	Имя	Шестнадцатеричный код	Цвет
1	AliceBlue	#f0f8ff
2	AntiqueWhite	#faebd7
3	Aqua	#00ffff
4	Aquamarine	#7fffd4
5	Azure	#f0ffff
6	Beige	#f5f5dc
7	Bisque	#ffe4c4
8	Black	#000000
9	BlanchedAlmond	#ffebcd
10	Blue	#0000ff
11	BlueViolet	#8a2be2
12	Brown	#a52a2a
13	BurlyWood	#deb887
14	CadetBlue	#5f9ea0
15	Chartreuse	#7fff00
16	Chocolate	#d2691e
17	Coral	#ff7f50
18	CornflowerBlue	#6495ed
19	Cornsilk	#fff8dc
20	Crimson	#dc143c
21	Cyan	#00ffff
22	DarkBlue	#00008b
23	DarkCyan	#008b8b
24	DarkGoldenRod	#b8860b
25	DarkGray	#a9a9a9
26	DarkGreen	#006400
27	DarkKhaki	#bdb76b
28	DarkMagenta	#8b008b
29	DarkOliveGreen	#556b2f
30	DarkOrange	#ff8c00
31	DarkOrchid	#9932cc
32	DarkRed	#8b0000
33	DarkSalmon	#e9967a
34	DarkSeaGreen	#8fbc8f
35	DarkSlateBlue	#483d8b
36	DarkSlateGray	#2f4f4f
37	DarkTurquoise	#00ced1
38	DarkViolet	#9400d3
39	DeepPink	#ff1493
40	DeepSkyBlue	#00bfff
41	DimGray	#696969
42	DodgerBlue	#1e90ff
43	FireBrick	#b22222
44	FloralWhite	#fffaf0
45	ForestGreen	#228b22
46	Fuchsia	#ff00ff
47	Gainsboro	#dcdcdc
48	GhostWhite	#f8f8ff
49	Gold	#ffd700
50	GoldenRod	#daa520
51	Gray	#808080
52	Green	#008000
53	GreenYellow	#adff2f
54	HoneyDew	#f0fff0
55	HotPink	#ff69b4
56	IndianRed	#cd5c5c
57	Indigo	#4b0082
58	Ivory	#fffff0
59	Khaki	#f0e68c
60	Lavender	#e6e6fa
61	LavenderBlush	#fff0f5
62	LawnGreen	#7cfc00
63	LemonChiffon	#fffacd
64	LightBlue	#add8e6
65	LightCoral	#f08080
66	LightCyan	#e0ffff
67	LightGoldenRodYellow	#fafad2
68	LightGray	#d3d3d3
69	LightGreen	#90ee90
70	LightPink	#ffb6c1
71	LightSalmon	#ffa07a
72	LightSeaGreen	#20b2aa
73	LightSkyBlue	#87cefa
74	LightSlateGray	#778899
75	LightSteelBlue	#b0c4de
76	LightYellow	#ffffe0
77	Lime	#00ff00
78	LimeGreen	#32cd32
79	Linen	#faf0e6
80	Magenta	#ff00ff
81	Maroon	#800000
82	MediumAquaMarine	#66cdaa
83	MediumBlue	#0000cd
84	MediumOrchid	#ba55d3
85	MediumPurple	#9370db
86	MediumSeaGreen	#3cb371
87	MediumSlateBlue	#7b68ee
88	MediumSpringGreen	#00fa9a
89	MediumTurquoise	#48d1cc
90	MediumVioletRed	#c71585
91	MidnightBlue	#191970
92	MintCream	#f5fffa
93	MistyRose	#ffe4e1
94	Moccasin	#ffe4b5
95	NavajoWhite	#ffdead
96	Navy	#000080
97	OldLace	#fdf5e6
98	Olive	#808000
99	OliveDrab	#6b8e23
100	Orange	#ffa500
101	OrangeRed	#ff4500
102	Orchid	#da70d6
103	PaleGoldenRod	#eee8aa
104	PaleGreen	#98fb98
105	PaleTurquoise	#afeeee
106	PaleVioletRed	#db7093
107	PapayaWhip	#ffefd5
108	PeachPuff	#ffdab9
109	Peru	#cd853f
110	Pink	#ffc0cb
111	Plum	#dda0dd
112	PowderBlue	#b0e0e6
113	Purple	#800080
114	Red	#ff0000
115	RosyBrown	#bc8f8f
116	RoyalBlue	#4169e1
117	SaddleBrown	#8b4513
118	Salmon	#fa8072
119	SandyBrown	#f4a460
120	SeaGreen	#2e8b57
121	SeaShell	#fff5ee
122	Sienna	#a0522d
123	Silver	#c0c0c0
124	SkyBlue	#87ceeb
125	SlateBlue	#6a5acd
126	SlateGray	#708090
127	Snow	#fffafa
128	SpringGreen	#00ff7f
129	SteelBlue	#4682b4
130	Tan	#d2b48c
131	Teal	#008080
132	Thistle	#d8bfd8
133	Tomato	#ff6347
134	Turquoise	#40e0d0
135	Violet	#ee82ee
136	Wheat	#f5deb3
137	White	#ffffff
138	WhiteSmoke	#f5f5f5
139	Yellow	#ffff00
140	YellowGreen	#9acd32

Стандартные

#	Имя	Шестнадцатеричный код	Цвет
1	Aqua	#00ffff
2	Black	#000000
3	Blue	#0000ff
4	Fuchsia	#ff00ff
5	Gray	#808080
6	Green	#008000
7	Lime	#00ff00
8	Maroon	#800000
9	Navy	#000080
10	Olive	#808000
11	Orange	#ffa500
12	Purple	#800080
13	Red	#ff0000
14	Silver	#c0c0c0
15	Teal	#008080
16	White	#ffffff
17	Yellow	#ffff00

• CSS Color Module Level 3
• HTML Color Names
• Веб-цвета
• Цвета HTML
• Шестнадцатеричная система счисления

01. 04.2014

свойство css :: руководство cssdot.ru

Cвойство color определяет цвет текста элемента. Дополнительно, это свойство используется чтобы косвенно установить значение ключевого слова (currentColor) для любых других свойств, которые принимают цветовые значения. Если ключевое слово ‘currentColor’ используется, чтобы установить цвет непосредственно для свойства ‘color’, то оно трактуется как наследование цвета, т.е: ‘color: inherit’.

Допустимые значения

• Численное представление цветов
  • CSS2 CSS3 RGB формат — rgb(r, g, b)
    • шестнадцатиричная запись — #RRGGBB
    • шестнадцатиричная запись (сокращенная) — #RGB
  • CSS3 RGBa формат — rgba(r, g, b, a)
  • CSS3 HSL формат — hsl(h, s, l)
  • CSS3 HSLa формат — hsla(h, s, l, a)
• Ключевые слова
  • CSS3 currentColor —
  • CSS2 CSS3 transparent — полностью прозрачный цвет, сокращенная запись для прозрачного черного rgba(0,0,0,0).
• Именованные цвета
  • CSS2 CSS3 Базовые названия цветов: aqua, black, blue, fuchsia, gray (серый), green (зеленый), lime (лайм), maroon (темно-бордовый), navy (темно-синий), olive (оливковый), purple (фиолетовый), red (красный), silver (серебряный), teal (зеленовато-голубой), white (белый), и yellow (желтый))
  • CSS3 Расширенные названия цветов: aliceblue, antiquewhite, aqua, aquamarine, azure, beige, bisque, black, blanchedalmond, blue, blueviolet, brown, burlywood, cadetblue, chartreuse, chocolate, coral, cornflowerblue, cornsilk, crimson, cyan, darkblue, darkcyan, darkgoldenrod, darkgray, darkgreen, darkgrey, darkkhaki, darkmagenta, darkolivegreen, darkorange, darkorchid, darkred, darksalmon, darkseagreen, darkslateblue, darkslategray, darkslategrey, darkturquoise, darkviolet, deeppink, deepskyblue, dimgray, dimgrey, dodgerblue, firebrick, floralwhite, forestgreen, fuchsia, gainsboro, ghostwhite, gold, goldenrod, gray, green, greenyellow, grey, honeydew, hotpink, indianred, indigo, ivory, khaki, lavender, lavenderblush, lawngreen, lemonchiffon, lightblue, lightcoral, lightcyan, lightgoldenrodyellow, lightgray, lightgreen, lightgrey, lightpink, lightsalmon, lightseagreen, lightskyblue, lightslategray, lightslategrey, lightsteelblue, lightyellow, lime, limegreen, linen, magenta, maroon, mediumaquamarine, mediumblue, mediumorchid, mediumpurple, mediumseagreen, mediumslateblue, mediumspringgreen, mediumturquoise, mediumvioletred, midnightblue, mintcream, mistyrose, moccasin, navajowhite, navy, oldlace, olive, olivedrab, orange, orangered, orchid, palegoldenrod, palegreen, paleturquoise, palevioletred, papayawhip, peachpuff, peru, pink, plum, powderblue, purple, red, rosybrown, royalblue, saddlebrown, salmon, sandybrown, seagreen, seashell, sienna, silver, skyblue, slateblue, slategray, slategrey, snow, springgreen, steelblue, tan, teal, thistle, tomato, turquoise, violet, wheat, white, whitesmoke, yellow, yellowgreen
  • CSS2 CSS3 Системные цвета: ActiveBorder, ActiveCaption, AppWorkspace, Background, ButtonFace, ButtonHighlight, ButtonShadow, ButtonText, CaptionText, GrayText, Highlight, HighlightText, InactiveBorder, InactiveCaption, InactiveCaptionText, InfoBackground, InfoText, Menu, MenuText, Scrollbar, ThreeDDarkShadow, ThreeDFace, ThreeDHighlight, ThreeDLightShadow, ThreeDShadow, Window, WindowFrame, WindowText
  • Системные цвета (браузеры на движке Gecko): -moz-ButtonDefault, -moz-ButtonHoverFace, -moz-ButtonHoverText, -moz-CellHighlight, -moz-CellHighlightText, -moz-Combobox, -moz-ComboboxText, -moz-Dialog, -moz-DialogText, -moz-dragtargetzone, -moz-EvenTreeRow, -moz-Field, -moz-FieldText, -moz-html-CellHighlight, -moz-html-CellHighlightText, -moz-mac-accentdarkestshadow, -moz-mac-accentdarkshadow, -moz-mac-accentface, -moz-mac-accentlightesthighlight, -moz-mac-accentlightshadow, -moz-mac-accentregularhighlight, -moz-mac-accentregularshadow, -moz-mac-chrome-active, -moz-mac-chrome-inactive, -moz-mac-focusring, -moz-mac-menuselect, -moz-mac-menushadow, -moz-mac-menutextselect, -moz-MenuHover, -moz-MenuHoverText, -moz-MenuBarText, -moz-MenuBarHoverText, -moz-nativehyperlinktext, -moz-OddTreeRow, -moz-win-communicationstext, -moz-win-mediatext
  • Системные цвета (браузеры на движке WebKit): -webkit-activelink, -webkit-focus-ring-color, -webkit-link, -webkit-text

Свойство color относится к спецификации CSS, применяется к всем элементам, и действует на всех визуальные носителях, его значение наследуется от родительского элемента в иерархии документа, и по умолчанию принимает значение по спецификации CSS уровень 2.

1, и ‘currentColor’ по спецификации CSS уровень 3. На данный момент свойство поддерживается во всех основных браузерах.

Смотри также:

• Спецификация стандарта CSS 2.1
• Спецификация стандарта CSS 3
• Описание на Mozilla Developer Network
• Описание на Microsoft Developer Network
• Описание на Safari Developer Library

Краткое описание

Синтаксис:

<color> | inherit

По умолчанию:

‘currentColor’

Применяется к:

всем элементам

Наследование:

не наследуется

Тип носителя:

визуальные

Объектная модель документа (DOM):

[элемент].style.color

Кроссбраузерная совместимость

Internet Explorer

Firefox

Chrome

Safari

Opera

Лучшее руководство по пониманию цветов CSS в 2021 году

CSS или каскадная таблица стилей — это язык таблицы стилей, который используется для описания презентационной семантики HTML-документа.

В частности, как разработчик, он помогает вам создать свой веб-сайт в соответствии с тем, как вы хотите, чтобы он выглядел. В этом уроке вы изучите формат цветов CSS.

Цвета CSS

CSS использует значения цвета для указания цветов. Обычно свойство color используется для установки цвета фона или шрифта на странице. Вы также можете использовать это свойство для цвета границы и других декоративных элементов.

Имя встроенного цвета

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

Шестнадцатеричное значение

Шестнадцатеричный код представляет собой шестизначное представление цвета. Он обозначается символом # , за которым следуют шесть символов в диапазоне от 0 до F. Первые две цифры шестнадцатеричного значения обозначают значение цвета, красный (RR). Следующие две цифры в последовательности значений относятся к значению цвета: зеленый (GG), за которыми следуют последние 2 цифры, обозначающие значение синего (BB) цвета.

Значение RGB

Формат RGB — это сокращенная форма для красного, зеленого и синего цветов. Мы указываем значение цвета с помощью свойства rgb(). Значение цвета может быть любым целым числом от 0 до. 255. Это может быть и процент.

Примечание: Все браузеры не поддерживают свойство цвета rgb(), поэтому не рекомендуется его использовать.

Синтаксис: rgb(R, G, B)

Формат RGBA

Формат RGBA аналогичен формату RGB, за исключением того, что RGBA содержит букву A (альфа), указывающую прозрачность элемента.

Синтаксис: rgba (R,G,B,A)

ХСЛ

HSL — это краткая форма Hue, Saturation, Lightness. Давайте разберемся с каждым термином.

Оттенок:

Его можно определить как степень на цветовом круге в диапазоне от 0 до 360, где ноль представлен красным цветом, 120 — зеленым, а 240 — синим.

Насыщенность: Значение насыщенности в процентах. 100% означает, что цвет будет полностью насыщенным, то есть без оттенков серого.

Легкость: Яркость также в процентах. 0% черный, 100% белый.

Синтаксис: цвет(H,S,L)

HEX и RGB значения некоторых цветов

Давайте посмотрим список встроенных цветов вместе с их значениями HEX и RGB.

Название цвета	Шестнадцатеричное значение	Значение RGB
Красный	#FF0000	RGB(255,0,0)
Зеленый	#008000	RGB(0,128,0)
Желтый	#FFFF00	RGB(255,255,0)
Оранжевый	#FFA500	RGB(255,165,0)
Синий	#0000FF	RGB(0,0,255)
Черный	#000000	RGB(0,0,0)
серый	#808080	RGB(128 128 128)

Пример

Этот пример поможет вам понять, как можно добавлять значения цвета.

Получите навыки работы с HTML5 и CSS3 с помощью магистерской программы Full Stack Java Developer. Нажмите, чтобы узнать подробности программы!

Заключение

В этой статье мы узнали о различных способах добавления значений цвета на страницу. Мы видели свойства HEX, RGB и RGBA в примере. Убедитесь, что вы используете свойство, которое поддерживается всеми браузерами.

Начните свой путь ускоренного карьерного роста в качестве разработчика программного обеспечения с этой программой последипломного образования в области веб-разработки полного стека в сотрудничестве с Caltech CTME. Всего за 9 месяцев этот курс предложит вам глубокие знания о современных методах кодирования с интенсивной программой в стиле Bootcamp и поможет вам со всем, что вам нужно, чтобы стать полноценным технологом в любой точке мира.

Если у вас есть какие-либо вопросы или вы хотите поделиться отзывом об этой статье о цветах CSS, не стесняйтесь обращаться к нам, разместив их в разделе комментариев к статье ниже. Наши малые и средние предприятия рассмотрят и ответят в ближайшее время.

html — изменить цвет выбранного элемента с помощью CSS

спросил 7 лет, 1 месяц назад

Изменено 1 год, 4 месяца назад

Просмотрено 8к раз

У меня есть список предметов. Пользователь может выбрать элемент, щелкнув его. Я хочу изменить цвет выбранного элемента с помощью CSS. Предположим, пользователь нажал на элемент1, тогда элемент1 станет красным. Теперь, если пользователь нажмет на элемент 2, элемент 2 станет красным. Мой HTML-код:

 

  
элемент1
  
элемент2
  
элемент 3
 

• html
• css

Добавление tabindex к каждому элементу li позволяет применить псевдокласс :focus :

 li:focus {
  красный цвет;
  контур: нет;
} 

 <ул>
  
элемент 1
  
элемент 2
  
элемент 3
 Вы можете сделать это, используя только CSS, используя псевдоселектор :focus:
 ли:фокус{
  красный цвет;
  контур: нет;
}
 
 Это требует, чтобы элементы были фокусируемыми. Добавление индекса вкладок, вероятно, подходит для того, что вы делаете, и будет работать.
 <ул>
  
элемент1
  
элемент2
  
элемент 3

 
 вот ответ о том, какие элементы получают фокус:
Какие элементы HTML могут получать фокус?
 
 Вы можете превратить элемент в кнопку.
 удалить стиль кнопки по умолчанию:
 онлайн: нет;
граница: нет;
фон: нет;
 
, затем примените обычную кнопку :focus или :active селекторы.
 Вот пример:
 HTML:
 test1
тест2
тест3
 
 CSS:
 кнопка{
  ширина: 100 пикселей;
  высота: 100 пикселей;
  фон: светло-серый;
  контур: нет;
  граница: нет;
}
кнопка: наведите {
  красный цвет;
  курсор: указатель;
}
кнопка:фокус, кнопка:активный{
  цвет фона: розовый;
  белый цвет;
}
 
 вот codepen для этого: https://codepen.