CSS: pseudo-classi e pseudo-elementi
- Gennaio 31, 2013
- by
- Donatantonio
Una pseudo-classe non definisce un elemento ma un particolare stato di quest’ultimo.
In buona sostanza imposta uno stile per un elemento al verificarsi di certe condizioni.
A livello sintattico, una pseudo-classe non può essere mai dichiarata da sola, bensì deve appoggiarsi ad un elemento. La sintassi è la seguente:
elemento:pseudo_classe { … }
Il segno di due punti...
CSS: selettori speciali
- Gennaio 31, 2013
- by
- Donatantonio
Dall’HTML 4 sono stati introdotti due importanti attributi applicabili a qualsivoglia elemento html. Gli attributi sono: class e id.
ID assume un valore arbitrario, scelto dallo sviluppatore, purché esso sia univoco in tutto il documento. In altre parole l’id è un valore, alfanumerico, che permette di identificare un elemento all’interno del...
CSS: i selettori (parte II)
- Gennaio 31, 2013
- by
- Donatantonio
[… se non hai letto ancora la prima parte …]
Raggruppamento di selettoriÈ possibile nei CSS raggruppare diversi elementi al fine di semplificare il codice. Gli elementi raggruppati vanno separati da una virgola.
Il raggruppamento è un’operazione molto conveniente. Pensiamo a questo scenario:
h1 { color : red; } h2 { color : red; } h3 { color : red;...CSS: i selettori (parte I)
- Gennaio 31, 2013
- by
- Donatantonio
Un concetto importante da tenere in considerazione prima di analizzare i vari tipi di selettori css è l’ereditarietà delle regole di stile.
Se difatti si applica uno stile ad un elemento questo sarà ereditato anche dagli elementi contenuti al suo interno, a condizione che l’elemento interno non abbia anch’esso una dichiarazione di stile.
Definire ad esempio...
CSS: sintassi di una regola CSS
- Gennaio 31, 2013
- by
- Donatantonio
Scrivere una regola CSS vuol dire applicare un particolare stile grafico ad un elemento che compone la pagina html.
Una regola si può comporre di una o più dichiarazioni, dove ciascuna dichiarazione influisce su una specifica proprietà dell’elemento.
Una regola è composta da:
un selettore; il blocco delle dichiarazioni.Il selettore serve a definire la parte del documento a...
CSS: introduzione ai fogli di stile
- Gennaio 31, 2013
- by
- Donatantonio
Dietro il semplice acronimo CSS (Cascading Style Sheets – Fogli di stile a cascata) si nasconde uno dei fondamentali linguaggi standard del W3C.
La sua storia cammina su binari paralleli rispetto a quelli di HTML, di cui vuole essere l’ideale complemento. Da sempre infatti, nelle intenzioni degli uomini del Consortium, HTML, il CSS dovrebbe essere...
Html: bordi, margini e spaziatura
- Gennaio 29, 2013
- by
- Donatantonio
Esistono, come abbiamo già in parte visto, numerose proprietà legate agli elementi html. Alcune sono ad esempio necessarie per creare una spaziatura tra gli elementi o il loro contenuto (MARGIN e PADDING).
Scrivere:
<div style=‘margin:5px; padding:3px’>… Contenuto del blocco … </div>
ci permette di visualizzare un div che è distanziato di 5px su ogni lato dagli...
Html: dimensione degli elementi
- Gennaio 29, 2013
- by
- Donatantonio
Grazie alla proprietà width (larghezza), è possibile specificare in pixel o in percentuale la larghezza che un elemento dovrà occupare all’interno della finestra del browser.
La sintassi è molto semplice:
<div style=‘width:200px’>…Contenuto…</div>
Questa proprietà è molto utile quando si desidera realizzare menu, finestre o elementi che richiedano dimensioni ben precise.
Vediamo un esempio di codice html:
</pre> <div...Html: i colori e gli sfondi
- Gennaio 29, 2013
- by
- Donatantonio
Tutti gli esempi proposti nelle lezioni precedenti, per esigenze puramente didattiche, hanno tenuto poco conto dell’aspetto grafico di una pagina html. Nonostante ciò è impensabile realizzare ipertesti o siti web che non utilizzino colori, immagini o particolari regole di formattazione.
Questa lezione introdurrà le regole di stile che saranno approfondite nelle lezioni...
