currentColor

Ключевое слово currentColor соответствует значению свойства color для текущего элемента. Это позволяет использовать значение цвета для свойств, которые не получают его по умолчанию.

<!DOCTYPE html>
<html>
	<head>
		<title>currentColor</title>
		<meta charset="utf-8">
		<style>
			div {
				background: #f0f0f0; /* Цвет фона */
				color: #3b4d81; /* Синий цвет текста */
				padding: 10px; /* Поля вокруг текста */
				border: 1px solid; /* Параметры тени */
				border-radius: 5px; /* Радиус скругления уголков */
				box-shadow: 0 0 5px currentColor; /* Параметры тени */
				transition: 1s; /* Переход */
			}
			div:hover {
				color: #009d4b; /* Зелёный цвет текста */
			}
		</style>
	</head>
	<body>
		<div>Ваш браузер поддерживает currentColor.</div>
	</body>
</html>

В данном примере значение currentColor применяется для установки цвета тени у блока. Цвет рамки явно не указан, поскольку он по умолчанию задаётся таким же, как и значение color. При наведении указателя на блок, цвет текста, рамки и тени меняется на зелёный.

inherit

Ключевое слово, которое сообщает, что необходимо наследовать значение свойства у родительского элемента. Естественно, результат будет заметен только в том случае, если у родителя указанное свойство установлено.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>inherit</title>
		<style>
			div {
				border: 1px solid green;
				padding: 10px;
			}
			p {
				border: inherit;
				padding: inherit;
			}
		</style>
	</head>
	<body>
		<div><p>Внимание, запрашиваемая страница не найдена!</p></div>
	</body>
</html>

initial

Значение initial применяется для установки исходного значения свойства. Может пригодиться в нескольких случаях, к примеру, восстановить значения свойств, заданных браузером по умолчанию или задать начальное значение свойства, измененное в результате наследования.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>initial</title>
		<style>
			h2 {
				color: #ffb734;
				font-family: Arial, sans-serif;
			}
			p {
				color: green;
			}
			.initial {
				color: initial;
				font-family: initial;
			}
		</style>
	</head>
	<body>
		<h2>Метод случайных чисел</h2>
		<p>
			Разделим пустыню на <span class="initial">ряд элементарных
		   	прямоугольников</span>, размер которых совпадает с размером
			клетки для льва. После чего перебираем полученные прямоугольники,
			каждый раз выбирая заданную область случайным образом.
			Если в данной области окажется лев, то мы поймаем его, накрыв клеткой.
		</p>
		<h2 class="initial">Метод Гаусса</h2>
	</body>
</html>

unset

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>unset</title>
		<style>
			* {
				margin: unset;
				padding: unset;
				border: unset;
			}
		</style>
	</head>
	<body>
		<h1>Заголовок</h1>
		<p>Внимание, запрашиваемая страница не найдена!</p>
	</body>
</html>

url

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Добавление фона</title>
		<style>
			body {
				background: url("https://alishoff.com/media/images/blog.jpg") no-repeat;
			}
		</style>
	</head>
	<body>
		<div>Внимание, запрашиваемая страница не найдена!</div>
	</body>
</html>

time

Задаёт время в секундах или миллисекундах. Значение состоит из целого или дробного числа, за которым сразу же следует символ s для секунд или ms для миллисекунд. Пробел после числа недопустим. Для преобразования единиц помните, что 1s = 1000ms.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Загрузка...</title>
		<style>
			.loading {
				width: 240px;
				margin: auto;
				padding: 20px 0 10px;
				background: #333;
				color: #fff;
				text-align: center;
			}
			.spin {
				display: inline-block;
				width: 30px;
				height: 30px;
				border: 10px solid #ccc;
				border-right: 10px solid transparent;
				border-radius: 30px;
				animation: spin 2s linear 0s infinite normal; /* Анимация */
			}
			/* Задаём вращение */
			@keyframes spin {
				from {
					transform: rotate(0deg);
				}
				to {
					transform: rotate(360deg);
				}
			}
		</style>
	</head>
	<body>
		<div class="loading">
			<div class="spin"></div>
			<p>Загружается...</p>
		</div>
	</body>
