Componentes do conteúdo content-components

Com a guia Estilos selecionada no painel direito, use a seção Plano de fundo para definir a cor de plano de fundo do componente.

Marque a caixa de seleção e clique no quadrado de cores para escolher uma cor no seletor. Você pode escolher uma cor inserindo um valor RGB, HSL, HSB ou hexadecimal conhecido. Ou você pode usar o controle deslizante de cores e o campo de cores para selecionar a cor.

{width="300"}

1. No painel direito, com a guia Estilos selecionada, expanda a seção Borda e defina as opções para exibir uma borda para o componente:

2. Mova o botão para a direita para ativar as opções de exibição de borda e defina-as de acordo com seus critérios de design:

   • Para definir a Cor da borda, marque a caixa de seleção e clique no quadrado de cores para escolher uma cor no seletor. Você pode escolher uma cor inserindo um valor RGB, HSL, HSB ou hexadecimal conhecido. Ou você pode usar o controle deslizante de cores e o campo de cores para selecionar a cor.

   {width="300"}

   • Para definir o Tamanho da borda (largura da linha), clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

   • Para definir o Estilo de borda, escolha um valor na lista de valores CSS border-style padrão.

   • Para determinar onde a borda é exibida, marque cada caixa de seleção Posição da borda.

   {width="250"}

3. Para o Raio da borda, defina o valor numérico de acordo com a curva desejada para os cantos.

   Um valor de 0 (padrão) produz um canto quadrado.

No painel direito com a guia Estilos selecionada, expanda a seção Tamanho e defina as opções de altura e largura do componente:

• Altura - Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels. Um valor vazio (Automático) é o padrão e dimensiona a altura do elemento de acordo com seu conteúdo.

• Largura - Use o botão de alternância para definir a largura por pixels ou porcentagem.

  • Para uma largura de porcentagem, use o controle deslizante para definir o valor percentual. A porcentagem determina o tamanho do elemento com base na caixa de conteúdo do bloco, o que exclui o preenchimento e as bordas. Por exemplo, um valor de 50 define a largura do elemento como 50% da largura do conteúdo do bloco.

    Estilo de {width="250"}

  • Para uma largura baseada em pixels, clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels. Um valor vazio (Automático) é o padrão e dimensiona a largura do elemento de acordo com seu conteúdo.

    {width="250"}

No painel direito com a guia Estilos selecionada, expanda a seção Margem e defina as opções de espaçamento de margem dentro do componente estrutural. Esse estilo replica o parâmetro CSS margin, que controla o espaço fora da borda de um componente, separando-o de outros componentes. Ele cria uma lacuna ao redor do componente para influenciar seu posicionamento e o layout do conteúdo ao redor.

Defina os valores de margem em pixels de acordo com suas necessidades de design. É possível definir a margem de todos os lados, de cima para baixo, da esquerda para a direita ou de cada lado do componente independentemente:

• Todos os lados - Para definir um valor a ser aplicado a todos os lados, desmarque a caixa de seleção Margem diferente para cada lado. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  {width="250"}

• Superior-inferior - Para definir as margens superior e inferior com o mesmo valor, defina o ícone Bloqueado entre as configurações superior e inferior. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

• Esquerda-direita - Para definir as margens esquerda e direita com o mesmo valor, defina o ícone Bloqueado entre as configurações esquerda e direita. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  {width="250"}

• Independente - Para definir cada margem como um valor independente, defina o ícone Desbloqueado entre as configurações superior e inferior e entre a esquerda e a direita. Para cada configuração, clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  {width="250"}

No painel direito com a guia Estilos selecionada, expanda a seção Preenchimento e defina as opções de preenchimento dentro do componente estrutural. Esse estilo replica o parâmetro CSS padding, que é o espaço entre o conteúdo de um componente e sua borda. O preenchimento fornece espaçamento interno que pode ser usado para controlar a distância entre o conteúdo e a borda do componente.

Defina os valores de preenchimento em pixels de acordo com suas necessidades de design. Você pode definir o preenchimento de todos os lados, o botão superior, o esquerdo direito ou cada lado do componente independentemente:

