Программные средства разработки Web-страниц и презентаций: Методические указания по выполнению лабораторных работ, страница 9

<p class=”zag” style=”text-align:center”>

·  Проверить действие стиля.

2.  Добавить в описание стиля абзаца заголовка страницы написание заглавными буквами.

·  Если стиль содержит несколько определений, то они указываются через знак точки с запятой (;). Добавить в конец значения параметра STYLE (перед закрывающей кавычкой) знак разделителя (;) и новое определение, состоящее из свойства преобразование текста (text-transform) и значения uppercase (заглавные буквы):

<p class=”zag” style=”text-align:center; text-transform: uppercase”>

3.  Самостоятельно задать крупный шрифт для абзаца заголовка (добавить в описание стиля еще одно определение стиля со свойством font-size и значением large).

4.  Задать для текста гиперссылки «К началу страницы» выравнивание по центру страницы и отступ от предыдущего текста.

·  Найти в коде страницы тэг DIV, описывающий абзац текста «К началу страницы». Встроить в тэг стиль, состоящий из двух определений: выравнивание текста (как в пункте 1) и отступ сверху (margin-top) со значением 20 пикселей (20):

<div style=”text-align:center;margin-top:20”>

5.  Самостоятельно задать для ячейки TH, содержащей заголовок таблицы «Подробнее о приложениях MS Office», курсивное написание: свойство font-style, значение italic.

6.  Иногда требуется задать стиль сразу для нескольких экземпляров тэга на странице. В этом случае используется таблица стилей, внедренная в страницу. Создать внедренную в страницу «Мой офис» таблицу стилей и задать вертикальное выравнивание по верхнему краю ячеек для всех ячеек TD таблицы (свойство vertical-align, значение top):

·  В раздел страницы HEAD (после открывающего, но перед закрывающим тэгом HEAD) добавить описание внедренной таблицы стилей:

<style type=”text/css”>

<!--

-->

</style>

·  Внутри таблицы стилей (после <!--, но перед -->) вставить описание стиля выравнивания для селектора TD (тэг ячейки таблицы):

td {vertical-align:top}

·  Изменяя размер окна страницы «Мой офис», проверить действие вертикального выравнивания.

7.  Изменить цвет всех ссылок на странице (селектор A, свойство color, значение цвета – текстовое называние или числовой код цвета – см. Приложение. Фоновые цвета):

·  Добавить во внедренную таблицу стилей (аналогично предыдущему пункту) описание нового стиля, например:

a {color: #CC0066}

8.  Самостоятельно с помощью внедренной таблицы стилей отключить отображение рамок для всех рисунков на странице (селектор IMG, свойство border-width, значение 0).

9.  Если требуется применить стиль не ко всем экземплярам тега, а лишь к некоторым, либо применить стиль к экземплярам разных тэгов, можно задать класс элементов. Стиль может быть задан для всех элементов класса. На странице «Мой офис» заголовок и подзаголовок страницы (экземпляры тэга P), а также заголовок таблицы (тэг TH) объединены в класс zag. Определить для класса zag выделение цветом (color), полужирное написание (свойство font-weight со значением bold) и увеличенный размер (font-size). Селектором в данном случае будет выступать имя класса, предваренное знаком точки (.):

.zag {

    font-size: 120%;

    color: #662244;

font-weight: bold}

10. Отключить подчеркивание (свойство text-decoration, значение none) гиперссылок внутри списка приложений. Поскольку следует изменить написание не всех ссылок, а только тех, которые являются элементами списка (LI), в определении стиля используются контекстные селекторы. В качестве селектора в этом случае выступают имена тэгов, записанные в порядке их следования в коде HTML:

li a {text-decoration:none}

11. Сохранить все сделанные в файле office.htm изменения.

Задание 2. Задать стилевое оформление страниц «Новые возможности Word» (файл word.htm), «Новые возможности Excel» (файл excel.htm), «Мой офис» (файл office.htm).

12. Если необходимо задать единый стиль сразу для нескольких страниц, следует использовать связанную таблицу стилей. Задать цвет фона для страниц «Новые возможности Word» и «Новые возможности Excel»: