Le panneau CSS affiche les règles de style définies pour chaque élément que vous sélectionnez, y compris les règles de type keyframes pour les éléments animés. Vous pouvez également modifier les styles des classes d'éléments, ajouter des styles intégrés et créer des règles de style à l'aide de l'onglet Styles du panneau "CSS".
Pour afficher la liste des propriétés CSS d'un élément, accédez à l'onglet Calculé.
Pour créer une règle de style dans votre document, procédez comme suit :
- Sélectionnez l'élément auquel vous voulez appliquer la nouvelle règle de style.
- Cliquez sur le bouton Ajouter une règle
en bas du panneau "CSS".
- Google Web Designer génère un sélecteur de classe unique, que vous pouvez modifier. Si vous saisissez un sélecteur de classe, Web Designer ajoute cette classe à l'élément sélectionné.
- Entre les crochets de la déclaration de la nouvelle règle, cliquez sur Ajouter une propriété, puis saisissez une propriété et une valeur CSS, par exemple
width: 209px;. - Continuez d'ajouter des paires propriété/valeur jusqu'à avoir complètement défini la règle.
en bas du panneau "CSS".Pour ajouter un style intégré à un élément, procédez comme suit :
- Sélectionnez un élément.
- Dans le panneau CSS, cliquez sur le bouton Ajouter une propriété dans la zone Style intégré.
- Ajoutez des paires propriété/valeur pour modifier le style de l'élément.
Pour modifier un style, procédez comme suit :
- Sélectionnez un élément dans votre document. Le panneau "CSS" affiche les règles de style associées à l'élément.
- Cliquez sur une propriété ou sur une valeur pour la modifier. Pour supprimer une propriété, effacez le nom de la propriété.
Pour activer ou désactiver une propriété, procédez comme suit :
- Cochez la case à côté du nom d'une propriété. Lorsque la case n'est pas cochée, l'aperçu dans le navigateur et les fichiers publiés n'incluent pas cette propriété.
- Pour réactiver la propriété, cliquez de nouveau sur la case à cocher.
Règles liées aux images clés pour les animations
Le panneau "CSS" affiche les règles liées aux images clés (avec le mot clé @keyframes) pour les éléments animés avec CSS.
Pour créer une règle liée aux images clés pour un élément, procédez comme suit :
- Sélectionnez un élément sans animation.
- Cliquez sur le bouton Ajouter une règle relative aux images clés
en bas du panneau "CSS". Google Web Designer ajoute les images clés de début et de fin (0 % et 100 %), puis définit la durée de l'animation sur 1 seconde par défaut.
- Pour ajouter une propriété animée à une image clé, cliquez sur Ajouter une propriété, puis saisissez une propriété et une valeur CSS.
- Continuez d'ajouter des paires propriété/valeur jusqu'à avoir complètement défini la règle.
Pour ajouter une image clé, procédez comme suit :
- Sélectionnez un élément animé.
- Dans le panneau "CSS", cliquez sur Insérer une image clé entre les images clés existantes.
- Web Designer définit automatiquement l'affichage de l'image clé à un point médian situé entre les images clés environnantes. Cliquez sur le pourcentage pour modifier la synchronisation des images clés.
- Les propriétés animées sont interpolées à partir des images clés environnantes. Ajoutez, modifiez ou supprimez des propriétés pour la nouvelle image clé.
Vous ne pouvez pas ajouter d'image clé après la fin de l'animation existante. Utilisez plutôt la timeline.