• Todos os lados - Para definir um valor a ser aplicado a todos os lados, desmarque a caixa de seleção Preenchimento diferente para cada lado. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  {width="250"}

• Superior-inferior - Para definir o preenchimento superior e inferior com o mesmo valor, defina o ícone Bloqueado entre as configurações superior e inferior. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

• Esquerda-direita - Para definir o preenchimento à esquerda e à direita com o mesmo valor, defina o ícone Bloqueado entre as configurações à esquerda e à direita. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  {width="250"}

• Independente - Para definir o preenchimento de cada lado como um valor independente, defina o ícone Desbloqueado entre as configurações superior e inferior e entre a esquerda e a direita. Para cada configuração, clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  {width="250"}

Com a guia Estilos selecionada no painel direito, use a seção Plano de fundo para definir a cor de plano de fundo do componente.

Marque a caixa de seleção e clique no quadrado de cores para escolher uma cor no seletor. Você pode escolher uma cor inserindo um valor RGB, HSL, HSB ou hexadecimal conhecido. Ou você pode usar o controle deslizante de cores e o campo de cores para selecionar a cor.

{width="300"}

No painel direito com a guia Estilos selecionada, expanda a seção Texto e defina as opções para os estilos de texto do componente:

• Família da fonte - Clique no ícone de seta para baixo para selecionar uma família de fontes para o texto no componente.

• Tamanho da fonte - Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o tamanho da fonte ou insira um valor. Para valores inseridos, é possível usar decimais.

• Altura da linha - Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir a altura da linha ou insira um valor. Para valores inseridos, é possível usar decimais.

  {width="250"}

• Estilos de texto - Selecione o ícone para o estilo de texto: Negrito, Itálico, Sublinhado ou Tachado.

• Alinhamento do texto - Selecione o ícone para o alinhamento do texto horizontal: Esquerda, Centralizada, Direita ou Justificada.

• Cor da fonte - Clique no quadrado de cores para escolher uma cor de fonte no seletor. Você pode escolher uma cor inserindo um valor RGB, HSL, HSB ou hexadecimal conhecido. Ou você pode usar o controle deslizante de cores e o campo de cores para selecionar a cor.

  {width="300"}

1. No painel direito, com a guia Estilos selecionada, expanda a seção Borda e defina as opções para exibir uma borda para o componente:

2. Mova o botão para a direita para ativar as opções de exibição de borda e defina-as de acordo com seus critérios de design:

   • Para definir a Cor da borda, marque a caixa de seleção e clique no quadrado de cores para escolher uma cor no seletor. Você pode escolher uma cor inserindo um valor RGB, HSL, HSB ou hexadecimal conhecido. Ou você pode usar o controle deslizante de cores e o campo de cores para selecionar a cor.

   {width="300"}

   • Para definir o Tamanho da borda (largura da linha), clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

   • Para definir o Estilo de borda, escolha um valor na lista de valores CSS border-style padrão.

   • Para determinar onde a borda é exibida, marque cada caixa de seleção Posição da borda.

   {width="250"}

3. Para o Raio da borda, defina o valor numérico de acordo com a curva desejada para os cantos.

   Um valor de 0 (padrão) produz um canto quadrado.

No painel direito com a guia Estilos selecionada, expanda a seção Tamanho e defina as opções de altura e largura do componente:

• Altura - Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels. Um valor vazio (Automático) é o padrão e dimensiona a altura do elemento de acordo com seu conteúdo.

• Largura - Use o botão de alternância para definir a largura por pixels ou porcentagem.

  • Para uma largura de porcentagem, use o controle deslizante para definir o valor percentual. A porcentagem determina o tamanho do elemento com base na caixa de conteúdo do bloco, o que exclui o preenchimento e as bordas. Por exemplo, um valor de 50 define a largura do elemento como 50% da largura do conteúdo do bloco.

    Estilo de {width="250"}

  • Para uma largura baseada em pixels, clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels. Um valor vazio (Automático) é o padrão e dimensiona a largura do elemento de acordo com seu conteúdo.

    {width="250"}

