Pro jQuery

Pro jQuery

Адам Фриман

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

Вместо того, чтобы создавать одинаковый набор стилей для каждой 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. Если вы определяете два стиля с одним селектором, то важен порядок, в котором вы импортируете таблицы стилей. К элементу будет применятся та таблица стилей, которая была загружена последней.

или RSS канал: Что новенького на smarly.net