Как легко и просто узнать схему нужного стиля?
Элементарно! Это доступно абсолютно всем, а не только просветлённым Css-гуру.
Но судя по задаваемым вопросам про этот способ никто не знает.
Всё нижеописаное подразумевает, что вы имеете представление о Css и HTML.
Во-первых нужна Mozilla. Если она у вас уже есть - приветствую братьев по разуму поздравляю, если нет - (скачивается тут, это бесплатно).
Во-вторых к мозилле скачивается add-one (это такие маленькие программы для мозиллы для расширения её функций), который называется Web Developer.
Web Developer скачивать отсюда
Другие add-on'ы можно найти здесь
Вот про Web Developer я и собираюсь рассказать. Как он выглядит? Это панель с кнопками (тулбар) в верхней части браузера:
Если вы скачали и установили Web Developer, но тулбар не появился - проверьте, что включено его отображение:
Пощёлкайте по кнопкам и посмотрите что вам предлагает выпадающее меню. Web Developer - это очень мощный инструмент, но я расскажу вам лишь о некоторых его функциях, о тех которые использую сама при написании и редактировании кода.
Итак, как нам узнать как выглядит скелет страницы не залезая в дебри HTML-кода?
Очень просто, для этого воспользуемся кнопкой Outline (обвести):
Нас в частности интересуте Outline Tables и Outline Block Level Elements. Начнём с первого:
Этот пункт меню предлагает обвести заголовки, ячейки или всю таблицу. Выберем второе (ячейки).
Результат для Flexible Squares:
Результат для Generator:
На этих двух скриншотах видно насколько скелеты страниц разных стилей могут различаться. В первом случае на странице всего одна таблица (календарь), вторая же вся состоит из множества вложенных таблиц.
Теперь попробуем Outline Block Level Elements (обвести блочные элементы).
Блочные элементы это: p, div, table и другие.
Результат для Flexible Squares:
Результат для Generator:
Здесь мы видим, что скелет Flexible Squares весь состоит из блочных элементов. Скелет Generator'а состоит из таблиц, которые так же являются блочными элементами, небольшого количества абзацев и div'ов.
Элементы Flexible Squares имеют бОльшую подвижность, чем детали Generator'а, это имеет значение, если вы задумали нечто грандиозное.
Разумеется переделывать можно не только указанные стили, стиль надо выбирать исходя из планируемого результата. Они различаются составом элементов (дивы или таблицы), расположением меню, количеством ссылок под постом, возможностями заполнения сайдбара и прочими параметрами.
Предположим, стиль выбран. Как определить класс нужных вам элементов? Для этого обратимся к пункту Information, там много интересного:
Я чаще всего использую Display Element Information и Display Id & Class Details.
Как работает первое: в меню Information выбираете этот пункт, в окне браузера вверху слева появляется полупрозрачная панель. Чтобы она отобразила свойства интересующего вас элемента, наведите на него курсор (элемент обведётся красной рамкой) и нажмите правую кнопку мыши. Что получится:
Панель отобразила свойства элемента. В числе прочего - его id, положение на странице, родительские (Ancestors) и дочерние (Children) элементы.
Под панелью Web Developer'a так же появилась строка, которая показывает вложенность элемента, который сейчас под курсором.
Как выглядит применение Display Id & Class Details?
Этот инструмент показывает классы и ID всех элементов на странице. Получается каша, поэтому я обычно пользуюсь первым инструментом.
Вы узнали класс или идентификатор нужного элемента. Как узнать какие стили для него заданы? Воспользуемся пунктом Css:
Первым пунктом можно выключить все стили на странице и посмотреть как она выглядит без них. Попробуйте, узнаете много нового.
Я чаще всего использую Edit Css. Если выбрать этот пункт, слева появится панель для редактирования и просмотра стилей:
Таким образом вы можете просмотреть вообще все стили которые применяются к странице. В данном случае первые две вкладки - стили подключаемые самим livejournal, последняя - стили которые применила к странице я.
Должна сказать, что это мой самый любимый инструмент. Именно он позволяет легко и быстро писать стили, потому что все изменения которые вы вносите на панели слева немедленно отображаются на странице справа.
К примеру, я удалила все стили из вкладки Embedded Styles, и вот результат:
обычный Flexible Squares : )
можно менять как все стили сразу, так и стили для отдельных элементов:
Имейте в виду, что эти изменения существуют только пока открыта панель редактирования!
То есть как только вы закрываете панель - стили возвращаются в первоначальное состояние.
Поэтому если они вам нужны, их следует сохранить. Или просто выделить и скопировать (этот способ подойдёт для S1) или сохранить в файл (для S2). Так же в S2 можно сразу же вставить стили в поле Custom Css.
Подвожу итог:
вам не нужно бесконечно копировать и сохранять стили, чтобы посмотреть как они применились к странице. Если стилей немного (например добавить фоновую картинки или скрыть полосу навигации), их можно написать за один раз. Если изменения более глобальные, возможно понадобится несколько заплывов.
При этом:
- вы всегда будете видеть непосредственное применение кода к странице,
- вы всегда сможете узнать класс, ID и вложенность нужного элемента,
- схему страницы можно будет выделить аккуратными рамочками, вместо того чтобы рыться в длинющщей колбасе HTML-кода, пытаясь себе представить что за что отвечает и что куда вложено.
Надеюсь, что давно и нежно любимый мной Web Developer сможет быть полезен кому-то ещё : )
Дизайн, который был использован в качестве примера, можно взять здесь
Но судя по задаваемым вопросам про этот способ никто не знает.
Всё нижеописаное подразумевает, что вы имеете представление о Css и HTML.
Во-первых нужна Mozilla. Если она у вас уже есть - приветствую братьев по разуму поздравляю, если нет - (скачивается тут, это бесплатно).
Во-вторых к мозилле скачивается add-one (это такие маленькие программы для мозиллы для расширения её функций), который называется Web Developer.
Web Developer скачивать отсюда
Другие add-on'ы можно найти здесь
Вот про Web Developer я и собираюсь рассказать. Как он выглядит? Это панель с кнопками (тулбар) в верхней части браузера:
Если вы скачали и установили Web Developer, но тулбар не появился - проверьте, что включено его отображение:
Пощёлкайте по кнопкам и посмотрите что вам предлагает выпадающее меню. Web Developer - это очень мощный инструмент, но я расскажу вам лишь о некоторых его функциях, о тех которые использую сама при написании и редактировании кода.
Итак, как нам узнать как выглядит скелет страницы не залезая в дебри HTML-кода?
Очень просто, для этого воспользуемся кнопкой Outline (обвести):
Нас в частности интересуте Outline Tables и Outline Block Level Elements. Начнём с первого:
Этот пункт меню предлагает обвести заголовки, ячейки или всю таблицу. Выберем второе (ячейки).
Результат для Flexible Squares:
Результат для Generator:
На этих двух скриншотах видно насколько скелеты страниц разных стилей могут различаться. В первом случае на странице всего одна таблица (календарь), вторая же вся состоит из множества вложенных таблиц.
Теперь попробуем Outline Block Level Elements (обвести блочные элементы).
Блочные элементы это: p, div, table и другие.
Результат для Flexible Squares:
Результат для Generator:
Здесь мы видим, что скелет Flexible Squares весь состоит из блочных элементов. Скелет Generator'а состоит из таблиц, которые так же являются блочными элементами, небольшого количества абзацев и div'ов.
Элементы Flexible Squares имеют бОльшую подвижность, чем детали Generator'а, это имеет значение, если вы задумали нечто грандиозное.
Разумеется переделывать можно не только указанные стили, стиль надо выбирать исходя из планируемого результата. Они различаются составом элементов (дивы или таблицы), расположением меню, количеством ссылок под постом, возможностями заполнения сайдбара и прочими параметрами.
Предположим, стиль выбран. Как определить класс нужных вам элементов? Для этого обратимся к пункту Information, там много интересного:
Я чаще всего использую Display Element Information и Display Id & Class Details.
Как работает первое: в меню Information выбираете этот пункт, в окне браузера вверху слева появляется полупрозрачная панель. Чтобы она отобразила свойства интересующего вас элемента, наведите на него курсор (элемент обведётся красной рамкой) и нажмите правую кнопку мыши. Что получится:
Панель отобразила свойства элемента. В числе прочего - его id, положение на странице, родительские (Ancestors) и дочерние (Children) элементы.
Под панелью Web Developer'a так же появилась строка, которая показывает вложенность элемента, который сейчас под курсором.
Как выглядит применение Display Id & Class Details?
Этот инструмент показывает классы и ID всех элементов на странице. Получается каша, поэтому я обычно пользуюсь первым инструментом.
Вы узнали класс или идентификатор нужного элемента. Как узнать какие стили для него заданы? Воспользуемся пунктом Css:
Первым пунктом можно выключить все стили на странице и посмотреть как она выглядит без них. Попробуйте, узнаете много нового.
Я чаще всего использую Edit Css. Если выбрать этот пункт, слева появится панель для редактирования и просмотра стилей:
Таким образом вы можете просмотреть вообще все стили которые применяются к странице. В данном случае первые две вкладки - стили подключаемые самим livejournal, последняя - стили которые применила к странице я.
Должна сказать, что это мой самый любимый инструмент. Именно он позволяет легко и быстро писать стили, потому что все изменения которые вы вносите на панели слева немедленно отображаются на странице справа.
К примеру, я удалила все стили из вкладки Embedded Styles, и вот результат:
обычный Flexible Squares : )
можно менять как все стили сразу, так и стили для отдельных элементов:
Имейте в виду, что эти изменения существуют только пока открыта панель редактирования!
То есть как только вы закрываете панель - стили возвращаются в первоначальное состояние.
Поэтому если они вам нужны, их следует сохранить. Или просто выделить и скопировать (этот способ подойдёт для S1) или сохранить в файл (для S2). Так же в S2 можно сразу же вставить стили в поле Custom Css.
Подвожу итог:
вам не нужно бесконечно копировать и сохранять стили, чтобы посмотреть как они применились к странице. Если стилей немного (например добавить фоновую картинки или скрыть полосу навигации), их можно написать за один раз. Если изменения более глобальные, возможно понадобится несколько заплывов.
При этом:
- вы всегда будете видеть непосредственное применение кода к странице,
- вы всегда сможете узнать класс, ID и вложенность нужного элемента,
- схему страницы можно будет выделить аккуратными рамочками, вместо того чтобы рыться в длинющщей колбасе HTML-кода, пытаясь себе представить что за что отвечает и что куда вложено.
Надеюсь, что давно и нежно любимый мной Web Developer сможет быть полезен кому-то ещё : )
Дизайн, который был использован в качестве примера, можно взять здесь