Generuj CSS z warstw

Ostatnia aktualizacja 2 lis 2026

Dowiedz się, jak wyodrębniać kod CSS z warstw kształtu i tekstu, aby przekształcać właściwości projektu na arkusze stylów gotowe do użycia w internecie w programie Adobe Photoshop.

Funkcja Kopiuj kod CSS generuje właściwości kaskadowych arkuszy stylów bezpośrednio z warstw w programie Photoshop, przechwytując specyfikacje projektu, które można wkleić do plików arkusza stylów.Ten obieg pracy niweluje różnicę między projektem wizualnym a implementacją kodu, szczególnie podczas przygotowywania zasobów do projektów internetowych lub współpracy z deweloperami, którzy potrzebują precyzyjnych specyfikacji stylów.

Użyj funkcji Kopiuj kod CSS, gdy trzeba przetłumaczyć wizualne elementy projektu na deklaracje stylu gotowe do użycia w kodzie.Ta funkcja działa z pojedynczymi warstwami kształtu, warstwami tekstu lub grupami warstw zawierającymi te elementy. Generuje kod CSS, który można wkleić bezpośrednio do arkusza stylów, przechwytując właściwości projektu z dokładnością co do piksela. W przypadku szerszych obiegów pracy związanych z przejściem od projektu do internetu zapoznaj się z informacjami o efektach warstw i stylach, aby poznać dodatkowe opcje stylizacji, oraz o eksportowaniu zasobów, aby sprawdzić inne formaty wyjściowe.

Właściwości CSS przechwytywane z warstw

Funkcja Kopiuj kod CSS wyodrębnia różne właściwości w zależności od wybranego typu warstwy.

Warstwy kształtu generują kod CSS dla:

Współrzędne rozmiaru i położenia
Kolor obrysu
koloru wypełnienia, w tym definicji Gradientu
Efekty cienia

Warstwy tekstu przechwytują właściwości kształtu oraz specyfikacje Typografia:

Rodzina czcionek
Rozmiar czcionki i Grubość
Wysokość wiersza
Dekoracji tekstu (Podkreślenie, przekreślenie)
Wyrównanie pionowe (indeks górny, indeks dolny)
Wyrównanie tekstu

Grupy warstw tworzą uporządkowane klasy CSS reprezentujące relacje nadrzędny-podrzędny. Sama grupa staje się nadrzędnym elementem div, a każda warstwa w grupie generuje podrzędny element div. Wartości położenia top i left dla elementów podrzędnych są obliczane względem kontenera nadrzędnego, odzwierciedlając standardowe działanie pozycjonowania CSS.

Ograniczenia funkcji Kopiuj CSS

Funkcja Kopiuj CSS nie działa w przypadku obiektów Smart Object. Jeśli warstwa jest obiektem Smart Object, kliknij dwukrotnie, aby edytować jej zawartość, i skopiuj CSS z warstw w dokumencie obiektu Smart Object, lub najpierw rasteryzuj warstwę, jeśli jest to bardziej zgodne z Twoim obiegiem pracy.

Ta funkcja nie może przetwarzać wielu warstw kształtu lub tekstu wybranych jednocześnie, jeśli nie są zgrupowane. Aby skopiować CSS z wielu warstw jednocześnie, najpierw umieść je w grupie warstw.

Generowanie kodu CSS z warstw

W panelu Warstwy kliknij prawym przyciskiem myszy warstwę kształtu, warstwę tekstu lub grupę warstw i wybierz opcję Kopiuj CSS z menu kontekstowego. Możesz również wybrać warstwę, a następnie wybrać opcję Kopiuj CSS z menu panelu Warstwy.

Otwórz dokument arkusza stylów i wklej wygenerowany kod za pomocą klawiszy Ctrl + V (Windows) lub Command + V (macOS).

Kod CSS znajduje się teraz w schowku i jest gotowy do zintegrowania z projektem internetowym. Przejrzyj wygenerowane właściwości, aby sprawdzić, czy są zgodne z Twoimi wymaganiami dotyczącymi programowania, i dostosuj wartości zgodnie z potrzebami związanymi z projektowaniem elastycznych układów lub zgodnością z przeglądarkami.

Twórz zachwycające obrazy w Photoshop
Edytuj, retuszuj i przekształcaj zdjęcia za pomocą wiodących w branży narzędzi kreatywnych, które znasz i kochasz.

Otwórz aplikację

Wstecz

Praca z notatkami w programie Photoshop

Materiały do nauki

Zdobywaj wiedzę, korzystając z samouczków wideo krok po kroku i praktycznych wskazówek dostępnych bezpośrednio w aplikacji.

Społeczność

Dołącz do dyskusji, znajdź odpowiedzi, ucz się od ekspertów i dziel się swoją wiedzą.

Strona główna Adobe

Uzyskaj dostęp do ulubionych aplikacji, usług, zarządzania plikami i innych funkcji Creative Cloud.