Продолжаю серию статей посвящённых плагину для FireFox – FireBug. Сегодняшний пост посвящён работе с CSS.
Навигация по свойствам CSS.
Представим ситуацию, Вы задаёте цвет для ссылки зелёный, но он отображается как красный. Если бы не этот замечательный плагин, пришлось бы долго искать где переопределяется стиль для нашего элемента. Для обладателей FireBug найти проблемный элемент не составит труда.
1. Нажимаем кнопку “Анализировать” в левом верхнем меню либо контекстном.
2. Наводим мышкой на нужный нам элемент страницы, при этом соответствующий блок кода подсвечивается бирюзовым. В левой панели отображается html код активного элемента, а в правой, связанная с ним таблица стилей.
3. Правая панель упрощает навигацию по большому файлу стилей, отображая номер строки выбранного правила и название файла в котором стиль находится.
4. Нажмите на элемент, его код выделиться голубым. Выделение будет держаться до тех пор, пока вы не нажмёте на другом элементе.
Правка свойств CSS.
Действия аналогичны правке во вкладке html.
Отдельно необходимо отметить возможность внесения изменений в отдельный файл CSS.
Правка размеров.
С размерами удобно работать на вкладке “Макет”. Вкладка отображает габариты и отступы выбранного элемента. Для этого необходимо:
1. Перейти в режим “Анализ” и навести курсор мыши на элемент с размерами которого мы желаем поработать.
2. Щёлкнуть на элементе, после этого при наведении курсора на поле макета, соответствующее поле будет подсвечиваться и на странице.
3. Для редактирования размера поля достаточно нажать на его числовом значении во вкладке “Макет”
Полезные приёмы плагина.
Предпросмотр цветов и изображений.
Если навести на строку кода, содержащую ссылку на изображение или цвет фона – во всплывающем окне отобразится миниатюра изображения или цвета.
Отключение и включение специфических правил CSS.
FireBug позволяет отключать стили влияющие на отображение элемента. Например, мы хотим посмотреть на сколько сдвинется блок, если убрать отступ, это легче всего сделать отключив стиль.
Похожие записи
Постовой:
Запись была опубликована: Понедельник, Июль 5th, 2010 в 20:11, в рубрике HTML, CSS.
Отличный пример для новичков как пользоваться фаербагом, а то очень частенько задают казалось бы очень простые вопросы.
У меня только из-за него Фаерфокс и стоит.
Но ты кое что пропустил. Лично для меня это загадка, потому что я не силен в верстке.
Что такое зачеркнутые стили? У тебя там даже на картинке есть пример. Хочу я там шрифт изменить, нахожу в фб его, а он зачеркнут. Че делать?
Приведу стиль из примера с пояснениями
.entry img {
margin:5px; //переопределение margin с большим приоритетом
}
style.css (строка 25)
* {
color:#505050;
font-family:Arial;
margin:0; //этот стиль зачёркнут
padding:0;
}
В данном примере мы видим применение к одному объекту двух противоречащих правил.
Первое (*) применяется ко всем элементам на странице, так называемый универсальный селектор. Второе (.entry img) имеет большую специфичность и переопределяет первое.
Поэтому margin:0 зачёркнуто.
По вашему вопросу: искать где рядом переопределяется Ваш шрифт.