Первый CSS-фрагмент за четыре шага
Небольшая инструкция по One-Click CSS Copy: где нажать, как выбрать элемент и куда вставить результат.
Регистрироваться не нужно. Для первой проверки откройте обычный сайт, а не страницу настроек Chrome или магазин расширений. Если значка One-Click CSS Copy не видно, откройте меню расширений с иконкой пазла и закрепите его.
Как получить CSS элемента страницы
- 01
Откройте страницу и расширение
Перейдите на поддерживаемый сайт HTTP/HTTPS и нажмите значок One-Click CSS Copy на панели Chrome.
- 02
Нажмите «Select an element»
На странице включится подсветка элементов. Наведите мышь на нужный блок.
- 03
Выберите один элемент
Щёлкните по кнопке, карточке или заголовку. В панели появится CSS и количество найденных свойств.
- 04
Нажмите «Copy CSS»
Вставьте код в редактор. Замените .copied-element своим классом. Для следующего элемента выберите «Inspect another».
С чего лучше начать
Попробуйте обычную кнопку: сравните её цвет, padding и border-radius с панелью Computed в DevTools. Так проще понять, какие параметры расширение оставляет в результате.
.copied-element {
background-color: #2563eb;
color: #ffffff;
padding: 12px 18px;
border-radius: 10px;
font-weight: 600;
}Пример для иллюстрации · значения зависят от элемента
Если что-то пошло не так
В Free-сборке доступно 5 успешных копирований в день. Если браузер не разрешит автоматическую запись, выделите CSS вручную. Клавиша Escape и кнопка Cancel закрывают режим выбора.
Бесплатно: 5 успешных копирований CSS в день
Подсказки
Подсветка не появилась
Проверьте, что открыта обычная страница HTTP/HTTPS, и попробуйте ещё раз.
Элемент выглядит иначе после вставки
Проверьте родительскую вёрстку, шрифты и селектор: фрагмент не является готовым компонентом.
Как выбрать другой блок?
В панели результата нажмите «Inspect another».