Главная страница   /   3.3. Определение встроенного стиля (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

3.3. Определение встроенного стиля

Использование атрибута style – это просто, но его можно использовать только для одного элемента. Можно использовать простое объявление стиля для каждого элемента, который вы хотите изменить, но это приводит к перегруженности кода и возможности возникновения большого числа ошибок, особенно если в код потом нужно будет вносить изменения. Более совершенным способом является использование style элемента (не путать с style атрибутом) для определения встроенного стиля и указания браузеру использовать его при помощи селектора. В листинге 3-3 показана реализация встроенного стиля.

Листинг 3-3: Определение встроенного стиля
<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
	<style>
		h2
		{
			background-color: grey;
			color: white;
		}
	</style>
</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 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>
</html>

Для встроенного стиля мы также используем объявления стилей, но теперь они заключены в фигурные скобки { } и им предшествует селектор. Представление встроенного стиля можно увидеть на рисунке 3-4.

Рисунок 3-4: Представление встроенного стиля

Заметка

Я расположил элемент style внутри элемента head, но я также мог расположить его внутри элемента body. Я предпочитаю использовать элемент head для обозначения стилей, потому что мне импонирует идея разделения содержания и метаданных.

Селекторы CSS очень важны в jQuery, поскольку они являются той базой, благодаря которой можно выбирать элементы в DOM для дальнейшей работы с ними. Селектором, который я использовал в примере, является h2. Это обозначает, что определение стиля, заключенное в фигурные скобки, будет применяться ко всем элементам h2 в документе. Как теперь выглядят элементы h2, можно увидеть на рисунке 3-5.

Рисунок 3-5: Результат применения встроенного стиля

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

Листинг 3-4: Более комплексный набор стилей в HTML документе

<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
	<script src="jquery-1.7.js" type="text/javascript"></script>
	<style>
		h1
		{
			min-width: 700px;
			border: thick double black;
			margin-left: auto;
			margin-right: auto;
			text-align: center;
			font-size: x-large;
			padding: .5em;
			color: darkgreen;
			background-image: url("border.png");
			background-size: contain;
			margin-top: 0;
		}
		.dtable
		{
			display: table;
		}
		.drow
		{
			display: table-row;
		}
		.dcell
		{
			display: table-cell;
			padding: 10px;
		}
		.dcell > *
		{
			vertical-align: middle;
		}
		input
		{
			width: 2em;
			text-align: right;
			border: thin solid black;
			padding: 2px;
		}
		label
		{
			width: 5em;
			padding-left: .5em;
			display: inline-block;
		}
		#buttonDiv
		{
			text-align: center;
		}
		#oblock
		{
			display: block;
			margin-left: auto;
			margin-right: auto;
			min-width: 700px;
		}
	</style>
</head>
<body>
	<h1>Jacqui"s Flower Shop</h1>
	<form method="post">
	<div id="oblock">
		<div class="dtable">
			<div class="drow">
				<div class="dcell">
					<img src="astor.png" /><label for="astor">Astor:</label>
					<input name="astor" value="0" required>
				</div>
				<div class="dcell">
					<img src="daffodil.png" /><label for="daffodil">Daffodil:</label>
					<input name="daffodil" value="0" required>
				</div>
				<div class="dcell">
					<img src="rose.png" /><label for="rose">Rose:</label>
					<input name="rose" value="0" required>
				</div>
			</div>
			<div class="drow">
				<div class="dcell">
					<img src="peony.png" /><label for="peony">Peony:</label>
					<input name="peony" value="0" required>
				</div>
				<div class="dcell">
					<img src="primula.png" /><label for="primula">Primula:</label>
					<input name="primula" value="0" required>
				</div>
				<div class="dcell">
					<img src="snowdrop.png" /><label for="snowdrop">Snowdrop:</label>
					<input name="snowdrop" value="0" required>
				</div>
			</div>
		</div>
	</div>
	<div id="buttonDiv">
		<button type="submit">Place Order</button></div>
	</form>
</body>
</html>

Элемент style в этом примере включает в себя несколько встроенных стилей. И некоторые из них, особенно h1, определяют значения для большого числа свойств.