Alterações de Estilo e Layout
Resumo
As alterações de estilo e layout podem ser feitas diretamente com o editor flutuante. Isto fica imediatamente visível assim que o Varify.io é carregado na tua página. Basta clicares no elemento que queres otimizar e definir a alteração através do menu dropdown ou digitando a opção de estilo desejada.
Opções de Estilo e Layout
As seguintes opções estão disponíveis com o Floating Editor:
- Dimensions: Largura e altura de um elemento
- Location: Posicionamento de um elemento na página web
- Typography:
- font-family: Fonte
- font-size: Tamanho da fonte
- font-weight: Espessura do traço da fonte
- text-align: Alinhamento horizontal do texto
- color: Define a cor do texto.
- text-decoration: O texto pode ser sublinhado ou riscado, por exemplo.
- line-height: É a altura de uma linha.
- word-spacing: Esta opção aumenta ou diminui a largura da fonte.
- white-space: Através de white–space determina-se como as quebras de linha e os espaços contidos no texto de origem são exibidos no navegador.
- Background:
- background-color: É a cor do fundo de um elemento.
- background-image: Imagem de fundo para um elemento. O formato do arquivo da imagem de fundo pode ser JPG, PNG, SVG, webP ou GIF.
- background-style: Se não especificares nada, a imagem de fundo é carregada em seu tamanho total no fundo. Se o elemento for menor em altura ou largura do que a imagem de fundo, a imagem é automaticamente cortada.
- background-repeat: É o comportamento de repetição de uma imagem de fundo incluída
- Border:
- margin: Descrição da distância externa de um elemento em relação aos elementos que o rodeiam.
- padding: Descreve a distância interna de um elemento em relação à sua moldura.
- border-style: A propriedade CSS border-style define o estilo dos quatro lados das bordas de um elemento.
- border-width: A propriedade border-width determina todas as larguras de borda de um elemento.
- border-color: A propriedade border-color determina todas as cores de borda de um elemento.
- border-radius: A propriedade border-radius determina o raio com que os cantos de um elemento são arredondados.
- Layout:
- float: Com isso instruímos um elemento a mover-se para a borda esquerda ou direita do seu elemento pai. Isto tem efeito não só no próprio elemento, mas especialmente em outros elementos relacionados com o elemento "flutuante".
- vertical-align: Alinha imagens e texto em células de tabela e texto a uma linha de base. A linha de base, ou baseline, é uma linha invisível sobre a qual a maioria das letras de uma linha assenta.
- overflow: Quando os elementos são demasiado grandes para caber no bloco que os contém, o seu conteúdo transborda o bloco sem qualquer consideração. O overflow do CSS oculta as partes que transbordam do elemento, para que a parte restante caiba no bloco que o contém.
- opacity: Opacidade de um elemento. Os valores podem estar entre 0 e 1. 0 significa completamente transparente. 1 significa completamente visível.
- z-index: A propriedade z-index especifica a ordem em que os elementos são dispostos de trás para a frente no meio de saída. Isto é importante se os elementos se sobrepuserem. Elementos com um z-index maior estão mais próximos do observador e podem sobrepor-se a elementos com um z-index menor.