8. Как осуществить задание значений свойствам селектора?
9. В каких единицах могут задаваться значения свойств?
10. Как задать множество свойств для одного селектора?
11. Что такое альтернативный выбор и как он записывается для свойств?
12. Как задаются одинаковые свойства нескольким элементам?
13. Дайте определение понятия селектора класса.
14. Как можно записать использование селектора класса для различных HTML-элементов?
15. Какой атрибут используется для указания принадлежности к определенному классу?
16. Для чего используется идентификатор?
17. Как осуществляется привязка идентификатора к элементу?
18. Перечислите способы применения таблиц стилей на web-странице.
19. Для чего предназначается встраиваемый стиль?
20. Когда можно воспользоваться внутренними стилями?
21. Для чего нужен внешний файл, содержание которого состоит из перечня стилей?
22. Как осуществляется привязка файла со стилями к отдельным web-страницам?
23. В чем состоит суть правила наследования?
24. Что такое селектор потомков и как он формируется?
25. Расскажите правило каскадирования.
26. Какие свойства используются для указания шрифта, его размера, начертания?
27. Как записать свойство для абзаца с красной строкой, красными символами на зеленом фоне и выровненному по ширине?
28. Какие свойства CSS относятся к форматированию текста?
29. Какое свойство можно применить для использования графического маркера в текстовом списке?
30. Как настроить вид маркера в списках?
31. Назовите способы задания полей отступов для объекта.
32. Какими свойствами можно задать размеры объекту?
33. Какие свойства предназначены для расположения одних объектов относительно других?
34. Как задать вид, цвет рамок и фон объекта?
35. Как создается слой в HTML-коде?
36. Что такое позиционирование и какие виды позиционирования существуют?
37. Как задается абсолютное позиционирование?
38. Понятие относительного позиционирования и способ его задания?
39. Какое стилевое свойство используется для размещения слоев на разных уровнях?
Задания для самостоятельной работы
1. Используя стили, сделайте страницу, в которой текст выводится в две колонки, как в газете. Таблицы при этом не используются. Предусмотрите использование начертания шрифта, его цвета и красную строку для абзаца.
2. Постройте на экране две области с линейками прокрутки и поместите в них информационные элементы (текст, графику). В этих областях предусмотрите зеркальные отступы, как у листов развернутой книги.
3. Подготовьте стиль абзаца «подложка» (.ground) и стиль «надпись» (.poster), создайте страницу с надписью поверх подложки. Подложка пишется очень крупными буквами мягкого светло-серого цвета. Надпись пишется красными буквами обычного размера.
4. Подготовьте стиль для абзаца, у которого слева и справа проводится вертикальная черта на всю высоту абзаца.
5. Используя свойство z-index, постройте на экране несколько перекрывающих друг друга областей. У этих областей обязательно должны быть рамки разной ширины и цвета.
6. Постройте два стиля для абзацев, в которых один абзац имеет синий фон и желтые символы, а также содержит графическое изображение, выровненное по левой стороне абзаца. Для другого абзаца: цвет символов – зеленый на желтом фоне, изображение выровнено по правой стороне абзаца. Оба абзаца имеют рамку, первый – выпуклую, второй – вогнутую.
7. Создайте стили для двух ячеек, размещенных на одном уровне по горизонтали с текстом. Для текста предусмотрен отступ от границ ячеек – 0,5 см, фон ячеек – светло-голубой, текст выровнен по ширине. Границы ячеек должны быть утопленными, цвет границ – серый.
8. Создайте таблицу, состоящую из трех строк, в каждой строке по одной ячейке. Разместите в каждой ячейке по графическому изображению с текстом, отступ от изображения до текста – 1 см. Фон и шрифт подберите самостоятельно. Создайте стиль для форматирования таблицы согласно этому заданию.
9. Создайте стиль для гиперссылок, которые оформлены в виде маркированного списка, вместо маркера используйте графическое изображение, отступ от которого до текста составляет 50 пикселов. Самостоятельно подберите цвета для использованных, активных и неактивных ссылок.
10. Создайте два стиля для двух различных таблиц. В первом предусмотрите использование в качестве фона графическое изображение, а во втором – цвет. В ячейках должны быть разные отступы текста от границ ячейки слева и справа. Цвет текста подберите в контрасте с фоном.
11. Создайте страницу, в которой одна и та же картинка выводится несколько раз со смещением вниз и вправо так, чтобы каждая следующая копия была выше на уровень предыдущей.
12. Создайте страницу, в которой одна и та же картинка выводится несколько раз со смещением вниз и вправо так, чтобы каждая следующая копия была ниже и больше предыдущей.
13. Создайте страницу, в которой при помощи смещения одной и той же картинки образовались ступеньки из картинок сверху вниз и слева направо.
14. Создайте страницу, в которой две картинки смещаются относительно друг друга в разные стороны так, чтобы следующая копия каждой картинки была выше предыдущей.
15. Используя позиционирование, создайте объемную надпись из обычного текста без картинок. Эта надпись должна быть привязана к своему месту в абзаце, подобно обычному слову.
16. Создайте страницу, на которой разместите три картинки в тексте таким образом, чтобы при изменении размера окна браузера картинки перемещались по экрану за своим местом.
6. ИСПОЛЬЗОВАНИЕ ФОРМЫ ДЛЯ СОЗДАНИЯ ИНТЕРАКТИВНОСТИ НА WEB-СТРАНИЦЕ
Каждому пользователю знакомы многочисленные элементы управления (кнопки, списки, текстовые поля, флажки, переключатели и т. д.), которые встречаются в диалоговых окнах и окнах современных приложений. На web-страницах также можно размещать подобные элементы. Объединение логически связанных элементов управления в HTML-документе называется формой.
Некоторые элементы управления, входящие в формы (например, текстовые поля и списки) похожи на поля в обычных бланках, таких, например, как бланки-заявки, накладные, расходные и приходные ордеры и т. д. Однако это справедливо лишь отчасти, так как возможности элементов управления форм значительно шире возможностей их бумажных аналогов. Формы являются наиболее популярным способом интерактивного взаимодействия во Всемирной паутине. Несмотря на то что реальная интерактивность подразумевает обработку полученных данных сервером, на этом этапе мы будем преследовать одну цель – это научиться создавать такие страницы с расчетом на то, что позже можно будет полностью реализовывать схему клиент-серверного взаимодействия.
6.1. Задание формы
В HTML для создания формы применяется контейнер <FORM> </FORM>, который может размещаться в любом месте основной части документа. Документ может содержать несколько форм, причем каждой форме должна соответствовать своя пара тегов <FORM> </FORM>. Общая схема применения контейнера следующая:
<FORM NAME="имя_формы" ACTION="URL" METHOD="метод"
ENCTYPE="тип_кодировки">
. . . .
</FORM>
NAME – атрибут, который задает имя форме. Значение этого атрибута приравнивается к имени переменной, поэтому при выборе названия нужно использовать все правила построения идентификатора. В частности, нельзя использовать в имени русские буквы и цифру в качестве первого символа.
Имена, заданные атрибутом NAME, должны быть разными внутри одной формы, но могут совпадать с именами полей других форм. Можно имя форме и не присваивать, однако оно необходимо, чтобы формой можно было манипулировать из сценария (CGI-сценарий – программа обработки данных формы на сервере). Стандарт HTML 4 рекомендует вместо NAME использовать атрибут ID, а лучше всего пользоваться двумя атрибутами – NAME и ID, присваивая им одинаковые имена для поддержки наибольшим числом браузеров.
<FORM NAME="anketa" ID="anketa">
ACTION – определяет адрес (URL), который примет и обработает данные формы. Если этот атрибут не определен, данные отправляются по адресу страницы, на которой помещена форма.
<FORM ACTION="http://www.earthwed.com/cgi-bin/s97r">
означает, что браузер установит связь с сервером www.earthwed.com и данные, записанные в форму, передаст для обработки в приложение s97r, размещенное в папке cgi-bin. Если в качестве значения атрибута ACTION указать обращение к электронной почте.
ACTION="mailto:bap@mail.ru"
Браузер автоматически отправит результаты, введенные в форму, по указанному адресу.
METHOD – указывает форме, как послать информацию соответствующей программе обработки (скрипту). Существуют два способа передачи информации: get и post.
Способ get наиболее простой, он применяется по умолчанию и осуществляет передачу данных в один этап. Этот способ оптимален в случае, когда для обработки формы не требуется какого-либо дополнительного внешнего процесса. Информация формы посылается вместе с URL.
Способ post используется, когда нужно передать большие объемы информации. Передача происходит как минимум в два этапа отдельно от URL.
<FORM METHOD="post" ACTION="http://www.earthwed.com/cgi-bin
/comment_script">
В данном примере заполненная форма способом post отправляется для обработки скриптом comment_script, расположенным в каталоге cgi-bin сервера.
ENCTYPE предназначен для определения типа данных при кодировании информации, введенной пользователем, и последующей ее передачи на web-сервер. Возможными значениями параметра могут быть: applicatiom/x-www-form-urlencoded (используется по умолчанию и передает помимо текста графику и запакованные файлы), text-plain (более подходит, когда используется URL mailto в атрибуте ACTION), multipart/form-data (подходит при отправке файлов).
<FORM ENCTYPE="multipart/form-data" METHOD="post"
ACTION="http://www.earthwed.com/cgi-bin/comment_script">
В этом примере форма отправляет содержимое файла для обработки скриптом comment_script, расположенным в каталоге cgi-bin сервера, используется способ post.