</html>

percent

Процентная запись обычно применяется в тех случаях, когда надо изменить значение относительно родительского элемента или когда размеры зависят от внешних условий. Так, ширина таблицы 100% означает, что она будет подстраиваться под размеры окна браузера и меняться вместе с шириной окна.

Допускается указывать дробное значение, например 50.3%.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Ширина в процентах</title>
		<style>
			table {
				width: 100%; /* Ширина таблицы в процентах */
				background: #f0f0f0; /* Цвет фона */
			}
		</style>
	</head>
	<body>
		<table>
			<tr><td>Содержимое таблицы</td></tr>
		</table>
	</body>
</html>

size

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

- Относительные единицы

Относительные единицы обычно используют для работы с текстом:

  • em - Размер шрифта текущего элемента;
  • ex - Высота символа x;
  • ch - Ширина символа 0 текущего элемента;
  • rem - Размер шрифта корневого элемента;

Единица em это изменяемое значение, которое зависит от размера шрифта текущего элемента (размер устанавливается через стилевое свойство font-size). В каждом браузере заложен размер текста, применяемый в том случае, когда этот размер явно не задан. Поэтому изначально 1em равен размеру шрифта, заданного в браузере по умолчанию или размеру шрифта родительского элемента. Процентная запись идентична em, в том смысле, что значения 1em и 100% равны.

Единица ex определяется как высота символа «x» в нижнем регистре. На ex распространяются те же правила, что и для em, а именно, он привязан к размеру шрифта, заданного в браузере по умолчанию, или к размеру шрифта родительского элемента.

Единица ch равна ширине символа «0» для текущего элемента и подобно em зависит от размера шрифта.

Разница между em и rem следующая. em зависит от размера шрифта родителя элемента и меняется вместе с ним, а rem привязан к корневому элементу, т. е. размеру шрифта заданного для элемента html.

Также есть группа относительных единиц привязанных к размеру области просмотра браузера:

  • vw - 1% от ширины области просмотра;
  • vh - 1% от высоты области просмотра;
  • vmin - 1% от меньшего значения из ширины и высоты области просмотра;
  • vmax - Определяется, что больше, значение ширины или высоты области просмотра и от него вычисляется 1%;

- Абсолютные единицы

Абсолютные единицы представляют собой физические размеры - дюймы, сантиметры, миллиметры, пункты, пики, а также пиксели. Для устройств с низким dpi (количество точек приходящихся на один дюйм, определяет плотность точек) привязка идёт к пикселю. В этом случае один дюйм равен 96 пикселям. Очевидно, что реальный дюйм не будет совпадать с дюймом на таком устройстве. На устройствах с высоким dpi реальный дюйм совпадает с дюймом на экране, поэтому размер пикселя вычисляется как 1/96 от дюйма. Основные абсолютные единицы:

  • px - Пиксель;
  • in - Дюйм (1 дюйм равен 2,54 см);
  • cm - Сантиметр;
  • mm - Миллиметр;
  • pt - Пункт (1 пункт равен 1/72 дюйма);
  • pc - Пика (1 пика равна 12 пунктам);

При установке размеров обязательно указывайте единицы измерения, например width: 30px. В противном случае браузер не сможет показать желаемый результат, поскольку не понимает, какой размер вам требуется. Единицы не добавляются только при нулевом значении (margin: 0).

string

Любые строки необходимо брать в двойные или одинарные кавычки. Если внутри строки требуется оставить одну или несколько кавычек, то можно комбинировать типы кавычек или добавить перед кавычкой обратную косую черту.

Свойство: 'первая "строка"'
Свойство: "первая 'строка'"
Свойство: "первая \"строка\""

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Строка</title>
		<style>
			.new::after {
				content: " обновлено";
				color: #ff0000;
			}
		</style>
	</head>
	<body>
		<p class="new">
			DEL используется для выделения текста, который был удалён в новой версии документа.
		</p>
	</body>
