Цвета в css

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right
row-gap

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

Семейства шрифтов CSS

В CSS существует два типа имен семейств шрифтов:

• родовое семейство — группа семейств шрифтов с похожим видом (например, «засечка» или «однодисковая»)
• семейство шрифтов — конкретная семья шрифтов (например, «Times New Roman» или «Arial»)

Generic family	Font family	Описание
Serif	Times New RomanGeorgia	Шрифты с засечками имеют небольшие линии на концах на некоторых символах
Sans-serif	ArialVerdana	«Sans» означает без-эти шрифты не имеют линий на концах символов
Monospace	Courier NewLucida Console	Все одноместные символы имеют одинаковую ширину

Примечание: На компьютерных экранах шрифты без засечек считаются более удобными для чтения, чем шрифты с засечками.

Имена цветов, поддерживаемые всеми обозревателями

Все современные браузеры поддерживают следующие 140 цветовых имен (нажмите на название цвета, или шестнадцатеричное значение, чтобы увидеть цвет как фон-цвет вместе с различными цветами текста):

Color Name	HEX	Color	Shades	Mix
AliceBlue	#F0F8FF		Shades	Mix
AntiqueWhite	#FAEBD7		Shades	Mix
Aqua	#00FFFF		Shades	Mix
Aquamarine	#7FFFD4		Shades	Mix
Azure	#F0FFFF		Shades	Mix
Beige	#F5F5DC		Shades	Mix
Bisque	#FFE4C4		Shades	Mix
Black	#000000		Shades	Mix
BlanchedAlmond	#FFEBCD		Shades	Mix
Blue	#0000FF		Shades	Mix
BlueViolet	#8A2BE2		Shades	Mix
Brown	#A52A2A		Shades	Mix
BurlyWood	#DEB887		Shades	Mix
CadetBlue	#5F9EA0		Shades	Mix
Chartreuse	#7FFF00		Shades	Mix
Chocolate	#D2691E		Shades	Mix
Coral	#FF7F50		Shades	Mix
CornflowerBlue	#6495ED		Shades	Mix
Cornsilk	#FFF8DC		Shades	Mix
Crimson	#DC143C		Shades	Mix
Cyan	#00FFFF		Shades	Mix
DarkBlue	#00008B		Shades	Mix
DarkCyan	#008B8B		Shades	Mix
DarkGoldenRod	#B8860B		Shades	Mix
DarkGray	#A9A9A9		Shades	Mix
DarkGrey	#A9A9A9		Shades	Mix
DarkGreen	#006400		Shades	Mix
DarkKhaki	#BDB76B		Shades	Mix
DarkMagenta	#8B008B		Shades	Mix
DarkOliveGreen	#556B2F		Shades	Mix
DarkOrange	#FF8C00		Shades	Mix
DarkOrchid	#9932CC		Shades	Mix
DarkRed	#8B0000		Shades	Mix
DarkSalmon	#E9967A		Shades	Mix
DarkSeaGreen	#8FBC8F		Shades	Mix
DarkSlateBlue	#483D8B		Shades	Mix
DarkSlateGray	#2F4F4F		Shades	Mix
DarkSlateGrey	#2F4F4F		Shades	Mix
DarkTurquoise	#00CED1		Shades	Mix
DarkViolet	#9400D3		Shades	Mix
DeepPink	#FF1493		Shades	Mix
DeepSkyBlue	#00BFFF		Shades	Mix
DimGray	#696969		Shades	Mix
DimGrey	#696969		Shades	Mix
DodgerBlue	#1E90FF		Shades	Mix
FireBrick	#B22222		Shades	Mix
FloralWhite	#FFFAF0		Shades	Mix
ForestGreen	#228B22		Shades	Mix
Fuchsia	#FF00FF		Shades	Mix
Gainsboro	#DCDCDC		Shades	Mix
GhostWhite	#F8F8FF		Shades	Mix
Gold	#FFD700		Shades	Mix
GoldenRod	#DAA520		Shades	Mix
Gray	#808080		Shades	Mix
Grey	#808080		Shades	Mix
Green	#008000		Shades	Mix
GreenYellow	#ADFF2F		Shades	Mix
HoneyDew	#F0FFF0		Shades	Mix
HotPink	#FF69B4		Shades	Mix
IndianRed	#CD5C5C		Shades	Mix
Indigo	#4B0082		Shades	Mix
Ivory	#FFFFF0		Shades	Mix
Khaki	#F0E68C		Shades	Mix
Lavender	#E6E6FA		Shades	Mix
LavenderBlush	#FFF0F5		Shades	Mix
LawnGreen	#7CFC00		Shades	Mix
LemonChiffon	#FFFACD		Shades	Mix
LightBlue	#ADD8E6		Shades	Mix
LightCoral	#F08080		Shades	Mix
LightCyan	#E0FFFF		Shades	Mix
LightGoldenRodYellow	#FAFAD2		Shades	Mix
LightGray	#D3D3D3		Shades	Mix
LightGrey	#D3D3D3		Shades	Mix
LightGreen	#90EE90		Shades	Mix
LightPink	#FFB6C1		Shades	Mix
LightSalmon	#FFA07A		Shades	Mix
LightSeaGreen	#20B2AA		Shades	Mix
LightSkyBlue	#87CEFA		Shades	Mix
LightSlateGray	#778899		Shades	Mix
LightSlateGrey	#778899		Shades	Mix
LightSteelBlue	#B0C4DE		Shades	Mix
LightYellow	#FFFFE0		Shades	Mix
Lime	#00FF00		Shades	Mix
LimeGreen	#32CD32		Shades	Mix
Linen	#FAF0E6		Shades	Mix
Magenta	#FF00FF		Shades	Mix
Maroon	#800000		Shades	Mix
MediumAquaMarine	#66CDAA		Shades	Mix
MediumBlue	#0000CD		Shades	Mix
MediumOrchid	#BA55D3		Shades	Mix
MediumPurple	#9370DB		Shades	Mix
MediumSeaGreen	#3CB371		Shades	Mix
MediumSlateBlue	#7B68EE		Shades	Mix
MediumSpringGreen	#00FA9A		Shades	Mix
MediumTurquoise	#48D1CC		Shades	Mix
MediumVioletRed	#C71585		Shades	Mix
MidnightBlue	#191970		Shades	Mix
MintCream	#F5FFFA		Shades	Mix
MistyRose	#FFE4E1		Shades	Mix
Moccasin	#FFE4B5		Shades	Mix
NavajoWhite	#FFDEAD		Shades	Mix
Navy	#000080		Shades	Mix
OldLace	#FDF5E6		Shades	Mix
Olive	#808000		Shades	Mix
OliveDrab	#6B8E23		Shades	Mix
Orange	#FFA500		Shades	Mix
OrangeRed	#FF4500		Shades	Mix
Orchid	#DA70D6		Shades	Mix
PaleGoldenRod	#EEE8AA		Shades	Mix
PaleGreen	#98FB98		Shades	Mix
PaleTurquoise	#AFEEEE		Shades	Mix
PaleVioletRed	#DB7093		Shades	Mix
PapayaWhip	#FFEFD5		Shades	Mix
PeachPuff	#FFDAB9		Shades	Mix
Peru	#CD853F		Shades	Mix
Pink	#FFC0CB		Shades	Mix
Plum	#DDA0DD		Shades	Mix
PowderBlue	#B0E0E6		Shades	Mix
Purple	#800080		Shades	Mix
RebeccaPurple	#663399		Shades	Mix
Red	#FF0000		Shades	Mix
RosyBrown	#BC8F8F		Shades	Mix
RoyalBlue	#4169E1		Shades	Mix
SaddleBrown	#8B4513		Shades	Mix
Salmon	#FA8072		Shades	Mix
SandyBrown	#F4A460		Shades	Mix
SeaGreen	#2E8B57		Shades	Mix
SeaShell	#FFF5EE		Shades	Mix
Sienna	#A0522D		Shades	Mix
Silver	#C0C0C0		Shades	Mix
SkyBlue	#87CEEB		Shades	Mix
SlateBlue	#6A5ACD		Shades	Mix
SlateGray	#708090		Shades	Mix
SlateGrey	#708090		Shades	Mix
Snow	#FFFAFA		Shades	Mix
SpringGreen	#00FF7F		Shades	Mix
SteelBlue	#4682B4		Shades	Mix
Tan	#D2B48C		Shades	Mix
Teal	#008080		Shades	Mix
Thistle	#D8BFD8		Shades	Mix
Tomato	#FF6347		Shades	Mix
Turquoise	#40E0D0		Shades	Mix
Violet	#EE82EE		Shades	Mix
Wheat	#F5DEB3		Shades	Mix
White	#FFFFFF		Shades	Mix
WhiteSmoke	#F5F5F5		Shades	Mix
Yellow	#FFFF00		Shades	Mix
YellowGreen	#9ACD32		Shades	Mix

