Brugerhåndbog Annuller

Udtræk CSS | Illustrator

Søg
Illustrator

Illustrator

Åbn på internettet
  1. Brugerhåndbog til Illustrator
  2. Lær Illustrator at kende
    1. Introduktion til Illustrator
      1. Nyheder i Illustrator
      2. Almindelige spørgsmål
      3. Systemkrav til Illustrator
      4. Illustrator til Apple silicon
      5. GPU-ydeevne
    2. Arbejdsrum
      1. Grundlæggende om arbejdsrum
      2. Opret dokumenter
      3. Lær hurtigere med panelet Opdag i Illustrator
      4. Fremskynd arbejdsgange ved hjælp af den kontekstuelle opgavelinje
      5. Værktøjslinje
      6. Standardtastaturgenveje
      7. Tilpas tastaturgenveje
      8. Introduktion til tegnebrætter
      9. Administrer tegnebrætter
      10. Tilpas arbejdsrummet
      11. Panelet Egenskaber
      12. Angive indstillinger
      13. Touch-arbejdsrum
      14. Understøttelse af Microsoft Surface Dial i Illustrator
      15. Fortryd redigeringer og administrer designhistorik
      16. Roter visning
      17. Linealer, gitre og hjælpelinjer
      18. Tilgængelighed i Illustrator
      19. Vis illustrationer
      20. Brug Touch Bar med Illustrator
      21. Filer og skabeloner
    3. Værktøjer i Illustrator
      1. Et overblik over værktøjer
      2. Vælg værktøjer
        1. Valg
        2. Direkte markering
        3. Gruppemarkering
        4. Tryllestav
        5. Lasso
        6. Tegnebræt
      3. Navigeringsværktøjer
        1. Hånd
        2. Roter visning
        3. Zoom
      4. Maleværktøjer
        1. Forløb
        2. Maske
        3. Opret form
      5. Tekstværktøjer
        1. Tekst
        2. Tekst på en kurve
        3. Lodret tekst
      6. Tegneværktøjer
        1. Pen
        2. Tilføj ankerpunkt
        3. Slet ankerpunkt
        4. Ankerpunkt
        5. Krumning
        6. Stregsegment
        7. Rektangel
        8. Afrundet rektangel
        9. Ellipse
        10. Polygon
        11. Stjerne
        12. Pensel
        13. Klatpensel
        14. Blyant
        15. Shaper
        16. Udsnit
      7. Ændringsværktøjer
        1. Roter
        2. Spejling
        3. Skaler
        4. Vridning
        5. Bredde
        6. Fri transformering
        7. Pipette
        8. Bland
        9. Viskelæder
        10. Saks
        11. Dimension
    4. Generativ AI (ikke tilgængelig i det kinesiske hovedland)
      1. Generér scener, motiver og ikoner ved hjælp af tekstprompter
      2. Generér vektormønstre ved hjælp af tekstprompter
      3. Generér vektorformudfyldninger ved hjælp af tekstprompter
      4. Farv din illustration igen ved hjælp af tekstprompter
    5. Hurtige handlinger
      1. Retro-tekst
      2. Neonskær-tekst
      3. Old school-tekst
      4. Skift farve
      5. Konverter skitse til vektor
  3. Illustrator på iPad
    1. Nu kommer Illustrator på iPad
      1. Oversigt over Illustrator på iPad
      2. Ofte stillede spørgsmål om Illustrator på iPad
      3. Systemkrav | Illustrator på iPad
      4. Hvad du kan og ikke kan gøre med Illustrator på iPad
    2. Arbejdsrum
      1. Illustrator-arbejdsrum på iPad
      2. Touchgenveje og -bevægelser
      3. Genvejstaster til Illustrator på iPad
      4. Administrer dine appindstillinger
    3. Dokumenter
      1. Arbejde med dokumenter i Illustrator på iPad'en
      2. Importér Photoshop- og Fresco-dokumenter
    4. Markér og arranger objekter
      1. Opret gentagelsesobjekter
      2. Blandede objekter
    5. Tegning
      1. Tegn og rediger kurver
      2. Tegn og rediger former
    6. Tekst
      1. Arbejd med tekst og skrifttyper
      2. Opret tekstdesign langs en kurve 
      3. Tilføj dine egne skrifttyper
    7. Arbejd med billeder
      1. Vektoriser rasterbilleder
    8. Farve
      1. Anvend farver og farveforløb
  4. Cloud-dokumenter
    1. Grundlæggende
      1. Arbejd med Illustrator-cloud-dokumenter
      2. Del og samarbejd om Illustrator-cloud-dokumenter
      3. Del dokumenter til gennemgang
      4. Opgrader cloud-lagring til Adobe Illustrator
      5. Illustrator-cloud-dokumenter | Almindelige spørgsmål
    2. Fejlfinding
      1. Fejlfinding af problemer med at oprette eller gemme cloud-dokumenter i Illustrator
      2. Fejlfinding af problemer med cloud-dokumenter i Illustrator
  5. Tilføj og rediger indhold
    1. Tegning
      1. Grundlæggende om tegning
      2. Redigering af kurver
      3. Tegn pixel-perfekte illustrationer
      4. Tegning med penne-, krumnings- eller blyantsværktøjet
      5. Tegn enkle streger og former
      6. Tegn rektangulære og polære gitre
      7. Tegn og rediger overstrålinger
      8. Vektoriser billeder
      9. Forenkl en kurve
      10. Symbolismeværktøjer og symbolsæt
      11. Juster kurvesegmenter
      12. Design en blomst i 5 enkle trin
      13. Opret og rediger et perspektivgitter
      14. Tegn og rediger objekter på et perspektivgitter
      15. Brug objekter som symboler til gentagen brug
      16. Tegn pixeljusterede kurver til webarbejdsforløb
    2. Måling
      1. Mål og plot dimensioner
    3. 3D-objekter og materialer
      1. Om 3D-effekter i Illustrator
      2. Opret 3D-grafik
      3. Knyt illustrationer til 3D-objekter
      4. Opret 3D-tekst
      5. Opret 3D-objekter
    4. Farve
      1. Om farver
      2. Vælg farver
      3. Brug og opret farveprøver
      4. Juster farver
      5. Brug panelet med Adobe Color-temaer
      6. Farvegrupper (harmonier)
      7. Panelet Farvetemaer
      8. Skift farve på din illustration
    5. Maling
      1. Om maling
      2. Mal med fyld og streger
      3. Dynamisk maling-grupper
      4. Forløb
      5. Pensler
      6. Gennemsigtighed og blandingstilstande
      7. Anvend streg på et objekt
      8. Opret og rediger mønstre
      9. Masker
      10. Mønstre
    6. Markér og arranger objekter
      1. Markér objekter
      2. Lag
      3. Udvid, gruppér og ophæv gruppering af objekter
      4. Flyt, juster og fordel objekter
      5. Juster, arranger og flyt objekter på en kurve
      6. Fastgør objekter til glyf
      7. Fastgør objekter til japansk glyf
      8. Stabling af objekter    
      9. Lås, skjul og slet objekter
      10. Kopiér og dubler objekter
      11. Roter og spejl objekter
      12. Sammenflet objekter
      13. Opret realistiske illustrationsmodeller
    7. Omform objekter
      1. Beskær billeder
      2. Transformer objekter
      3. Kombiner objekter
      4. Klip, opdel og beskær objekter
      5. Fordrej som marionetdukke
      6. Skaler, vrid og forvræng objekter
      7. Blandede objekter
      8. Omformning med hylstre
      9. Omformning af objekter ved hjælp af effekter
      10. Opret nye former med værktøjerne Shaper og Opret form
      11. Arbejde med live-hjørner
      12. Berøringsunderstøttelse forbedrer dine arbejdsforløb
      13. Rediger udsnitsmasker
      14. Live-former
      15. Opret former med værktøjet Opret form
      16. Global redigering
    8. Tekst
      1. Tilføj tekst og arbejd med tekstobjekter
      2. Reflow-fremviser
      3. Opret opstillinger med punkttegn og tal/bogstaver
      4. Styr tekstområde
      5. Skrifttyper og typografi
      6. Konverter tekst i billeder til redigerbar tekst
      7. Føj grundlæggende formatering til tekst
      8. Føj avanceret formatering til tekst
      9. Import og eksport af tekst
      10. Formater afsnit
      11. Specialtegn
      12. Opret tekst på en kurve
      13. Tegn- og afsnitstyper
      14. Faner
      15. Tilføj manglende skrifttyper fra Adobe Fonts
      16. Arabisk og hebraisk tekst
      17. Skrifttyper | Ofte stillede spørgsmål og tips om fejlfinding
      18. Kreative typografiske design
      19. Skaler og roter tekst
      20. Linje- og tegnafstand
      21. Orddeling og linjeskift
      22. Stave- og sprogordbøger
      23. Formater asiatiske tegn
      24. Ombryder til asiatiske skriftarter
      25. Opret tekstdesign med blandede objekter
      26. Opret en tekstplakat ved hjælp af Billedvektor
    9. Opret specialeffekter
      1. Arbejde med effekter
      2. Grafikformater
      3. Attributter for udseende
      4. Opret skitser og mosaikker
      5. Skyggeeffekter, skær og udtynding
      6. Oversigt over effekter
    10. Webgrafik
      1. Bedste fremgangsmåder for oprettelse af webgrafik
      2. Diagrammer
      3. SVG
      4. Udsnit og grafikobjekter
  6. Importere, eksportere og gemme
    1. Importér
      1. Placer flere filer
      2. Administrer sammenkædede og integrerede filer
      3. Kædeoplysninger
      4. Ophæv integrering af billeder
      5. Importér illustrationer fra Photoshop
      6. Import af bitmapbilleder
      7. Import af Adobe PDF-filer
      8. Import af EPS-, DCS- og AutoCAD-filer
    2. Creative Cloud Libraries i Illustrator 
      1. Creative Cloud Libraries i Illustrator
    3. Gem og eksportér
      1. Gem illustration
      2. Eksportér illustrationer
      3. Opret Adobe PDF-filer
      4. Adobe PDF-indstillinger
      5. Brug Illustrator-illustrationer i Photoshop
      6. Hent aktiver, og eksportér i batches
      7. Pakkefiler
      8. Udtræk CSS | Illustrator CC
      9. Panelet Dokumentinfo
  7. Udskrivning
    1. Forbered til udskrivning
      1. Konfigurer dokumenter til udskrivning
      2. Skift sidestørrelse og -retning
      3. Angiv skæremærker til beskæring eller justering
      4. Kom i gang med stort lærred
    2. Udskrivning
      1. Overprint
      2. Udskrivning med farvestyring
      3. PostScript-udskrivning
      4. Printerforudindstillinger
      5. Printermærker og beskæringer
      6. Udskriv og gem gennemsigtige illustrationer
      7. Diffusering
      8. Udskrive farveseparationer
      9. Udskrivning af farveforløb, masker og farveblandinger
      10. Hvid overprint
  8. Automatiser opgaver
    1. Datafletning ved hjælp af panelet Variabler
    2. Automatisering med scripts
    3. Automatisering med handlinger
  9. Fejlfinding 
    1. Løste problemer
    2. Kendte problemer
    3. Problemer med, at programmet går ned
    4. Gendan filer efter nedbrud
    5. Sikker tilstand
    6. Filproblemer
    7. Understøttede filformater
    8. Problemer med GPU-enhedsdriver
    9. Problemer med Wacom-enhed
    10. Problemer med DLL-fil
    11. Problemer med hukommelse
    12. Problemer med indstillingsfil
    13. Problemer med skrifttyper
    14. Problemer med printer
    15. Del nedbrudsrapport med Adobe
    16. Optimering af ydeevnen i Illustrator

