Im CSS-Steuerfeld sind die definierten Styleregeln für jedes ausgewählte Element zu sehen, einschließlich der keyframes-Regeln für animierte Elemente. Sie können auch die Styles für die Klassen des Elements bearbeiten, Inlinestyles hinzufügen und neue Styleregeln auf dem Tab Styles des CSS-Steuerfelds erstellen.
Wenn Sie eine Liste der CSS-Eigenschaften für ein Element sehen möchten, wechseln Sie zum Tab Computed.
So erstellen Sie eine neue Styleregel in Ihrem Dokument:
- Wählen Sie ein Element aus, auf das die neue Styleregel angewendet werden soll.
- Klicken Sie am unteren Rand des CSS-Steuerfelds auf die Schaltfläche Regel hinzufügen
.
- Google Web Designer erstellt eine eindeutige Klassenauswahl, die Sie bearbeiten können. Wenn Sie eine Klassenauswahl eingeben, fügt Web Designer diese Klasse dem ausgewählten Element hinzu.
- Klicken Sie zwischen den Klammern für die Deklaration der neuen Regel auf Eigenschaft hinzufügen und geben Sie eine CSS-Eigenschaft und einen Wert ein, z. B.
width: 209px;width: 209px;. - Fügen Sie weitere Paare aus Eigenschaften und Werten hinzu, bis die Regel vollständig definiert ist.
.So fügen Sie einem Element einen Inlinestyle hinzu:
- Wählen Sie ein Element aus.
- Klicken Sie im CSS-Steuerfeld im Abschnitt Inlinestil auf die Schaltfläche Eigenschaft hinzufügen.
- Fügen Sie Paare aus Eigenschaften und Werten hinzu, um den Stil des Elements zu ändern.
So ändern Sie einen Stil:
- Wählen Sie im Dokument ein Element aus. Im CSS-Steuerfeld werden die mit dem Element verknüpften Styleregeln angezeigt.
- Klicken Sie zum Bearbeiten auf eine Eigenschaft oder einen Wert. Wenn Sie eine Eigenschaft löschen möchten, löschen Sie einfach ihren Namen.
So aktivieren bzw. deaktivieren Sie eine Eigenschaft:
- Klicken Sie auf das Kästchen neben einem Eigenschaftsnamen. Wenn in dem Kästchen kein Häkchen ist, ist diese Eigenschaft in der Browservorschau und den veröffentlichten Dateien nicht enthalten.
- Wenn Sie die Eigenschaft wieder aktivieren möchten, klicken Sie noch mal auf das Kästchen.
Keyframe-Regeln für Animationen
Im CSS-Steuerfeld werden die Keyframe-Regeln (mit dem Keyword @keyframes) für mit CSS animierte Elemente angezeigt.
So erstellen Sie eine neue Keyframe-Regel für ein Element:
- Wählen Sie ein Element ohne Animation aus.
- Klicken Sie unten im CSS-Steuerfeld auf die Schaltfläche Keyframes-Regel hinzufügen
. Google Web Designer fügt die Start- und End-Keyframes hinzu (0 % und 100 %) und legt die Animationsdauer standardmäßig auf eine Sekunde fest.
- Wenn Sie einem Keyframe eine animierte Eigenschaft hinzufügen möchten, klicken Sie auf Eigenschaft hinzufügen und geben Sie eine CSS-Eigenschaft und einen Wert ein.
- Fügen Sie weitere Paare aus Eigenschaften und Werten hinzu, bis die Regel vollständig definiert ist.
So fügen Sie einen Keyframe hinzu:
- Wählen Sie ein animiertes Element aus.
- Klicken Sie im CSS-Steuerfeld zwischen vorhandenen Keyframes auf Keyframe einfügen.
- Web Designer setzt den Keyframe automatisch in der Mitte zwischen die umgebenden Keyframes ein. Klicken Sie auf den Prozentsatz, um das Keyframe-Timing zu ändern.
- Animierte Eigenschaften werden von den umgebenden Keyframes interpoliert. Sie können Eigenschaften für den neuen Keyframe hinzufügen, bearbeiten oder löschen.
Ein Keyframe kann nicht über das Ende einer vorhandenen Animation hinaus hinzugefügt werden. Verwenden Sie stattdessen die Zeitachse.