Nápověda k aplikaci Photoshop pro počítače

Generování kódu CSS z vrstev

Naposledy aktualizováno 29. 10. 2026

Naučte se extrahovat kód CSS z vrstev tvarů a textu a Translate vlastnosti návrhu na stylové předpisy připravené pro web v aplikaci Adobe Photoshop.

Funkce Kopírovat CSS generuje vlastnosti Cascading Style Sheet přímo z vrstev v aplikaci Photoshop a zachycuje specifikace návrhu, které můžete vložit do souborů se styly.Tento pracovní postup propojuje vizuální návrh s implementací kódu, zejména při přípravě podkladů pro webové projekty nebo při spolupráci s vývojáři, kteří potřebují přesné specifikace stylů.

Použijte funkci Kopírovat CSS, pokud potřebujete Translate prvky vizuálního návrhu do stylových deklarací připravených pro kód.Tato funkce funguje s jednotlivými vrstvami tvarů, textovými vrstvami nebo skupinami vrstev obsahujícími tyto prvky.Generuje kód CSS, který můžete vložit přímo do stylů, a zachycuje vlastnosti návrhu s přesností na pixel.Pro širší pracovní postupy návrhu pro web si prohlédněte efekty a styly vrstev pro další možnosti stylování a export podkladů pro jiné výstupní formáty.

Vlastnosti CSS zachycené z vrstev

Kopírovat CSS extrahuje různé vlastnosti v závislosti na typu vrstvy, který vyberete.

Vrstvy tvarů generují kód CSS pro:

Souřadnice velikosti a polohy
Barva tahu
Barva výplně, včetně definic přechodu
Efekty vrženého stínu

Textové vrstvy zachycují vlastnosti tvaru a typografické specifikace:

Rodina písma
Velikost písma a tloušťka
Výška řádku
Zdobení textu (podtržení, přeškrtnutí)
Svislé zarovnání (horní index, dolní index)
Zarovnání textu

Skupiny vrstev vytvářejí strukturované třídy CSS, které představují vztahy mezi vzorem a potomkem.Skupina samotná se stává nadřazeným divem, zatímco každá vrstva ve skupině generuje div jako potomka.Hodnoty horní a levé polohy podřízených prvků se počítají relativně k nadřazenému kontejneru, což odpovídá standardnímu chování umístění CSS.

Omezení funkce Kopírovat CSS

Příkaz Kopírovat kód CSS nefunguje u Smart Objects.Pokud je vrstva chytrým objektem, dvojitým kliknutím upravte její obsah a zkopírujte kód CSS z vrstev v dokumentu chytrého objektu, případně vrstvu nejprve rasterizujte, pokud to vyhovuje vašim pracovním postupům.

Funkce neumí zpracovat více vrstev tvaru nebo textových vrstev vybraných současně, pokud nejsou seskupené. Chcete-li zkopírovat kód CSS z více vrstev najednou, nejprve je umístěte do skupiny vrstev.

Generování kódu CSS z vrstev

V panelu Vrstvy klikněte pravým tlačítkem myši na vrstvu tvaru, textovou vrstvu nebo skupinu vrstev a v místní nabídce vyberte příkaz Kopírovat kód CSS. Případně vyberte vrstvu a poté v nabídce panelu Vrstvy vyberte příkaz Kopírovat kód CSS.

Otevřete dokument se styly a vložte vygenerovaný kód pomocí kláves Ctrl + V (Windows) nebo Command + V (macOS).

Kód CSS je nyní ve schránce a připravený k integraci do webového projektu. Zkontrolujte vygenerované vlastnosti, abyste se ujistili, že odpovídají požadavkům na vývoj, a případně upravte hodnoty tak, aby vyhovovaly responzivnímu designu nebo kompatibilitě s prohlížeči.

Vytvářejte úžasné obrázky v Photoshop
Upravujte, retušujte a transformujte fotografie pomocí špičkových kreativních nástrojů, které znáte a máte rádi.

Aplikaci otevřete

Předchozí

Práce s poznámkami v aplikaci Photoshop

Informace

Učte se pomocí podrobných výukových videí a praktických pokynů přímo v aplikaci.

Komunita

Zapojte se do diskuzí, najděte odpovědi, učte se od odborníků a sdílejte své znalosti.

Domovská stránka Adobe

Získejte přístup k oblíbeným aplikacím, službám, správě souborů a dalším funkcím Creative Cloud.