Stili HTML Div

August 29

Stili HTML Div


Il tag DIV definisce una divisione o sezione di un documento HTML e utilizzato per applicare stili ad un gruppo di elementi. Simile al tag <body>, elementi DIV lavoro dietro le quinte che raggruppa altri tag insieme. Utilizzato in fogli di stile contenuti DIV elementi definiscono lo stile e la struttura di una pagina web e sono supportati su tutti i principali browser.

Stile linea

Il tag DIV supporta diversi attributi standard, tra cui lo stile. Il tag stile specifica le informazioni di stile per un documento HTML, come il colore, la dimensione del carattere o l'allineamento.

stili inline perdono molti dei vantaggi dei fogli di stile esterni o interni, in modo da dovrebbero essere usati con parsimonia. attributi di stile aggiunti al tag HTML interessato possono contenere qualsiasi proprietà CSS, come ad esempio il colore, il margine, e font-size.

<Div style = "background: blue"> <p> Questo paragrafo viene visualizzato in una scatola blu </ p> </ div>.

<P> Ma questo paragrafo non ha uno sfondo blu in quanto si trova al di fuori del <div> zona del contenitore. </ P>

Foglio di stile

Un modo più efficace per la produzione di pagine Web HTML utilizza un foglio di stile esterno o interno. Esso consente di apportare modifiche facilmente attraverso un sito ed elimina la codifica disordine dalla vostra pagina.

L'esempio seguente mostra la potenza dell'elemento <div> durante la progettazione di pagine Web. Inoltre, quando incluso in un foglio di stile esterno o CSS, la modifica del sito-saggio è molto più facile.

<Style type = "text / css">

div.important {

background-color: blue;

font-style: italic;

colore: #FFF;

}

</ Style>

<Div class = "importante">

<P> Questo paragrafo viene visualizzato in una scatola blu. </ P>

<P> Il testo sarà bianco e corsivo. </ P>

</ Div>

<P> Ma questo dialogo non viene visualizzata in una scatola blu né è corsivo o bianco. </ P>

allineare proprietà

tag DIV offrono un modo semplice e veloce per applicare le proprietà a blocchi di testo, come l'allineamento. Invece di applicare la proprietà "align" per ogni paragrafo il tag div consente di applicare facilmente la proprietà ai blocchi dei paragrafi.

Esempio 1:

<P align = "center"> Paragrafo uno del testo che è centrato sulla pagina. </ P>

<P align = "center"> Paragrafo due del testo che è anche centrato e la proprietà align applicata. </ P>

Esempio 2:

<Div align = "center">

<P> Il paragrafo uno del testo che è centrato sulla pagina. </ P>

<P> Il paragrafo due del testo che è anche centrato, ma è scritto come un paragrafo normale, con l'uso del tag DIV per centrare tutte le informazioni tra l'apertura e chiusura tag DIV. </ P>

</ Div>

Span Element

i gruppi di elementi SPAN simile all'elemento DIV elementi inline in un documento HTML. Utilizzato come segnaposto o punto di contrassegno, l'elemento <span> indica l'inizio e la fine dello stile all'interno di un paragrafo. Anche se possono essere utilizzati gli stili inline, sono raccomandati classi CSS interni o esterni.

<Style type = "text / css">

span.example {

background-color: blue;

font-style: italic;

colore: #FFF;

}

</ Style>

<P> Questo paragrafo viene visualizzato come testo nero di base su una pagina bianca. Quando viene introdotto l'elemento arco, <span class = "example"> assume gli stili impostati nel CSS di uno sfondo blu, bianco, testo in corsivo. </ Span> Tutto il testo dopo l'intervallo di chiusura torna alla visualizzazione originale testo nero su bianco. </ p>