No painel direito com a guia Estilos selecionada, expanda a seção Margem e defina as opções de espaçamento de margem dentro do componente estrutural. Esse estilo replica o parâmetro CSS margin, que controla o espaço fora da borda de um componente, separando-o de outros componentes. Ele cria uma lacuna ao redor do componente para influenciar seu posicionamento e o layout do conteúdo ao redor.

Defina os valores de margem em pixels de acordo com suas necessidades de design. É possível definir a margem de todos os lados, de cima para baixo, da esquerda para a direita ou de cada lado do componente independentemente:

• Todos os lados - Para definir um valor a ser aplicado a todos os lados, desmarque a caixa de seleção Margem diferente para cada lado. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  {width="250"}

• Superior-inferior - Para definir as margens superior e inferior com o mesmo valor, defina o ícone Bloqueado entre as configurações superior e inferior. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

• Esquerda-direita - Para definir as margens esquerda e direita com o mesmo valor, defina o ícone Bloqueado entre as configurações esquerda e direita. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  {width="250"}

• Independente - Para definir cada margem como um valor independente, defina o ícone Desbloqueado entre as configurações superior e inferior e entre a esquerda e a direita. Para cada configuração, clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  {width="250"}

No painel direito com a guia Estilos selecionada, expanda a seção Preenchimento e defina as opções de preenchimento dentro do componente estrutural. Esse estilo replica o parâmetro CSS padding, que é o espaço entre o conteúdo de um componente e sua borda. O preenchimento fornece espaçamento interno que pode ser usado para controlar a distância entre o conteúdo e a borda do componente.

Defina os valores de preenchimento em pixels de acordo com suas necessidades de design. Você pode definir o preenchimento de todos os lados, o botão superior, o esquerdo direito ou cada lado do componente independentemente:

• Todos os lados - Para definir um valor a ser aplicado a todos os lados, desmarque a caixa de seleção Preenchimento diferente para cada lado. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  {width="250"}

• Superior-inferior - Para definir o preenchimento superior e inferior com o mesmo valor, defina o ícone Bloqueado entre as configurações superior e inferior. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

• Esquerda-direita - Para definir o preenchimento à esquerda e à direita com o mesmo valor, defina o ícone Bloqueado entre as configurações à esquerda e à direita. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  {width="250"}

• Independente - Para definir o preenchimento de cada lado como um valor independente, defina o ícone Desbloqueado entre as configurações superior e inferior e entre a esquerda e a direita. Para cada configuração, clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  {width="250"}

Para aplicar atributos adicionais compatíveis com CSS com valores, use as configurações de estilo Avançadas. Você pode alterar os valores dos atributos existentes ou adicionar novos. O estilo é aplicado ao componente usando o modelo de herança CSS para componentes pai-filho (elementos).

Os atributos exibidos refletem os estilos que estão definidos atualmente para o componente. Você pode alterar os valores de acordo com definições de CSS. Clique no ícone Adicionar (+) para adicionar um novo atributo de estilo para o componente.

{width="250"}

Com a guia Estilos selecionada no painel direito, use a seção Plano de fundo para definir a cor de plano de fundo do componente.

Marque a caixa de seleção e clique no quadrado de cores para escolher uma cor no seletor. Você pode escolher uma cor inserindo um valor RGB, HSL, HSB ou hexadecimal conhecido. Ou você pode usar o controle deslizante de cores e o campo de cores para selecionar a cor.

{width="300"}

Esses estilos são aplicados ao bloco de texto inteiro. É possível aplicar o estilo em linha a uma cadeia de caracteres de texto selecionada.

No painel direito com a guia Estilos selecionada, expanda a seção Texto e defina as opções para os estilos de texto do componente:

• Família da fonte - Clique no ícone de seta para baixo para selecionar uma família de fontes para o texto no componente.

• Tamanho da fonte - Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o tamanho da fonte ou insira um valor. Para valores inseridos, é possível usar decimais.

