Инструкция по FireBug — вкладка CSS

Инструкция FireBug - вкладка CSS

Продолжаю серию статей посвящённых плагину для FireFox — FireBug. Сегодняшний пост посвящён работе с CSS.

Навигация по свойствам CSS.

Представим ситуацию, Вы задаёте цвет для ссылки зелёный, но он отображается как красный. Если бы не этот замечательный плагин, пришлось бы долго искать где переопределяется стиль для нашего элемента. Для обладателей FireBug найти проблемный элемент не составит труда.

1. Нажимаем кнопку «Анализировать» в левом верхнем меню либо контекстном.

2. Наводим мышкой на нужный нам элемент страницы, при этом соответствующий блок кода подсвечивается бирюзовым. В левой панели отображается html код активного элемента, а в правой, связанная с ним таблица стилей.

FireBug вкладка css

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

4. Нажмите на элемент, его код выделиться голубым. Выделение будет держаться до тех пор, пока вы не нажмёте на другом элементе.

Правка свойств CSS.

Действия аналогичны правке во вкладке html.

выбор файла CSS

Отдельно необходимо отметить возможность внесения изменений в отдельный файл CSS.

Правка размеров.

работа с вкладкой "Макет"

С размерами удобно работать на вкладке «Макет». Вкладка отображает габариты и отступы выбранного элемента. Для этого необходимо:

1. Перейти в режим «Анализ» и навести курсор мыши на элемент с размерами которого мы желаем поработать.

2. Щёлкнуть на элементе, после этого при наведении курсора на поле макета, соответствующее поле будет подсвечиваться и на странице.

редактирование размеров в макете

3. Для редактирования размера поля достаточно нажать на его числовом значении во вкладке «Макет»

Полезные приёмы плагина.

Предпросмотр цветов и изображений.

предпросмотр миниатюр

Если навести на строку кода, содержащую ссылку на изображение или цвет фона — во всплывающем окне отобразится миниатюра изображения или цвета.

Отключение и включение специфических правил CSS.

FireBug позволяет отключать стили влияющие на отображение элемента. Например, мы хотим посмотреть на сколько сдвинется блок, если убрать отступ, это легче всего сделать отключив стиль.