Componentes de contenido content-components

Con la ficha Estilos seleccionada en el panel derecho, use la sección Fondo para definir el color de fondo del componente.

Seleccione la casilla de verificación y haga clic en el cuadrado de color para elegir un color del selector. Puede elegir un color introduciendo un valor RGB, HSL, HSB o hexadecimal conocido. O bien, puede utilizar el regulador de color y el campo de color para seleccionar el color.

{width="300"}

1. En el panel derecho con la ficha Estilos seleccionada, expanda la sección Borde y establezca las opciones para mostrar un borde para el componente:

2. Mueva el conmutador a la derecha para habilitar las opciones de visualización de bordes y configúrelas según los criterios de diseño:

   • Para establecer el color del borde, seleccione la casilla de verificación y haga clic en el cuadrado de color para elegir un color del selector. Puede elegir un color introduciendo un valor RGB, HSL, HSB o hexadecimal conocido. O bien, puede utilizar el regulador de color y el campo de color para seleccionar el color.

   {width="300"}

   • Para establecer el tamaño del borde (ancho de línea), haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles.

   • Para establecer el estilo de borde, elija un valor de la lista de valores de CSS border-style estándar.

   • Para determinar dónde se muestra el borde, active cada casilla de verificación Posición del borde.

   {width="250"}

3. Para el Radio del borde, establezca el valor numérico según la curva que desee para las esquinas.

   Un valor de 0 (por defecto) produce una esquina cuadrada.

En el panel derecho con la ficha Estilos seleccionada, expanda la sección Tamaño y establezca las opciones para la altura y anchura del componente:

• Altura: haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles. Un valor vacío (Automático) es el valor predeterminado y ajusta el tamaño de la altura del elemento según su contenido.

• Anchura: utilice la opción para establecer la anchura en píxeles o porcentaje.

  • Para una anchura porcentual, utilice el control deslizante para definir el valor porcentual. El porcentaje determina el tamaño del elemento en función del cuadro de contenido del bloque contenedor, que excluye el relleno y los bordes. Por ejemplo, un valor de 50 establece el ancho del elemento en el 50 % del ancho del contenido del bloque que lo contiene.

    {width="250"}

  • Para un ancho basado en píxeles, haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles. Un valor vacío (Automático) es el valor predeterminado y ajusta el ancho del elemento según su contenido.

    {width="250"}

En el panel derecho con la ficha Estilos seleccionada, expanda la sección Margen y establezca las opciones de espaciado de los márgenes dentro del componente estructural. Este estilo replica el parámetro margin de CSS, que controla el espacio fuera del borde de un componente y lo separa de otros componentes. Crea un espacio alrededor del componente para influir en su posición y el diseño del contenido circundante.

Establezca los valores de los márgenes en píxeles según sus necesidades de diseño. Puede establecer el margen para todos los lados, el superior inferior, el izquierdo-derecho o cada lado del componente de forma independiente:

• Todos los lados: para establecer un valor que se aplicará a todos los lados, desactive la casilla de verificación Margen diferente para cada lado. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.

  {width="250"}

• Superior-inferior: para establecer los márgenes superior e inferior con el mismo valor, establezca el icono Bloqueado entre la configuración superior e inferior. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.

• Izquierda-derecha: para establecer los márgenes izquierdo y derecho en el mismo valor, establezca el icono Bloqueado entre la configuración izquierda y derecha. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.

  {width="250"}

• Independiente: para establecer cada margen en un valor independiente, establezca el icono Desbloqueado entre la configuración superior e inferior y entre la izquierda y la derecha. Para cada configuración, haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles.

  {width="250"}

En el panel derecho con la ficha Estilos seleccionada, expanda la sección Relleno y establezca las opciones de relleno dentro del componente estructural. Este estilo replica el parámetro CSS padding, que es el espacio entre el contenido de un componente y su borde. El relleno proporciona un espacio interno que puede utilizar para controlar la distancia entre el contenido y el borde del componente.

