|
|
|
|
- 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
Esta lección abarcará los siguientes temas - Estilos CSS.
- Estilos WEBDEV.
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.
- ¿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:
- Vaya a la página de inicio de WEBDEV (Ctrl +<).
- En la página de inicio, haga clic en "Tutorial", luego en "Part 7 - Lesson 7.1 - Styles", haga doble clic en "Styles - Answers".
- Abra la página "PAGE_Styles" en el editor.
- Abra la ventana de descripción del control Campo de entrada "Last name" (seleccione "Descripción" en el menú contextual).
- Seleccione la pestaña "Estilo". Esta pestaña permite definir las características de estilo del control.
- La siguiente ventana se abre:
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:
- 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.Observación: Todos los elementos seguidos de "(CSS)" pueden utilizar directamente un estilo CSS: simplemente seleccione el elemento deseado.
- 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:
- 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".
- En el menú contextual que aparece, seleccione "Editar".
- La ventana de edición de estilos CSS se abre.
- 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":
- Si es necesario, seleccione el estilo "MyCustomStyle_InputArea" en la opción "Estilo" de la sección 1.
- Seleccione el estado "Predeterminado (default)" (primer estado de la sección 1).
- Vaya a la pestaña "Fondo": el color de fondo es blanco.
- Seleccione el estado "Enfocado (focus)" (cuarto estado de la sección 1).
- 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.
- 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:
- 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: 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:
- En la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en .
- 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.
- Seleccionando la opción "Seleccionar un estilo WEBDEV" en el menú contextual del control.
- 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.
- Seleccione el control que acaba de crear.
- Abra el menú contextual del control y elija la opción "Seleccionar un estilo WEBDEV".
- En la ventana que aparece, seleccione el estilo "Custom".
- 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 en los botones de acceso rápido).
- La página se muestra en el navegador.
- Haga clic en el área de entrada del nuevo control Campo de entrada: el área de entrada cambia a color amarillo.
- Cierre el navegador.
Sobrescribir el estilo CSS de un control - Vamos a cambiar el estilo del área de entrada del control:
- Abra la ventana de descripción del control creado anteriormente.
- En la pestaña "Estilo", seleccione el elemento "Área de entrada (CSS)".
- Haga clic en "+ sobrescrituras" para sobrescribir las opciones CSS de este elemento.
- Seleccione el estado "Enfocado (focus)".
- En la pestaña "Fondo" cambie el color de fondo. Elija un color púrpura claro, por ejemplo.
- Valide. En la pestaña de estilos WEBDEV, arriba a la derecha, el enlace indica "1 sobrescritura".
- Al hacer clic en él, puede ver que el color de fondo del área interna se sobrescribió.
- Valide la ventana de descripción del control.
- Guarde la página (Ctrl + S) y pruébela (haga clic en en los botones de acceso rápido).
- La página se muestra en el navegador.
- 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.
- 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.
- Abra la ventana de descripción del control que creó (Alt + Entrar).
- En la pestaña "Estilo", seleccione el elemento "Área de entrada (CSS)".
- 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.
- Seleccione el estado "predeterminado".
- En la pestaña "Texto", cambie el color. Elija un color verde, por ejemplo.
- 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 en los botones de acceso rápido).
- La página se muestra en el navegador.
- 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ó.
- 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:
- Seleccione el control Campo de entrada "Last name".
- Presione la barra espaciadora o la tecla Entrar.
- El texto pasa a modo de edición.
- Agregue un asterisco al final del texto.
- Seleccione el asterisco.
- En la pestaña "Texto", en el grupo "Fuente":
- Haga clic en para aplicar el formato de superíndice.
- Cambie el color del texto a rojo con el botón .
- Salga del modo de edición (Esc).
- El asterisco rojo aparece en el título del control.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|