❮ Назад
Дальше ❯

Визуальное оформление текста в CSS

В CSS оформление текста осуществляется с помощью параметра text-decoration, который может принимать следующие значения:

• blink — мерцающий текст;
• none — значение по умолчанию, оформление отсутствует;
• overline — линия расположена над текстом;
• underline — подчеркнутый линией текст;
• line-through — текст, зачеркнутый линией;
• inherit — в данном случае text-decoration наследует значение родительского элемента.

Пример:

<a href="index.html" style="text-decoration:none">Текст ссылки</a>
<a href="index.html" style="text-decoration:overline">Текст ссылки</a>
<a href="index.html" style="text-decoration:underline">Текст ссылки</a>
<a href="index.html" style="text-decoration:line-through">Текст ссылки</a>
<a href="index.html" style="text-decoration:none">Текст ссылки</a>

В окне браузера данный пример будет выглядеть следующим образом:

Shades of Red

If you look at the color table below, you will see the result of varying
the red light from 0 to 255, while keeping the green and blue light at zero.

Click on the hexadecimal values, if you want to analyze the color in our color picker.

Red Light	HEX	RGB
	#000000	rgb(0,0,0)
	#080000	rgb(8,0,0)
	#100000	rgb(16,0,0)
	#180000	rgb(24,0,0)
	#200000	rgb(32,0,0)
	#280000	rgb(40,0,0)
	#300000	rgb(48,0,0)
	#380000	rgb(56,0,0)
	#400000	rgb(64,0,0)
	#480000	rgb(72,0,0)
	#500000	rgb(80,0,0)
	#580000	rgb(88,0,0)
	#600000	rgb(96,0,0)
	#680000	rgb(104,0,0)
	#700000	rgb(112,0,0)
	#780000	rgb(120,0,0)
	#800000	rgb(128,0,0)
	#880000	rgb(136,0,0)
	#900000	rgb(144,0,0)
	#980000	rgb(152,0,0)
	#A00000	rgb(160,0,0)
	#A80000	rgb(168,0,0)
	#B00000	rgb(176,0,0)
	#B80000	rgb(184,0,0)
	#C00000	rgb(192,0,0)
	#C80000	rgb(200,0,0)
	#D00000	rgb(208,0,0)
	#D80000	rgb(216,0,0)
	#E00000	rgb(224,0,0)
	#E80000	rgb(232,0,0)
	#F00000	rgb(240,0,0)
	#F80000	rgb(248,0,0)
	#FF0000	rgb(255,0,0)

