O painel CSS mostra as regras de estilo definidas para qualquer elemento selecionado, incluindo regras de keyframes para elementos animados. Você também pode editar os estilos das classes do elemento, adicionar estilos in-line e criar novas regras de estilo usando a guia Estilos do painel CSS.
Para ver a lista de propriedades CSS de um elemento, alterne para a guia Calculado.
Para criar uma nova regra de estilo no documento, siga estas etapas:
- Selecione o elemento em que a nova regra de estilo será aplicada.
- Clique no botão Adicionar regra
na parte inferior do painel CSS.
- O Google Web Designer gera um seletor de classe exclusivo, que você pode editar. Se você inserir um seletor de classe, o Web Designer adicionará essa classe ao elemento selecionado.
- Entre as chaves da declaração da nova regra, clique em Adicionar propriedade, insira uma propriedade e um valor CSS, como
width: 209px;. - Continue adicionando novos pares de propriedades/valores até que a regra esteja completamente definida.
na parte inferior do painel CSS.Para adicionar um estilo in-line a um elemento:
- Selecione um elemento.
- No painel de CSS, clique no botão Adicionar propriedade no bloco estilo in-line.
- Adicione pares de propriedades/valores para alterar o estilo do elemento.
Para modificar um estilo:
- Selecione um elemento no documento. O painel "CSS" exibirá as regras de estilo associadas ao elemento.
- Clique em uma propriedade ou em um valor para editá-lo. Para excluir uma propriedade, remova o nome dela.
Para alternar uma propriedade, siga estas etapas:
- Clique na caixa de seleção ao lado do nome de uma propriedade. Quando a caixa de seleção estiver desmarcada, a visualização do navegador e os arquivos publicados não incluirão essa propriedade.
- Para reativar a propriedade, clique na caixa de seleção novamente.
Regras de frames-chave para animação
O painel CSS exibe as regras de frames-chave (com a palavra-chave @keyframes) para elementos animados com CSS.
Para criar uma nova regra de frames-chave em um elemento, siga estas etapas:
- Selecione um elemento sem animação.
- Clique no botão Adicionar regra de frames-chave
na parte inferior do painel CSS. O Google Web Designer adicionará os frames-chave inicial e final (0% e 100%) e definirá a duração da animação como "1 segundo" por padrão.
- Para adicionar uma propriedade animada a um frame-chave, clique em Adicionar propriedade, insira uma propriedade e um valor CSS.
- Continue adicionando novos pares de propriedades/valores até que a regra esteja completamente definida.
Para adicionar um frame-chave, siga estas etapas:
- Selecione um elemento animado.
- No painel CSS, clique em Inserir frame-chave entre os frames-chave existentes.
- O Google Web Designer definirá automaticamente o frame-chave para inserir entre os frames-chave adjacentes. Clique na porcentagem para alterar o tempo do frame-chave.
- As propriedades animadas são interpoladas a partir dos frames-chave adjacentes. Você pode adicionar, editar ou excluir as propriedades do novo frame-chave.
Não é possível adicionar um frame-chave após o término da animação existente. Em vez disso, use a linha do tempo.