Ajouter du CSS personnalisé et des classes à un calque
Donnez à un calque des déclarations CSS que le panneau de style n’a pas, et stylisez plusieurs calques à la fois avec des classes personnalisées.
Le CSS personnalisé ajoute à un calque des déclarations que le panneau de style ne propose pas, comme un soulignement ondulé ou une forme découpée. Les classes personnalisées donnent les mêmes déclarations à chaque calque qui les nomme. Les deux s’affichent de la même façon sur le canevas et sur votre site publié. Le CSS personnalisé arrive dans les espaces de travail par étapes : il se peut que vous ne le voyiez pas encore.
Ajouter des déclarations à un calque
- Sélectionnez un calque.
- Dans le panneau des propriétés, ouvrez CSS personnalisé. C’est l’une des sections avancées.
- Tapez une propriété, par exemple
text-shadow. Le champ suggère celles que vous pouvez utiliser. - Tapez sa valeur, par exemple
0 2px 0 rgb(124 58 237 / 0.35), puis appuyez sur Entrée. - Ajouter une déclaration ajoute une ligne. Le × en fin de ligne la retire.
Les déclarations s’appliquent au point de rupture que vous modifiez, comme tout style, et viennent après les autres styles du calque : elles l’emportent là où les deux définissent la même chose.
Ce que vous pouvez écrire
- Seulement des propriétés visuelles : ombres, contours, découpes, décoration du texte, filtres, curseurs, etc. La mise en page, la position et la taille restent aux commandes du panneau de style.
- Une valeur ne peut pas contenir
;,{,},<,\ni!important. - Une image est une ressource de votre site, écrite
url(asset:…).
Une ligne qui enfreint une règle affiche pourquoi en dessous, et rien n’est enregistré tant que toutes les lignes ne sont pas correctes. Le serveur de votre site lit aussi chaque déclaration comme un navigateur ; une valeur qu’il ne sait pas lire n’est pas enregistrée.
Classes personnalisées
- Dans CSS personnalisé, sous Classes, tapez un ou plusieurs noms séparés par des espaces, par exemple
card-raised, puis appuyez sur Entrée. Un nom commence par une lettre et utilise des lettres, des chiffres,-et_. - Dans le menu du site, ouvrez Classes personnalisées…, choisissez Ajouter une classe, donnez-lui le même nom et ses déclarations, puis choisissez Enregistrer.
Chaque calque qui nomme la classe reçoit ses déclarations. Le style propre d’un calque l’emporte sur ses classes. Les classes personnalisées demandent l’autorisation de modifier le code.