Inicio rápido: aplicar estilos a los controles (HTML)

Artículo
03/04/2016

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

Para personalizar el aspecto de los controles en la aplicación de Windows en tiempo de ejecución con JavaScript, usa Hojas de estilo CSS, igual que harías para un sitio web. Las aplicaciones de la Tienda Windows con JavaScript también admiten algunas características avanzadas de estilos de control. La Biblioteca de Windows para JavaScript ofrece un conjunto completo de estilos que permite aplicar la apariencia de Windows 8 a la aplicación de manera sencilla.

En este inicio rápido mostraremos cómo incluir la hoja de estilos de WinJS, cómo aplicar estilos a los controles HTML (también denominados controles intrínsecos), cómo aplicar estilos a los controles de WinJS y cómo usar las clases de tipografía que WinJS ofrece.

Consulta esta característica como parte de nuestra serie Características de aplicaciones, de principio a fin: Interfaz de usuario de aplicaciones de la Tienda Windows, de principio a fin

Requisitos previos

Damos por hecho que sabes cómo controlar eventos en una aplicación de Windows en tiempo de ejecución con JavaScript. Para conocer la mejor manera de controlar eventos, consulta Inicio rápido: agregar controles HTML y controlar eventos.
Damos por hecho que sabes crear y usar controles de WinJS. Para saber cómo, consulta Inicio rápido: Agregar controles y estilos de WinJS.
Debes estar familiarizado con CSS. (Para obtener más información sobre CSS, consulta el tema sobre conceptos básicos sobre HTML/CSS/JavaScript.)

Ventajas de usar las hojas de estilos de la biblioteca de Windows para JavaScript

Las hojas de estilo de WinJS ofrecen lo siguiente:

Un conjunto de estilos que hacen que los controles tengan un aspecto excelente y funcionan bien con pantallas táctiles.
Compatibilidad automática para modos de alto contraste. Estos estilos se diseñaron teniendo en cuenta el alto contraste, para que cuando se ejecute tu aplicación en un dispositivo en modo de alto contraste, se visualice correctamente.
Compatibilidad automática en otros idiomas. Las hojas de estilos de WinJS seleccionan automáticamente la fuente correcta para cada idioma compatible con Windows 8. Puedes incluso usar varios idiomas en la misma aplicación, y se mostrarán correctamente.
Compatibilidad automática en otros órdenes de lectura. Los controles, diseños y estilos HTML y de WinJS se ajustan automáticamente en los idiomas que tienen una dirección de lectura de derecha a izquierda.

Mediante las hojas de estilos de la Biblioteca de Windows para JavaScript más reciente

Para activar las últimas hojas de estilos de WinJS:

Descarga la versión más reciente de Descargar WinJS y cópiala en el directorio de la aplicación o el sitio web.
Agrega referencias de script y CSS de WinJS a cada página de la aplicación o del sitio web que use funciones de WinJS.

En este ejemplo se muestra el aspecto de estas referencias de una aplicación que tiene sus archivos de WinJS en su directorio raíz.

    <!-- WinJS style sheets (include one) -->
    <link href="/WinJS/css/ui-dark.css" rel="stylesheet">
    <link href="/WinJS/css/ui-light.css" rel="stylesheet">

    <!-- WinJS code -->
    <script src="/WinJS/js/WinJS.js"></script>

WinJS proporciona dos hojas de estilos predeterminadas que puedes usar para conferir a tu aplicación la apariencia de Windows: ui-dark.css y ui-light.css.

Para las aplicaciones que muestren principalmente imágenes o vídeo, recomendamos usar la hoja de estilos oscura.
Para las aplicaciones que contengan mucho texto, recomendamos usar la hoja de estilos clara.

(Si vas a usar un esquema de colores personalizado, usa la hoja de estilos que mejor se ajuste al aspecto de la aplicación).

Estas hojas de estilos definen los siguientes estilos:

Estilos básicos

Estilos para los elementos html, body y iframe
Estilos de controles HTML intrínsecos

