Podręcznik użytkownika Anuluj

Wyodrębnianie kodu CSS | Illustrator

Szukaj

Ostatnia aktualizacja 25 maj 2023

Podręcznik użytkownika programu Illustrator
Poznaj program Illustrator
1. Wprowadzenie do programu Illustrator
2. Przestrzeń robocza
3. Narzędzia w programie Illustrator
  1. Przegląd narzędzi
  2. Zaznaczanie narzędzi
  3. Narzędzia do nawigacji
  4. Narzędzia do malowania
  5. Narzędzia tekstowe
  6. Narzędzia do rysowania
  7. Narzędzia do modyfikacji
    1. Obracanie
    2. Odbicie
    3. Skalowanie
    4. Ścinanie
    5. Szerokość
    6. Przekształcanie swobodne
    7. Kroplomierz
    8. Mieszanie
    9. Gumka
    10. Nożyczki
    11. Wymiar
4. Generatywna SI (niedostępna w Chinach kontynentalnych)
5. Szybkie operacje
Illustrator na iPadzie
1. Wprowadzenie do programu Illustrator na iPadzie
2. Przestrzeń robocza
3. Dokumenty
  1. Praca z dokumentami w programie Illustrator na iPadzie
  2. Importowanie dokumentów z programów Photoshop i Fresco
4. Zaznaczanie i rozmieszczanie obiektów
  1. Tworzenie obiektów powtarzalnych
  2. Tworzenie przejść miedzy obiektami
5. Rysowanie
  1. Rysowanie i edytowanie ścieżek
  2. Rysowanie i edytowanie kształtów
6. Tekst
7. Praca z obrazami
  1. Wektoryzowanie obrazów rastrowych
8. Kolory
  1. Stosowanie kolorów i gradientów
Pliki w chmurze
1. Podstawy
2. Rozwiązywanie problemów
  1. Rozwiązywanie problemów z tworzeniem lub zapisywaniem plików w chmurze programu Illustrator
  2. Rozwiązywanie problemów z plikami w chmurze programu Illustrator
Dodawanie i edytowanie treści
Importowanie, eksportowanie i zapisywanie
1. Importowanie
2. Biblioteki Creative Cloud w programie Illustrator
  1. Biblioteki Creative Cloud w programie Illustrator
3. Zapisywanie i eksportowanie
Drukowanie
1. Przygotowanie do drukowania
2. Drukowanie
Automatyzacja zadań
Rozwiązywanie problemów

Informacje na temat wyodrębniania i eksportowania kodu CSS dla pojedynczych obiektów lub dla całego układu zaprojektowanego w programie Illustrator.

W programie Illustrator można stworzyć projekt strony HTML. Służy on jako wskazówka wizualna dla programisty, który może następnie przygotować kod układu, stylu oraz obiektów na stronie za pomocą edytora HTML. Jednak dokładne odwzorowanie wyglądu i rozmieszczenia poszczególnych składników to czasochłonna i żmudna praca.

Po utworzeniu układu strony HTML za pomocą programu Illustrator można wygenerować, a następnie wyeksportować ukryty kod CSS, który decyduje o wyglądzie składników i obiektów na stronie. Kod w języku CSS pozwala kontrolować wygląd tekstu i obiektów (podobnie jak w przypadku stylów znakowych i akapitowych).

Podgląd i wyodrębnianie kodu CSS

Panel Właściwości CSS umożliwia wykonywanie następujących czynności:

wyświetlanie i kopiowanie kodu CSS dla zaznaczonych obiektów;
eksportowanie jednego, kilku lub wszystkich elementów programu Illustrator do pliku CSS;
eksportowanie użytych obrazów rasteryzowalnych;
generowanie kodu CSS pod kątem konkretnych przeglądarek.

A. Ostrzeżenie, jeśli wystąpi błąd podczas konwertowania któregoś ze stylów na kod CSS B. Okno dialogowe Opcje eksportu formatu CSS C. Eksportuj wybrane pliki CSS do pliku D. Kopiuj zaznaczone style do schowka E. Generuj CSS F. Menu panelu Właściwości CSS G. Style zastosowane wobec wybranych obiektów H. Kod CSS

Aby wyświetlić i wyodrębnić kod CSS, wykonaj następujące czynności:

Wybierz polecenie Okno > Właściwości CSS.

Uwaga:

Upewnij się, że obiekty w dokumencie programu Illustrator mają przypisane nazwy na panelu Warstwy.
Wyświetlanie wygenerowanego kodu CSS:

Dla pojedynczego obiektu:

Zaznacz pojedynczy obiekt. Kod CSS tego obiektu zostanie wyświetlony na panelu Właściwości CSS.

Dla wielu obiektów:

Naciśnij i przytrzymaj klawisz Shift, zaznacz kilka obiektów, a następnie na panelu Właściwości CSS wybierz polecenie Generuj CSS.

Dla wszystkich obiektów:

Naciśnij kombinację klawiszy Ctrl/Cmd + A, aby zaznaczyć wszystkie obiekty, a następnie na panelu Właściwości CSS wybierz polecenie Generuj CSS.
Aby pozyskać wygenerowany kod CSS, wykonaj jedną z poniższych czynności:
Kopiowanie zaznaczonego kodu:

Aby skopiować kod do schowka, zaznacz określony kod i wybierz polecenie Kopiuj wybrany styl.

Aby wyeksportować kod do pliku, wybierz menu panelu Właściwości CSS , a następnie wybierz polecenie Eksportuj zaznaczony kod CSS.

Kopiowanie wszystkich kodów:

Nie zaznaczaj żadnego fragmentu w kodzie CSS i wybierz polecenie Kopiuj wybrany styl, aby skopiować cały kod do schowka.

Aby wyeksportować kod do pliku, wybierz menu panelu Właściwości CSS , a następnie wybierz polecenie Eksportuj wszystko.
Podczas zapisywania kodu CSS do pliku wybierz jedną z opcji dostępnych w oknie dialogowym Opcje eksportu CSS.

Opcje eksportu CSS

Przykładowy kod CSS

Prostokąt z zastosowanym gradientem (wszystkie przeglądarki)

.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: &quot;progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF200', endColorstr='#ED1C24' ,GradientType=0)&quot;;
  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);
}

Prostokąt z zastosowanym gradientem (tylko przeglądarki bazujące na silniku 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;
}

Wiele obiektów

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

Powiązane tematy

Masz pytanie lub pomysł?

Jeśli masz pytanie lub chcesz się podzielić pomysłem, dołącz do nas na forum użytkowników programu Adobe Illustrator. Chętnie Cię poznamy!

Pomoc dostępna szybciej i łatwiej

Nowy użytkownik?