Генерування CSS із шарів

Останнє оновлення: 2 лист. 2026 р.

Дізнайтеся, як видобувати код CSS із шарів форми та текстових шарів, щоб Translate властивості дизайну в готові для інтернету таблиці стилів в Adobe Photoshop.

Функція «Копіювати CSS» генерує властивості Cascading Style Sheet безпосередньо із шарів Photoshop, зберігаючи специфікації дизайну, які можна вставити у файли таблиць стилів.Цей процес усуває розрив між візуальним дизайном і реалізацією в коді, особливо коли ви готуєте ресурси для інтернет-проєктів або співпрацюєте з розробниками, яким потрібні точні специфікації стилів.

Використовуйте «Копіювати CSS», коли потрібно Translate елементи візуального дизайну в готові для коду оголошення стилів. Ця функція працює з окремими шарами форми, текстовими шарами або групами шарів, що містять ці елементи. Вона генерує CSS, який можна вставити безпосередньо у свою таблицю стилів, зберігаючи властивості дизайну з піксельною точністю. Для ширших процесів переходу від дизайну до інтернету перегляньте ефекти та стилі шарів, щоб отримати додаткові параметри стилізації, і експорт ресурсів, щоб дізнатися про інші формати виводу.

Властивості CSS, зчитані із шарів

Копіювати CSS видобуває різні властивості залежно від вибраного типу шару.

Шари форми генерують CSS для:

Координати розміру й положення
Колір обведення
Колір заливки, зокрема визначення градієнта
Ефекти тіні

Текстові шари зчитують властивості форми, а також специфікації типографіки:

Сімейство шрифтів
Розмір шрифту й товщина
Міжрядковий інтервал
Оформлення тексту (підкреслення, закреслення)
Вертикальне вирівнювання (верхній індекс, нижній індекс)
Вирівнювання тексту

Групи шарів створюють структуровані класи CSS, що відображають зв'язки між батьківськими та дочірніми елементами.Сама група стає батьківським div, а кожен шар у групі генерує дочірній div. Значення позицій зверху й ліворуч для дочірніх елементів обчислюються відносно батьківського контейнера, відтворюючи стандартну поведінку позиціювання CSS.

Обмеження функції «Копіювати CSS»

Копіювання CSS не працює зі смарт-об’єктами. Якщо шар є смарт-об'єктом, двічі клацніть його, щоб редагувати вміст, і скопіюйте CSS із шарів у документі смарт-об'єкта, або спочатку растеризуйте шар, якщо це підходить для вашого робочого процесу.

Ця функція обробляє кілька вибраних одночасно шарів форми або тексту лише якщо вони згруповані. Щоб скопіювати CSS одразу з кількох шарів, спочатку розмістіть їх у групі шарів.

Генерувати код CSS зі своїх шарів

На панелі Layers клацніть правою кнопкою миші шар форми, текстовий шар або групу шарів, а потім виберіть Копіювання CSS у контекстному меню. Або виберіть шар, а потім виберіть Копіювання CSS у меню панелі Layers.

Відкрийте свій документ таблиці стилів і вставте згенерований код за допомогою Ctrl + V (Windows) або Command + V (macOS).

Код CSS тепер перебуває у буфері обміну та готовий до інтеграції у свій інтернет-проєкт. Перегляньте згенеровані властивості, щоб переконатися, що вони відповідають своїм вимогам розробки, і налаштуйте значення за потреби для адаптивного дизайну або сумісності з браузерами.

Створюйте приголомшливі зображення за допомогою Photoshop
Редагуйте, ретушуйте та трансформуйте фотографії за допомогою провідних у галузі творчих інструментів, які ви знаєте та любите.

Відкрийте програму

Попередній

Робота з примітками в Photoshop

Навчання

Навчайтеся за покроковими відеопосібниками й практичними інструкціями прямо в програмі.

Спільнота

Беріть участь в обговореннях, знаходьте відповіді, навчайтеся в експертів і діліться своїми знаннями.

Головна сторінка Adobe

Отримайте доступ до улюблених програм і сервісів Creative Cloud, керування файлами тощо.