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

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

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

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

← Ноябрь 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

Автор

ImHoster.net

Статистика

8.556 подписчиков
-7 за неделю

← Все выпуски →

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

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

Добрый день.

На сайте htmlbook.ru обновился раздел с описанием атрибутов CSS — добавились псевдоэлементы, упростилась терминология, исправлены мелкие огрешности. Также стала доступна новая версия локального справочника по CSS.

5. Контекстные селекторы

При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определенном контексте. Например, задать стиль для тега <B> только когда он располагается внутри контейнера <P>. Таким образом можно одновременно установить стиль для отдельного тега, а также для тега, который находится внутри другого.

Контекстный селектор состоит из простых селекторов разделенных пробелом. Так, для селектора тега синтаксис будет следующий.

Тег1 Тег2 { ... }

В этом случае стиль будет применяться к Тегу2 когда он размещается внутри Тега1, как показано ниже.

<Тег1>
<Тег2> ... </Тег2>
</Тег1>

Использование контекстных селекторов продемонстрировано в примере 5.1.

Пример 5.1. Контекстные селекторы

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

Рис. 5.1

Рис. 5.1. Оформление текста в зависимости от вложенности тегов

Замечание

Не обязательно контекстные селекторы содержат только один вложенный тег. В зависимости от ситуации допустимо применять два и более последовательно вложенных друг в друга тегов.

Более широкие возможности контекстные селекторы дают при использовании идентификаторов и классов. Это позволяет устанавливать стиль только для того элемента, который располагается внутри определенного класса, как показано в примере 5.2.

Пример 5.2. Использование классов

<!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">
A {
color: green; /* Зеленый цвет текста для всех ссылок */
}
.menu {
padding: 7px; /* Поля вокруг текста */
border: 1px solid #333; /* Параметры рамки */
background: #fc0; /* Цвет фона */
}
.menu A {
color: navy; /* Темно-синий цвет ссылок */
}
.menu A:hover {
color: red; /* Красный цвет ссылок при наведении на нее */
}
</style>
</head>
<body>

<div class="menu">
<a href="link1.html">Русская кухня</a> |
<a href="link2.html">Украинская кухня</a> |
<a href="link3.html">Кавказская кухня</a>
</div>
<p><a href="link4.html">Другие материалы по теме</a></p>

</body>
</html>

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

Рис. 5.2

Рис. 5.2. Ссылки разных цветов

В данном примере используется два типа ссылок. Первая ссылка, стиль которой задается с помощью селектора A, будет действовать на всей странице, а стиль второй ссылки (.menu A) применяется только к ссылкам внутри элемента с классом menu.

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

Формы. Параметры формы

Каждая форма характеризуется некоторыми параметрами, которые указываются в теге <FORM>. Эти параметры задают имя формы, ее обработчик и метод отправки данных на сервер, а также некоторые другие характеристики.

ACTION

Указывает обработчик, к которому обращаются данные формы при их отправке на сервер (пример 2.1). В качестве обработчика может выступать серверная программа или HTML-документ, который включает в себя серверные сценарии (например, Parser). После выполнения обработчиком действий по работе с данными формы он возвращает новый HTML-документ.

Если параметр action отсутствует, текущая страница перезагружается, возвращая все элементы формы к их значениям по умолчанию.

Пример 2.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>Параметр action</title>
</head>
<body>
<form action="http://www.htmlbook.ru/download/file.php">
<p>... </p>
</form>
</body>
</html>

В качестве обработчика можно указать также адрес электронной почты, начиная его с ключевого слова mailto. При отправке формы будет запущена почтовая программа установленная по умолчанию. В целях безопасности в браузере установлено, что отправить незаметно информацию, введенную в форме, по почте невозможно. Для корректной интерпретации данных используйте параметр enctype="text/plain" в теге <FORM> (пример 2.2).

Пример 2.2. Отправка формы на адрес электронной почты

