Главная страница   /   3.2. Использование встроенных значений (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

3.2. Использование встроенных значений

Наиболее простым способом установки значений для свойств CSS является использование свойства style того элемента, внешний вид которого вы хотите изменить. В листинге 3-2 показано, как это можно сделать.

Листинг 3-2: Использование атрибута style для назначения CSS свойства элементу
<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
</head>
<body>
	<h1>New Delivery Service</h1>
	<h2 style="background-color: grey; color: white">Color and Beauty to Your Door</h2>
	<h2>(with special introductory offer)</h2>
	<p>We are pleased to announce that we are starting a home delivery service for your
		flower needs. We will deliver within a 20 mile radius of the store for free and
		$1/mile thereafter.</p>
</body>

В этом примере я использовал объявление стиля для определения значений двух свойств CSS. Как выглядят значения атрибута, можно увидеть на рисунке 3-2.

Рисунок 3-2: Свойства атрибута style

Каждое объявление стиля включает в себя название свойства, которое вы хотите изменить, и значение, которое вы будете использовать, разделенные двоеточием (:). Можно объединить в блок несколько объявлений стиля, разделяя их точкой с запятой (;). В нашем примере я назначил свойству background-color значение grey, а свойству color значение white. Эти значения определены только для свойств атрибута style конкретного элемента h2, поэтому они будут применяться только для этого элемента (другие элементы в документе остаются неизменными, даже если это также элементы h2). Результат этих изменений для первого элемента h2 можно увидеть на рисунке 3-3.

Рисунок 3-3: Изменение свойств CSS для атрибута style элемента h2