Come fare goccia Caps in codice HTML

August 8

fiabe Old-time per bambini a stampa e moderni siti web al giorno a volte condividono un elemento visivo comune: capilettera. capilettera sono le grandi lettere che a volte vede all'inizio di una frase. progettisti di siti possono applicare colori e caratteri diversi per le loro lettere capolettera. Goccia non tappi solamente impostare la prima frase in un paragrafo a parte il resto del testo, ma può aggiungere raffinatezza visiva al documento. Non troverete una proprietà HTML "Drop Cap", ma troverete una classe CSS che può aggiungere capolettera alla moda per le pagine Web.

istruzione

1 Avviare un editor HTML o Notepad. Aprire un documento HTML, e incolla questo codice nella sezione corpo del documento:

<P> Capilettera impostati utilizzando pixel </ p>

Il tag "<p>" crea un paragrafo.

2 Aggiungere il codice CSS indicato di seguito per la sezione testa del documento:

p: first-letter
{
font-size: 300%;
}

3 Salvare il documento e visualizzarlo in un browser. prima lettera del paragrafo appare come un capolettera.

4 Tornare al documento, e sostituire il codice CSS con il seguente codice:

p: first-letter
{
font-size: 50px;
}

Utilizzando 50px invece di 300% per il valore font-size consente di impostare le dimensioni capolettera utilizzando i valori dei pixel. In questo esempio, che la dimensione è 50 pixel. È inoltre possibile utilizzare le unità em come illustrato di seguito:

p: first-letter
{
font-size: 2em;
}

Consigli e avvertenze

  • È inoltre possibile lo stile della lettera capolettera impostando il suo colore e il carattere, l'aggiunta di un bordo o anche regolando l'imbottitura intorno alla lettera. A tale scopo, applicando gli stessi stili CSS che è possibile utilizzare per personalizzare ogni elemento della pagina. Per esempio, per cambiare il colore del capolettera al blu, aggiungere questo attributo CSS per la classe CSS: colore: blu.