In het deelvenster Css worden de gedefinieerde stijlregels weergegeven voor elk element dat u selecteert, waaronder regels voor keyframes voor elementen met animaties. U kunt ook de stijlen voor de klassen van het element bewerken, inline stijlen toevoegen en nieuwe stijlregels maken op het tabblad Stijlen van het deelvenster Css.
Als u een lijst met css-eigenschappen voor een element wilt bekijken, schakelt u over naar het tabblad Berekend.
Een nieuwe stijlregel in uw document maken:
- Selecteer een element waarop u de nieuwe stijlregel wilt toepassen.
- Klik onderaan het deelvenster Css op de knop Regel toevoegen
.
- Google Web Designer genereert een unieke klassekiezer, die u kunt bewerken. Als u een klassekiezer opgeeft, voegt Web Designer die klasse toe aan het geselecteerde element.
- Klik tussen de haakjes voor de declaratie van de nieuwe regel op Eigenschap toevoegen en geef een css-eigenschap en waarde op, bijvoorbeeld
width: 209px;. - Voeg eigenschap/waarde-paren toe totdat de stijl volledig is gedefinieerd.
.Een inline stijl toevoegen aan een element:
- Selecteer een element.
- Klik in het deelvenster Css op de knop Eigenschap toevoegen in het blok inline stijl.
- Voeg eigenschap/waarde-paren toe om de stijl van het element te wijzigen.
Een stijl aanpassen:
- Selecteer een element in uw document. In het deelvenster Css worden de stijlregels weergegeven die zijn gekoppeld aan het element.
- Klik op een eigenschap of waarde om deze te wijzigen. Als u een eigenschap wilt verwijderen, wist u de eigenschapsnaam.
Een eigenschap in- of uitschakelen:
- Klik op het selectievakje naast een eigenschapsnaam. Wanneer het selectievakje is uitgevinkt, bevatten het browservoorbeeld en de gepubliceerde bestanden die eigenschap niet.
- Als u de eigenschap weer wilt activeren, klikt u opnieuw op het selectievakje.
Regels voor sleutelframes voor animatie
Het deelvenster Css bevat de regels voor sleutelframes (met het zoekwoord @keyframes) voor elementen waaraan via css animaties zijn toegevoegd.
Een nieuwe regel voor sleutelframes maken voor een element:
- Selecteer een element zonder animatie.
- Klik onderaan het deelvenster Css op de knop Regel voor sleutelframes toevoegen
. Google Web Designer voegt de begin- en eindsleutelframes (0% en 100%) toe en stelt de animatieduur standaard in op 1 seconde.
- Als u een eigenschap met animaties aan een sleutelframe wilt toevoegen, klikt u op Eigenschap toevoegen en geeft u een css-eigenschap en waarde op.
- Voeg eigenschap/waarde-paren toe totdat de stijl volledig is gedefinieerd.
Een sleutelframe toevoegen:
- Selecteer een element met animaties.
- Klik in het deelvenster Css tussen bestaande sleutelframes op Sleutelframe invoegen.
- Web Designer stelt het sleutelframe automatisch halverwege de omliggende sleutelframes in. Klik op het percentage om de timing van het sleutelframe te wijzigen.
- Eigenschappen met animaties worden geïnterpoleerd uit de omliggende sleutelframes. U kunt eigenschappen voor het nieuwe sleutelframe toevoegen, bewerken of verwijderen.
U kunt geen sleutelframe toevoegen aan het einde van een bestaande animatie. Gebruik in plaats daarvan de tijdlijn.