AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

Ayuda / Tutorial WEBDEV / Tutorial - Anclajes, zoning y layouts
  • Esta lección abarcará los siguientes temas
  • Presentación
  • Introducción a los estilos
  • Un control: varios elementos
  • Descubrir los estilos a través de un ejemplo
  • Seleccionar los estilos CSS de un control
  • Editar el estilo CSS de un control
  • Estilos WEBDEV
  • Implementar estilos: ejemplo práctico
  • Sobrescribir el estilo CSS de un control
  • Modificar un estilo CSS para todos los controles
  • Estilos y texto enriquecido
Lección 7.1. Estilos
Esta lección abarcará los siguientes temas
  • Estilos CSS.
  • Estilos WEBDEV.
Duración de la lección

Tiempo estimado: 1 h
Lección anteriorTabla de contenidoSiguiente lección
Presentación
WEBDEV le permite "diseñar" sus sitios web. Para ello, puede utilizar dos tipos de estilos:
  • Estilos CSS,
  • Estilos WEBDEV.
Utilizar estilos en los controles le ayuda a ganar tiempo: si realiza cambios en un estilo WEBDEV o CSS, todos los controles que utilizan ese estilo se actualizan automáticamente.
Introducción a los estilos
Antes de utilizar los estilos, veamos los controles a los que se aplicarán.

Un control: varios elementos

Cada control WEBDEV incluye varios elementos.

  • Tomemos como ejemplo el control Campo de entrada. Este control incluye tres elementos:
    • el título.
    • el área de entrada.
    • un área adicional que contiene el título y el área de entrada.
      Elementos de estilo de un control Campo de entrada
  • ¿Cómo se aplican los estilos al control Campo de entrada? Dependiendo del tipo de estilo (WEBDEV o CSS), puede aplicarse de forma diferente.
    • Los estilos CSS se aplican a los elementos del control.
      En el caso del control Campo de entrada, se puede aplicar un estilo CSS específico al título del control o al área de entrada.
    • Los estilos WEBDEV se aplican a todo el control.
      Un estilo WEBDEV incluye varios estilos CSS.
      Por ejemplo, para el control Campo de entrada, el estilo WEBDEV contiene:
      • El estilo CSS para el título,
      • El estilo CSS para el área de entrada,
      • Las diferentes opciones de estilo para el área global del control.

Descubrir los estilos a través de un ejemplo

  • Para descubrir los estilos en WEBDEV, utilizaremos un ejemplo sencillo:
    1. Vaya a la página de inicio de WEBDEV (Ctrl +<).
    2. En la página de inicio, haga clic en "Tutorial", luego en "Part 7 - Lesson 7.1 - Styles", haga doble clic en "Styles - Answers".
    3. Abra la página "PAGE_Styles" en el editor.
    4. Abra la ventana de descripción del control Campo de entrada "Last name" (seleccione "Descripción" en el menú contextual).
    5. Seleccione la pestaña "Estilo". Esta pestaña permite definir las características de estilo del control.
    6. La siguiente ventana se abre:
      Pestaña 'Estilo' de un control Campo de entrada
Esta ventana permite definir los estilos CSS (sección 1 de la ventana) y los estilos WEBDEV (sección 2 de la ventana) del control. Veamos las características disponibles en esta ventana.

Seleccionar los estilos CSS de un control

  • Para seleccionar los estilos CSS de un control:
    1. En la pestaña "Estilo" de la ventana de descripción del control, en la opción "Elemento", seleccione un elemento y establezca el estilo deseado.
      Elementos gestionados por el estilo
      Observación: Todos los elementos seguidos de "(CSS)" pueden utilizar directamente un estilo CSS: simplemente seleccione el elemento deseado.
    2. La opción "Estilo CSS" permite elegir el estilo CSS del elemento: este estilo se aplicará al elemento.

