Pro jQuery
Адам Фриман
Определение встроенного стиля
Использование атрибута 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
, определяют значения для большого числа свойств.