Nwlapcug.com


Stili HTML Div

Stili HTML Div


Il tag DIV definisce una divisione o una sezione di un documento HTML e utilizzato per applicare stili a un gruppo di elementi. Simile al tag < body >, elementi DIV lavorano dietro le quinte raggruppando altri tag. Utilizzato nei fogli di stile contenuto elementi DIV definiscono lo stile e la struttura di una pagina web e sono supportati in tutti i principali browser.

Stile in linea

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

Gli stili inline perdono molti dei vantaggi di fogli di stile esterni o interni, quindi deve essere usato con parsimonia. Gli attributi di stile aggiunti al tag HTML pertinenti possono contenere qualsiasi proprietà CSS, ad esempio colore, margine e font-size.

< div style = "background: blu" >< p > questo paragrafo viene visualizzato in una casella blu. </p >< / div >

< p > ma questo paragrafo non ha uno sfondo blu come si siede fuori < div > contenitore zona. </p >

Foglio di stile

Un modo più efficace per produrre pagine HTML Web utilizza un foglio di stile esterno o interno. Permette di apportare facilmente modifiche attraverso un sito ed Elimina codifica disordine dalla tua pagina.

Nell'esempio seguente viene illustrato il potere dell'elemento < div > durante la progettazione di pagine Web. Inoltre, quando incluso in un foglio di stile esterno o CSS, site-wise modifica è molto più facile.

< style type = "text/css" >

div.important () {

background-color: blu;

font-style: italic;

colore: #FFF;

}

< / stile >

< div class = "importante" >

< p > questo paragrafo viene visualizzato in una casella blu. </p >

< p > il testo sarà bianco e il corsivo. </p >

< / div >

< p > ma questa casella non viene visualizzato in una casella blu né è corsivo o bianco. </p >

Proprietà align

Tag DIV offrono un modo semplice e veloce per applicare le proprietà ai blocchi di testo, ad esempio di allineamento. Invece di applicare la proprietà "allineamento" per ogni paragrafo il div tag consente di applicare facilmente la proprietà ai blocchi dei paragrafi.

Esempio 1:

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

< allinea p = "center" > punto due del testo che è centrato anche e la proprietà align applicato. </p >

Esempio 2:

< div align = "center" >

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

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

< / div >

Elemento span

Simile all'elemento DIV elemento SPAN raggruppa elementi inline in un documento HTML. Utilizzato come segnaposto o punto di marcatura, l'elemento < span > indica l'inizio e la fine dello stile all'interno di un paragrafo. Se gli stili in linea possono essere utilizzati, sono raccomandate classi CSS interne o esterne.

< style type = "text/css" >

span.example () {

background-color: blu;

font-style: italic;

colore: #FFF;

}

< / stile >

< p > questo paragrafo viene visualizzato come testo base nero su una pagina bianca. Quando è stato introdotto l'elemento span, < span class = "esempio" > prende sugli stili impostati nel CSS di sfondo blu, bianco, testo corsivo. < / span > tutto il testo dopo l'intervallo di chiusura ritorna alla visualizzazione originale del testo nero su bianco. </p >