Рассылка закрыта
При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.
Вы можете найти рассылки сходной тематики в Каталоге рассылок.
Самоучитель по HTML и CSS - 35
Самоучитель по HTML и CSS
Добрый день. На сайте htmlbook.ru обновился раздел с описанием атрибутов CSS — добавились псевдоэлементы, упростилась терминология, исправлены мелкие огрешности. Также стала доступна новая версия локального справочника по CSS. 5. Контекстные селекторыПри создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определенном контексте. Например, задать стиль для тега <B> только когда он располагается внутри контейнера <P>. Таким образом можно одновременно установить стиль для отдельного тега, а также для тега, который находится внутри другого. Контекстный селектор состоит из простых селекторов разделенных пробелом. Так, для селектора тега синтаксис будет следующий. Тег1 Тег2 { ... } В этом случае стиль будет применяться к Тегу2 когда он размещается внутри Тега1, как показано ниже. <Тег1> Использование контекстных селекторов продемонстрировано в примере 5.1. Пример 5.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"> P B { font-family: Times, serif; /* Семейство шрифта */ font-weight: bold; /* Жирное начертание */ color: navy; /* Синий цвет текста */ } </style> </head> <body> <div><b>Жирное начертание текста</b></div> <p><b>Одновременно жирное начертание текста и выделенное цветом</b></p> </body> </html> В данном примере показано обычное применение тега <B> и этого же тега, когда он вложен внутрь параграфа <P>. При этом меняется цвет и шрифт текста, как показано на рис. 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. Ссылки разных цветов В данном примере используется два типа ссылок. Первая ссылка, стиль которой задается с помощью селектора 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 — загружает страницу в новое окно
браузера. Пример 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"> Толщина линии и цвет подчеркивания у ссылок также задаются через атрибут border-bottom.
Copyright 2007 Влад Мержевич. По всем вопросам пишите по адресу vlad@htmlbook.ru
|
| В избранное | ||
