Использование встроенных значений
Наиболее простым способом установки значений для свойств 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
