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