Lær, hvordan du udtrækker og eksporterer CSS-koden for hvert enkelt objekt eller for hele det layout, der er designet i Illustrator.

Du kan designe en HTML-side i Illustrator. Dette er en god visuel rettesnor for en webudvikler, som herefter kan kode layoutet, typografierne og objekterne til en side i et HTML-redigeringsprogram. Det er dog et stort arbejde at genskabe det nøjagtige udseende og komponenternes eksakte placering.

I Illustrator kan du, når du opretter layoutet for en HTML-side, også generere og eksportere den underlæggende CSS-kode, der bestemmer komponenternes og objekternes udseende på siden. Med CSS kan du kontrollere udseendet af tekst og objekter (på samme måde som tegn- og grafikformaterne).   

Vis og udtræk CSS-kode

Brugerne kan gøre følgende i panelet CSS-egenskaber:

  • Vis og kopi+er CSS-koden for de markerede objekter.
  • Eksportér et, flere eller alle de markerede Illustrator-elementer til en CSS-fil.
  • Eksportér billeder, der kan omdannes til rasterbilleder.
  • Generér browserspecifik CSS-kode.
CSS-egenskabskode

A. Advarsel, hvis nogle formater ikke kunne konverteres til CSS-kode B. Dialogboksen Indstillinger for CSS-eksport C. Eksportér markeret CSS til fil D. Kopiér det markerede format til udklipsholder E. Generer CSS F. Panelmenuen CSS-egenskaber G. Formatter brugt i de markerede objekter H. CSS-kode 

