Главная страница   /   3.1. Приступаем к работе с CSS (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

3.1. Приступаем к работе с 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. На данный момент мы сфокусируемся на значениях свойств, а не на единицах, в которых они выражаются.