Establezca los valores de relleno en píxeles según sus necesidades de diseño. Puede establecer el relleno para todos los lados, el botón superior, el lado izquierdo-derecho o cada lado del componente de forma independiente:

• Todos los lados: para establecer un valor que se aplicará a todos los lados, desactive la casilla de verificación Relleno diferente para cada lado. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.

  {width="250"}

• Superior-inferior: para establecer el relleno superior e inferior con el mismo valor, establezca el icono Bloqueado entre la configuración superior e inferior. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.

• Izquierda-derecha: para establecer el relleno izquierdo y derecho en el mismo valor, establezca el icono Bloqueado entre la configuración izquierda y derecha. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.

  {width="250"}

• Independiente: para establecer el relleno de cada lado en un valor independiente, establezca el icono Desbloqueado entre la configuración superior e inferior y entre la izquierda y la derecha. Para cada configuración, haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles.

  {width="250"}

Con la ficha Estilos seleccionada en el panel derecho, use la sección Fondo para definir el color de fondo del componente.

Seleccione la casilla de verificación y haga clic en el cuadrado de color para elegir un color del selector. Puede elegir un color introduciendo un valor RGB, HSL, HSB o hexadecimal conocido. O bien, puede utilizar el regulador de color y el campo de color para seleccionar el color.

{width="300"}

En el panel derecho con la ficha Estilos seleccionada, expanda la sección Texto y establezca las opciones para los estilos de texto del componente:

• Familia de fuentes: haga clic en el icono de flecha hacia abajo para seleccionar una familia de fuentes para el texto dentro del componente.

• Tamaño de fuente: haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el tamaño de fuente o escriba un valor. Para los valores introducidos, puede utilizar decimales.

• Altura de línea: haga clic en los iconos de flecha arriba y abajo para aumentar o reducir la altura de línea o escriba un valor. Para los valores introducidos, puede utilizar decimales.

  {width="250"}

• Estilos de texto - Seleccione el icono para el estilo de texto: Negrita, Cursiva, Subrayado o Tachado.

• Alineación de texto - Seleccione el icono para la alineación de texto horizontal: Izquierda, Centrada, Derecha o Justificada.

• Color de fuente: haga clic en el cuadrado de color para elegir un color de fuente del selector. Puede elegir un color introduciendo un valor RGB, HSL, HSB o hexadecimal conocido. O bien, puede utilizar el regulador de color y el campo de color para seleccionar el color.

  {width="300"}

1. En el panel derecho con la ficha Estilos seleccionada, expanda la sección Borde y establezca las opciones para mostrar un borde para el componente:

2. Mueva el conmutador a la derecha para habilitar las opciones de visualización de bordes y configúrelas según los criterios de diseño:

   • Para establecer el color del borde, seleccione la casilla de verificación y haga clic en el cuadrado de color para elegir un color del selector. Puede elegir un color introduciendo un valor RGB, HSL, HSB o hexadecimal conocido. O bien, puede utilizar el regulador de color y el campo de color para seleccionar el color.

   {width="300"}

   • Para establecer el tamaño del borde (ancho de línea), haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles.

   • Para establecer el estilo de borde, elija un valor de la lista de valores de CSS border-style estándar.

   • Para determinar dónde se muestra el borde, active cada casilla de verificación Posición del borde.

   {width="250"}

3. Para el Radio del borde, establezca el valor numérico según la curva que desee para las esquinas.

   Un valor de 0 (por defecto) produce una esquina cuadrada.

En el panel derecho con la ficha Estilos seleccionada, expanda la sección Tamaño y establezca las opciones para la altura y anchura del componente:

• Altura: haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles. Un valor vacío (Automático) es el valor predeterminado y ajusta el tamaño de la altura del elemento según su contenido.

• Anchura: utilice la opción para establecer la anchura en píxeles o porcentaje.

  • Para una anchura porcentual, utilice el control deslizante para definir el valor porcentual. El porcentaje determina el tamaño del elemento en función del cuadro de contenido del bloque contenedor, que excluye el relleno y los bordes. Por ejemplo, un valor de 50 establece el ancho del elemento en el 50 % del ancho del contenido del bloque que lo contiene.

    {width="250"}

  • Para un ancho basado en píxeles, haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles. Un valor vacío (Automático) es el valor predeterminado y ajusta el ancho del elemento según su contenido.

    {width="250"}

