yoksel : ) (yoksel) wrote in journals_covers,
yoksel : )
yoksel
journals_covers

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

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

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

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

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



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



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

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

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

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

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





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

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

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


Tags: useful: уроки по оформлению ЖЖ
Subscribe
promo journals_covers august 1, 2013 11:15 62
Buy for 200 tokens
У меня сегодня прекрасная новость: длинные инструкции по настройкам оформления больше не нужны, потому что теперь настройки на русском! : ) '​*':'*'тут салютики'*':'*' Сначала это было сделано для Хамелеона, теперь настройки переведены для Minimalism и Expressive. Помимо перевода, настройки…
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 44 comments