Guida Div HTML/CSS

[SawCMS]

DIV ​

Questa guida contiene un progetto di esempio se si avessero difficolta`. Scorrere giu` per ottenere il progetto.
Salve ragazzi, rieccomi per un'altra guida (sempre di programmazione ) dove oggi voglio spiegarvi come iniziare a usare i DIV.
Innanzitutto, i div sono appunto delle divisioni (ah ah che battutaccia :\ ) della pagina, usati non solo per comodita` e scorrevolezza nella scrittura nel codice, ma anche per altre funzioni. Infatti i div sono una specie di contenitori e per iniziare nel nostro file html scriviamo:

Perfavore, Entra oppure Registrati per vedere i codici!

Dove abbiamo container, che e` la classe possiamo assegnare un altro nome, basta che dopo ce ne ricordiamo poiche` nel file css lo "selezioneremo" tramite codice e gli attribuiremo degli attributi. (il perche` sara` scritto sotto)
Adesso, creiamo un file css che sia posizionato nella stessa directory del file html (soltanto per comodita`) e inseriamo il seguente codice:

Perfavore, Entra oppure Registrati per vedere i codici!

Attenzione! Se avete assegnato al div un altro nome al di fuori di container, nel codice CSS mettete il nome assegnato!
Vediamo insieme il codice css: abbiamo assegnato al div "container" un colore di sfondo (nel nostro caso #8A4B08 ) che si puo` trovare qui:

Perfavore, Entra oppure Registrati per vedere i Link!

e anche una posizione del testo che verra digitato`: centrato.
Ma al div possiamo assegnare anche un altro sfondo, uno da immagine. :blabla:

Perfavore, Entra oppure Registrati per vedere i codici!

Oltre a queste funzioni di base, possiamo stabilire la dimensione del div.

Perfavore, Entra oppure Registrati per vedere i codici!

Ecco un'ultima funzione. Se abbiamo bisogno di un div con gli angoli arrotondati nel foglio css immettiamo:

Perfavore, Entra oppure Registrati per vedere i codici!

Per apportare lo stile css nel foglio html usiamo:

Perfavore, Entra oppure Registrati per vedere i codici!

Bene, salviamo il tutto e uploaddiamo sul nostro server!
Tutte le formazioni saranno aggiornate pian piano!
Faro` anche una guida di base per questo.
Alla prossima!
Progetto di esempio:

Perfavore, Entra oppure Registrati per vedere i Link!

 

[Donpeo117]

Ottima guida, complimenti. Sarebbe interessante parlare anche degli ID oltre alle classi.

 

[oscarandrea]

bravo la guida è ben fatta