• Altura da linha - Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir a altura da linha ou insira um valor. Para valores inseridos, é possível usar decimais.

  {width="250"}

• Estilos de texto - Selecione o ícone para o estilo de texto: Negrito, Itálico, Sublinhado ou Tachado.

• Alinhamento do texto - Selecione o ícone para o alinhamento do texto horizontal: Esquerda, Centralizada, Direita ou Justificada.

• Cor da fonte - Clique no quadrado de cores para escolher uma cor de fonte no seletor. Você pode escolher uma cor inserindo um valor RGB, HSL, HSB ou hexadecimal conhecido. Ou você pode usar o controle deslizante de cores e o campo de cores para selecionar a cor.

  {width="300"}

1. No painel direito, com a guia Estilos selecionada, expanda a seção Borda e defina as opções para exibir uma borda para o componente:

2. Mova o botão para a direita para ativar as opções de exibição de borda e defina-as de acordo com seus critérios de design:

   • Para definir a Cor da borda, marque a caixa de seleção e clique no quadrado de cores para escolher uma cor no seletor. Você pode escolher uma cor inserindo um valor RGB, HSL, HSB ou hexadecimal conhecido. Ou você pode usar o controle deslizante de cores e o campo de cores para selecionar a cor.

   {width="300"}

   • Para definir o Tamanho da borda (largura da linha), clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

   • Para definir o Estilo de borda, escolha um valor na lista de valores CSS border-style padrão.

   • Para determinar onde a borda é exibida, marque cada caixa de seleção Posição da borda.

   {width="250"}

3. Para o Raio da borda, defina o valor numérico de acordo com a curva desejada para os cantos.

   Um valor de 0 (padrão) produz um canto quadrado.

No painel direito com a guia Estilos selecionada, expanda a seção Tamanho e defina as opções de altura e largura do componente:

• Altura - Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels. Um valor vazio (Automático) é o padrão e dimensiona a altura do elemento de acordo com seu conteúdo.

• Largura - Use o botão de alternância para definir a largura por pixels ou porcentagem.

  • Para uma largura de porcentagem, use o controle deslizante para definir o valor percentual. A porcentagem determina o tamanho do elemento com base na caixa de conteúdo do bloco, o que exclui o preenchimento e as bordas. Por exemplo, um valor de 50 define a largura do elemento como 50% da largura do conteúdo do bloco.

    Estilo de {width="250"}

  • Para uma largura baseada em pixels, clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels. Um valor vazio (Automático) é o padrão e dimensiona a largura do elemento de acordo com seu conteúdo.

    {width="250"}

No painel direito com a guia Estilos selecionada, expanda a seção Margem e defina as opções de espaçamento de margem dentro do componente estrutural. Esse estilo replica o parâmetro CSS margin, que controla o espaço fora da borda de um componente, separando-o de outros componentes. Ele cria uma lacuna ao redor do componente para influenciar seu posicionamento e o layout do conteúdo ao redor.

Defina os valores de margem em pixels de acordo com suas necessidades de design. É possível definir a margem de todos os lados, de cima para baixo, da esquerda para a direita ou de cada lado do componente independentemente:

• Todos os lados - Para definir um valor a ser aplicado a todos os lados, desmarque a caixa de seleção Margem diferente para cada lado. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  {width="250"}

• Superior-inferior - Para definir as margens superior e inferior com o mesmo valor, defina o ícone Bloqueado entre as configurações superior e inferior. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

• Esquerda-direita - Para definir as margens esquerda e direita com o mesmo valor, defina o ícone Bloqueado entre as configurações esquerda e direita. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  {width="250"}

• Independente - Para definir cada margem como um valor independente, defina o ícone Desbloqueado entre as configurações superior e inferior e entre a esquerda e a direita. Para cada configuração, clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  {width="250"}

