Главная страница   /   3.4. Определение внешней таблицы стилей (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

3.4. Определение внешней таблицы стилей

Вместо того, чтобы создавать одинаковый набор стилей для каждой HTML страницы, можно создать отдельную таблицу стилей. Это отдельный файл с расширением .css, в котором расположены стили. В листинге 3-5 показано содержание файла styles.css, в котором я разместил стили документа для цветочного магазина.

Листинг 3-5: Файл styles.css

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. Нужно просто назначить селектор и объявить стили напрямую. Затем нужно использовать элемент link, чтобы присоединить стили к документу, как показано в листинге 3-6.

Листинг 3-6: Импортирование внешней таблицы стилей

<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
	<script src="jquery-1.7.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="styles.css" />
</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>

Вы можете присоединить столько таблиц стилей, сколько нужно, для каждой используя элемент link. Если вы определяете два стиля с одним селектором, то важен порядок, в котором вы импортируете таблицы стилей. К элементу будет применятся та таблица стилей, которая была загружена последней.