Editar el estilo CSS de un control

  • Para crear o editar un estilo CSS:
    1. En la pestaña "Estilo" de la ventana de descripción del control, haga clic en el ícono que se encuentra junto a la opción "Estilo CSS".
      Crear o editar un estilo CSS
    2. En el menú contextual que aparece, seleccione "Editar".
    3. La ventana de edición de estilos CSS se abre.
      Ventana de edición de estilo CSS
    4. Esta ventana permite crear o modificar todos los estilos CSS del proyecto.
  • Analicemos esta ventana. Tiene 2 secciones:
    • Sección 1. Estado del control al que se aplicará el estilo: predeterminado (default), cursor sobre (hover), presionado (active), etc.
    • Sección 2. Las propiedades CSS asociadas al estado seleccionado. Cada propiedad CSS puede modificarse por estado.
  • Veamos las características del estilo CSS "MyCustomStyle_InputArea":
    1. Si es necesario, seleccione el estilo "MyCustomStyle_InputArea" en la opción "Estilo" de la sección 1.
    2. Seleccione el estado "Predeterminado (default)" (primer estado de la sección 1).
    3. Vaya a la pestaña "Fondo": el color de fondo es blanco.
    4. Seleccione el estado "Enfocado (focus)" (cuarto estado de la sección 1).
    5. En la pestaña "Fondo", el color de fondo del área de entrada es amarillo pastel. El estilo CSS contiene un estilo para cada uno de los estados.
    6. Cierra la ventana de descripción de estilos CSS.
  • La pestaña "Estilo" de la ventana de descripción del control aparece de nuevo. En la parte inferior de la ventana, puede definir las opciones de estilo más utilizadas:
    Acceso rápido a las opciones
    • Fuente,
    • Tamaño,
    • Negrita, Cursiva, Subrayado, Tachado,
    • Alineación vertical y horizontal,
    • Color de fondo.

Atención

Estas opciones permiten sobrescribir rápidamente el estilo CSS del control actual. En este caso, los cambios realizados en estas opciones no se aplicarán a los demás controles que utilizan el estilo CSS.
Puede sobrescribir las demás propiedades del estilo CSS mediante el enlace "+ sobrescrituras".
Ahora, veamos los estilos WEBDEV.

Estilos WEBDEV

Un estilo WEBDEV incluye varios estilos CSS. Por ejemplo, para el control Campo de entrada, el estilo WEBDEV contiene:
  • El estilo CSS para el título,
  • El estilo CSS para el área de entrada,
  • Las diferentes opciones de estilo para el área global del control.
  • Para definir los estilos WEBDEV, utilice el panel que aparece a la derecha de la pestaña "Estilo" del control:
    Estilos WEBDEV
    El nombre del estilo WEBDEV aparece en la parte superior de esta ventana. Es posible:
    • Elegir un estilo existente.
    • Agregar el estilo del control actual a la hoja de estilo del proyecto.
      Esta opción permite reutilizar el estilo en otros controles del proyecto.
    • Disociar el control.
      Esta opción impide que se apliquen futuras modificaciones de estilo al control. Esta opción no es recomendable: le aconsejamos utilizar sobrescrituras de estilo.
El tema del proyecto define un estilo WEBDEV para cada tipo de control. El estilo WEBDEV se puede utilizar "tal cual" o se puede modificar en algunos elementos del control.
Por ejemplo, para poner en negrita el texto de un control Campo de entrada específico, debe:
  • Seleccionar el elemento "Texto (CSS)" en la sección inferior de la pestaña "Estilo".
  • Seleccionar "Negrita" en la sección inferior.
Esta modificación no disociará el estilo WEBDEV del control: la propiedad Negrita se sobrescribirá con respecto al estilo inicial.
Por lo tanto, si se modifica el estilo inicial (para cambiar el color de fondo, por ejemplo), la modificación se aplicará al control conservando la sobrescritura.

Nota

Para ver los elementos sobrescritos, haga clic en el enlace que indica el número de sobrescrituras aplicadas al control, en la parte superior del panel de estilo WEBDEV.
Implementar estilos: ejemplo práctico
Después de ver los aspectos básicos, veamos cómo funciona realmente. Vamos a crear un control Campo de entrada y a modificar los estilos en la página "PAGE_Styles" del proyecto "Styles".
Observación: Vamos a utilizar un control Campo de entrada, pero el principio para manipular los estilos puede aplicarse a todos los controles disponibles en WEBDEV.

  • Para crear el control Campo de entrada:
    1. En la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en Crear un control Campo de entrada.
    2. Haga clic en la ubicación en la que desea crear el control.