En el panel derecho con la ficha Estilos seleccionada, expanda la sección Margen y establezca las opciones de espaciado de los márgenes dentro del componente estructural. Este estilo replica el parámetro margin de CSS, que controla el espacio fuera del borde de un componente y lo separa de otros componentes. Crea un espacio alrededor del componente para influir en su posición y el diseño del contenido circundante.

Establezca los valores de los márgenes en píxeles según sus necesidades de diseño. Puede establecer el margen para todos los lados, el superior inferior, el izquierdo-derecho o cada lado del componente de forma independiente:

• Todos los lados: para establecer un valor que se aplicará a todos los lados, desactive la casilla de verificación Margen diferente para cada lado. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.

  {width="250"}

• Superior-inferior: para establecer los márgenes superior e inferior con el mismo valor, establezca el icono Bloqueado entre la configuración superior e inferior. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.

• Izquierda-derecha: para establecer los márgenes izquierdo y derecho en el mismo valor, establezca el icono Bloqueado entre la configuración izquierda y derecha. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.

  {width="250"}

• Independiente: para establecer cada margen en un valor independiente, establezca el icono Desbloqueado entre la configuración superior e inferior y entre la izquierda y la derecha. Para cada configuración, haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles.

  {width="250"}

En el panel derecho con la ficha Estilos seleccionada, expanda la sección Relleno y establezca las opciones de relleno dentro del componente estructural. Este estilo replica el parámetro CSS padding, que es el espacio entre el contenido de un componente y su borde. El relleno proporciona un espacio interno que puede utilizar para controlar la distancia entre el contenido y el borde del componente.

Establezca los valores de relleno en píxeles según sus necesidades de diseño. Puede establecer el relleno para todos los lados, el botón superior, el lado izquierdo-derecho o cada lado del componente de forma independiente:

• Todos los lados: para establecer un valor que se aplicará a todos los lados, desactive la casilla de verificación Relleno diferente para cada lado. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.

  {width="250"}

• Superior-inferior: para establecer el relleno superior e inferior con el mismo valor, establezca el icono Bloqueado entre la configuración superior e inferior. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.

• Izquierda-derecha: para establecer el relleno izquierdo y derecho en el mismo valor, establezca el icono Bloqueado entre la configuración izquierda y derecha. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.

  {width="250"}

• Independiente: para establecer el relleno de cada lado en un valor independiente, establezca el icono Desbloqueado entre la configuración superior e inferior y entre la izquierda y la derecha. Para cada configuración, haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles.

  {width="250"}

Para aplicar atributos adicionales compatibles con CSS con valores, use la configuración de estilo Avanzado. Puede cambiar los valores de los atributos existentes o agregar nuevos. El estilo se aplica al componente mediante el modelo de herencia CSS para los componentes principal-secundario (elementos).

Los atributos mostrados reflejan los estilos definidos actualmente para el componente. Puede cambiar los valores según las definiciones de CSS. Haga clic en el icono Agregar (+) para agregar un nuevo atributo de estilo para el componente.

{width="250"}

Con la ficha Estilos seleccionada en el panel derecho, use la sección Fondo para definir el color de fondo del componente.

Seleccione la casilla de verificación y haga clic en el cuadrado de color para elegir un color del selector. Puede elegir un color introduciendo un valor RGB, HSL, HSB o hexadecimal conocido. O bien, puede utilizar el regulador de color y el campo de color para seleccionar el color.

{width="300"}

Estos estilos se aplican a todo el bloque de texto. Puede aplicar estilos en línea a una cadena de texto seleccionada.

En el panel derecho con la ficha Estilos seleccionada, expanda la sección Texto y establezca las opciones para los estilos de texto del componente:

• Familia de fuentes: haga clic en el icono de flecha hacia abajo para seleccionar una familia de fuentes para el texto dentro del componente.

