Guida introduttiva: Visualizzazione di testo (HTML)

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Per visualizzare il testo, nelle app di Windows Store in JavaScript vengono usati diversi elementi. Gli elementi principali per la visualizzazione di testo di sola lettura sono label, div, paragraph e heading. In questa guida introduttiva viene mostrato come usare questi elementi per la visualizzazione del testo.

Per una dimostrazione pratica di questa funzionalità, vedi gli argomenti della serie sulle funzionalità delle app: Interfaccia utente delle app di Windows Store, dall'inizio alla fine

Prerequisiti

• Diamo per scontato che tu sia in grado di creare un'app di Windows Store di base scritta in JavaScript con il modello Libreria Windows per JavaScript. Se hai bisogno di aiuto per creare la tua prima app, vedi Creare la prima app di Windows Store con JavaScript.

Etichetta, div, paragrafo e area di testo

Label, div, paragraph e heading sono i controlli principali per visualizzare testo in sola lettura nelle app di Windows Store scritte in JavaScript. Nel codice HTML seguente viene illustrato come definire un controllo label semplice e impostarne il testo.

<label>Hello, World!</label>

Puoi usare l'attributo style incorporato per visualizzare testo con formattazione diversa. Ecco come usare l'attributo style con i controlli div, paragraph, label e heading per definire più stringhe di testo formattate in modo diverso.

Nota  Invece dell'attributo style, puoi anche utilizzare CSS (Cascading Style Sheet) per visualizzare testo con formattazione diversa. In questo modo puoi definire uno stile una sola volta e farvi riferimento in seguito da più controlli. Se successivamente vorrai cambiare la definizione dello stile, dovrai apportare le modifiche solo una volta. Per i dettagli, vedi Fogli di stile CSS (Cascading Style Sheet).

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

Ecco il risultato.

Riepilogo e passaggi successivi

Hai imparato a creare elementi label, div, paragraph e heading per visualizzare testo nella tua app.

Argomenti correlati

Linee guida per i tipi di carattere

Guida introduttiva: Aggiunta di input di testo e controlli di modifica