No painel direito com a guia Estilos selecionada, expanda a seção Preenchimento e defina as opções de preenchimento dentro do componente estrutural. Esse estilo replica o parâmetro CSS padding, que é o espaço entre o conteúdo de um componente e sua borda. O preenchimento fornece espaçamento interno que pode ser usado para controlar a distância entre o conteúdo e a borda do componente.

Defina os valores de preenchimento em pixels de acordo com suas necessidades de design. Você pode definir o preenchimento de todos os lados, o botão superior, o esquerdo direito ou cada lado do componente independentemente:

• Todos os lados - Para definir um valor a ser aplicado a todos os lados, desmarque a caixa de seleção Preenchimento diferente para cada lado. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  {width="250"}

• Superior-inferior - Para definir o preenchimento superior e inferior com o mesmo valor, defina o ícone Bloqueado entre as configurações superior e inferior. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

• Esquerda-direita - Para definir o preenchimento à esquerda e à direita com o mesmo valor, defina o ícone Bloqueado entre as configurações à esquerda e à direita. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  {width="250"}

• Independente - Para definir o preenchimento de cada lado como um valor independente, defina o ícone Desbloqueado entre as configurações superior e inferior e entre a esquerda e a direita. Para cada configuração, clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  {width="250"}

Para aplicar atributos adicionais compatíveis com CSS com valores, use as configurações de estilo Avançadas. Você pode alterar os valores dos atributos existentes ou adicionar novos. O estilo é aplicado ao componente usando o modelo de herança CSS para componentes pai-filho (elementos).

Os atributos exibidos refletem os estilos que estão definidos atualmente para o componente. Você pode alterar os valores de acordo com definições de CSS. Clique no ícone Adicionar (+) para adicionar um novo atributo de estilo para o componente.

{width="250"}

Com a guia Estilos selecionada no painel direito, use a seção Plano de fundo para definir a cor de plano de fundo do componente.

Marque a caixa de seleção e clique no quadrado de cores para escolher uma cor no seletor. Você pode escolher uma cor inserindo um valor RGB, HSL, HSB ou hexadecimal conhecido. Ou você pode usar o controle deslizante de cores e o campo de cores para selecionar a cor.

{width="300"}

No painel direito com a guia Estilos selecionada, expanda a seção Tamanho e defina as opções de altura e largura do componente:

• Altura - Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels. Um valor vazio (Automático) é o padrão e dimensiona a altura do elemento de acordo com seu conteúdo.

• Largura - Use o botão de alternância para definir a largura por pixels ou porcentagem.

  • Para uma largura de porcentagem, use o controle deslizante para definir o valor percentual. A porcentagem determina o tamanho do elemento com base na caixa de conteúdo do bloco, o que exclui o preenchimento e as bordas. Por exemplo, um valor de 50 define a largura do elemento como 50% da largura do conteúdo do bloco.

    Estilo de {width="250"}

  • Para uma largura baseada em pixels, clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels. Um valor vazio (Automático) é o padrão e dimensiona a largura do elemento de acordo com seu conteúdo.

    {width="250"}

Expanda a seção Alinhamento e escolha o alinhamento horizontal que deseja usar: esquerda, centro ou direita. Este estilo traduz para um estilo CSS text-align padrão e afeta como o componente é posicionado dentro do componente que o contém.

{width="250"}

No painel direito com a guia Estilos selecionada, expanda a seção Margem e defina as opções de espaçamento de margem dentro do componente estrutural. Esse estilo replica o parâmetro CSS margin, que controla o espaço fora da borda de um componente, separando-o de outros componentes. Ele cria uma lacuna ao redor do componente para influenciar seu posicionamento e o layout do conteúdo ao redor.

Defina os valores de margem em pixels de acordo com suas necessidades de design. É possível definir a margem de todos os lados, de cima para baixo, da esquerda para a direita ou de cada lado do componente independentemente:

• Todos os lados - Para definir um valor a ser aplicado a todos os lados, desmarque a caixa de seleção Margem diferente para cada lado. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  {width="250"}

• Superior-inferior - Para definir as margens superior e inferior com o mesmo valor, defina o ícone Bloqueado entre as configurações superior e inferior. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