• Tamaño de fuente: haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el tamaño de fuente o escriba un valor. Para los valores introducidos, puede utilizar decimales.

• Altura de línea: haga clic en los iconos de flecha arriba y abajo para aumentar o reducir la altura de línea o escriba un valor. Para los valores introducidos, puede utilizar decimales.

  {width="250"}

• Estilos de texto - Seleccione el icono para el estilo de texto: Negrita, Cursiva, Subrayado o Tachado.

• Alineación de texto - Seleccione el icono para la alineación de texto horizontal: Izquierda, Centrada, Derecha o Justificada.

• Color de fuente: haga clic en el cuadrado de color para elegir un color de fuente del selector. Puede elegir un color introduciendo un valor RGB, HSL, HSB o hexadecimal conocido. O bien, puede utilizar el regulador de color y el campo de color para seleccionar el color.

  {width="300"}

1. En el panel derecho con la ficha Estilos seleccionada, expanda la sección Borde y establezca las opciones para mostrar un borde para el componente:

2. Mueva el conmutador a la derecha para habilitar las opciones de visualización de bordes y configúrelas según los criterios de diseño:

   • Para establecer el color del borde, seleccione la casilla de verificación y haga clic en el cuadrado de color para elegir un color del selector. Puede elegir un color introduciendo un valor RGB, HSL, HSB o hexadecimal conocido. O bien, puede utilizar el regulador de color y el campo de color para seleccionar el color.

   {width="300"}

   • Para establecer el tamaño del borde (ancho de línea), haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles.

   • Para establecer el estilo de borde, elija un valor de la lista de valores de CSS border-style estándar.

   • Para determinar dónde se muestra el borde, active cada casilla de verificación Posición del borde.

   {width="250"}

3. Para el Radio del borde, establezca el valor numérico según la curva que desee para las esquinas.

   Un valor de 0 (por defecto) produce una esquina cuadrada.

En el panel derecho con la ficha Estilos seleccionada, expanda la sección Tamaño y establezca las opciones para la altura y anchura del componente:

• Altura: haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles. Un valor vacío (Automático) es el valor predeterminado y ajusta el tamaño de la altura del elemento según su contenido.

• Anchura: utilice la opción para establecer la anchura en píxeles o porcentaje.

  • Para una anchura porcentual, utilice el control deslizante para definir el valor porcentual. El porcentaje determina el tamaño del elemento en función del cuadro de contenido del bloque contenedor, que excluye el relleno y los bordes. Por ejemplo, un valor de 50 establece el ancho del elemento en el 50 % del ancho del contenido del bloque que lo contiene.

    {width="250"}

  • Para un ancho basado en píxeles, haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles. Un valor vacío (Automático) es el valor predeterminado y ajusta el ancho del elemento según su contenido.

    {width="250"}

En el panel derecho con la ficha Estilos seleccionada, expanda la sección Margen y establezca las opciones de espaciado de los márgenes dentro del componente estructural. Este estilo replica el parámetro margin de CSS, que controla el espacio fuera del borde de un componente y lo separa de otros componentes. Crea un espacio alrededor del componente para influir en su posición y el diseño del contenido circundante.

Establezca los valores de los márgenes en píxeles según sus necesidades de diseño. Puede establecer el margen para todos los lados, el superior inferior, el izquierdo-derecho o cada lado del componente de forma independiente:

• Todos los lados: para establecer un valor que se aplicará a todos los lados, desactive la casilla de verificación Margen diferente para cada lado. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.

  {width="250"}

• Superior-inferior: para establecer los márgenes superior e inferior con el mismo valor, establezca el icono Bloqueado entre la configuración superior e inferior. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.

• Izquierda-derecha: para establecer los márgenes izquierdo y derecho en el mismo valor, establezca el icono Bloqueado entre la configuración izquierda y derecha. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.

  {width="250"}

• Independiente: para establecer cada margen en un valor independiente, establezca el icono Desbloqueado entre la configuración superior e inferior y entre la izquierda y la derecha. Para cada configuración, haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles.

  {width="250"}

