Отправляет email-рассылки с помощью сервиса Sendsay

Самоучитель по HTML и CSS

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Октябрь 2008   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
ImHoster.net

Статистика

8.556 подписчиков
-7 за неделю
←   Все выпуски   →

Самоучитель по HTML и CSS -34


Самоучитель по HTML и CSS

Добрый день.

Напоминаю, что самоучитель HTML основанный на предыдущих выпусках нашей рассылки доступен по адресу http://htmlbook.ru/download/?id=4. На сайте htmlbook.ru также появилось несколько полезных для каждого веб-мастера файлов, в том числе справочник по тегам, по атрибутам CSS. Скачать все это можно, щелкая по картинкам в правой колонке сайта.

С сегодняшнего дня наша рассылка расширяется за счет добавления раздела, посвященного формам. Эта тема, хотя и относится к HTML, в силу разных причин одновременно и выпадет из него. Поэтому параллельно с рассказом о CSS будет вестись рассказ о добавлении и оформлении элементов форм. Можно выдавать все темы в одной рассылке или сделать разбивку по дням, чередуя по очереди рассылку с CSS и формами. Высказаться о способе выпусков рассылки лучше мне на ящик vlad@htmlbook.ru.

Сегодня продолжаем тему о синтаксисе CSS.

4. Синтаксис CSS (продолжение)

Идентификаторы

Идентификатор (называемый также «ID селектор») определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты, что позволяет управлять стилем элемента динамически.

Синтаксис использования идентификатора следующий.

#Имя идентификатора { свойство1: значение; свойство2: значение; ... }

В отличие от классов идентификаторы должны быть уникальны, иными словами, встречаться в коде документа только один раз.

Обращение к идентификатору происходит аналогично классам, но в качестве ключевого слова у тега используется параметр id, значением которого выступает имя идентификатора (пример 4.6). Символ решетки при этом уже не указывается.

Пример 4.6. Использование идентификатора

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Идентификаторы</title>
<style type="text/css">
#help {
 position: absolute; /* Абсолютное позиционирование */
 left: 160px; /* Положение элемента от левого края */
 top: 50px; /* Положение от верхнего края */
 width: 225px; /* Ширина блока */
 height: 180px; /* Высота блока */
 background: #f0f0f0; /* Цвет фона */
}
</style>
</head>

<body>
<div id="help">
Этот элемент помогает в случае, когда вы находитесь в осознании того факта, что совершенно не понимаете, кто и как вам может помочь. Именно в этот момент мы и подсказываем, что помочь вам никто не сможет.
</div>

</body>
</html>

В данном примере определяется стиль тега <DIV>, для которого указан селектор help через параметр id (рис. 4.1).

Рис. 4.1

Рис. 4.1. Результат применения идентификатора

Как и при использовании классов, идентификаторы можно применять к конкретному тегу. Синтаксис при этом будет следующий.

Тег#Имя идентификатора { свойство1: значение; свойство2: значение; ... }

Вначале указывается имя тега, затем без пробелов символ решетки и название идентификатора. В примере 4.7 показано использование идентификатора применительно к тегу <P>.

Пример 4.7. Применение идентификатора совместно с тегом

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Идентификаторы</title>
<style type="text/css">
P {
 color: green; /* Зеленый цвет текста */
 font-style: italic; /* Курсивное начертание текста */
}

P#opa {
 color: red; /* Красный цвет текста */
 border: 1px solid #666; /* Параметры рамки */
 background: #eee; /* Цвет фона */
 padding: 5px; /* Поля вокруг текста */
}
</style>
</head>
<body>

<p>Обычный параграф</p>
<p id="opa">Параграф необычный</p>

</body>
</html>

Результат данного примера показан на рис. 4.2.

Рис. 4.2

Рис. 4.2. Вид параграфов после применения стиля

В данном примере вводится стиль для тега <P> и для такого же тега, но с указанием идентификатора opa.

Использование идентификатора дает возможность изменять некоторые параметры элемента, например, делать его невидимым или видимым по желанию с помощью скриптов (пример 4.8).

Пример 4.8. Изменение видимости слоя

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Идентификаторы</title>
<style type="text/css">
#descr {
 position: relative; /* Относительное позиционирование */
 visibility: hidden; /* Прячем содержимое слоя */
}
</style>
<script type="text/javascript">
function hiddenLayer() {
document.getElementById("descr").style.visibility = "hidden";
}

