Brugerhåndbog Annuller

Udtræk CSS | Illustrator

Søg
  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
    2. Arbejdsrum
      1. Grundlæggende om arbejdsrum
      2. Lær hurtigere med panelet Opdag i Illustrator
      3. Opret dokumenter
      4. Værktøjslinje
      5. Standardtastaturgenveje
      6. Tilpas tastaturgenveje
      7. Introduktion til tegnebrætter
      8. Administrer tegnebrætter
      9. Tilpas arbejdsrummet
      10. Panelet Egenskaber
      11. Angive indstillinger
      12. Touch-arbejdsrum
      13. Understøttelse af Microsoft Surface Dial i Illustrator
      14. Fortryd redigeringer og administrer designhistorik
      15. Roter visning
      16. Linealer, gitre og hjælpelinjer
      17. Tilgængelighed i Illustrator
      18. Sikker tilstand
      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
    4. 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. Tegning af enkle linjer og former
      6. Billedvektor
      7. Forenkl en kurve
      8. Definition af perspektivgitre
      9. Symbolismeværktøjer og symbolsæt
      10. Justering af kurvesegmenter
      11. Design en blomst i 5 enkle trin
      12. Perspektivtegning
      13. Symboler
      14. Tegning af pixeljusterede kurver til webarbejdsforløb
    2. 3D-objekter og materialer
      1. Om 3D-effekter i Illustrator
      2. Opret 3D-grafik
      3. Knyt illustrationer til 3D-objekter
      4. Opret 3D-tekst
    3. 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
    4. 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
    5. Markér og arranger objekter
      1. Markér objekter
      2. Lag
      3. Grupper og udvid objekter
      4. Flyt, juster og fordel objekter
      5. Stabling af objekter    
      6. Lås, skjul og slet objekter
      7. Kopiér og dubler objekter
      8. Roter og spejl objekter
      9. Sammenflet objekter
    6. 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
    7. Tekst
      1. Tilføj tekst og arbejd med tekstobjekter
      2. Opret opstillinger med punkttegn og tal/bogstaver
      3. Styr tekstområde
      4. Skrifttyper og typografi
      5. Formater tekst
      6. Import og eksport af tekst
      7. Formater afsnit
      8. Specialtegn
      9. Opret tekst på en kurve
      10. Tegn- og afsnitstyper
      11. Faner
      12. Tekster
      13. Find manglende skrifttyper (Typekit-arbejdsforløb)
      14. Opdater tekst fra Illustrator 10
      15. Arabisk og hebraisk tekst
      16. Skrifttyper | Ofte stillede spørgsmål og tips om fejlfinding
      17. Opret 3D-teksteffekt
      18. Kreative typografiske design
      19. Skaler og roter tekst
      20. Linje- og tegnafstand
      21. Orddeling og linjeskift
      22. Tekstforbedringer
      23. Stave- og sprogordbøger
      24. Formater asiatiske tegn
      25. Ombryder til asiatiske skriftarter
      26. Opret tekstdesign med blandede objekter
      27. Opret en tekstplakat ved hjælp af Billedvektor
    8. Opret specialeffekter
      1. Arbejde med effekter
      2. Grafikformater
      3. Opret en skyggeeffekt
      4. Attributter for udseende
      5. Opret skitser og mosaikker
      6. Skyggeeffekter, skær og udtynding
      7. Oversigt over effekter
    9. Webgrafik
      1. Bedste fremgangsmåder for oprettelse af webgrafik
      2. Diagrammer
      3. SVG
      4. Opret animationer
      5. 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. Fjern integrering af billeder
      5. Import af 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
      1. Gem illustration
    4. Eksportér
      1. Brug Illustrator-illustrationer i Photoshop
      2. Eksportér illustration
      3. Hent aktiver, og eksportér i batches
      4. Pakkefiler
      5. Opret Adobe PDF-filer
      6. Udtræk CSS | Illustrator CC
      7. Adobe PDF-indstillinger
      8. Filoplysninger og metadata
  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. Problemer med, at programmet går ned
    2. Gendan filer efter nedbrud
    3. Filproblemer
    4. Understøttede filformater
    5. Problemer med GPU-enhedsdriver
    6. Problemer med Wacom-enhed
    7. Problemer med DLL-fil
    8. Problemer med hukommelse
    9. Problemer med indstillingsfil
    10. Problemer med skrifttyper
    11. Problemer med printer
    12. Del nedbrudsrapport med Adobe
    13. 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.

Adobe-logo

Log ind på din konto

Hurtige links

Se alle dine planer Administrer dine planer

Juridiske meddelelser    |    Politik til beskyttelse af personlige oplysninger online