• Esquerda-direita - Para definir as margens esquerda e direita com o mesmo valor, defina o ícone Bloqueado entre as configurações esquerda e direita. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  {width="250"}

• Independente - Para definir cada margem como um valor independente, defina o ícone Desbloqueado entre as configurações superior e inferior e entre a esquerda e a direita. Para cada configuração, clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  {width="250"}

No painel direito com a guia Estilos selecionada, expanda a seção Preenchimento e defina as opções de preenchimento dentro do componente estrutural. Esse estilo replica o parâmetro CSS padding, que é o espaço entre o conteúdo de um componente e sua borda. O preenchimento fornece espaçamento interno que pode ser usado para controlar a distância entre o conteúdo e a borda do componente.

Defina os valores de preenchimento em pixels de acordo com suas necessidades de design. Você pode definir o preenchimento de todos os lados, o botão superior, o esquerdo direito ou cada lado do componente independentemente:

• Todos os lados - Para definir um valor a ser aplicado a todos os lados, desmarque a caixa de seleção Preenchimento diferente para cada lado. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  {width="250"}

• Superior-inferior - Para definir o preenchimento superior e inferior com o mesmo valor, defina o ícone Bloqueado entre as configurações superior e inferior. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

• Esquerda-direita - Para definir o preenchimento à esquerda e à direita com o mesmo valor, defina o ícone Bloqueado entre as configurações à esquerda e à direita. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  {width="250"}

• Independente - Para definir o preenchimento de cada lado como um valor independente, defina o ícone Desbloqueado entre as configurações superior e inferior e entre a esquerda e a direita. Para cada configuração, clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  {width="250"}

Para aplicar atributos adicionais compatíveis com CSS com valores, use as configurações de estilo Avançadas. Você pode alterar os valores dos atributos existentes ou adicionar novos. O estilo é aplicado ao componente usando o modelo de herança CSS para componentes pai-filho (elementos).

Os atributos exibidos refletem os estilos que estão definidos atualmente para o componente. Você pode alterar os valores de acordo com definições de CSS. Clique no ícone Adicionar (+) para adicionar um novo atributo de estilo para o componente.

{width="250"}

Com a guia Estilos selecionada no painel direito, use a seção Plano de fundo para definir a cor de plano de fundo do componente.

Marque a caixa de seleção e clique no quadrado de cores para escolher uma cor no seletor. Você pode escolher uma cor inserindo um valor RGB, HSL, HSB ou hexadecimal conhecido. Ou você pode usar o controle deslizante de cores e o campo de cores para selecionar a cor.

{width="300"}

1. No painel direito, com a guia Estilos selecionada, expanda a seção Borda e defina as opções para exibir uma borda para o componente:

2. Mova o botão para a direita para ativar as opções de exibição de borda e defina-as de acordo com seus critérios de design:

   • Para definir a Cor da borda, marque a caixa de seleção e clique no quadrado de cores para escolher uma cor no seletor. Você pode escolher uma cor inserindo um valor RGB, HSL, HSB ou hexadecimal conhecido. Ou você pode usar o controle deslizante de cores e o campo de cores para selecionar a cor.

   {width="300"}

   • Para definir o Tamanho da borda (largura da linha), clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

   • Para definir o Estilo de borda, escolha um valor na lista de valores CSS border-style padrão.

   • Para determinar onde a borda é exibida, marque cada caixa de seleção Posição da borda.

   {width="250"}

3. Para o Raio da borda, defina o valor numérico de acordo com a curva desejada para os cantos.

   Um valor de 0 (padrão) produz um canto quadrado.

No painel direito com a guia Estilos selecionada, expanda a seção Tamanho e defina as opções de altura e largura do componente:

• Altura - Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels. Um valor vazio (Automático) é o padrão e dimensiona a altura do elemento de acordo com seu conteúdo.

