From the category archives:

CSS Proprietà

Altro la proprietà css text che gestisce l’aspetto visuale del testo stesso e delle parole, possiamo anche specificare lo stile proprio dei caratteri con la proprietà css ‘font’ come la sua famiglia specifica e/o generica (font-family), la sua misura assoluta o relativa (font-size), il suo stile italico o no (font-style), la sua ‘pesantezza’ tipo il grassetto (font-weight) e le sue varianti (font-variant).

1. Proprietà css ‘font’

La proprietà css font permette di raggruppare tutte le proprietà del testo in una unica dichiarazione nel seguente ordine, separate da un spazio o da una virgola tra le differente valore per la famiglia del font:

font-style font-variant font-weight font-size font-family

Esempio di regola css per il css font:

Sono un paragrafo con font: italic bold 20px georgia, serif;

Continua a leggere >>

{ 3 comments }

3 commenti

Rimani aggiornato con il RSS Feed

Contrariamente a quello che si pensa spesso, la proprietà css vertical-align non allinea verticalmente un elemento di riga dentro un elemento di blocco. Per esempio: un immagine non sarà centrata verticalmente dentro il suo div contenitore usando il valore middle.
Invece la proprietà css vertical-align è usata per allineare verticalmente un elemento dentro a celle di tabelle o elementi di riga (inline) in rapporto ad altri elementi inline.

Di seguito, userò la proprietà vertical-align e suoi differenti valori per posizionare un’immagine in rapporto a un testo (entrambi elementi inline) contenuti in un div contenitore.

Continua a leggere >>

{ 11 comments }

11 commenti

Rimani aggiornato con il RSS Feed

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>;}

Continua a leggere >>

{ 3 comments }

3 commenti

Rimani aggiornato con il RSS Feed

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

Continua a leggere >>

{ 5 comments }

5 commenti

Rimani aggiornato con il RSS Feed

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.
Continua a leggere >>

{ 4 comments }

4 commenti

Rimani aggiornato con il RSS Feed

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.

Le celle a sinistra della tabella di compatibilità hanno il valore cursor indicato. Passi sopra con il mouse per vedere l’effetto.
Guarda anche le specifiche del W3C e le referenze della Microsoft (in inglese - traduzione italiana non disponibile).

Continua a leggere >>

{ 0 comments }

0 commento

Rimani aggiornato con il RSS Feed

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

Esempio:

z-index preview

Continua a leggere >>

{ 0 comments }

0 commento

Rimani aggiornato con il RSS Feed

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.
Continua a leggere >>

{ 11 comments }

11 commenti

Rimani aggiornato con il RSS Feed

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.
Continua a leggere >>

{ 22 comments }

22 commenti

Rimani aggiornato con il RSS Feed

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.

Guarda anche le specifiche del W3C per la proprietà display.

La seguente tabella riporta la compatibilità dei vari browser con le dichiarazione ‘display’.
Continua a leggere >>

{ 14 comments }

14 commenti

Rimani aggiornato con il RSS Feed

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).

Continua a leggere >>

{ 30 comments }

30 commenti

Rimani aggiornato con il RSS Feed

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).

Per facilitare la lettura di questo articolo, ho aggiunto l’index dei metodi di selezione classificati come selettori css, class e id, pseudo-classi e pseudo-elementi:

Selettori CSS:

  • Selettore * : seleziona ogni singolo elemento della pagina
  • Selettore di tipo : seleziona direttamente un elemento html
  • Selettore di discendenti : seleziona un elemento discendente di un altro elemento
  • Selettore > : seleziona i figli diritti e di primo livello d’un elemento
  • Selettore + : seleziona un elemento direttamente adiacente ad un altro
  • Selettore [atr] : seleziona un elemento con un certo attributo o un attributo con un certo valore

Continua a leggere >>

{ 5 comments }

5 commenti

Rimani aggiornato con il RSS Feed