En el panel derecho con la ficha Estilos seleccionada, expanda la sección Relleno y establezca las opciones de relleno dentro del componente estructural. Este estilo replica el parámetro CSS padding, que es el espacio entre el contenido de un componente y su borde. El relleno proporciona un espacio interno que puede utilizar para controlar la distancia entre el contenido y el borde del componente.

Establezca los valores de relleno en píxeles según sus necesidades de diseño. Puede establecer el relleno para todos los lados, el botón superior, el lado izquierdo-derecho o cada lado del componente de forma independiente:

• Todos los lados: para establecer un valor que se aplicará a todos los lados, desactive la casilla de verificación Relleno diferente para cada lado. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.

  {width="250"}

• Superior-inferior: para establecer el relleno superior e inferior con el mismo valor, establezca el icono Bloqueado entre la configuración superior e inferior. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.

• Izquierda-derecha: para establecer el relleno izquierdo y derecho en el mismo valor, establezca el icono Bloqueado entre la configuración izquierda y derecha. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.

  {width="250"}

• Independiente: para establecer el relleno de cada lado en un valor independiente, establezca el icono Desbloqueado entre la configuración superior e inferior y entre la izquierda y la derecha. Para cada configuración, haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles.

  {width="250"}

Para aplicar atributos adicionales compatibles con CSS con valores, use la configuración de estilo Avanzado. Puede cambiar los valores de los atributos existentes o agregar nuevos. El estilo se aplica al componente mediante el modelo de herencia CSS para los componentes principal-secundario (elementos).

Los atributos mostrados reflejan los estilos definidos actualmente para el componente. Puede cambiar los valores según las definiciones de CSS. Haga clic en el icono Agregar (+) para agregar un nuevo atributo de estilo para el componente.

{width="250"}

Con la ficha Estilos seleccionada en el panel derecho, use la sección Fondo para definir el color de fondo del componente.

Seleccione la casilla de verificación y haga clic en el cuadrado de color para elegir un color del selector. Puede elegir un color introduciendo un valor RGB, HSL, HSB o hexadecimal conocido. O bien, puede utilizar el regulador de color y el campo de color para seleccionar el color.

{width="300"}

En el panel derecho con la ficha Estilos seleccionada, expanda la sección Tamaño y establezca las opciones para la altura y anchura del componente:

• Altura: haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles. Un valor vacío (Automático) es el valor predeterminado y ajusta el tamaño de la altura del elemento según su contenido.

• Anchura: utilice la opción para establecer la anchura en píxeles o porcentaje.

  • Para una anchura porcentual, utilice el control deslizante para definir el valor porcentual. El porcentaje determina el tamaño del elemento en función del cuadro de contenido del bloque contenedor, que excluye el relleno y los bordes. Por ejemplo, un valor de 50 establece el ancho del elemento en el 50 % del ancho del contenido del bloque que lo contiene.

    {width="250"}

  • Para un ancho basado en píxeles, haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles. Un valor vacío (Automático) es el valor predeterminado y ajusta el ancho del elemento según su contenido.

    {width="250"}

Expanda la sección Alignment y elija la alineación horizontal que desee utilizar: izquierda, centro o derecha. Este estilo se traduce a un estilo CSS text-align estándar y afecta a la forma en que se coloca el componente dentro del componente que lo contiene.

{width="250"}

En el panel derecho con la ficha Estilos seleccionada, expanda la sección Margen y establezca las opciones de espaciado de los márgenes dentro del componente estructural. Este estilo replica el parámetro margin de CSS, que controla el espacio fuera del borde de un componente y lo separa de otros componentes. Crea un espacio alrededor del componente para influir en su posición y el diseño del contenido circundante.

Establezca los valores de los márgenes en píxeles según sus necesidades de diseño. Puede establecer el margen para todos los lados, el superior inferior, el izquierdo-derecho o cada lado del componente de forma independiente:

• Todos los lados: para establecer un valor que se aplicará a todos los lados, desactive la casilla de verificación Margen diferente para cada lado. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.

  {width="250"}

