Отладка CSS в браузере Firefox

Все современные браузеры предоставляют средства для просмотра разметки HTML, CSS и визуальной отладки таблиц стилей.

Рассмотрим более подробно отладчик Firebug (реализован как дополнение) для Mozilla Firefox. Если Firebug установлен, то для того, чтобы открыть отладчик на требуемой странице, необходимо нажать клавишу F12.

В нижней части окна браузера появятся дополнительные окна (рисунок 4). В Firebug доступны следующие закладки:

• Console — сообщения браузера об ошибках, предупреждения и отладочный вывод Javascript-программ;

• HTML — структура разметки страницы. Позволяет найти по отображенному элементу его соответствие в разметке и наоборот. Возможно интерактивное изменение стилей любых элементов;

• CSS — изменение таблиц стилей загруженной страницы;

• Script — Javascript-код страниц. Позволяет просматривать код, устанавливать точки останова, выполнять пошаговую отладку и трассировку значений переменных. По умолчанию отладка выключена;

• DOM — просмотр и изменение значения документа по модели DOM;

• Net — просмотр данных, передаваемых между браузером и сервером. Предоставляет возможность просмотра заголовков HTTP, переданных данных, а также порядка передачи данных. По умолчанию мониторинг сети выключен.

Рисунок 4 – Окно просмотра структуры и стилей в Firebug

 

Обратите внимание на то, что изменения, внесенные в отладчик, не сохраняются в исходных файлах. Для того чтобы сбросить внесенные в CSS или в HTML-разметку изменения, необходимо перезагрузить страницу.

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

Если необходимо редактирование одного конкретного элемента, следует использовать закладку HTML. В закладке HTML доступны следующие вложенные закладки:

• Style (стиль) служит для редактирования стиля одного конкретного элемента, причем Firebug группирует стили, назначенные конкретно для выделенного элемента, и стили, унаследованные для этого элемента;

• Computed (скомпилированный стиль) отображает результат применения к элементу всех назначенных правил. В отличие от закладки Style здесь приводятся конкретные значения измененных свойств;

• Layout (макет) позволяет работать с блочной моделью разметки и отображает размеры элемента, его полей и границ в пикселах. Возможно интерактивное изменение отображаемых размеров.

ПОРЯДОК ВЫПОЛНЕНИЯ ЗАДАНИЯ

Выполнить разметку страницы с помощью стилей и блоков.

Задание выполнить в указанном ниже порядке.

1. Подготовить разметку произвольного текста, содержащего не менее 10 строк с использованием таблицы стилей. Продемонстрировать выделение отдельных слов с помощью стилей, цвета и шрифта.

2. Сформировать фрагмент расписания занятий, используя элемент div и стили.

3. Создать страницу, содержащую форму с набором кнопок. На этой странице добавить список ссылок, соответствующих кнопкам. Модифицировать с помощью стилей отображение ссылок так, чтобы они стали похожи на кнопки.

4. Проверить корректность всех разработанных страниц и устранить ошибки. Составить таблицу выявленных ошибок и пояснить, как они отображаются в браузере.

СОДЕРЖАНИЕ ОТЧЕТА

Отчет должен включать:

1) ФИО студента и номер группы;

2) наименование лабораторной работы;

3) названия выполненных пунктов и тексты реализованных HTML-страниц и стилей CSS с указанием имен файлов.

Отчет представляется в электронном виде в формате pdf или docx.

Зачет ставится при условии выполнения всех пунктов задания, демонстрации работы программы и при наличии отчета и устных ответов на контрольные вопросы.

КОНТРОЛЬНЫЕ ВОПРОСЫ

1. Для чего предназначен язык CSS?

2. Какие примеры селекторов CSS вы можете привести?

3. Какие примеры описания шрифтов с помощью CSS вы можете привести?

4. Что представляет собой блочная модель?

5. В чем различие абсолютного и относительного позиционирования?

6. Какие средства существуют для отладки стилей?