Задание стиля для одной web-страницы.

а) создайте или возьмите готовую web-страницу, в которой содержатся три абзаца, размеченные тегом < P >. Создайте таблицу стилей для web-страницы. Для этого используйте тег < STYLE type =«text/css»> < /STYLE >, записанный в заголовочную часть страницы, внутрь этого тега запишите новый сформированный стиль для абзаца. В этом стиле вы должны предусмотреть выравнивание текста по ширине, отступ слева – 2 см, отступ справа – 1 см, красная строка – 1, 25 см. Для этого используйте свойства: margin-left, margin-right, text-indent. Затем в каждом абзаце укажите использование данного стиля атрибутом CLASS. Сохраните этот файл под именем st03.htm и просмотрите в браузере.

б) возьмите готовую исходную web-страницу с тремя абзацами. В заголовочной части страницы создайте таблицу стилей, используя тег < STYLE type =" text/css" > < /STYLE>. Внутри него запишите два стиля, которые смогут принадлежать любым тегам (используйте правило CSS .класс {свойства}). Для первого стиля задайте цвет текста коричневый на светло-сером фоне, выровненный по левому краю. Задайте рамку для текста темно-серого цвета, текст должен быть выпуклым. Расстояние между содержимым и рамкой элемента должно составлять 0, 5 см. Используемые свойства для первого стиля: color, background-color, text-align, border-color, border-style, margin. Для второго стиля цвет фона текста сделайте бирюзовым, поля слева и справа от текста – по 1 см. Используйте семейство рубленых шрифтов. Используемые свойства для второго стиля: color, margin-left, margin-right, font-family. Сохраните этот файл под именем st04.htm и просмотрите в браузере.

3. Задание для создания внешнего стиля, используемого для нескольких страниц. Возьмите готовую исходную web-страницу с тремя абзацами. Добавьте туда графическое изображение. Далее откройте текстовый редактор «Блокнот» и создайте внешний табличный стиль, состоящий из двух классов-стилей. Первый сделайте для графического элемента < IMG> следующим образом: установите рамку, размер элемента должен быть равен половине окна браузера (независимо от его размера), чтобы он был расположен у левого края окна, а остальные элементы страницы «обтекали» бы его справа. Используемые свойства для первого стиля: border-style, width, heigh, margin-left, clear. Второй – для абзаца, который отображается курсивом, размер шрифта измените на больший, цвет установите синий. Используемые свойства для второго стиля: font-style, font-size, color. Сохраните этот файл со стилями под именем style05.css. Теперь вернитесь к web-странице. После заголовочной части и перед тегом < BODY > сделайте ссылку на стилевой файл, т. е. вставьте строку < LINK REL=" styleshee" t TYPE=" text/cs" s HREF=" путь до файла" >, где в качестве «пути до файла» запишите имя вашего файлаstyle05.css. Затем сохраните вашу web-страницу в файле под именем st05.htm и просмотрите в браузере.

Контрольные вопросы и задания

1. Дайте определение понятия «стиль».

2. Как расшифровывается CSS?

3. Какие преимущества дает использование CSS?

4. Что собой представляет CSS?

5. Из чего состоит правило таблицы стилей?

6. Что вы можете назвать селектором?

7. Как выглядит свойство селектора?

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. Какое стилевое свойство используется для размещения слоев на разных уровнях?