• Largura - Use o botão de alternância para definir a largura por pixels ou porcentagem.

  • Para uma largura de porcentagem, use o controle deslizante para definir o valor percentual. A porcentagem determina o tamanho do elemento com base na caixa de conteúdo do bloco, o que exclui o preenchimento e as bordas. Por exemplo, um valor de 50 define a largura do elemento como 50% da largura do conteúdo do bloco.

    Estilo de {width="250"}

  • Para uma largura baseada em pixels, clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels. Um valor vazio (Automático) é o padrão e dimensiona a largura do elemento de acordo com seu conteúdo.

    {width="250"}

Expanda a seção Alinhamento e escolha o alinhamento horizontal e vertical que deseja usar. Os estilos de alinhamento afetam como o componente do HTML é posicionado dentro do componente que o contém (estrutural ou contêiner).

O alinhamento horizontal é convertido em um estilo CSS text-align padrão, e você pode escolher entre esquerda, centro ou direita. O alinhamento vertical é convertido para o estilo CSS vertical-align padrão e você pode escolher entre cima, meio ou baixo.

{width="300"}

No painel direito com a guia Estilos selecionada, expanda a seção Margem e defina as opções de espaçamento de margem dentro do componente estrutural. Esse estilo replica o parâmetro CSS margin, que controla o espaço fora da borda de um componente, separando-o de outros componentes. Ele cria uma lacuna ao redor do componente para influenciar seu posicionamento e o layout do conteúdo ao redor.

Defina os valores de margem em pixels de acordo com suas necessidades de design. É possível definir a margem de todos os lados, de cima para baixo, da esquerda para a direita ou de cada lado do componente independentemente:

• Todos os lados - Para definir um valor a ser aplicado a todos os lados, desmarque a caixa de seleção Margem diferente para cada lado. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  {width="250"}

• Superior-inferior - Para definir as margens superior e inferior com o mesmo valor, defina o ícone Bloqueado entre as configurações superior e inferior. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

• Esquerda-direita - Para definir as margens esquerda e direita com o mesmo valor, defina o ícone Bloqueado entre as configurações esquerda e direita. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  {width="250"}

• Independente - Para definir cada margem como um valor independente, defina o ícone Desbloqueado entre as configurações superior e inferior e entre a esquerda e a direita. Para cada configuração, clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  {width="250"}

No painel direito com a guia Estilos selecionada, expanda a seção Preenchimento e defina as opções de preenchimento dentro do componente estrutural. Esse estilo replica o parâmetro CSS padding, que é o espaço entre o conteúdo de um componente e sua borda. O preenchimento fornece espaçamento interno que pode ser usado para controlar a distância entre o conteúdo e a borda do componente.

Defina os valores de preenchimento em pixels de acordo com suas necessidades de design. Você pode definir o preenchimento de todos os lados, o botão superior, o esquerdo direito ou cada lado do componente independentemente:

• Todos os lados - Para definir um valor a ser aplicado a todos os lados, desmarque a caixa de seleção Preenchimento diferente para cada lado. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  {width="250"}

• Superior-inferior - Para definir o preenchimento superior e inferior com o mesmo valor, defina o ícone Bloqueado entre as configurações superior e inferior. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

• Esquerda-direita - Para definir o preenchimento à esquerda e à direita com o mesmo valor, defina o ícone Bloqueado entre as configurações à esquerda e à direita. Clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  {width="250"}

• Independente - Para definir o preenchimento de cada lado como um valor independente, defina o ícone Desbloqueado entre as configurações superior e inferior e entre a esquerda e a direita. Para cada configuração, clique nos ícones de seta para cima e para baixo para aumentar ou diminuir o número de pixels.

  {width="250"}

Para aplicar atributos adicionais compatíveis com CSS com valores, use as configurações de estilo Avançadas. Você pode alterar os valores dos atributos existentes ou adicionar novos. O estilo é aplicado ao componente usando o modelo de herança CSS para componentes pai-filho (elementos).

Os atributos exibidos refletem os estilos que estão definidos atualmente para o componente. Você pode alterar os valores de acordo com definições de CSS. Clique no ícone Adicionar (+) para adicionar um novo atributo de estilo para o componente.

{width="250"}