Как узнать класс и стили нужного элемента?

топ 100 блогов journals_covers27.12.2013 Меня часто просят помочь с редактированием дизайна журналов. Причем во многих случаях помощь нужна только с тем как обратиться к нужному элементу - просто узнать какой у него класс или Id.

На самом деле это очень просто сделать с плагинами или инструментами, которые уже встроены в браузер.

Начну с хрома. В нем есть встроенный веб-инспектор и ничего дополнительно ставить не нужно.

Правой кнопкой мыши щёлкаем над нужным элементом и видим выпадающее меню:

Как узнать класс и стили нужного элемента?

Жмём "Проверить элемент" ("Inspect Element") и видим такое:

Как узнать класс и стили нужного элемента?

Выбранный элемент подсвечен, в левой панели выводится дерево элементов. Мы видим что это за элемент, какие у него есть классы, во что он вложен и что вложено в него самого.

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

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

Так же в правой колонке можно видеть ссылку на файл, откуда код попал на страницу. Если коды именно из файла, а не из Custom Css - можно кликнуть на ссылку и посмотреть файл со стилями в том месте, где находится интересующий вас код.
Можно просто скопировать оттуда нужный кусок кода. Если вы отредактируете его и вставите в поле для стилей в настройках, ваш код перекроет системные стили, что очень удобно, если вы хотите немного изменить стиль из каталога.

Для Firefox есть аддон Firebug. Работает аналогично, только его нужно специально установить.

Как узнать класс и стили нужного элемента?

Как узнать класс и стили нужного элемента?

В выпадающем меню также есть пункт "Исследовать элемент" - это встроенный инспектор Firefox, который, в принципе, делает то же самое. Можете попробовать оба инструмента и выбрать что вам удобнее.

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

Попробуйте, это удобно : )

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

Архив записей в блогах:
Придумал отличный вопрос на понимание теории эволюции. Есть такое понятие «митохондриальная Ева». Не вдаваясь в подробности происхождения названия, так называется особь женского пола, потомками которой являются все ныне живущие люди. И да, такая почти стопроцентно гарантированно была. ...
Сегодня писал очередную главу в "Титулярник" про Мстиславль, и в очередной раз подумал, что авторам боярЪаниме все-таки сильно не хватает знания фактуры о реальных русских боярских кланах. Как это не обидно, но в реальной истории обычно все было гораздо интереснее, чем в их авторских ...
...
Должен сразу заявить - я глубок уважаю этого человека. Он по-настоящему талантлив. Я восхищен его "Мастером и Маргаритой" - смотре трижды, притом что текст знаю очень хорошо. Я был потрясен его сериалом "Идиот". Ставший культовым и разобранный на цитаты сериал "Собачье сердце" мне нравитс ...
Начну потихоньку про наше путешествие рассказывать. Утром мы выехали из Вильнюса на Варшаву. По дороге правда допустили ошибку, не поехали на скоростную трассу, до которой был крюк лишний, а тащились по обычным дорожкам. По трассе все-таки было бы быстрее, так что крюк этот смело делайте, ...