Vyberte možnost Okno > Vlastnosti CSS.
- Příručka uživatele aplikace Illustrator
- Seznamte se s aplikací Illustrator
- Úvod do aplikace Illustrator
- Pracovní plocha
- Základy práce s pracovní plochou
- Rychlejší učení s panelem Prohledávání aplikace Illustrator
- Vytváření dokumentů
- Panel nástrojů
- Výchozí klávesové zkratky
- Přizpůsobení klávesových zkratek
- Úvod ke kreslicím plátnům
- Správa kreslicích pláten
- Přizpůsobení pracovní plochy
- Panel Vlastnosti
- Nastavení předvoleb
- Dotyková pracovní plocha
- Podpora zařízení Microsoft Surface Dial v aplikaci Illustrator
- Vrácení úprav zpět a správa historie návrhu
- Otočení zobrazení
- Pravítka, mřížky a vodítka
- Usnadnění v aplikaci Illustrator
- Bezpečný režim
- Zobrazení kresby
- Používání panelu Touch Bar s aplikací Illustrator
- Soubory a předlohy
- Nástroje v aplikaci Illustrator
- Přehled nástrojů
- Nástroje pro výběr
- Nástroje navigace
- Nástroje pro malování
- Textové nástroje
- Nástroje pro kreslení
- Nástroje pro úpravu
- Rychlé akce
- Illustrator na iPadu
- Úvod do aplikace Illustrator na iPadu
- Pracovní plocha
- Dokumenty
- Výběr a uspořádání objektů
- Kreslení
- Text
- Práce s obrázky
- Barvy
- Dokumenty v cloudu
- Základní informace
- Řešení problémů
- Přidání a úpravy obsahu
- Kreslení
- Základy kreslení
- Úpravy cest
- Nakreslení pixelově dokonalé kresby
- Kreslení pomocí nástroje pero, zakřivení nebo tužka
- Kreslení jednoduchých čar a tvarů
- Vektorizace obrazu
- Zjednodušení cesty
- Definování perspektivních mřížek
- Nástroje pro práci se symboly a sady symbolů
- Úpravy segmentů cest
- Návrh květiny v 5 snadných krocích
- Perspektivní kreslení
- Symboly
- Kreslení cest zarovnaných podle obrazových bodů v pracovních postupech určených pro web
- 3D objekty a materiály
- Barvy
- Malování
- Výběr a uspořádání objektů
- Změna tvaru objektů
- Oříznutí obrazů
- Transformace objektů
- Kombinování objektů
- Vyjímání, rozdělování a ořezávání objektů
- Pokřivení loutky
- Změna velikosti, zkosení a deformování objektů
- Prolnutí objektů
- Změna tvaru s použitím obálek
- Změna tvaru objektů pomocí efektů
- Vytvářejte nové tvary pomocí nástroje Shaper a nástroje pro vytváření tvaru
- Práce s živými rohy
- Vylepšené pracovní postupy změny tvarů s podporou dotykového ovládání
- Úpravy ořezových masek
- Živé tvary
- Vytváření tvarů pomocí nástroje pro vytváření tvaru
- Globální úpravy
- Text
- Přidání textu a práce s textovými objekty
- Vytvoření seznamu s odrážkami a číslovaného seznamu
- Správa textové oblasti
- Písma a typografie
- Formátování textu
- Import a export textu
- Formátování odstavců
- Speciální znaky
- Vytvoření textu na cestě
- Znakové a odstavcové styly
- Záložky
- Text
- Nalezení chybějících písem (pracovní postup pro Typekit)
- Aktualizace textu z aplikace Illustrator 10
- Písma pro arabštinu a hebrejštinu
- Písma | Nejčastější dotazy a tipy pro řešení potíží
- Vytvoření efektu 3D textu
- Návrhy pro tvůrčí typografii
- Změna velikosti a natočení textu
- Mezery mezi řádky a znaky
- Dělení slov a zalamování řádků
- Vylepšení textu
- Slovníky pro kontrolu pravopisu
- Formátování asijských znaků
- Sazby pro asijská písma
- Vytváření textových návrhů s prolnutím objektů
- Vytvoření textového plakátu pomocí vektorizace obrazu
- Vytváření zvláštních efektů
- Webové grafiky
- Kreslení
- Import, export a ukládání
- Importovat
- Creative Cloud knihovny v aplikaci Illustrator
- Uložit
- Export
- Tisk
- Příprava k tisku
- Tisk
- Automatizace úloh
- Řešení problémů
- Chyby aplikace
- Obnovení souborů po zhroucení
- Problémy se soubory
- Podporované formáty souborů
- Problémy s ovladačem grafického zařízení
- Problémy se zařízením Wacom
- Problémy se soubory DLL
- Problémy s pamětí
- Problémy se souborem předvoleb
- Problémy s písmy
- Problémy s tiskárnou
- Sdílení hlášení o zhroucení se společností Adobe
- Zlepšení výkonu aplikace Illustrator
Zjistěte, jak extrahovat a exportovat kód CSS pro jednotlivé objekty, nebo pro celé rozvržení navržené v aplikaci Illustrator.
V Illustratoru lze vytvořit design pro stránku HTML. Slouží jako dobrý vizuální průvodce pro vývojáře webu, který pak může nakódovat rozvržení, styly a objekty na stránku v editoru HTML. Replikování přesně stejného vzhledu a pozice komponentů a objektů je však časově náročný a jednotvárný proces.
Pomocí aplikace Illustrator lze při tvorbě rozvržení pro stránku HTML také generovat a exportovat základní kód CSS, který určuje vzhled komponentů a objektů na stránce. CSS umožňuje kontrolovat vzhled textu a objektů (podobně jako znakové a grafické styly).
Zobrazení a extrahování kódu CSS
Panel Vlastnosti CSS umožňuje uživatelům provádět následující akce:
- Zobrazit a zkopírovat kód CSS pro vybrané objekty.
- Exportovat nejméně jeden nebo všechny vybrané prvky Illustratoru do souboru CSS.
- Exportovat použité rastrovatelné obrázky.
- Generovat kód CSS pro daný prohlížeč.

