La proprietà css list-style permette di specificare lo stile dei marcatori di una lista, cambiando il marcatore di default con un immagine (list-style-image), scegliendo la sua posizione (list-style-position) o il tipo di marcatura usando nomi specifici (list-style-type).

Anche se lo stile delle liste viene applicato a l’elemento html <ul> (o <ol>), la proprietà list-style riguardo i suoi sub-elementi <li> e più precisamente i suoi marcatori laterali.

Regola css per il list-style:

ul {list-style: <valore list-style-type> <valore list-style-position> <valore list-type-image>;}

Esempi:

ul {list-style: square inside;}
ul {list-style: outside url(marcatore.gif);}
ul {list-style: none;}

Dopo le 3 proprietà list-style-type, list-type-position e list-style-image con loro relativi valori, vedremo altro tipo di proprietà css che possono essere applicate alle liste con un esempio di una lista innestata in un altra lista stilizzate con i css.

Con le proprietà del testo, possiamo specificare lo stile css del testo d’un elemento:

• color: il colore del testo
• text-align: l’allineamento del testo a sinistra, destra, centrato o giustificato
• text-decoration: la ‘decorazione’ del testo come sottolineato, sopralineato, sbarrato o anche lampeggiante
• text-transform: la trasformazione della prima lettera di ogni parola o di tutto il testo in maiuscolo o in minuscolo
• text-indent: l’indentazione della prima riga del testo
• letter-spacing: lo spazio tra ogni lettere
• word-spacing: lo spazio tra ogni parola
• line-height: lo spazio tra ogni linee
• white-space: l’interpretazione dei spazi bianchi nel html
• direction: la direzione del testo da sinistra a destra o destra a sinistra

La proprietà css float con i suoi valori left e right permette di spostare elementi verso la sinistra o la destra utile per esempio nella creazione di una struttura d’una pagina, di menu orizzontale, aggiungere testo attorno immagine… Mentre la proprietà css clear con i suoi valori left, right, both permette di evitare che un elemento floatato si sposta accanto un altro elemento di blocco.

Di seguito, le caratteristiche di entrambi proprietà float e clear con esempi concreti del loro uso.

Definizione e tabella di compatibilità per lo stile dei cursor.
Questo articolo e una traduzione della versione originale in inglese intitolata ‘Cursor styles’ e pubblicata su questo sito con l’autorizzazione dell’autore.
Cambiando il valore della proprietà css cursor, possiamo impostare differenti stili di cursor a vari elementi HTML. Anche se in teoria è molto utile, si può confondere facilmente l’utente impostando uno stile di cursor inappropriato. Siete attenti; in generale il browser di default funziona bene ed è spesso quello che l’utente si aspetta.

Mentre è possibile posizionare gli elementi orizzontalmente sul asso x e verticalmente sul asso y con l’uso di proprietà specifiche come la proprietà css position, la proprietà css z-index permette di posizionare gli elementi su un asso z cambiando la profondità degli elementi e il loro ordine naturale di sovrapposizione.

Esempio:

La proprietà CSS overflow indica al browser che fare con il contenuto che supera il suo blocco contenitore. Il quale vuole dire che viene applicato ad un elemento di misura fissa.

Se i valori per width (larghezza) e/o height (altezza) non vengono
specificati, la proprietà overflow sarà inutile ed il blocco contenitore si ridimensionerà in base al suo contenuto.

La proprietà overflow accetta 4 valori: visible (visibile), hidden (nascosto), scroll (scorrevole) ed auto.

La proprietà css position con i suoi valori static, absolute, relative e fixed permette di posizionare un elemento in relazione ad un altro elemento o allo corpo stesso della pagina.

Con l’uso di semplici esempi online, vederemo la proprietà CSS position, l’applicazione di questi 4 differenti valori con l’uso delle declarazione top (alto), bottom (basso), left (sinistra) e right (destra) per posizionare più precisamente l’elemento con unità di misure o percentuale.

Vedremo in più dettagli la proprietà css display che permette di definire le modalità di visualizzazione d’un certo elemento HTML.

Questo articolo è una traduzione della versione originale in inglese intitolata ‘The display declaration’ e pubblicato su questo sito con l’autorizzazione del autore.

La proprietà css background permette di personalizzare lo sfondo d’un elemento con la scelta di un colore di sfondo (background-color) o di un’immagine (background-image).

Questa immagine potrà allora essere duplicata o no (background-repeat), posizionata (background-position) e resa scrollabile o no con il corpo della pagina (background-attachment).

Un aspetto importante nel uso dei css è di potere selezionare elementi a quali applicare lo stile stesso.

Tale selezione può essere fatta basandosi sulla la loro posizione nella struttura della pagina (selettori css), su un nome specifico dato a l’elemento(classe e id) o su informazione al di fuori della struttura della pagina o di un nome.(pseudo-classi e pseudo-elementi).