Приступаем к работе с CSS
Когда браузер отображает на экране элемент, он использует набор свойств, известных также как CSS свойства, чтобы определить, как должен выглядеть элемент. В листинге 3-1 показан простой HTML документ.
Листинг 3-1: Простой HTML документ
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>New Delivery Service</h1>
<h2>Color and Beauty to Your Door</h2>
<h2>(with special introductory offer)</h2>
<p>We are pleased to announce that you are starting a home delivery service for your
flower needs. You will deliver within a 20 mile radius of the store for free and
$1/mile thereafter.</p>
</body>
</html>На рисунке 3-1 видно, как браузер отображает этот документ.
Рисунок 3-1: Отображение простого HTML документа в браузере
CSS обладает огромным количеством свойств, чтобы их все можно было детально рассмотреть в данной книге, но вы сможете понять, как работает CSS, посмотрев на некоторые из свойств, которые показаны в таблице 3-1.
Таблица 3-1: Некоторые свойства CSS
| Свойство | Описание |
color |
задает элементу цвет (обычно это цвет текста) |
background-color |
задает фоновый цвет элемента |
font-size |
задает размер шрифта тексту, содержащемуся в элементе |
border |
устанавливает границы элемента |
Я не устанавливал значения для этих свойств, однако браузер все же справился с представлением контекста, и, как видно на рисунке, все элементы представлены немного по-разному. Если для свойств не указаны значения, браузеру все равно нужно с чем-то работать, поэтому для каждого элемента существует соглашение по стилям. Это обозначает, что в браузере есть набор значений по умолчанию для свойств CSS, если вы не указали эти значения. Несмотря на то, что в спецификации HTML определены стили по умолчанию, браузеры могут все же этим варьировать, и есть небольшие различия в том, как элементы отображаются по умолчанию. В таблице 3-2 показано, как стили по умолчанию использует Google Chrome.
Таблица 3-2: Некоторые свойства CSS и их значения в соглашении по стилям
| свойство | h1 | h2 | p |
color (цвет) |
black (черный) |
black (черный) |
black (черный) |
background-color (цвет фона) |
transparent (прозрачный) |
transparent (прозрачный) |
transparent (прозрачный) |
font-size (размер шрифта) |
2em |
1.5em |
16px |
border (рамка) |
none (нет) |
none (нет) |
none (нет) |
Из таблицы видно, что все три элемента имеют одинаковые значения для свойств color, background-color, и border, а различие только для свойства font-size. Далее в этой главе я расскажу, какие значения может принимать это свойство, и поясню, почему font-size измеряется в единицах em для элементов h1 и h2 , а для элемента p в px. На данный момент мы сфокусируемся на значениях свойств, а не на единицах, в которых они выражаются.
