Användarhandbok Avbryt

Extrahera CSS | Illustrator

  1. Användarhandbok för Illustrator
  2. Lär känna Illustrator
    1. Introduktion till Illustrator
      1. Nyheter i Illustrator
      2. Vanliga frågor
      3. Systemkrav för Illustrator
      4. Illustrator för Apple Silicon
    2. Arbetsyta
      1. Allmänt om arbetsytan
      2. Lär dig snabbare med panelen Upptäck i Illustrator
      3. Skapa dokument
      4. Verktygsfält
      5. Standardkortkommandon
      6. Anpassa kortkommandon
      7. Introduktion till ritytor
      8. Hantera ritytor
      9. Anpassa arbetsytan
      10. Egenskapspanelen
      11. Ange inställningar
      12. Toucharbetsytan
      13. Stöd för Microsoft Surface Dial i Illustrator
      14. Ångra redigeringar och hantera designhistorik
      15. Rotera vy
      16. Linjaler, stödraster och stödlinjer
      17. Tillgänglighet i Illustrator
      18. Säkert läge
      19. Visa illustrationer
      20. Använda Touch Bar med Illustrator
      21. Filer och mallar
    3. Verktyg i Illustrator
      1. Verktygsöversikt
      2. Markeringsverktyg
        1. Markering
        2. Direktmarkering
        3. Gruppmarkering
        4. Trollstav
        5. Lasso
        6. Rityta
      3. Navigeringsverktyg
        1. Hand
        2. Rotera vyn
        3. Zooma
      4. Målningsverktyg
        1. Övertoning
        2. Nät
        3. Formbyggaren
      5. Textverktyg
        1. Text
        2. Text på bana
        3. Lodrät text
      6. Ritverktyg
        1. Ritstift
        2. Lägg till fästpunkt
        3. Ta bort fästpunkt
        4. Fästpunkt
        5. Krökning
        6. Linjesegment
        7. Rektangel
        8. Rundad rektangel
        9. Oval
        10. Polygon
        11. Stjärna
        12. Pensel
        13. Plumppensel
        14. Penna
        15. Shaper
        16. Segment
      7. Ändringsverktyg
        1. Rotera
        2. Spegla
        3. Skalförändra
        4. Skeva
        5. Bredd
        6. Omforma fritt
        7. Pipett
        8. Övergång
        9. Suddgummi
        10. Sax
        11. Mått
    4. Generativ AI (inte tillgängligt i Fastlandskina)
      1. Generera scener, motiv och ikoner med textbeskrivningar
      2. Generera vektormönster med hjälp av textbeskrivningar
      3. Generera vektorformfyllningar med hjälp av textbeskrivningar
      4. Gör om färgerna i ditt alster med textbeskrivningar
    5. Snabbåtgärder
      1. Text i retrostil
      2. Text i neonljus
      3. Gammaldags text
      4. Ändra färg
      5. Konvertera en skiss till en vektorbild
  3. Illustrator på webben (beta)
    1. Översikt av Illustrator på webben (beta)
    2. Vanliga frågor om Illustrator på webben (beta)
    3. Vanliga frågor om felsökning
    4. Kortkommandon för Illustrator på webben (beta)
    5. Skapa och kombinera former på webben
    6. Lägg till och redigera text på webben
    7. Använd färger och övertoningar på webben
    8. Rita och redigera banor på webben
    9. Arbeta med molndokument på webben
    10. Bjuda in medarbetare att redigera på webben
  4. Illustrator på iPad
    1. Introduktion till Illustrator på iPad
      1. Illustrator på iPad – översikt
      2. Vanliga frågor om Illustrator på iPad
      3. Systemkrav | Illustrator på iPad
      4. Vad du kan och inte kan göra med Illustrator på iPad
    2. Arbetsyta
      1. Illustrator på iPad-arbetsytan
      2. Touchgenvägar och touchgester
      3. Kortkommandon för Illustrator på iPad
      4. Hantera appinställningarna
    3. Dokument
      1. Arbeta med dokument i Illustrator på iPad
      2. Importera Photoshop- och Fresco-dokument
    4. Markera och ordna objekt
      1. Skapa upprepade objekt
      2. Övergångsobjekt
    5. Rita
      1. Rita och redigera banor
      2. Rita och redigera former
    6. Text
      1. Arbeta med text och teckensnitt
      2. Skapa textdesign längs en bana
      3. Lägg till egna teckensnitt
    7. Arbeta med bilder
      1. Vektorisera rasterbilder
    8. Färg
      1. Använda färger och övertoningar
  5. Molndokument
    1. Grunderna
      1. Arbeta med Illustrator-molndokument
      2. Dela och samarbeta om Illustrator-molndokument
      3. Dela dokument för granskning
      4. Uppgradera molnlagringen för Adobe Illustrator
      5. Illustrator-molndokument | Vanliga frågor
    2. Felsökning
      1. Felsöka problem med att skapa eller spara molndokument i Illustrator
      2. Felsöka problem med molndokument i Illustrator
  6. Lägga till och redigera innehåll
    1. Rita och ta mått
      1. Teckningens grunder
      2. Redigera banor
      3. Skapa skarpa bilder
      4. Rita med pennan, krökningsverktyget eller pennverktyget
      5. Rita enkla linjer och former
      6. Rita rektangulära och polära stödraster
      7. Rita och redigera överstrålningar
      8. Bildkalkering
      9. Förenkla en bana
      10. Symbolverktyg och symboluppsättningar
      11. Justera bansegment
      12. Designa en blomma i fem enkla steg
      13. Skapa och redigera ett perspektivstödraster
      14. Rita och ändra objekt i ett perspektivstödraster
      15. Använd objekt som symboler för upprepad användning
      16. Rita pixeljusterade banor för webbarbetsflöden
      17. Mät och rita upp mått
    2. 3D-objekt och material
      1. Adobe 3D-effekter i Illustrator
      2. Skapa 3D-grafik
      3. Mappa en teckning över 3D-objekt
      4. Skapa 3D-text
      5. Skapa 3D-objekt
    3. Färg
      1. Om färg
      2. Välj färger
      3. Använda och skapa färgrutor
      4. Justera färger
      5. Använda temapanelen i Adobe Color
      6. Färggrupper (harmonier)
      7. Färgtemapanelen
      8. Färga om teckningar
    4. Måla
      1. Om färgläggning
      2. Färglägg med fyllningar och linjer
      3. Direktfärgsgrupper
      4. Övertoningar
      5. Penslar
      6. Genomskinlighet och blandningslägen
      7. Tillämpa linjer på ett objekt
      8. Skapa och redigera mönster
      9. Nät
      10. Mönster
    5. Markera och ordna objekt
      1. Markera objekt
      2. Lager
      3. Gruppera och expandera objekt
      4. Flytta, justera och fördela objekt
      5. Stapla objekt    
      6. Låsa, dölja och radera objekt
      7. Kopiera och duplicera objekt
      8. Rotera och spegla objekt
      9. Sammanfläta objekt
      10. Skapa realistiska konstmodeller
    6. Ändra form på objekt
      1. Beskär bilder
      2. Omforma objekt
      3. Kombinera objekt
      4. Skära ut, dela och beskära objekt
      5. Tänjning av marionett
      6. Skalförändra, skeva och förvränga objekt
      7. Övergångsobjekt
      8. Omforma med hjälp av omslag
      9. Ändra form på objekt med effekter
      10. Skapa nya former med verktygen Shaper och Formbyggare
      11. Arbeta med live-hörn
      12. Förbättrade arbetsflöden för att ändra form på objekt med stöd för touch
      13. Redigera urklippsmasker
      14. Live-former
      15. Skapa former med hjälp av verktyget Formbyggare
      16. Global redigering
    7. Format
      1. Lägg till text och jobba med textobjekt
      2. Skapa punktlistor och numrerade listor
      3. Hantera textområde
      4. Teckensnitt och typografi
      5. Konvertera text i bilder till redigerbar text
      6. Enkel formatering av text
      7. Avancerad formatering av text
      8. Importera och exportera text
      9. Formatera stycken
      10. Specialtecken
      11. Skapa text på en bana
      12. Tecken- och styckeformat
      13. Flikar
      14. Sök efter saknade teckensnitt (Typekit-arbetsflöde)
      15. Arabisk och hebreisk text
      16. Teckensnitt | Vanliga frågor och felsökningstips
      17. Skapa 3D-texteffekter
      18. Kreativ typografisk design
      19. Skalförändra och rotera text
      20. Rad- och teckenavstånd
      21. Avstavning och radbrytningar
      22. Stavnings- och språkordlistor
      23. Formatera asiatiska tecken
      24. Dispositioner för asiatisk skrift
      25. Skapa textdesign med övergångar mellan objekt
      26. Skapa en textaffisch med Bildkalkering
    8. Skapa specialeffekter
      1. Arbeta med effekter
      2. Grafikformat
      3. Utseendeattribut
      4. Skapa skisser och mosaik
      5. Skuggor, glöd och ludd
      6. Sammanfattning av effekter
    9. Webbgrafik
      1. Bästa sätten att skapa webbgrafik
      2. Diagram
      3. SVG
      4. Segment och bildscheman
  7. Importera, exportera och spara
    1. Importera
      1. Montera flera filer
      2. Hantera länkade och inbäddade filer
      3. Länkinformation
      4. Ångra inbäddning av bilder
      5. Importera teckningar från Photoshop
      6. Importera bitmappsbilder
      7. Importera Adobe PDF-filer
      8. Importera EPS-, DCS- och AutoCAD-filer
    2. Creative Cloud Libraries i Illustrator 
      1. Creative Cloud Libraries i Illustrator
    3. Spara och exportera
      1. Spara teckningar
      2. Exportera teckningar
      3. Skapa Adobe PDF-filer
      4. Adobe PDF-alternativ
      5. Använda Illustrator-bilder i Photoshop
      6. Samla resurser och exportera gruppvis
      7. Packa filer
      8. Extrahera CSS | Illustrator CC
      9. Panelen Dokumentinfo
  8. Skriva ut
    1. Förbereda för utskrift
      1. Ange utskriftsinställningar för dokument
      2. Ändra sidstorlek och orientering
      3. Ange skärmärken för beskärning eller justering
      4. Kom igång med stora arbetsytor
    2. Skriva ut
      1. Övertryck
      2. Skriva ut med färghantering
      3. PostScript-utskrift
      4. Utskriftsförinställningar
      5. Utskriftsmärken och utfall
      6. Skriva ut och spara genomskinliga teckningar
      7. Svällning
      8. Skriva ut färgseparationer
      9. Skriva ut övertoningar, nätövertoningar och färgövergångar
      10. Vitt övertryck
  9. Automatisera uppgifter
    1. Datasammanfogning med hjälp av panelen Variabler
    2. Automatisering med skript
    3. Automatisering med funktionsmakron
  10. Felsökning 
    1. Åtgärdade problem
    2. Kända fel
    3. Problem med krascher
    4. Återställ filer efter kraschar
    5. Filproblem
    6. Filformat som stöds
    7. Problem med GPU-enhetsdrivrutiner
    8. Problem med Wacom-enheter
    9. Problem med DLL-filer
    10. Minnesproblem
    11. Problem med preferensfilen
    12. Problem med teckensnitt
    13. Skrivarproblem
    14. Skicka en kraschrapport till Adobe
    15. Förbättra prestandan för Illustrator

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.
CSS-egenskapskod

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:

  1. Välj Fönster > CSS-egenskaper.

    Obs!

    Kontrollera att objekten i Illustrator-dokumentet har namn i panelen Lager.

  2. 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.

  3. 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.

  4. När du sparar CSS-kod till en fil väljer du bland alternativen i dialogrutan CSS-exportalternativ.

    Dialogrutan 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é?

Fråga användarforumet

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

Få hjälp snabbare och enklare

Ny användare?

Adobe MAX 2024

Adobe MAX
Kreativitetskonferensen

14–16 okt i Miami Beach och online

Adobe MAX

Kreativitetskonferensen

14–16 okt i Miami Beach och online

Adobe MAX 2024

Adobe MAX
Kreativitetskonferensen

14–16 okt i Miami Beach och online

Adobe MAX

Kreativitetskonferensen

14–16 okt i Miami Beach och online