Использование Firebug для решения проблем с CSS

Использование Firebug для решения проблем с CSS
Создание сайтов в Вышнем Волочке

Firebug - это дополнение для Mozilla Firefox, упрощающий поиск и изменение css-элементов в вашем дизайне. Он отображает исходный код вашего сайта на разделенном экране вашего браузера, что позволяет просматривать и изменять HTML/CSS с возможностью просмотра сделанных изменений.

Установка Firebug

В браузере Mozilla Firefox зайдите в меню Инструменты - Дополнения, в секции Получить дополнения в строке поиска наберите Firebug. Нажмите кнопку Установить. После установки вам нужно будет перезапустить ваш браузер.

Запуск Firebug

На панели инструментов Firefox в верхней правой части окна появиться значок с изображением жука.  Кликнув по значку экран браузера разделится на две части: в верхней будет по прежнему отображаться открытая веб-страница, а в нижней окно и исходным кодом этой веб-страницы. Также открыть Firebug можно с помощью меню Вид, выбрав соответствующий пункт, а также нажав на клавиатуре горячую клавишу F12.

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

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

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

Как альтернатива - клик правой кнопкой мыши определенной части веб-страницы и выбор "Инспектировать элемент с помощью Firebug" приведет к подсветке этой части в нижней панели Firebug.

Вы можете спокойно изменить нужный элемент и посмотреть что произойдет. Все изменения произойдут только на ваших глазах и повлияют только на ваше представление страницы. Изменения не сохраняются в файлах темы оформления вашего сайта.

Практическое использование

Давайте, к примеру, изменим цвет фона страницы. Выделим тег body в левой части окна Firebug, а в правой части изменим свойство элемента body - background-color - на другое значение (допустим #cccccc). И мы сразу же увидим в верхней части окна браузера, что изменится цвет фона страницы. Как только мы обновим страницу, все проделанные изменения пропадут и все вернется к первоначальному состоянию. Так что вы можете смело экспериментировать.

Поскольку изменения в CSS не сохраняются в файлах темы оформления, то нужно скопировать измененный код из Firebug и вставить в соответствующее место в css-файле. Firebug также подскажет номер строки, в которой должен находиться данный элемент.

В заключении можно сказать, что Firebug является незаменимым инструментом для визуального редактирования кода вашего сайта и устранения проблем с CSS. Ну и конечно же, он станет незаменимым помощником в изучении HTML и CSS для начинающего вебмастера.

Оставить комментарий

Вы комментируете как Гость.
Комментарии блога
  • Алексей

    30. Апрель, 2017
    MC практически полностью устраивает за исключением функциональности...
  • Савелий

    Савелий

    06. Март, 2017
    Логияно что ОР3Т первый идет. Реально на андроиде самый лучший. И по тесту антуту самый мощьный. Очень рад, что его приобрел.
  • Евгений

    Евгений

    17. Февраль, 2017
    Спасибо за статью, мне ваши советы очень помогли, когда я регистрировал домен у хостера Handyhost)
  • BrainStorm

    BrainStorm

    15. Февраль, 2017
    Согласен, особенно после обновления Я.Вебмастер и учащения апдейтов Яндекса.
  • Кирилл

    11. Февраль, 2017
    Яндекс метрика в связке с Яндекс.Вебмастер это бомба, очень удобно....
  • Сергей

    Сергей

    08. Февраль, 2017
    "...В планах разработчиков было создать специальный программный продукт,...
  • Kladproraba

    Kladproraba

    30. Январь, 2017
    Вопрос о том, как выбрать идеальное доменное имя, действительно очень...
  • BrainStorm

    BrainStorm

    16. Декабрь, 2016
    Однажды мое знакомство с программой очень быстро закончилось, когда решил...
  • Артем

    Артем

    18. Октябрь, 2016
    Спасибо большое за обзор!
  • kitoboi

    kitoboi

    09. Октябрь, 2016
    На сколько эффективна по вашему программа ccleaner professional plus?
Подпишись и ты!
Яндекс Виджет
Последняя работа

Услуги
Контакты
  • Тверская область
  • г. Вышний Волочек
  • ул. 9-го Января, д.21, кв. 107
  • info@brain8torm.ru
  • brainstorm@programist.ru
  • +7 (915) 734-3849
  • +7 (904) 350-9777