<!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>Параметр action</title>
</head>
<body>
<form action="mailto:vlad@htmlbook.ru" enctype="text/plain">
<p>...</p>
</form>
</body>
</html>

ENCTYPE

Устанавливает тип данных отправляемых вместе с формой. Обычно устанавливать значение параметра enctype не требуется, данные вполне правильно понимаются на стороне сервера. Однако если используется поле для отправки файла (<INPUT type="file">), следует определить параметр enctype как multipart/form-data (пример 2.3). Допускается также устанавливать сразу несколько значений, разделяя их запятыми.

Пример 2.3. Изменение типа данных формы

<!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>Параметр enctype</title>
</head>
<body>
<form action="handler.php" enctype="multipart/form-data" method="post">
<p>...</p>
</form>
</body>
</html>

METHOD

Метод сообщает серверу о цели запроса. Различают два метода — GET и POST. Существуют и другие методы, но они пока мало используются.

GET

Этот метод является одним из самых распространенных и предназначен для получения требуемой информации и передачи данных в адресной строке. Пары «имя=значение» присоединяются в этом случае к адресу после вопросительного знака и разделяются между собой амперсандом (символ &). Удобство использования метода GET заключается в том, что адрес со всеми параметрами можно использовать неоднократно, сохранив его, например, в «Избранное» браузера, а также менять значения параметров прямо в адресной строке.

POST

Метод POST посылает на сервер данные в запросе браузера. Это позволяет отправлять большее количество данных, чем доступно методу GET, поскольку у него установлено ограничение в 4 Кб. Большие объемы данных используются в форумах, почтовых службах, заполнении базы данных и т.д. (пример 2.4).

Пример 2.4. Использование метода POST

<!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>Параметр method</title>
</head>
<body>
<form action="handler.php" method="post">
<p>...</p>
</form>
</body>
</html>

TARGET

После того, как обработчик формы получает данные, он возвращает результат в виде HTML-документа. Вы можете определить окно, в которое будет загружаться итоговая веб-страница. Для этого используется параметр target, в качестве его значения используется имя окна или фрейма. Если параметр target не установлен, возвращаемый результат показывается в текущем окне.

В качестве аргумента используется имя окна или фрейма, заданное параметром name. Если установлено несуществующее имя, то будет открыто новое окно. Зарезервированные имена следующие (пример 2.5).

_blank — загружает страницу в новое окно браузера.
_self — загружает страницу в текущее окно.
_parent — загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self.
_top — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _self.

Пример 2.5. Открытие результатов обработчика формы в новом окне

<!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>Параметр target</title>
</head>
<body>
<form action="handler.php" target="_blank">
<p>...</p>
</form>
</body>
</html>

Рецепты CSS

Как добавить пунктирное подчеркивание к ссылкам?

Пунктирное подчеркивание у ссылок в последнее время стало стандартом оформления ссылок, щелчок по которым не открывает ссылку, а выполняет некоторое действие в текущем документе. Активное использование технологии AJAX, когда страница обновляется без ее перезагрузки, привело к новому виду ссылок, которые отличаются от обычных ссылок пунктирной линией.

Для создания линии следует использовать атрибут border-bottom со значением dashed, добавляя его к селектору A. Чтобы подчеркивание применялось не ко всем ссылкам, следует указать уникальный класс, назовем его, например dot. Также необходимо убрать исходное подчеркивание у ссылок с помощью атрибута text-decoration со значением none.

Пример

<!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">
A.dot {
text-decoration: none; /* Убираем подчеркивание */
border-bottom: 1px dashed #000080; /* Добавляем свою линию */
}
A.dot:hover {
color: #f00000; /* Цвет ссылки при наведении на нее курсора */
}
</style>
</head>
<body>
<p><a href="link.html">Обычная ссылка</a> на другую страницу.</p>
<p><a href="#" class="dot">Ссылка с пунктирным подчеркиванием</a>.</p>
</body>
</html>

Толщина линии и цвет подчеркивания у ссылок также задаются через атрибут border-bottom.

В избранное