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 >>
css caratteri,
css font,
css testo,
font-family,
font-size,
font-weight,
proprietà css
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 >>
css,
css allinea,
css vertical-align,
proprietà css,
vertical-align
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 >>
css,
css list-type,
css list-type-image,
css list-type-position,
css list-type-style,
css lista,
css liste,
css marcatori
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 >>
css line-height,
css nowrap,
css spazio,
css testo,
css text,
css text-align,
css text-decoration,
css text-indent,
css underline,
css white-space,
css word-spacing,
testo colore
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 >>
css,
css clear,
css clear both,
css clear left,
css clear right,
css float,
css float left,
css float right
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 >>
css,
css cursor,
CSS Proprietà,
proprietà cursor
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 >>
css absolute,
css bottom,
css fixed,
css left,
css position,
CSS Proprietà,
css relative,
css right,
css static,
css top
