Il tag HTML nella formattazione degli stili non deve essere preceduto da nulla, al contrario delle classi caratterizzate dal punto e dagli id caratterizzati dal cancelleto. Con la proprietà list-style-type definisco il tipo di aggancio delle liste (ul, ol con i numeri, li) possiamo avere circle per esempio o anche square oltre a disc; se voglio diversificare le liste posso creare delle classi con una certa decorazione. Con ol type=A ,  posso definire il tipo di aggancio, in questo caso le lettere maiuscole, ma posso anche mettere i numeri romani o le i-ii-iii o i numeri normali con 1; colore, font, grandezza, tutto è variabile arbitrariamente. A questo punto vediamo la posizione dei diversi elementi in una struttura HTML, che ha un suo andamento dall’ alto verso il basso con un allineamento a sinistra. DIV sta per la creazione dei blocchi e per una divisione in porzioni. Con la nuova semantica il DIV appare superato, perché tag semantici come section indicano a volte meglio quel tipo di caratteristiche che vogliamo canalizzare. Siamo di fronte a filosofie e a scuole di pensiero sull’ utilizzo di alcuni elementi piuttosto che altri. Section deve essere usato per i contenuti del sito, che devono essere omogenei e congruenti e strutturati in maniera logica con titoli H1, pensiamo ad esempio a una serie di articoli tematici magari sul gatto siamese. DIV è l’elemento base per la creazione di blocchi su cui applicare i CSS per la modellazione dello stile. Pensiamo ad esempio alla flessibilità offerta dalla famosa istruzione float: left; i div contenitori contengono div contenuti in un gioco di scatole cinese o matrioske russe. I DIV sono contenitori che formano l’architettura della pagina, disegnano proprio le porzioni che servono per inglobare i contenuti. I tag semantici ci contraddistinguono, header parla da solo, ci dice dove siamo e dà una indicazione su quei contenuti racchiusi all’ interno del blocco header. Gli id devono dare altrettante indicazioni sui contenuti, se su quello logo scrivo un id=”box-logo” oltre ad essere facilitato sui fogli di stile avrò anche una indicazione chiara su dove mi trovo. L’alternative-text o ALT sulle immagini è utili per l’accessabilità ma anche per la seo per questioni di completezza. L’elemento NAV indica un elemento di navigazione e potremmo inscatolarlo dentro a un altro div specifico. Con id=”main” posso applicare un grande contenitore, gli elementi strutturali devono parlare tipo footer per esempio. Anche “container” è una parola molto utilizzata. Una volta che le strutture sono definite e che gli id sono stato settati, posso preoccuparmi di inserire i famosi cancelletto nel mio foglio stile esterno. Un primo elemento da considerare è l’attribuzione dell’ ampiezza del body, tipo 960 px; la proprietà float impostata a left o a right posizionano il mio elemento nella situazione desiderata. L aproprietà display gestisce il modo in cui le strutture sono visualizzate oppure non visualizzate (attributo “none”); con display su block diciamo che quel contenuto va mostrato e iniziamo per esempio a orizzontalizzare una lista , gli ul e anche gli li come elementi vanno stilizzati in maniera appropriata. Con display: inline-block dico a quell’ elemento che dovrà essere spalmato e disposto su quell’ area orizzontale specifica per l’appunto. Per distaccare i div usiamo la proprietà MARGINE con le ripartizioni di tipo margin-top e varie con bottom, right e left; posso altresì lavorare sui padding, ossia dare pià spazio agli elementi interni che non confinano con oggetto adiacenti come fa il margine. La proprietà hover su una classe dice come comportamento che al momento in cui il mouse passa sopra quella classe dovrà comparire per esempio e dovrà essere resa visibile la proprietà display settata a block. Con la proprietà box-shadow posso fare le ombreggiature su elementi di riquadro come i box da non confondere con il box model all’ interno del DOM. Gli elementi strutturali sono incapsulati nella pagina e ogni oggetto dentro le scatole è caratterizzato da un riquadro in cui schematicamente avrò un bordo, avrò un padding e un margin rispetto all’ elemento adiacente. Il settaggio dei valori avviene in senso orario dalle ore 12 per cui i 4 dati che spesso si vedono separate da una virgola partono dal top si estendono a right , bottom, left e a giro completo di nuovo top; un valore margin:50; fa riferimento a tutti i lati, quindi per settare un margine specifico dovrò distinguere le proprietà margin-top etc oppure bottom o destra e sinistra. L’importante è focalizzare l’attenzione sulla enorme flessibilità consentita dai CSS e sulla facilità di gestione consentita per posizionare tutti gli elementi. E’ bene usare molto anche il tasto destro ispeziona su CHROME in modo da avere dei riferimenti immediati sulle impostazioni dei fogli stile ed è anche un bene sapere che le proprietà citate precedentemente possono assumere anche valori negativi, consentendo delle sovrapposizioni. La proprietà position sfrutta invece le coordinate zero, zero presenti sul margine sinistro in alto, ossia la posizione start di default. La position può sfruttare il valore relative e in questo caso devo trasformare la staticità magari impostando delle proprietà di movimento left, bottom , right e left ; il margine crea spazi tra gli elementi ma non effettua traslazioni, spesso si fa confusione su queste situazioni. Con la proprietà z-index posso stabile l’impilamento degli elementi. La position absolute fa sorgere la domanda: da dove sono partiti i pixel che ho dato per esempio su un margin-top? Con absolute lego l’elemento al body e quindi l’indicazione dei pixel fa riferimento al body e non agli elementi che traslavano relativamente tra loro con la proprietà position impostata su relative; le parole chiave parent, child fanno riferimento proprio al DOM e alla gerarchia degli elementi come evidenziato dalla position impostata su coordinate assolute che hanno un vincolo rispetto al genitore; i movimenti del child sono influenzati dal parent e i pixel fanno riferimento alla gerarchia degli elementi del DOM. Se cambio le coordinate del parent ne consegue che il child si sposterà di conseguenza a parità di valori. Con la position settata a FIXED gli elementi non scrollano nella pagina.

Annunci