</html>

angle

Задаёт угол наклона или поворота. Положительное значение отмеряется по часовой стрелке, отрицательное против часовой стрелки.

Угол может задаваться в следующих единицах:

  • В градусах. После значения пишется deg. Полный круг равен 360deg;
  • В градах. Обозначается как grad. Полный круг равен 400grad;
  • В радианах. Обозначается как rad. Полный круг равен 2PI или примерно 6.2832rad;
  • В поворотах. Обозначается как turn. Один круг равен одному повороту и пишется как 1turn;

filter

Фильтр - это функция, которая позволяет изменять вид изображения, применяя к нему разные эффекты, вроде контрастности, яркости, преобразования в чёрно-белую картинку и др.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Фильтр</title>
		<style>
			.sepia {
				filter: sepia(1);
				transition: 2s;
			}
			.sepia:hover {
				filter: sepia(0);
			}
		</style>
	</head>
	<body>
		<img src="https://alishoff.com/uploads/5d7246541ed9f.jpg" alt="" class="sepia">
		<img src="https://alishoff.com/uploads/5d7246541ed9f.jpg" alt="" class="sepia">
	</body>
</html>

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

color

Цвет в стилях можно задавать разными способами: по шестнадцатеричному значению, по названию, в формате RGB, RGBA, HSL, HSLA.

- По шестнадцатеричному значению

Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трёх цветов - красный, зелёный и синий - может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних - зелёную, а два последних - синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00.

- По названию

Браузеры поддерживают некоторые цвета по их названию. Например: white, silver, gray, black, red, orange...

- С помощью RGB

Можно определить цвет, используя значения красной, зелёной и синей составляющей в десятичном исчислении. Каждая из трёх компонент цвета принимает значение от 0 до 255. Также допустимо задавать цвет в процентном отношении, при этом 100% будет соответствовать числу 255. Вначале указывается ключевое слово rgb, а затем в скобках, через запятую указываются компоненты цвета, например rgb(255, 128, 128) или rgb(100%, 50%, 50%).

- RGBA

Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 - непрозрачности, а промежуточное значение вроде 0.5 - полупрозрачности.

- HSL

Название формата HSL образовано от сочетания первых букв Hue (оттенок), Saturate (насыщенность) и Lightness (светлота). Оттенок это значение цвета на цветовом круге и задаётся в градусах. 0° соответствует красному цвету, 120° - зелёному, а 240° - синему. Значение оттенка может изменяться от 0 до 359.

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

Светлота задает, насколько цвет яркий и указывается в процентах от 0% до 100%. Малые значения делают цвет темнее, а высокие светлее, крайние значения 0% и 100% соответствуют чёрному и белому цвету.

- HSLA

Формат HSLA похож по синтаксису на HSL, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 - непрозрачности, а промежуточное значение вроде 0.5 - полупрозрачности.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Цвета</title>
		<style>
			body {
				background-color: #F9F2E3;
			}
			h2 {
				background-color: rgb(214, 86, 43);
				color: rgba(255, 255, 255, .9);
				padding: 10px;
			}
			p {
				color: green;
			}
			div {
				background-color: hsl(60, 100%, 25%);
				color: hsla(120, 100%, 50%, .5);
			}
		</style>
	</head>
	<body>
		<h2>Предупреждение</h2>
		<p>
			Все перечисленные на сайте методы ловли льва являются теоретическими
			и базируются на вычислительных методах. Авторы не гарантируют вашей
			безопасности при их использовании и снимают с себя всякую
			ответственность за результат. Помните, лев это хищник и
			опасное животное!
		</p>
		<div>Арррргх!</div>
	</body>
</html>

number

Значением может выступать целое число, содержащее цифры от 0 до 9 и десятичная дробь, в которой целая и десятичная часть разделяются точкой. Если число начинается с нуля, то его можно опустить (.5 вместо 0.5).