Välj Fönster > CSS-egenskaper.
Senast uppdaterad den
24 maj 2023
- Användarhandbok för Illustrator
- Lär känna Illustrator
- Introduktion till Illustrator
- Arbetsyta
- Allmänt om arbetsytan
- Lär dig snabbare med panelen Upptäck i Illustrator
- Skapa dokument
- Verktygsfält
- Standardkortkommandon
- Anpassa kortkommandon
- Introduktion till ritytor
- Hantera ritytor
- Anpassa arbetsytan
- Egenskapspanelen
- Ange inställningar
- Toucharbetsytan
- Stöd för Microsoft Surface Dial i Illustrator
- Ångra redigeringar och hantera designhistorik
- Rotera vy
- Linjaler, stödraster och stödlinjer
- Tillgänglighet i Illustrator
- Säkert läge
- Visa illustrationer
- Använda Touch Bar med Illustrator
- Filer och mallar
- Verktyg i Illustrator
- Verktygsöversikt
- Markeringsverktyg
- Navigeringsverktyg
- Målningsverktyg
- Textverktyg
- Ritverktyg
- Ändringsverktyg
- Generativ AI (inte tillgängligt i Fastlandskina)
- Snabbåtgärder
- Illustrator på webben (beta)
- Översikt av Illustrator på webben (beta)
- Vanliga frågor om Illustrator på webben (beta)
- Vanliga frågor om felsökning
- Kortkommandon för Illustrator på webben (beta)
- Skapa och kombinera former på webben
- Lägg till och redigera text på webben
- Använd färger och övertoningar på webben
- Rita och redigera banor på webben
- Arbeta med molndokument på webben
- Bjuda in medarbetare att redigera på webben
- Illustrator på iPad
- Introduktion till Illustrator på iPad
- Arbetsyta
- Dokument
- Markera och ordna objekt
- Rita
- Text
- Arbeta med bilder
- Färg
- Molndokument
- Grunderna
- Felsökning
- Lägga till och redigera innehåll
- Rita och ta mått
- Teckningens grunder
- Redigera banor
- Skapa skarpa bilder
- Rita med pennan, krökningsverktyget eller pennverktyget
- Rita enkla linjer och former
- Rita rektangulära och polära stödraster
- Rita och redigera överstrålningar
- Bildkalkering
- Förenkla en bana
- Symbolverktyg och symboluppsättningar
- Justera bansegment
- Designa en blomma i fem enkla steg
- Skapa och redigera ett perspektivstödraster
- Rita och ändra objekt i ett perspektivstödraster
- Använd objekt som symboler för upprepad användning
- Rita pixeljusterade banor för webbarbetsflöden
- Mät och rita upp mått
- 3D-objekt och material
- Färg
- Måla
- Markera och ordna objekt
- Ändra form på objekt
- Beskär bilder
- Omforma objekt
- Kombinera objekt
- Skära ut, dela och beskära objekt
- Tänjning av marionett
- Skalförändra, skeva och förvränga objekt
- Övergångsobjekt
- Omforma med hjälp av omslag
- Ändra form på objekt med effekter
- Skapa nya former med verktygen Shaper och Formbyggare
- Arbeta med live-hörn
- Förbättrade arbetsflöden för att ändra form på objekt med stöd för touch
- Redigera urklippsmasker
- Live-former
- Skapa former med hjälp av verktyget Formbyggare
- Global redigering
- Format
- Lägg till text och jobba med textobjekt
- Skapa punktlistor och numrerade listor
- Hantera textområde
- Teckensnitt och typografi
- Konvertera text i bilder till redigerbar text
- Enkel formatering av text
- Avancerad formatering av text
- Importera och exportera text
- Formatera stycken
- Specialtecken
- Skapa text på en bana
- Tecken- och styckeformat
- Flikar
- Sök efter saknade teckensnitt (Typekit-arbetsflöde)
- Arabisk och hebreisk text
- Teckensnitt | Vanliga frågor och felsökningstips
- Skapa 3D-texteffekter
- Kreativ typografisk design
- Skalförändra och rotera text
- Rad- och teckenavstånd
- Avstavning och radbrytningar
- Stavnings- och språkordlistor
- Formatera asiatiska tecken
- Dispositioner för asiatisk skrift
- Skapa textdesign med övergångar mellan objekt
- Skapa en textaffisch med Bildkalkering
- Skapa specialeffekter
- Webbgrafik
- Rita och ta mått
- Importera, exportera och spara
- Importera
- Creative Cloud Libraries i Illustrator
- Spara och exportera
- Skriva ut
- Förbereda för utskrift
- Skriva ut
- Automatisera uppgifter
- Felsökning
- Åtgärdade problem
- Kända fel
- Problem med krascher
- Återställ filer efter kraschar
- Filproblem
- Filformat som stöds
- Problem med GPU-enhetsdrivrutiner
- Problem med Wacom-enheter
- Problem med DLL-filer
- Minnesproblem
- Problem med preferensfilen
- Problem med teckensnitt
- Skrivarproblem
- Skicka en kraschrapport till Adobe
- Förbättra prestandan för Illustrator
- Åtgärdade problem
Lär dig extrahera och exportera CSS-kod för enskilda objekt eller för en hel layout som är utformad med Illustrator.
Du kan skapa designen för en HTML-sida i Illustrator. Det fungerar som en bra visuell guide för webbutvecklare som sedan kan koda layouten, format och objekt på en sida i en HTML-redigerare. Det är dock en tidskrävande och omständlig process att exakt återge komponenternas och objektens utseende och position.
När du skapar layouten för en HTML-sida med Illustrator kan du även generera och exportera den underliggande CSS-kod som avgör komponenternas och objektens utseende på sidan. Med CSS kan du styra utseendet på text och objekt (på liknande sätt som för tecken- och grafikformat).
Visa och extrahera CSS-kod
På panelen CSS-egenskaper kan användarna göra följande:
- Visa och kopiera CSS-koden för markerade objekt.
- Exportera en, flera eller alla markerade Illustrator-element till en CSS-fil.
- Exportera de rastrerbara bilder som används.
- Generera webbläsarspecifik CSS-kod.
A. Varning om att vissa format inte kunde konverteras till CSS-kod B. Dialogrutan CSS-exportalternativ C. Exportera markerade CSS till fil D. Kopiera valt format till Urklipp E. Generera CSS F. Panelmenyn CSS-egenskaper G. Format som används i det markerade objektet H. CSS-kod
Följ de här stegen för att visa och extrahera CSS-koden:
-
Obs!
Kontrollera att objekten i Illustrator-dokumentet har namn i panelen Lager.
-
Om du vill visa den genererade CSS-koden:
För ett objekt:
Markera ett objekt. CSS-koden för objektet visas i panelen CSS-egenskaper.
För flera objekt:
Håll ned Skift-tangenten, markera flera objekt och välj sedan Generera CSS i panelen CSS-egenskaper.
För alla objekt:
Tryck först på Ctrl/Cmd + A för att markera alla objekt och välj sedan Generera CSS i panelen CSS-egenskaper.
-
Gör något av följande för att få den CSS-kod som har genererats:
Om du vill kopiera den valda koden:
- Välj en viss kod och välj Kopiera markerad stil för att kopiera den till Urklipp.
- Välj menyn i panelen CSS-egenskaper och välj Exportera markerad CSS för att exportera till en fil.
Om du vill kopiera alla koder:
- Markera inget i CSS-koden och välj Kopiera markerad stil för att kopiera den till Urklipp.
- Välj menyn i panelen CSS-egenskaper och välj Exportera alla för att exportera till en fil.
-
När du sparar CSS-kod till en fil väljer du bland alternativen i dialogrutan CSS-exportalternativ.
CSS-exportalternativ
CSS-exportalternativ
Exempel på CSS-kod
Rektangel med en övertoning tillämpad (alla webbläsare)
.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);
}
Rektangel med en övertoning tillämpad (endast webkit-baserade webbläsare)
.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;
}
Flera 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;
}
Relaterade ämnen
Har du en fråga eller en idé?
Om du har frågor eller förslag får du gärna vara med i Adobe Illustrator-communityn. Vi vill veta vad du tycker.
Adobe MAX
Kreativitetskonferensen
14–16 okt i Miami Beach och online
Adobe MAX
Kreativitetskonferensen
14–16 okt i Miami Beach och online