HSL Value

In CSS, a color can be specified using hue, saturation, and lightness (HSL) in
the form:

hsl(hue, saturation, lightness)

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.

Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.

Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white

Experiment by mixing the HSL values below:

HUE

SATURATION

100%

LIGHTNESS

50%

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)

Saturation

Saturation can be described as the intensity of a color.

100% is pure color, no shades of gray

50% is 50% gray, but you can still see the color.

0% is completely gray, you can no longer see the color.

hsl(0, 100%, 50%)

hsl(0, 80%, 50%)

hsl(0, 60%, 50%)

hsl(0, 40%, 50%)

hsl(0, 20%, 50%)

hsl(0, 0%, 50%)

Lightness

The lightness of a color can be described as how much light you want to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) 100% means full lightness (white).

hsl(0, 100%, 0%)

hsl(0, 100%, 25%)

hsl(0, 100%, 50%)

hsl(0, 100%, 75%)

hsl(0, 100%, 90%)

hsl(0, 100%, 100%)

Shades of gray are often defined by setting the hue and saturation to 0, and
adjust the lightness from 0% to 100% to get darker/lighter shades:

Об этой статье

Соавтор(ы): :

Штатный редактор wikiHow

В создании этой статьи участвовала наша опытная команда редакторов и исследователей, которые проверили ее на точность и полноту. wikiHow тщательно следит за работой редакторов, чтобы гарантировать соответствие каждой статьи нашим высоким стандартам качества. Количество просмотров этой статьи: 206 490.

