Использование 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 для начинающего вебмастера.

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

Вы комментируете как Гость.
Комментарии блога
  • Антокн
    Антокн
    23. Январь, 2019
    Конечно выбор хостинга это довольно не простое дело. Главное ни за что и ни...
  • Сергей
    Сергей
    24. Ноябрь, 2018
    Красавчик. Спасибо. Буку 5-тый год ASUS i5. Последнее время стала вылетать сеть. Все сделал как написано и вуаля.
  • BrainStorm
    BrainStorm
    01. Февраль, 2018
    Вы не совсем правы. Это не названия для блога, а адрес сайта (домен). Об этом...
  • Hongshang
    13. Январь, 2018
    Всегда выбираю названия, которые характеризуют продукт или услугу...
  • Алексей
    30. Апрель, 2017
    MC практически полностью устраивает за исключением функциональности...
  • Савелий
    Савелий
    06. Март, 2017
    Логияно что ОР3Т первый идет. Реально на андроиде самый лучший. И по тесту антуту самый мощьный. Очень рад, что его приобрел.
  • Евгений
    Евгений
    17. Февраль, 2017
    Спасибо за статью, мне ваши советы очень помогли, когда я регистрировал домен у хостера Handyhost)
  • BrainStorm
    BrainStorm
    15. Февраль, 2017
    Согласен, особенно после обновления Я.Вебмастер и учащения апдейтов Яндекса.
  • Кирилл
    11. Февраль, 2017
    Яндекс метрика в связке с Яндекс.Вебмастер это бомба, очень удобно....
  • Сергей
    Сергей
    08. Февраль, 2017
    "...В планах разработчиков было создать специальный программный продукт,...
Подпишись и ты!
Яндекс Виджет
Последняя работа

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