Este control está asociado a un estilo WEBDEV (estilo WEBDEV predeterminado definido en el tema elegido al crear el proyecto).

  • Existen tres métodos para seleccionar el estilo WEBDEV de un control:
    • A través de la pestaña "Estilo" de la ventana de descripción del control (como vimos anteriormente).
    • A través de la pestaña "Modificación" de la cinta de opciones: una vista previa muestra los diferentes estilos WEBDEV disponibles para el control.
      Pestaña 'Modificación' de la cinta de opciones
    • Seleccionando la opción "Seleccionar un estilo WEBDEV" en el menú contextual del control.
      Edición de la hoja de estilo
  • Vamos a utilizar el último método para asociar el nuevo control al estilo "EDT_Custom". Este es el estilo de los demás controles de la página.
    1. Seleccione el control que acaba de crear.
    2. Abra el menú contextual del control y elija la opción "Seleccionar un estilo WEBDEV".
    3. En la ventana que aparece, seleccione el estilo "Custom".
    4. Valide la ventana de selección de estilos. El color del título del control cambia: el estilo se aplicó correctamente.
  • Guarde la página (Ctrl + S) y pruébela (haga clic en Probar página en los botones de acceso rápido).
    1. La página se muestra en el navegador.
    2. Haga clic en el área de entrada del nuevo control Campo de entrada: el área de entrada cambia a color amarillo.
    3. Cierre el navegador.

Sobrescribir el estilo CSS de un control

  • Vamos a cambiar el estilo del área de entrada del control:
    1. Abra la ventana de descripción del control creado anteriormente.
    2. En la pestaña "Estilo", seleccione el elemento "Área de entrada (CSS)".
    3. Haga clic en "+ sobrescrituras" para sobrescribir las opciones CSS de este elemento.
    4. Seleccione el estado "Enfocado (focus)".
      Estilo - Estados de un elemento
    5. En la pestaña "Fondo" cambie el color de fondo. Elija un color púrpura claro, por ejemplo.
    6. Valide. En la pestaña de estilos WEBDEV, arriba a la derecha, el enlace indica "1 sobrescritura".
    7. Al hacer clic en él, puede ver que el color de fondo del área interna se sobrescribió.
    8. Valide la ventana de descripción del control.
  • Guarde la página (Ctrl + S) y pruébela (haga clic en Probar página en los botones de acceso rápido).
    1. La página se muestra en el navegador.
    2. Mueva el cursor de un control a otro: el color de fondo es amarillo para todos los controles excepto para el control que se acaba de crear.
    3. Cierre el navegador.

Modificar un estilo CSS para todos los controles

  • Ahora vamos a modificar el estilo CSS del área de entrada para cambiar el color del texto. Haremos estos cambios para todos los controles Campo de entrada de la página.
    1. Abra la ventana de descripción del control que creó (Alt + Entrar).
    2. En la pestaña "Estilo", seleccione el elemento "Área de entrada (CSS)".
    3. Haga clic en a la derecha del nombre del estilo CSS. En el menú contextual que aparece, seleccione "Editar". La ventana de descripción del estilo CSS se abre.
    4. Seleccione el estado "predeterminado".
    5. En la pestaña "Texto", cambie el color. Elija un color verde, por ejemplo.
    6. Valide y, a continuación, valide la ventana de descripción del control.
  • Guarde la página (Ctrl + S) y pruébela (haga clic en Probar página en los botones de acceso rápido).
    1. La página se muestra en el navegador.
    2. Escriba texto en los diferentes campos de entrada de la página: el texto se muestra con el nuevo color seleccionado. Este cambio se aplicó incluso al control creado anteriormente con el estilo que se sobrescribió.
    3. Cierre el navegador.
Estilos y texto enriquecido
En cuanto a la apariencia, también es posible definir texto enriquecido en los elementos.
Al utilizar texto enriquecido, puede definir diferentes estilos para el título del control. Por ejemplo, puede especificar que una parte del título de un control Campo de entrada utilice un color determinado.
Veamos un ejemplo simple: vamos a agregar un asterisco rojo para especificar que un control es un campo obligatorio.

  • En nuestro ejemplo:
    1. Seleccione el control Campo de entrada "Last name".
    2. Presione la barra espaciadora o la tecla Entrar.
    3. El texto pasa a modo de edición.
      Título del control en modo de edición
    4. Agregue un asterisco al final del texto.
    5. Seleccione el asterisco.
    6. En la pestaña "Texto", en el grupo "Fuente":
      Opciones de fuente
      • Haga clic en Superíndice para aplicar el formato de superíndice.
      • Cambie el color del texto a rojo con el botón Cambiar el color.
    7. Salga del modo de edición (Esc).
    8. El asterisco rojo aparece en el título del control.
Lección anteriorTabla de contenidoSiguiente lección
Versión mínima requerida
  • Versión 28
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 31/05/2023

Señalar un error o enviar una sugerencia | Ayuda local