Редактирование внешнего вида сайта при помощи плагина firebug для Firefox

В данной статье рассмотрим то, как можно редактировать внешний вид своего сайта при помощи плагина firebug для браузера Mozilla Firefox. Скачиваем плагин по этому адресу https://addons.mozilla.org/ru/firefox/addon/firebug/ и устанавливаем его в браузер. В верхнем углу браузера у вас появится кнопка с изображением жучка, щелкните по нему, и откроется панель плагина.

При помощи firebug можно точно проанализировать ту страницу, на которой вы находитесь в данный момент с точки зрения html-конструкций и css. Можно посмотреть, какие css-правила действуют для того или иного элемента на странице. В верхней части панели находится стрелочка, нажимаем на нее и водим курсор по странице. Тот элемент, на который мы наводим курсор, будет подсвечиваться, и в панели будут отображаться все его свойства (html и css). В правой колонке показываются css-правила и строка в файле css, отвечающая за этот элемент. Таким образом, чтобы изменить css, мы просто редактируем строку в файле так, как нам нужно (изменяем отступы, шрифт, цвет и так далее). Далее перезагружаем страницу и смотрим, как все это выглядит. Если полученный вариант нас устраивает, то оставляем все как есть. Данный способ удобен тем, что он наглядный. Вы наводите курсор на конкретный элемент и сразу видите все его характеристики и знаете где эти характеристики исправить (в каком файле).

Приведем пример. Название статьи – H1 (заголовок первого уровня). Вам не нравится величина его букв – они слишком большие или толстые. Вы запускаете плагин firebug, наводите курсор на заголовок и видите список правил css для данного элемента, а также название самого файла css (даже номер строки). Далее открываете этот файл при помощи Notepad++ (или чего-то подобного) и изменяете необходимые параметры – H1 {столько-то px; bold}.