Følg nedenstående trin for at vise og udtrække CSS-koden:

  1. Vælg Vindue > CSS-egenskaber.

    Bemærk:

    Sørg for, at objekterne i dit Illustrator-dokument er navngivet i panelet Lag.

  2. Sådan vises den genererede CSS-kode:

    For et objekt:

    Markér et objekt. CSS-koden for objektet vises i panelet CSS-egenskaber.

    For flere objekter:

    Hold Skift nede, markér flere objekter, og vælg derefter Generér CSS i panelet CSS-egenskaber.

    For alle objekterne:

    Tryk på Ctrl/Cmd+A for at markere alle objekterne, og vælg derefter Generér CSS i panelet CSS-egenskaber.

  3. Benyt en af følgende fremgangsmåder til at hente den CSS-kode, der er genereret:

    Sådan kopieres den markrede kode:

    • Vælg en bestemt kode og vælg Kopiér det markerede format for at kopiere det til udklipsholderen.
    • Vælg panelmenuen CSS-egenskaber  , og vælg Eksportér valgt CSS for at eksportere til en fil.

    Sådan kopierer du alle koderne:

    • Undlad at markere noget i CSS-koden, og vælg Kopiér det markerede format for at kopiere det til udklipsholderen.
    • Vælg panelmenuen CSS-egenskaber  , og vælg Eksportér alt for at eksportere til en fil.

  4. Når du gemmer CSS-kode til en fil, skal du vælge mellem mulighederne i dialogboksen CSS-eksportindstillinger.

    Dialogboksen CSS-eksportindstillinger
    CSS-eksportindstillinger

Eksempel på CSS-kode

Rektangel med en farvetildeling (alle browsere)

.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 farveforløbtildeling (gælder kun webkitbaserede browsere)

.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;
}

Flere objekter

.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;
}

Relaterede emner

Har du et spørgsmål eller en idé?

Spørg i fællesskabet

Hvis du har et spørgsmål eller en god idé, så kom og deltag i Adobe Illustrator Community. Vi vil meget gerne høre fra dig.

Få hjælp hurtigere og nemmere

Ny bruger?

Hurtige links

Se alle dine planer Administrer dine planer
Se hurtige links
Skjul hurtige links

Juridiske meddelelser    |    Politik til beskyttelse af personlige oplysninger online