• Superior-inferior: para establecer los márgenes superior e inferior con el mismo valor, establezca el icono Bloqueado entre la configuración superior e inferior. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.

• Izquierda-derecha: para establecer los márgenes izquierdo y derecho en el mismo valor, establezca el icono Bloqueado entre la configuración izquierda y derecha. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.

  {width="250"}

• Independiente: para establecer cada margen en un valor independiente, establezca el icono Desbloqueado entre la configuración superior e inferior y entre la izquierda y la derecha. Para cada configuración, haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles.

  {width="250"}

En el panel derecho con la ficha Estilos seleccionada, expanda la sección Relleno y establezca las opciones de relleno dentro del componente estructural. Este estilo replica el parámetro CSS padding, que es el espacio entre el contenido de un componente y su borde. El relleno proporciona un espacio interno que puede utilizar para controlar la distancia entre el contenido y el borde del componente.

Establezca los valores de relleno en píxeles según sus necesidades de diseño. Puede establecer el relleno para todos los lados, el botón superior, el lado izquierdo-derecho o cada lado del componente de forma independiente:

• Todos los lados: para establecer un valor que se aplicará a todos los lados, desactive la casilla de verificación Relleno diferente para cada lado. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.

  {width="250"}

• Superior-inferior: para establecer el relleno superior e inferior con el mismo valor, establezca el icono Bloqueado entre la configuración superior e inferior. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.

• Izquierda-derecha: para establecer el relleno izquierdo y derecho en el mismo valor, establezca el icono Bloqueado entre la configuración izquierda y derecha. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.

  {width="250"}

• Independiente: para establecer el relleno de cada lado en un valor independiente, establezca el icono Desbloqueado entre la configuración superior e inferior y entre la izquierda y la derecha. Para cada configuración, haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles.

  {width="250"}

Para aplicar atributos adicionales compatibles con CSS con valores, use la configuración de estilo Avanzado. Puede cambiar los valores de los atributos existentes o agregar nuevos. El estilo se aplica al componente mediante el modelo de herencia CSS para los componentes principal-secundario (elementos).

Los atributos mostrados reflejan los estilos definidos actualmente para el componente. Puede cambiar los valores según las definiciones de CSS. Haga clic en el icono Agregar (+) para agregar un nuevo atributo de estilo para el componente.

{width="250"}

Con la ficha Estilos seleccionada en el panel derecho, use la sección Fondo para definir el color de fondo del componente.

Seleccione la casilla de verificación y haga clic en el cuadrado de color para elegir un color del selector. Puede elegir un color introduciendo un valor RGB, HSL, HSB o hexadecimal conocido. O bien, puede utilizar el regulador de color y el campo de color para seleccionar el color.

{width="300"}

1. En el panel derecho con la ficha Estilos seleccionada, expanda la sección Borde y establezca las opciones para mostrar un borde para el componente:

2. Mueva el conmutador a la derecha para habilitar las opciones de visualización de bordes y configúrelas según los criterios de diseño:

   • Para establecer el color del borde, seleccione la casilla de verificación y haga clic en el cuadrado de color para elegir un color del selector. Puede elegir un color introduciendo un valor RGB, HSL, HSB o hexadecimal conocido. O bien, puede utilizar el regulador de color y el campo de color para seleccionar el color.

   {width="300"}

   • Para establecer el tamaño del borde (ancho de línea), haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles.

   • Para establecer el estilo de borde, elija un valor de la lista de valores de CSS border-style estándar.

   • Para determinar dónde se muestra el borde, active cada casilla de verificación Posición del borde.

   {width="250"}

3. Para el Radio del borde, establezca el valor numérico según la curva que desee para las esquinas.

   Un valor de 0 (por defecto) produce una esquina cuadrada.

En el panel derecho con la ficha Estilos seleccionada, expanda la sección Tamaño y establezca las opciones para la altura y anchura del componente:

• Altura: haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles. Un valor vacío (Automático) es el valor predeterminado y ajusta el tamaño de la altura del elemento según su contenido.