Estilos para controles HTML intrínsecos, como button.
Clases de controles HTML intrínsecos adicionales

Clases CSS que puedes asignar a controles HTML intrínsecos para darles un aspecto distinto. Para obtener una lista completa de estas clases, consulta Clases CSS para controles HTML.
Estilos de control de WinJS

Clases CSS que representan elementos de controles de WinJS a los que se puede aplicar estilo.
Estilos tipográficos

Estilos para elementos tipográficos, como h1, dd y p.
Clases de tipografía adicionales

Clases CSS que puedes usar para aplicar estilo al texto. Por ejemplo, puedes usar la clase win-type-large para ampliar el texto de un elemento.

Personalizar el aspecto de la aplicación

Si quieres personalizar el aspecto de la aplicación, no tienes que desechar los estilos de WinJS y empezar desde cero. Puedes hacer cambios incrementales de manera sencilla si invalidas los estilos que quieres cambiar.

De hecho, es preferible invalidar los estilos de WinJS a crear los tuyos propios. Cuando la aplicación se ejecuta en modo de alto contraste, cualquier cambio en los colores de los estilos predeterminados se reemplazará automáticamente por un esquema de colores que admita alto contraste.

Puedes invalidar cualquier estilo de la hoja de estilos predeterminada si creas tu propia hoja de estilos y la incluyes más adelante en la hoja de estilos de WinJS:


<!-- The WinJS style sheet. -->
<link href="/WinJS/css/ui-dark.css" rel="stylesheet">

<!-- Your style sheet for overriding portions of the default style sheet. -->
<link href="/css/mystylesheet.css" rel="stylesheet" />

Cómo especificar los colores

Puedes invalidar las hojas de estilos de WinJS o puedes especificar tus propios estilos. Cuando especifiques tus propios estilos, es mejor usar los colores del sistema de CSS porque se muestran correctamente de manera automática cuando la aplicación se encuentra en modo de alto contraste. Para obtener una lista de los colores del sistema, consulta colores del sistema definidos por el usuario.

Si no usas los colores del sistema definidos por el usuario y, en su lugar, especificas un valor RGB, no hay ningún problema, siempre que invalides un estilo existente de WinJS. Cuando invalidas un estilo de WinJS y el sistema cambia al modo de alto contraste, la información de color personalizada se omite y en su lugar se usa la paleta compatible con el modo de alto contraste.

Aplicar estilos a controles HTML

Puedes aplicar estilos a controles HTML (aquellos controles que forman parte del estándar HTML5, como button, textarea y select), del mismo modo que aplicas estilos en una página HTML típica mediante CSS. (Para obtener información sobre CSS y su funcionamiento, consulta el tema sobre conceptos básicos de HTML/CSS/JavaScript ).

Por ejemplo, para aplicar el estilo a un cuadro de entrada de texto para que tenga un ancho de 400 píxeles, escribe esta CSS:

input[type=text]
{
    width: 400px;
}

Un control de entrada de texto

Un control típico tiene varios componentes o subelementos. Por ejemplo, el control de entrada de texto del ejemplo anterior tiene dos elementos: el valor de texto y el botón de cierre.

Un control de entrada de texto con componentes etiquetados

Las aplicaciones de la Tienda Windows con JavaScript proporcionan seudoelementos CSS que permiten aplicar estilos a los elementos individuales de muchos controles. El seudoelemento para el valor de entrada de texto es -ms-value y el seudoelemento para el botón de cierre es -ms-clear.

Un control de entrada de texto con valores

Para aplicar estilos a un elemento de control, usa esta sintaxis:

element selector::part name { /* Tus estilos aquí */ }

Por ejemplo, para aplicar un estilo al botón de cierre del cuadro de entrada de texto, puedes crear este estilo:

input[type=text]::-ms-clear
{
            border: 2px solid orange
}

Un control de entrada de texto con un botón de cierre con un borde naranja

Puedes combinar selectores de seudoelementos con otros selectores para que apuntes a un control con un nombre o un identificador de clase específico.