Категории: Программирование

English:Change Text Color in HTML

Français:changer la couleur du texte en HTML

Italiano:Cambiare Colore del Testo in HTML

Español:cambiar el color del texto en HTML

Português:Mudar a Cor do Texto em HTML

Bahasa Indonesia:Mengganti Warna Teks di HTML

Nederlands:De kleur van tekst in HTML veranderen

ไทย:เปลี่ยนสีข้อความใน HTML

العربية:تغيير لون الخط في لغة اتش تي ام ال

한국어:HTML에서 배경색깔 바꾸기

Tiếng Việt:Đổi màu văn bản trong HTML

日本語:HTMLで文字色を変更する

中文:更改HTML中的文本颜色

हिन्दी:HTML में टेक्स्ट कलर बदलें (Change Text Color in HTML)

Türkçe:HTML’de Yazı Rengi Nasıl Değiştirilir

Печать

Как изменить цвет текста в HTML с использованием CSS?

Для изменения цвета текста для определённого абзаца или слова можно присвоить ему класс, а затем в CSS файле задать для этого класса свойство color.

Выглядеть это будет так:

HTML

PHP

<p class=”color-text”>Пример текста</div>

1	<pclass=”color-text”>Примертекста<div>

CSS

PHP

.color-text {
color:#555555;
}

1 2 3