• Anchura: utilice la opción para establecer la anchura en píxeles o porcentaje.

  • Para una anchura porcentual, utilice el control deslizante para definir el valor porcentual. El porcentaje determina el tamaño del elemento en función del cuadro de contenido del bloque contenedor, que excluye el relleno y los bordes. Por ejemplo, un valor de 50 establece el ancho del elemento en el 50 % del ancho del contenido del bloque que lo contiene.

    {width="250"}

  • Para un ancho basado en píxeles, haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles. Un valor vacío (Automático) es el valor predeterminado y ajusta el ancho del elemento según su contenido.

    {width="250"}

Expanda la sección Alignment y elija la alineación horizontal y vertical que desee utilizar. Los estilos de alineación afectan a cómo se coloca el componente HTML dentro del componente contenedor (estructural o contenedor).

La alineación horizontal se traduce en un estilo CSS estándar de text-align y puede elegir entre izquierda, centro o derecha. La alineación vertical se traduce al estilo CSS estándar de vertical-align y puede elegir entre superior, medio o inferior.

{width="300"}

En el panel derecho con la ficha Estilos seleccionada, expanda la sección Margen y establezca las opciones de espaciado de los márgenes dentro del componente estructural. Este estilo replica el parámetro margin de CSS, que controla el espacio fuera del borde de un componente y lo separa de otros componentes. Crea un espacio alrededor del componente para influir en su posición y el diseño del contenido circundante.

Establezca los valores de los márgenes en píxeles según sus necesidades de diseño. Puede establecer el margen para todos los lados, el superior inferior, el izquierdo-derecho o cada lado del componente de forma independiente:

• Todos los lados: para establecer un valor que se aplicará a todos los lados, desactive la casilla de verificación Margen diferente para cada lado. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.

  {width="250"}

• Superior-inferior: para establecer los márgenes superior e inferior con el mismo valor, establezca el icono Bloqueado entre la configuración superior e inferior. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.

• Izquierda-derecha: para establecer los márgenes izquierdo y derecho en el mismo valor, establezca el icono Bloqueado entre la configuración izquierda y derecha. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.

  {width="250"}

• Independiente: para establecer cada margen en un valor independiente, establezca el icono Desbloqueado entre la configuración superior e inferior y entre la izquierda y la derecha. Para cada configuración, haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles.

  {width="250"}

En el panel derecho con la ficha Estilos seleccionada, expanda la sección Relleno y establezca las opciones de relleno dentro del componente estructural. Este estilo replica el parámetro CSS padding, que es el espacio entre el contenido de un componente y su borde. El relleno proporciona un espacio interno que puede utilizar para controlar la distancia entre el contenido y el borde del componente.

Establezca los valores de relleno en píxeles según sus necesidades de diseño. Puede establecer el relleno para todos los lados, el botón superior, el lado izquierdo-derecho o cada lado del componente de forma independiente:

• Todos los lados: para establecer un valor que se aplicará a todos los lados, desactive la casilla de verificación Relleno diferente para cada lado. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.

  {width="250"}

• Superior-inferior: para establecer el relleno superior e inferior con el mismo valor, establezca el icono Bloqueado entre la configuración superior e inferior. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.

• Izquierda-derecha: para establecer el relleno izquierdo y derecho en el mismo valor, establezca el icono Bloqueado entre la configuración izquierda y derecha. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.

  {width="250"}

• Independiente: para establecer el relleno de cada lado en un valor independiente, establezca el icono Desbloqueado entre la configuración superior e inferior y entre la izquierda y la derecha. Para cada configuración, haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles.

  {width="250"}

Para aplicar atributos adicionales compatibles con CSS con valores, use la configuración de estilo Avanzado. Puede cambiar los valores de los atributos existentes o agregar nuevos. El estilo se aplica al componente mediante el modelo de herencia CSS para los componentes principal-secundario (elementos).

Los atributos mostrados reflejan los estilos definidos actualmente para el componente. Puede cambiar los valores según las definiciones de CSS. Haga clic en el icono Agregar (+) para agregar un nuevo atributo de estilo para el componente.

{width="250"}