Редактирование CSS-стилей при помощи плагина Firebug для Mozilla Firefox

FireBug для FireFox - Редактирование CSS-стилей при помощи плагина

Доброго времени суток, уважаемые читатели блога OlegAstanin.ru! В этой статье поговорим о плагине Firebug для браузера Mozilla Firefox, а также о том, как при помощи данного плагина можно легко редактировать файлы CSS вашего сайта. Плагин Firebug является полностью бесплатным, скачать его можно отсюда — https://getfirebug.com. После установки значок плагина будет доступен прямо из панели управления браузером. Нажмите на значок, после чего перед вами откроется окно плагина. Там есть несколько вкладок. Нас больше всего будут интересовать такие из них, как HTML и CSS.

Даже если сайт располагается на локальном сервере, открываем его в браузере и включаем Firebug. Далее жмем на голубенькую стрелочку в левой верхней части плагина и наводим ее на интересующий нас элемент, в котором мы хотели бы что-то изменить. Щелкая стрелочкой по элементу, вы можете зафиксировать информацию в окошке.

Во вкладке «HTML» будет показано, как именно формируется этот элемент в HTML-коде. В правой части окошка будут показаны стили CSS для него. Самое главное — указывается конкретный файл CSS, его название, местоположение и строка в этом файле. То есть вы просто открываете данный файл и редактируете нужные параметры CSS элемента сайта.

Приведем пример. Допустим, что нас не устраивает внешний вид ссылок при наведении или внешний вид какой-то конкретной ссылки. В этом случае мы наводим голубую стрелочку на эту ссылку и фиксируем ее положение при помощи одиночного щелчка левой кнопки мыши.

Во вкладке «HTML» будет показываться то, что данный элемент является ссылкой.Но нас больше интересует правая колонка окошка Firebug со списком стилей. Здесь мы увидим файл CSS и строку в нем,которая отвечает за формирование ссылки. Затем мы открываем данный файл при помощи Notepad++, ищем эту строку и начинаем менять стили так, как нам нужно. К примеру, менять цвет ссылки при наведении или убирать нижнее подчеркивание. После сохранения файла обновляем страницу и смотрим за изменениями.

Какие преимущества есть у плагина Firebug в редактировании CSS по сравнению с обычным редактированием стилей?Прежде всего, это то, что вам не надо долго искать нужный файл в папке с сайтом и заветную строку в нем. Firebug сам показывает вам место формирования свойств каждого элемента. Вы просто наводите стрелочку и видите всю конструкцию.Таким образом, если вы владеете какими-то базовыми знаниями CSS и у вас есть этот плагин, то редактировать стили для своего сайта будет довольно легко.

С уважением, Олег Астанин.

Понравилась статья? Поделитесь с друзьями!

0


This Post Has Been Viewed 9 Times

Автор статьи: , дата публикации

Читайте также на моем блоге:

  • Зачем нужен хостинг для сайта
  • Какой хостинг выбрать: платный или бесплатный?
  • Как выбрать хороший хостинг для сайта
  • Выбираем дешевый и качественный хостинг!
  • Конструктор сайтов Юкоз — обзор возможностей
  • Ucoz — создать сайт стало проще!
  • Перед тем как создать блог или сайт
  • Секреты размещения сайта в интернете! Разбираемся, что к чему!
  • Научиться создавать сайты очень просто! Бесплатно! Самому! Сейчас!
  • Программы необходимые каждому блогеру
Читатели оставили 3 комментария к этой статье:
  • Ленивый30.04.2013 в 02:19

    Плагин отличный! Пользуюсь довольно давно!

  • Noah Nguyen19.05.2013 в 16:04

    Также рекомендую по возможности объединять файлы в один, к примеру таблицы стилей. Это поможет ускорить сайт за счет уменьшения количества соединений. Для примера возьмем плагин постраничной навигации в WordPress, о котором я писал в статье « Постраничная навигация в WordPress. Плагин WP-PageNavi и его настройка ». Для этого открываем файл CSS плагина WP-PageNavi и копируем все правила в файл CSS вашей темы. Затем заходим в административную панель и отключаем «Использование собственной таблицы стилей».

  • Сафин Эльдар10.02.2014 в 23:24

    Привет всем. Уже не знаю что делать... но мне нужна помощь. все перерыл и нигде нет ответа. А ответ есть, я знаю. Мой вопрос таков: Допустим у меня есть движок социальной сети и допустим это Вконтакте. Я все настроил...почти все. но несколько основных вещей, которые важные, но я не могу никак догнать.

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

    2. Это проблема с аудио. захожу во вкладку Мои аудиозаписи...а мне выдает ошибку. не помню какую, но сверху в общем. Файл и строка в каком и есть эта ошибка. и не могу закинуть аудио записи. после того как добавляю, у меня весь экран становится в иероглифах.

    3. Видео. Там у меня только ссылки можно вставлять со всяких источников. пробовал только с ютуба. и такая же ситуация как с аудио. только плюс в том, что видео появляется, но вокруг все нечитаемо.

    4. И пока последнее. вроде с остальным проблема. Поиск людей. Как там Вконтакте. заходим в «люди» и справа уже готовый поиск. нажимай и ищи. а у меня только поиск по имени, или по названию чего либо. нет этого блока справа. Но в файлах шаблона это все упоминается.

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

Добавить комментарий к этой статье:

(обязательно)

(не будет опубликовано, обязательно)

Вебсайт (если есть)

  • Получайте оповещения о выходе новых статей на Ваш E-mail. Для этого, введите Ваш E-mail и нажмите Enter.

  • Рубрики

  • Присоединяйся ко мне!

    Группа
    Вконтакте

    Канал на
    You Tube

    Я на
    Twitter