Опубликовано: 14.11.2010 Последняя правка: 08.12.2015

Значения и единицы измерения CSS

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

Ключевые слова CSS

Ключевые слова — это определенная последовательность символов латинского алфавита с возможным добавлением дефиса (-) в качестве разделителя. Как правило данные значения являются осмысленными словами английского языка, по которым можно понять суть действия ключевого слова.

Пример использования ключевых слов в CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Ключевые слова CSS</title>
  <style type="text/css">
   p {
    font-family: sans-serif; /* гарнитура рубленного шрифта */
    display: inline; /* делаем параграфы элементами уровня строки */
   }
  </style>
 </head>
 <body>
  <p>Параграф 1</p>
  <p>Параграф 2</p>
 </body>
</html>

Результат в браузере

Параграф 1

Параграф 2

Числовые значения CSS

Значениями свойств в данном случае могут быть целые или дробные числа, состоящие из арабских цифр (0-9). Если число дробное — оно записывается с точкой, а не с запятой. Кроме этого числа могут быть положительными или отрицательными, в случае отрицательных значений перед числом ставится знак минус (-). Далеко не все свойства CSS могут иметь отрицательные или дробные значения.

Пример использования чисел в качестве значений

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Числовые значения CSS</title>
  <style type="text/css">
   p {
    font-weight: 700; /* жирность шрифта параграфов */
   }
  </style>
 </head>
 <body>
  <p>Параграф.</p>
 </body>
</html>

Результат в браузере

Параграф.

Размеры CSS

Размеры CSS — отрицательные или положительные целые или дробные числа, после которых обязательно указываются единицы измерения (исключение составляет ноль (0), для него единицы измерения указывать не обязательно). Единицы измерения, а, соответственно, и размеры могут быть относительными или абсолютными. Относительные размеры всегда зависят от каких-то дополнительных факторов, например разрешения экрана монитора пользователя. Абсолютные размеры не зависят ни от чего и всегда неизменны.

Относительные размеры CSS
Единицы измерения	Описание	Пример
em	Исчисляется в размерах шрифта данного элемента (font-size), где 1em как раз и соответствует размеру шрифта.	margin: -7em;
ex	Высота строчной буквы «x» шрифта данного элемента.	padding: 1.3ex;
px	Пиксели. Измеряется в пикселях монитора компьютера или другого визуального устройства. Пиксель — это самая маленькая точка на мониторе высчитываемая исходя его разрешения.	left: -150px;

Абсолютные размеры CSS
Единицы измерения	Описание	Пример
cm	Сантиметры.	width: 9.5cm;
mm	Миллиметры.	height: 223mm;
in	Дюймы. 1 дюйм равен 2.54 сантиметра.	bottom: -2in;
pt	Пункты. 1 пункт равен 1/72 дюйма.	font-size: 18pt;
pc	Пики. 1 пика равна 12 пунктам.	min-width: 2.7pc;

Пример указания размеров в CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Размеры CSS</title>
  <style type="text/css">
   p {
    width: 300px; /* ширина параграфа 300 пикселей */
    height: 3em; /* его высота - три размера шрифта */
    background: #ccffcc; /* фоновый цвет */
   }
  </style>
 </head>
 <body>
  <p>Параграф.</p>
 </body>
</html>

Результат в браузере

Параграф.

Помните и никогда не забывайте о том, что размеры в CSS (в отличие от HTML) всегда пишутся с указанием единиц измерения, как показано в примере. Ошибки, когда например вместо 150px пишут просто 150 являются самыми распространенными среди новичков, поэтому давайте-ка не будем пополнять их ряды, хорошо? :)

Проценты

Процентные значения в CSS записываются также, как в HTML — это целые или дробные положительные или отрицательные числа со знаком процента (%) на конце. Проценты тоже являются относительными единицами измерения, так как всегда зависят от какого-то другого значения, которое приравнивается к 100%.

Пример использования процентов в CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Проценты CSS</title>
  <style type="text/css">
   body {
    width: 400px; /* ширина элемента BODY */
   }
   p {
    width: 50%; /* ширина параграфа */
    background: #ccffff; /* фоновый цвет */
   }
  </style>
 </head>
 <body>
  <p>Ширина этого параграфа равна половине ширины элемента BODY, а именно 200px.</p>
 </body>
</html>

Результат в браузере

Ширина этого параграфа равна половине ширины элемента BODY, а именно 200px.

Текстовые строки

Текст в CSS должен быть обязательно заключен в служебные двойные (" ") или одинарные (' ') кавычки, причем, если внутри текста используются двойные кавычки, то служебные должны быть одинарными и наоборот ('Агентство "ВИА" сообщает').

Если же вы все-таки хотите указать внутри текста такие же кавычки, как и служебные — вам поможет символ обратного слеша (\). Дело в том, что если обратный слеш ставится перед кавычкой, то он отменяет ее действие в качестве служебной ('Агентство \'ВИА\' сообщает'). Причем, обратный слеш в таком случае не будет отображен на странице, а будут выведены только сами кавычки.

Адреса файлов (URL)

URL — это уникальный адрес каждого документа в интернете. Как вы знаете из HTML, адреса могут быть относительными или абсолютными, в CSS используются они же. Для добавления адреса применяется конструкция url(адрес). Сам адрес можно брать в двойные или одинарные кавычки, хотя и не обязательно.

Ожидается, что в будущем появится еще один определитель ресурса — URN, который в соединении с URL получит название URI.

Пример указания адресов в CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Адреса в CSS</title>
  <style type="text/css">
   ul {
    list-style-image: url('image/home.png'); /* картинка для маркеров списка */
   }
  </style>
 </head>
 <body>
  <ul>
   <li>Ниф-Ниф</li>
   <li>Нуф-Нуф</li>
   <li>Наф-Наф</li>
  </ul>
 </body>
</html>

Результат в браузере

Ниф-Ниф
Нуф-Нуф
Наф-Наф

Цвета в CSS

Цвет в CSS можно указывать несколькими способами: по имени цвета, по HEX-коду, в формате RGB.

Имя цвета — Многие цвета имеют имена, которые браузеры понимают, например: red, green, blue.
HEX-код цвета — Шестнадцатеричное значение цвета, перед которым ставится знак решетка (#). Каждый HEX-код состоит из трех пар: первая пара отвечает за красный цвет, вторая — за зеленый, третья — за синий, например: #CC9966 или #996699.
Цвет в формате RGB — Цвет в десятичном формате, он начинается с аббревиатуры RGB, после которой в скобках, через запятую, указываются три значения. Здесь тоже первое число отвечает за красный цвет, второе — за зеленый, третье — за синий, например: RGB(153, 204, 51).

Пример указания цвета в CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Указание цвета</title>
 </head>
 <body>
  <p style="color: red">Параграф 1</p>
  <p style="color: #008000">Параграф 2</p>
  <p style="color: rgb(0,0,255)">Параграф 3</p>
 </body>
</html>

Результат в браузере

Параграф 1

Параграф 2

Параграф 3

Значения по умолчанию

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

Базовый синтаксис

← Содержание →

Комментарии в CSS