Por ejemplo, para aplicar un estilo al botón de cierre de un control de entrada de texto que usa la clase "orangeButton", tienes que crear este estilo:

input[type=text].orangeButton::-ms-clear
{
            border: 2px solid orange
}

Para obtener más información sobre las distintas combinaciones de seudoelementos y otros selectores, consulta Descripción de selectores CSS.

Estos son los elementos disponibles para cada control HTML.

Control	Elementos
input type=checkbox	-ms-check
input type=radio	-ms-check
input type=password	-ms-reveal
input type=range	-ms-fill-lower, -ms-fill-upper, -ms-thumb, -ms-track, -ms-ticks-after, -ms-ticks-before, -ms-tooltip
input type=email, input type=number, input type=password, input type=search, input type=tel, input type=url	-ms-value,-ms-clear
input type=file	-ms-value, -ms-browse
progress	-ms-fill
select	-ms-value, -ms-expand

Los elementos option del control Select son ahora compatibles con el estilo CSS para ofrecer un control preciso sobre el aspecto de los elementos desplegables, como los estilos de color y de fuente. Esto permite crear escenarios de edición como un control selector de fuente, donde los usuarios pueden obtener una vista previa de distintos estilos de fuente en un menú desplegable antes de elegir la fuente que usarán. Así:


<select id="fontNameSelect" onChange="formatText('fontName')">
    <option style="font-family:Arial;">Arial</option>
    <option style="font-family:Comic Sans MS;">Comic Sans MS</option>
    <option style="font-family:Courier New;">Courier New</option>
    <option style="font-family:Cursive;">Cursive</option>
    <option style="font-family:Segoe Script;">Segoe Script</option>
</select>

Usar clases de control HTML

La hoja de estilos incluye clases CSS que puedes asignar a controles HTML intrínsecos para darles un aspecto distinto. Por ejemplo, puedes usar la clase win-backbutton para crear un botón con el aspecto de un botón estándar para navegar hacia atrás.

<button class="win-backbutton"></button>

Al usar la clase, el botón tiene este aspecto:

Un botón que usa la clase backbutton de CSS

Aplicar estilos a controles de la biblioteca de Windows para JavaScript

Para aplicar estilo a un control de WinJS, hay que invalidad las clases CSS de WinJS del control en cuestión. Por ejemplo, para aplicar un estilo a AppBar, invalida la clase win-appbar.

En el ejemplo siguiente se crea un estilo que oculta el indicador de progreso de una ListView.

.win-listView .win-progress {
    display: none;
}

Para obtener una lista completa de las clases disponibles, consulta Clases CSS de WinJS. Para obtener más información sobre las clases que usa un determinado control, consulta la página de referencia de dicho control.

Algunos controles, como ListView y FlipView también admiten plantillas de elementos. Las plantillas de elementos te aportan un enorme control sobre el aspecto y el contenido de los elementos de lista. Para obtener más información, consulta Inicio rápido: Agregar un control ListView y Inicio rápido: Agregar un control FlipView.

Usar clases de tipografía

La hoja de estilos también contiene clases CSS para tipografía que puedes aplicar a cualquier elemento que contiene texto. Por ejemplo, puedes usar la clase win-title para que un encabezado tenga el estilo de título de Windows 8. En este ejemplo se usan clases de tipografía para crear distintos tipos de títulos.


     <p class="win-type-xx-large">win-type-xx-large</p>
     <p class="win-type-medium">win-type-medium</p>
     <p class="win-type-xx-small">win-type-xx-small</p>

Elementos que usan las clases de tipografía

Para obtener una lista completa de estas clases tipográficas, consulta Clases tipográficas CSS.

Muestras

Para obtener más información sobre la aplicación de estilos, echa un vistazo a estas muestras:

Resumen

Has aprendido a usar las hojas de estilos de WinJS, a aplicar estilos a controles intrínsecos y de WinJS y a usar las otras clases CSS que WinJS ofrece para tipografía.