function showLayer() {
document.getElementById("descr").style.visibility = "visible";
}
</script>
</head>
<body>

<table width="90%" border="0" cellspacing="0" cellpadding="4" align="center">
<tr>
<td width="20%" align="center"><a href="#" onMouseOver="showLayer()" onMouseOut="hiddenLayer()"><img src="button.gif" width="98" height="33" border="0" alt="Кнопка"></a></td>
<td>
<div id="descr">Данная эксклюзия является подмножеством астрациональных супремативных монотенных федоний кадонарного экстрафазория.</div>
</td>
</tr>
</table>

</body>
</html>

1. Формы

Формы являются одним из важных элементов любого сайта и предназначены для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению.

Любая форма характеризуется следующими параметрами.

  1. Элементы формы, которые представляют собой стандартные поля для ввода информации.
  2. Кнопку отправки данных формы на сервер (кнопка SUBMIT).
  3. Адрес программы на веб-сервере, которая будет обрабатывать содержимое данных формы.

Перед отправкой данных браузер подготавливает информацию в виде пары «имя=значение», где имя определяется параметром name тега <INPUT> или другим, допустимым в форме, а значение введено пользователем или установлено в поле формы по умолчанию. После нажатия пользователем кнопки SUBMIT, происходит запуск обработчика формы, которая получает введенную в форме информацию, а дальше делает с ней то, что предполагал разработчик. В качестве обработчика формы обычно выступает CGI-программа, заданная параметром action тега <FORM>. Аббревиатурой CGI (Common Gateway Interface, общий шлюзовый интерфейс) обозначается протокол, с помощью которого программы взаимодействуют с веб-сервером. С помощью CGI на сервере можно выполнять программы на любом языке программирования и результат их действия выводить в виде веб-страницы. Наиболее популярны следующие языки — PHP, Perl, С++.

Для указания браузеру где начинается и заканчивается форма, используется контейнер <FORM>. Между открывающим и закрывающим тегами <FORM> и </FORM> можно помещать любые необходимые теги HTML. Это позволяет добавить элементы формы в ячейки таблицы для их форматирования, а также использовать изображения. Документ может содержать несколько форм, но они не должны быть вложены одна в другую (пример 1.1).

Пример 1.1. Добавление формы в документ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Формы</title>
</head>
<body>

<form name="form1">
Здесь размещаются элементы формы 1
<input type="submit">
</form>

<form name="form2">
Здесь размещаются элементы формы 2
<input type="submit">
</form>

</body>
</html>

В данном примере показано добавление двух разных форм. При нажатии на кнопку SUBMIT данные текущей формы отправляются на сервер, а остальные формы на веб-странице никак не будут обработаны.

Рецепты CSS

Как сделать паспарту для фотографии?

Паспарту называется картонная рамка для фотографии или рисунка. Использование паспарту зрительно увеличивает изображение, привлекает к нему внимание и делает картину более эффектной. Конечно, на веб-странице нет нужды имитировать подобную рамку, поэтому паспарту в данном случае будем называть цветную прямоугольную область вокруг изображения. На рис. 1 продемонстрирована фотография с паспарту.

Рис. 1

Рис. 1. Пример паспарту

Самый быстрый метод получения результата состоит в добавлении к селектору IMG стилевых атрибутов padding и background. Атрибут padding задает пространство вокруг картинки, а background заполняет это пространство желаемым цветом. В примере 1 показано, как использовать эти стилевые атрибуты совместно с тегом <IMG>.

Пример 1. Простой способ создания паспарту

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Паспарту</title>
<style type="text/css">
IMG.passe-partout {
 padding: 30px; /* Ширина паспарту */
 background: #f0f0f0; /* Цвет фона паспарту */
 border: 2px solid #666; /* Параметры рамки */
}
</style>
</head>
<body>
 <p><img src="girl.jpg" width="200" height="293" alt="Девочка с муфтой" class="passe-partout"></p>
</body>
</html>

В данном примере вокруг фотографии добавляется паспарту серого цвета, а вокруг него устанавливается рамка толщиной два пиксела.

Плюсом приведенного метода является простота реализации, а также тот момент, что кроме тега <IMG> не требуется вводить дополнительные элементы. Достаточно для изображения указать введенный нами класс passe-partout и вокруг картинки автоматически появится паспарту. Минусы тоже имеются, так, нельзя добавить рамку вокруг самого изображения.

Copyright 2007 Влад Мержевич. По всем вопросам пишите по адресу vlad@htmlbook.ru
В избранное