Giancarlo Lucioli: Corso di CSS

Corso CSS

Vorrei dedicare un po' del mio tempo alla scoperta dei CSS.
Ho cominciato leggendo e copiando gli esempi proposti in giro per il WEB

Ora il libro
"CSS"
- Guida completa - di Gianluca Troiani
- ed. APOGEO" è costantemente sulla scrivania a fianco al computer a mo' di Bibbia.

Leggi questo articolo divertente:
Il domatore di font

Ottimo materiale su regole, proprietà, valori per usare correttamente i CSS 2 si può trovare ai seguenti indirizzi:

lau.csi.it/risorse/CSS2/index.shtml
xhtml.com/en/css/reference/
css.html.it/faq/leggi/204/

Progetto finale
Lavori in corso Progetto finale Soluzione:
Immagini e veste grafica
per dare una veste grafica ad una pagina web è bene usare regole css ricorrendo alla proprietà background da attribuire ai vari elementi come div, p, h1, h2, ecc...
Esercizi: in questi esercizi sono ricapitolati: immgini come sfondo di una struttura (nel caso due colonne), img come marcatori di lista e link e tecniche per rimpiazzare testi con immagini.
In particolare: Fahrner Image Replacement con display none del testo, Leah/Landridge I. R. con l'uso di overflow hidden per il testo
ed infine Bob I. R. con l'uso della proprietà z-index. Inoltre poichè ho posizionato l'immagine in una colonna molto più larga, ho inventato una quarta tecnica JuanCarlos Image Replacement per centrare l'immagine nella colonna stessa.
Ecco un esempio in cui oltre a quanto detto sopra, sono state applicate tecniche di sostituzione per i testi dei link e tecniche di effetti roll over per i link

Soluzione:
Tecniche di impaginazione
tecniche e accorgimenti per realizzare "griglie" di pagine web (layout) in CSS, a due colonne, tre colonne, a larghezza fissa, liquida (larghezza adattabile alla dimensione della finestra del browser), o un misto di fisso e liquido.
Esercizio:seguendo i suggerimenti di queste utili letture sulla rete, realizzare una pagina con layout a tre colonne, di cui la centrale liquida e le due laterali fisse, con una intestazione e un piede di pagina.

Soluzione:ecco [ una prima proposta] con l'utilizzo della proprietà 'position', questa è la medesima versione
ma con l'uso di propretà 'float' [ un'altra proposta ].
Ecco una [ nuova soluzione ] senza l'uso di margini con valori negativi.
Tre colonne flottanti [ completamente elastiche ].
Questa � l'ultima proposta di soluzione [ LayoutGala13ita_mia ]
Box Model: posizionamento
Il flusso di posizionamento attraverso le proprietà display, position, float e clear ...
Data la seguente pagina html , scrivete il codice css in maniera da
presntare un aspetto come la seguente figura senza modificare o aggiungere alcun tag html.

Soluzione:usando la proprietà float [Proprietà float] e la proprietà position [Proprietà position]
[altra soluzione]
Il Box Model

Box model standard... per saperne di più...

Scrivere le regole CSS da applicare al codice HTML di questa pagina, in modo che venga mostrata come nella seguente immagine, in cui sono state indicate in rosso le misure delle varie proprietà rilevanti.

Soluzione (non è l'unica ovviamente):
[regole CSS], [pagina html del box model]
Selettori - (approfondimenti)
Rapporti di parentela: selettori di discendenza, figli, fratelli ...
[esercizio 1]; [esempio 2].

Soluzione: ecco le [regole CSS] per le rispettive domande.
Selettori - (specificità)
Specificità dei selettori CSS e stile degli elementi in base ai fogli di stile applicati
[esercizio sulla specificità]; [esempio specificità].
Tecniche di base:
testi, immagini e sfondi:
Ricreare una pagina web che abbia
[questo aspetto].

Soluzione (non è l'unica ovviamente)
[CSS es. 2], [XHTML es. 2], [esercizio 2]
Regole, proprietà, valori
dato il seguente [codice HTML],
scrivere il foglio di stile CSS che consente
di ottenere [il seguente aspetto]

Soluzione (non è l'unica ovviamente):
[codice CSS], [pagina html]