Compartilhar via

Guia de início rápido: exibindo texto (HTML)

  • Artigo

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]

Os aplicativos da Windows Store em JavaScript usam vários elementos para exibir texto. Os principais elementos para exibição de texto somente leitura são label, div, paragraph e heading. Este Guia de início rápido mostra como usar esses elementos para exibir texto.

Veja este recurso em ação como parte da nossa série Recursos para aplicativos, do início ao fim: Interface do usuário de aplicativo da Windows Store, do início ao fim

Pré-requisitos

Rótulo, div, parágrafo e área de texto

Label, div, paragraph e heading são os principais controles para exibição de texto somente leitura nos aplicativos da Windows Store em JavaScript. Este HTML mostra como definir um controle label simples e seu texto.

<label>Hello, World!</label>

Você pode usar o atributo style embutido para exibir texto com formatação diferente. Veja como usar o atributo style com um controle div, paragraph, label e heading para definir várias cadeias de caracteres de texto com formatação diferente.

Observação  Você também pode usar CSS (Folhas de Estilos em Cascata), em vez do atributo style, para exibir texto com formatação diferente. Dessa forma, você define o estilo uma vez e faz referência a ele a partir de vários controles. Se você tiver que mudar a definição do estilo no futuro, basta fazer as alterações em um só lugar. Para saber os detalhes, veja Folhas de Estilos em Cascata.

 


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

Veja o resultado.

O uso de texto é executado.

Resumo e próximas etapas

Você aprendeu como criar os elementos label, div, paragraph e heading para exibir texto em seu aplicativo.

Tópicos relacionados

Diretrizes para fontes

Guia de início rápido: adicionando controles de entrada e edição de texto