Vai al menù, saltando i contenuti (access key "m")
Siti web
Il box model
I tipi di scatole. La loro caratteristica si cambia con l'attributo display che può valere:
- block
- inline
- none
- fixed: rispetto alla finestra del browser. Posizionamento con top, .... Non influenza la grandezza del contenitore.
- absolute: rispetto al primo padre posizionato con fixed, absolute o relative. Posizionamento con top, .... Non influenza la grandezza del contenitore.
- relative: rispetto alla sua posizione statica. Posizionamento con top, .... Se lo si specifica senza i parametri equivale a static, tranne per il fatto che l'elemento risulta posizionato (vedi absolute).
- static: Posizionamento normale. Di default.
- float: parametro assegnabile a elementi static e relative. Il blocco esce dal flusso verticale. Può valere right o left. Se non si specifica la larghezza (width) occupa tutto lo spazio orizzontale a disposizione.
- z-index: numero positivo o negativo. Ordina un diverso impilamento degli elementi che si sovrappongono.
- clear: evita che un blocco abbia intorno a sé dei blocchi float. Valori right, left e both.
- visibility
- overflow
La normalizzazione delle regole CSS di default
Diversi browser usano default diversi per le proprietà dei CSS. Per far sì che un sito appaia il più possibile identico indipendentemente dal browser scelto, vanno sovrascritti tutti i valori di default assegnati dai browser. Per fare questo esistono diversi file di "Reset dei CSS" o di "normalizzazione dei CSS".
Il progetto che preferisco è normalize.css.
Il layout con i CSS
Esistono molti modi di organizzare i contenuti di un sito. Quello più moderno è chiamato a griglia fluida ed elastica. Griglia fluida significa semplicemente che il sito deve potersi adattare a qualsiasi schermo su cui venga visualizzato. Molti siti sono a larghezza fissa (elastica o meno non fa differenza). Questo significa che se li visualizzo su schermi o finestre troppo piccole, dovrò usare le barre di scorrimento per poter vedere tutto il sito. Molto scomodo indubbiamente, senza contare l'impatto visivo negativo.
Il termine elastico si riferisce invece al fatto che ridimensionando i caratteri con gli appositi comandi del browser, il sito scali nel suo insieme senza deformarsi. Se usassi una larghezza del sito non elastica per esempio, durante il ridimensionamento la colonna principale del sito rimarrebbe identica mentre si rimpicciolirebbe o ingrandirebbe solo il testo. Attualmente i browser moderni non ridimensionano più solo la dimensione del carattere ma l'intero sito, quindi l'effetto elastico lo fa il browser direttamente. È buona norma però continuare a fare siti con layout elastico.
Menù a destra per usabilità e per farlo comparire alla fine della pagina quando
non si usano i CSS.
Posizionamento assoluto per una maggior precisione e indicizzazione nei motori di ricerca.
Rounded corner è una opzione della futura specifica CSS3 abilitata solo su Mozilla Firefox
e Opera. Se visualizzerete questo sito con Internet Explorer vedere i vari blocchi del
sito con gli angoli diritti.
Studiare bene il box model, i selettori, la precedenza delle regole e il collassamento dei margini nel caso delle tabelle (border-collapse) e nel caso generale (per esempio fra più paragraph consecutivi).
Una griglia fluida elastica è semplice da realizzare. Il div principale è bene che abbia una larghezza (width o max-width) specificata in em. Ora non resta che specificare tutto il resto del sito con dimensioni percentuali. Per esempio la width dell'header potrebbe essere semplicemente 100% perché vogliamo che occupi tutta la larghezza del sito. Il div dei contenuti e quello del menù potrebbero occupare rispettivamente 70% e 30% del div padre e così via.
Ovviamente se lo schermo si fa troppo piccolo non è detto che ridimensionare la pagina semplicemente scalandola sia una buona idea. Potrebbe, sotto una certa dimensione, risultare illegibile. Per ovviare a questo problema si deve cambiare il layout del proprio sito per adattarsi allo dimensione. Per fare questo bisogna cambiare le regole CSS a seconda della dimensione e/o della risoluzione e/o del supporto e/o che vengono usati per vedere il sito. Questo si fa con il costrutto messo a disposizione dai CSS3, chiamato media-query.