Panel CSS pokazuje zdefiniowane reguły stylu dla każdego wybranego elementu, w tym reguły keyframes dla elementów animowanych. Karta Style panelu CSS umożliwia edytowanie stylów klas elementu, dodawanie stylów wbudowanych i tworzenie nowych reguł stylów.
Aby zobaczyć listę właściwości CSS elementu, przejdź na kartę Wynikowy.
Aby utworzyć nową regułę stylu w dokumencie:
- Wybierz element, do którego chcesz zastosować nową regułę stylu.
- Kliknij przycisk Dodaj regułę
u dołu panelu CSS.
- Google Web Designer generuje unikalny selektor klasy, który możesz edytować. Jeśli wpiszesz selektor klasy, Web Designer doda tę klasę do wybranego elementu.
- W nawiasach deklaracji nowej reguły kliknij Dodaj właściwość i podaj właściwość CSS wraz z wartością, np.
width: 209px;. - Kontynuuj dodawanie nowych par właściwość-wartość, aż reguła będzie w pełni zdefiniowana.
u dołu panelu CSS.Aby dodać styl wbudowany do elementu:
- Wybierz element.
- W panelu CSS kliknij przycisk Dodaj właściwość w oknie stylu wbudowanego.
- Dodaj pary właściwość-wartość, by zmienić styl elementu.
Aby zmodyfikować styl:
- Wybierz element w dokumencie. W panelu CSS pojawią się powiązane z nim reguły stylów.
- Kliknij właściwość lub wartość, by ją zmodyfikować. Aby usunąć właściwość, wyczyść jej nazwę.
Aby przełączyć właściwość:
- Kliknij pole wyboru obok nazwy właściwości. Jeśli pole wyboru nie jest zaznaczone, właściwość nie zostanie uwzględniona na podglądzie w przeglądarce ani w opublikowanych plikach.
- Aby ponownie aktywować właściwość, kliknij jeszcze raz pole wyboru.
Reguły keyframes w animacji
W panelu CSS wyświetlają się reguły keyframes (ze słowem kluczowym @keyframes) dla elementów animowanych za pomocą CSS.
Aby utworzyć nową regułę keyframes dla elementu:
- Wybierz element bez animacji.
- Kliknij przycisk Dodaj regułę keyframes
w dolnej części panelu CSS. Google Web Designer dodaje początkową i końcową klatkę kluczową (0% i 100%) i domyślnie ustawia czas trwania animacji na jedną sekundę.
- Aby dodać do klatki kluczowej właściwość animacji, kliknij Dodaj właściwość i wpisz właściwość CSS oraz jej wartość.
- Kontynuuj dodawanie nowych par właściwość-wartość, aż reguła będzie w pełni zdefiniowana.
Aby dodać klatkę kluczową:
- Wybierz element animowany.
- W panelu CSS kliknij Wstaw klatkę kluczową między istniejącymi klatkami kluczowymi.
- Web Designer automatycznie ustawia klatkę kluczową w połowie odległości między ograniczającymi ją klatkami kluczowymi. Kliknij wartość procentową, by zmienić czas animacji klatki kluczowej.
- Właściwości animacji są interpolowane z klatek kluczowych ograniczających daną klatkę. Dodaj, edytuj lub usuń właściwości nowej klatki kluczowej.
Klatki kluczowej nie można dodać poza koniec istniejącej animacji. Zamiast tego użyj osi czasu.