A. Upozornění na případ, kdy některé styly nelze převést na kód CSS B. Dialogové okno Volby exportu do CSS C. Export vybraného kódu CSS do souboru D. Kopírování vybraného stylu do schránky E. Generovat CSS F. Nabídka na panelu Vlastnosti CSS G. Styly použité ve vybraných objektech H. Kód CSS
Pokud budete chtít zobrazit a extrahovat kód CSS, postupujte následovně:
-
Poznámka:
Ujistěte se, že jsou objekty v dokumentu Illustratoru pojmenovány v panelu Rozvržení.
-
Zobrazení vygenerovaného kódu CSS:
Pro jeden objekt:
Vyberte jeden objekt. Kód CSS pro objekt se zobrazí na panelu Vlastnosti CSS.
Pro více objektů:
Přidržte klávesu Shift, vyberte více objektů a poté vyberte možnost Generovat CSS na panelu Vlastnosti CSS.
Pro všechny objekty:
Stisknutím kláves Ctrl/Cmd + A vyberte všechny objekty a vyberte možnost Generovat CSS na panelu Vlastnosti CSS.
-
Chcete-li získat vygenerovaný kód CSS, proveďte jeden z následujících kroků:
Kopírování vybraného kódu:
- Označte konkrétní kód a výběrem možnosti Kopírovat vybraný styl jej zkopírujte do schránky.
- Vyberte nabídku Panel vlastností CSS Exportovat vybrané CSS jej exportujte do souboru.
a výběrem možnosti
Zkopírování všech kódů:
- U kódu CSS nic neoznačujte a výběrem možnosti Kopírovat vybraný styl jej zkopírujte do schránky.
- Vyberte nabídku Panel vlastností CSS Exportovat vše vše exportujte do souboru.
a výběrem možnosti
-
Při ukládání kódu CSS do souboru zvolte některou z možností v dialogovém okně Volby exportu do CSS.
Volby exportu do CSS
Příklad kódu CSS
Obdélník s použitým gradientem (všechny prohlížeče)
.GRADIENT_BOX { background : -moz-linear-gradient(0% 50% 0deg,rgba(255, 242, 0, 1) 0%,rgba(254, 236, 1, 1) 10.31%,rgba(253, 218, 4, 1) 24.34%,rgba(251, 190, 9, 1) 40.51%,rgba(247, 150, 15, 1) 58.28%,rgba(243, 99, 24, 1) 77.37%,rgba(238, 37, 34, 1) 97.27%,rgba(237, 28, 36, 1) 100%); background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) )); background : -o-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); background : -ms-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF200', endColorstr='#ED1C24' ,GradientType=0)"; background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); border-style : Solid; border-color : #231F20; border-color : rgba(35, 31, 32, 1); border-width : 1px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF200',endColorstr='#ED1C24' , GradientType=1); }
Obdélník s použitým gradientem (pouze prohlížeče se sadou webkit)
.GRADIENT_BOX { background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) )); background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); border-style : Solid; border-color : #231F20; border-color : rgba(35, 31, 32, 1); border-width : 1px; }
Více objektů
.NormalCharacterStyle { font-family : Myriad Pro; font-size : 12px; } .st0 { border-style : Solid; border-color : #FFFFFF; border-color : rgba(255, 255, 255, 1); border-width : 0px; } .GRADIENT_BOX { background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) )); background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); border-style : Solid; border-color : #231F20; border-color : rgba(35, 31, 32, 1); border-width : 1px; }
Související témata
Máte nějaký dotaz nebo nápad?
Pokud máte dotaz nebo se chcete podělit o svůj nápad, zapojte se do komunity aplikace Adobe Illustrator. Budeme rádi za každou vaši reakci.
Přihlaste se ke svému účtu.