Compartir a través de

Inicio rápido: mostrar texto (HTML)

  • Artículo

[ 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 ]

Las aplicaciones de la Tienda Windows con JavaScript pueden usar varios elementos para mostrar texto. Los principales elementos para mostrar texto de solo lectura son label, div, paragraph y heading. En este inicio rápido se explica cómo usar estos elementos para mostrar texto.

Consulta esta característica en acción 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

Label, div, paragraph y text area

Label, div, paragraph y heading son los controles principales para mostrar texto de solo lectura en las aplicaciones de la Tienda Windows con JavaScript. En este HTML se indica cómo definir un control label básico y cómo establecer su texto correspondiente.

<label>Hello, World!</label>

Puedes usar el atributo style en línea para mostrar texto con distintos formatos. A continuación te mostramos cómo usar el atributo style con un control div, paragraph, label y heading para definir varias cadenas de texto con distintos formatos.

Nota  Para mostrar texto con un formato diferente, puedes usar también hojas de estilos CSS en lugar del atributo style. Con ellas, solo tendrás que definir el estilo una vez y hacer referencia a este desde varios controles. Además, si posteriormente necesitas hacer cambios en la definición del estilo, solo tendrás que efectuarlos en un único lugar. Para obtener detalles, consulta Hojas de estilo CSS.

 


<div style="font-family:Arial">Sample text formatting runs</div>

<!-- 'margin:0px' removes any default margins from the <p> element. -->
<p style="margin:0px; color:lightgray; font-family:'courier new'; font-size:24px">Courier New 24</p>

<label style="color:teal; font-family:'times new roman'; font-style:italic; font-size:18px">Times New Roman Italic 18</label><br />
    
<!-- 'padding:0px' remove any default padding from the <h1> element. -->
<h1 style="padding:0px; background-color:transparent; color:steelblue; font-family:Verdana; font-weight:bold; font-size:14px">Verdana Bold 14</h1>

Este es el resultado.

Texto que usa objetos Run.

Resumen y pasos siguientes

Has aprendido a crear elementos label, div, paragraph y heading para mostrar texto en tu aplicación.

Temas relacionados

Directrices para fuentes

Inicio rápido: Agregar controles de entrada de texto y de edición