.color-text{ color#555555; }

Вместо color-text вы можете указать свой класс.

Если вам нужно изменить цвет текста для элемента на сайте у которого уже есть класс или идентификатор, то можно вычислить его название и указать в CSS.

Как вычислить класс или идентификатор рассказано в этой статье: Как определить ID и класс элемента на странице?

Если вы не хотите лезть в CSS файл чтобы внести изменения, то можно дописать CSS стили прямо в HTML коде станицы, воспользовавшись тегом <style>.

Для этого:

1. 1.Находи вверху HTML страницы тег </head>. Если ваш сайт работает на CMS, то этот фрагмент кода находится в одном из файлов шаблона. Например: header.php, head.php или что-то наподобие этого в зависимости от CMS.
2. 2.Перед строкой </head> добавляем теги <style>…</style>.

3. 3.Внутри этих тегов задаём те CSS свойства, которые нам нужны. В данном случае color:

   PHP

   <style>
   .color-text {
   color:#555555;
   }
   </style>

   1 2 3 4 5

   <style> .color-text { color#555555; } </style>

Этот способ подходит если вам нужно изменить цвет сразу для нескольких элементов на сайте.

Если же такой элемент один, то можно задать или изменить цвет текста прямо в HTML коде.

МЕНЮ

Панель иконокЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полностраничныеВкладки при наведенииВерхняя навигацияОтзывчивый верхний навигаторНавигация с иконкамиМеню поискаСтрока поискаФиксированная боковая панельАнимированные боковые панелиОтзывчивая боковая панельПолноэкранная навигация наложенияМеню Off-CanvasБоковые кнопки навигацииБоковая панель с иконкамиМеню с горизонтальной прокруткойВертикальное менюНижняя навигацияОтзывчивая нижняя навигацияГраницы навигацииМеню по правому краюСсылка меню по центруМеню равной шириныФиксированное менюСкольжение вниз по полосе прокруткиСкрыть меню при прокруткеУменьшить меню при прокруткеЛипкая навигацияНавигация на изображенияВыпадающее менюВыпадающий при кликеВыпадающее меню в навигацииВыпадающий список в боковой навигацииОтзывчивая навигация с выпадающимПодменю навигацияВсплывающее менюМега менюМобильное менюМеню занавесСвернуть боковой барСвернуть боковую панельПагинацияХлебные крошкиГруппа кнопокГруппа вертикальных кнопокЛипкий социальный барНавигация таблеткиОтзывчивый заголовок

Цвет текста в CSS

Изменить цвет текста, расположенного внутри HTML элементов можно с помощью CSS свойства color.

Способы задания могут быть следующими:

• При помощи названия цвета (например, red, green, blue, white);
• При помощи значения RGB (например, rgb(221,102,212));
• При помощи шестнадцатеричного цветового значения (например, #ff00aa).

Пример:

<html>
<head>
<title>CSS цвет</title>
</head>
<body>
<p style="color:red">Текст 1 Текст 2 Текст 2</p>
<p style="color:rgb(245,100,255)">Текст 2 Текст 2 Текст 2</p>
<p style="color:#7722aa">Текст 3 Текст 3 Текст 3</p>
</body>
</html>

Визуальное оформление, реализованное с помощью приведенного выше кода, выглядит следующим образом:

HSL значение

В HTML цвет можно задать с помощью оттенка, насыщенности и легкости (HSL) в форме:

HSL (отТенок, насыщенность, легкость)

Hue-это степень на цветном колесе от 0 до 360. 0-красный, 120-зеленый, 240-синий.

Насыщенность представляет собой процентное значение, 0% означает оттенок серого, а 100%-полный цвет.

Легкость также процент, 0% черный, 50% не является ни светлым, ни темным, 100% белый

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)

Насыщенность

Насыщенность можно описать как интенсивность цвета.

100% является чистым цветом, не оттенки серого

50% является 50% серый, но вы все еще можете увидеть цвет.

0% полностью серый, вы больше не можете видеть цвет.

hsl(0, 100%, 50%)

hsl(0, 80%, 50%)

hsl(0, 60%, 50%)

hsl(0, 40%, 50%)

hsl(0, 20%, 50%)

hsl(0, 0%, 50%)

Легкость

Легкость цвета можно описать как сколько света вы хотите дать цвет, где 0% означает отсутствие света (черный), 50% означает 50% света (ни темный, ни свет) 100% означает полную легкость (белый).

hsl(0, 100%, 0%)

hsl(0, 100%, 25%)

hsl(0, 100%, 50%)

hsl(0, 100%, 75%)

hsl(0, 100%, 90%)

hsl(0, 100%, 100%)

Оттенки серого часто определяются установкой оттенка и насыщенности в 0, и отрегулируйте легкость от 0% до 100%, чтобы получить более темные/светлые оттенки:

Параметры фонового изображения

Свойство background-image, которое мы только что рассмотрели, может быть дополнено несколькими другими, которые позволяют изменять поведение фонового изображения.

background-attachment: прикрепление фона

Свойство CSS background-attachment используется для «закрепления» фона. Полученный эффект позволяет сделать так, чтобы фон «прокручивался» вместе с текстом. Доступны два значения:

• fixed: фоновое изображение остается закрепленным;
• scroll: фоновое изображение прокручивается вместе с текстом (значение по умолчанию).

body
{
background-image: url("snow.png");
background-attachment: fixed; /* Фон остается закрепленным */
}

background-repeat: повторение фона

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

• no-repeat: фон не будет повторяться. Изображение будет размещено на странице в одном экземпляре.
• repeat-x: изображение будет повторяться только в первой строке, горизонтально.
• repeat-y: изображение будет повторяться только в первом столбце по вертикали.
• repeat: фон будет повторяться в виде мозаики (значение по умолчанию).

Пример использования:

body
{
background-image: url("sun.png");
background-repeat: no-repeat;
}

background-position: положение фона

Также можно указать позицию фонового изображения с помощью background-position. Это свойство полезно только в комбинации с background-repeat: no-repeat; (фон, который не повторяется).

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

background-position: 30px 50px;

… фон будет сдвинут на 30 пикселей левее и 50 пикселей выше. Также можно использовать следующие значения:

• top: вверху;
• bottom: внизу;
• left: слева;
• center: по центру;
• right: справа.

Их можно комбинировать. Например, чтобы разместить фоновое изображение в правом верхнем углу, нужно ввести:

background-position: top right;

Если я хочу отображать солнце в качестве фонового изображения (следующий рисунок), только один раз (no-repeat), всегда видимым (fixed) и расположенным в правом верхнем углу (top right), то следует написать следующий код фона html-страницы:

body
{
background-image: url("sun.png");
background-attachment: fixed; /* Фон остается  зафиксированным */
background-repeat: no-repeat; /* Фон не будет повторяться */
background-position: top right; /* Фон будет отображаться в правом верхнем углу */
}

Солнце в качестве фонового изображения в правом верхнем углу

Сочетание свойств

Если вы применяете к фону много свойств, то можно использовать своего рода «супер-свойство», называемое background. Его значение может сочетать в себе несколько ранее рассмотренных свойств: background-image, background -repeat, background-attachment и background-position.

Таким образом, можно написать:

body
{
background: url("sun.png") fixed no-repeat top right;
}

Это первое «супер-свойство», которое я вам показываю, но будут и другие. Вы должны знать следующее:

1. Порядок значений не важен. Можно комбинировать значения в любом порядке.
2. Не нужно вводить все значения. Поэтому, если не хотите вводить fixed, можно удалить его.

Синтаксис

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

Значение , которое масштабирует фоновое изображение в соответствующем измерении до указанного процента области расположения фона, которое определяется значением . Область расположения фона по умолчанию является областью, содержащей содержимое поля и его отступы; область также может быть изменена на содержимое или область, содержащую границы, отступы и содержимое. Если фона является , область позиционирования фона вместо этого является всей областью окна браузера, не включая область, покрытую полосами прокрутки, если они присутствуют. Отрицательные проценты не допускаются.

Значение позволяет изменять размер фонового изображения в соответствии с заданным направлением, сохраняя его пропорции.

Масштабирует картинку так, чтобы она максимально накрыла собой весь блок. Картинка при этом не обрезается, а вписывается в блок с сохранением пропорций.

Ключевое слово, обратное . Масштабирует изображение как можно больше c сохранением пропорций изображения (изображение не становится сплющенным). Когда изображение и контейнер имеют разные размеры, изображение обрезается либо влево / вправо, либо сверху / снизу.

Интерпретация возможных значений зависит от внутренних размеров изображений (ширина и высота) и внутренней пропорции (соотношение ширины и высоты). Растровое изображение всегда имеет внутренние размеры и внутреннюю пропорцию. Векторное изображение может иметь оба внутренних размера (и, следовательно, должно иметь внутреннюю пропорцию). Он также может иметь одно или не иметь внутренних размеров, и в любом случае он может иметь или не иметь внутреннюю пропорцию. Градиенты обрабатываются как изображения без внутренних размеров или внутренней пропорции.

Предупреждение: Это поведение изменилось в Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5). До этого, градиенты обрабатывались как изображения без внутренних размеров, с внутренней пропорцией, идентичной пропорции области расположения фона.

Фоновые изображения, сгенерированные из элементов с использованием (en-US) (которые фактически соответствуют элементу) в настоящее время обрабатываются как изображения с размерами элемента, или как область расположения фона, если элементом является SVG, с соответствующей внутренней пропорцией.

Предупреждение: Это не определённое в настоящее время поведение, которое заключается в том, что внутренние размеры и пропорция должны быть такими же как у элемента во всех случаях.

Визуализированный размер фонового изображения затем вычисляется следующим способом:

Если оба атрибута в  заданы и различны от :

Фоновое изображение отображается в указанном размере.

Если  содержит  или :

Изображение визуализируется с сохранением его внутренней пропорции при наибольшем размере, который содержится внутри области размещения фона или покрывает её. Если изображение не имеет внутренней пропорции, оно отображается с размером области расположения фона.

Если  установлен как  или :

Если изображение имеет оба внутренних размера, оно отображается с таким размером. Если оно не имеет внутренних размеров и внутренней пропорции, оно отображается с размером области расположения фона. Если оно не имеет размеров, но имеет пропорцию, оно отображается так, если был был бы указан . Если изображение имеет один внутренний размер и пропорцию, оно отображается с размером, определённым этим одним размером и пропорцией. Если изображение имеет один внутренний размер, но не имеет пропорцию, оно отображается с использованием внутреннего размера и соответствующим размером области позиционирования фона.

Если background-size содержит один атрибут  и один не-:

Если изображение имеет внутреннюю пропорцию, то визуализируйте его используя указанный размер, и вычислите другой размер из указанного размера и внутренней пропорции. Если изображение не имеет внутренней пропорции, используйте указанный размер для этого размера. Для другого размера, используйте соответствующее внутреннее измерение изображения, если оно есть. Если такого внутреннего размера нет, используйте соответствующий размер области расположения фона.

Обратите внимание, что изменение размера фона для векторных изображений, в которых отсутствуют внутренние размеры или пропорции, ещё не полностью реализовано во всех браузерах. Будьте осторожны, полагаясь на поведение, описанное выше, и тестируйте в нескольких браузерах (в частности, включая версии Firefox 7 или более ранней версии и Firefox 8 или более поздней версии), чтобы убедиться, что различные визуализации приемлемы

где

где

Форматы задания цветов в CSS

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

1. 1. При помощи кодового значения цвета хтмл.

Например:

color: black;

где black – это черный цвет html.

Примеры конкретных значений цветов HTML и CSS смотрите ниже.

1. 2. Задание цвета в шестнадцатеричном коде:

Например:

color: #000000;

Где #000000; — это код черного цвета.

Если значение цвета в шестнадцатеричном коде имеет 6 одинаковых цифр или букв, то его можно сократить до трёх.

Например:

#ffffff – это код белого цвета

Его можно записать так: #fff

1. 1. Задание цвета в формате rgb

Данный формат представляет собой набор трёх числовых значений от 0 до 255.

Он основывается на использовании трёх цветов, путём смешивания которых получаются все остальные  оттенки

R – (red) – числовое значение красного цвета
G – (green) – числовое зелёного
B – (blue) — числовое значение синего

В CSS это выглядит так:

сolor: rgb (0, 155, 0);

Где 0, 155, 0 – это код зелёного цвета.

Таблица, в которой представлены основные цвета ргб,  приведена ниже

1. 4. Задание цвета при помощи формата rgba

Здесь принцип использования абсолютно такой же как и в предыдущем случае, но добавляется ещё один параметр – прозрачность. То есть вы можете регулировать не только оттенок, но и его прозрачность

Например:

color: rgba (89, 107, 108, 0.5);

Где 89, 107, 108 – это ргб  код серого цвета, а 0,5 – это уровень прозрачности.

Прозрачность задаётся в виде десятичного значения от 0  до 1, где 0 – цвет совсем не виден, а 1 – цвет максимально непрозрачный

В одной из прошлых статей я писала про определение цвета на сайте. Там я давала несколько полезных инструментов по определению цветов.
Если вы её ещё не читали вот ссылка

RGB Value

In CSS, a color can be specified as an RGB value, using this formula:

rgb(red, green, blue)

Each parameter (red, green, and
blue) defines the intensity of the color between 0 and 255.

For example, rgb(255, 0, 0) is displayed as red,
because red is set to its highest value (255) and the others are
set to 0.

To display black, set all color parameters to 0, like this: rgb(0, 0, 0).

To display white, set all color parameters to 255, like
this: rgb(255, 255, 255).

Experiment by mixing the RGB values below:

RED

255

GREEN

BLUE

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

Shades of gray are often defined using equal values for all the 3 light sources: