Lorem Ipsum

La proprietà CSS list-style-type permette di modificare il punto o il numero elenco di una lista <ul> o <ol>.

Il valore più usato è none, che permette di disattivare del tutto il punto elenco in modo da usare poi una immagine come punto elenco. I valori possibili sono:

none: nessun punto elenco

circle: un cerchio vuoto

disc: un cerchio pieno

square: un quadrato

decimal: 1, 2, 3, …

decimal-leading-zero: 01, 02, 03, …

lower-roman: i, ii, iii, …

upper-roman: I, II, III, …

lower-greek: α, β, γ, …

lower-alpha: a, b, c, …

upper-alpha: A, B, C, …

armenian: Ա Բ, Գ, …

georgian: ა, ბ, გ, …

Ne trovate una dimostrazione qui.

La proprietà CSS border-style permette di impostare lo stile dei bordi di un elemento; si può anche impostare separatamente per ciascun lato usando

border-top-style

border-right-style

border-bottom-style

border-left-style

rispettivamente per il bordo superiore, destro, inferiore e sinistro. I valori possibili sono:

none: nessun bordo

solid: bordo continuo

dotted: puntinato (per i bordi più spessi di 1px, in Firefox viene visualizzato come dei “trattini” quadrati, mentre in Explorer vengono resi dei cerchi)

dashed: tratteggiato

double: doppio, con due righe continue affiancate (ha senso solo per i bordi più spessi di 6px)

groove: inciso, reso con due colori e con un’ombra sul lato superiore e sinistro (in Firefox i due colori sono due sfumature del colore impostato, mentre in Explorer viene usato il colore impostato insieme al nero; dato che ciascun lato ha due colori, ha senso solo per bordi più spessi di 6px)

ridge: in rilievo, reso con due colori come per groove ma con i lati invertiti

inset: inciso, reso con due colori, di cui uno viene usato per i lati superiore e sinistro, l’altro per quelli inferiore e destro (in Firefox i due colori sono due sfumature del colore impostato, mentre in Explorer viene usato il colore impostato insieme al nero)

outset: in rilievo, reso con due colori come per inset ma con i lati invertiti

Qui trovate una dimostrazione dei vari stili del bordo, da controllare con i diversi browser

Spesso ci serve di creare un box con gli angoli stondati; se il box è di larghezza fissa è facile farlo in CSS usando solo due div opportunamente posizionati:

<div id="top">
<div id="bottom">
testo testo testo
</div>
</div>

L’idea è quella di inserire come sfondo del div top l’immagine che formerà il bordo superiore del box, e come sfondo del div bottom l’immagine che formerà il bordo inferiore. Il div top quindi avrà un padding-top pari all’altezza dell’immagine in alto, mentre dovrà avere padding-bottom pari a zero.

div#top {
width: 232px;
background-image: url(right-top.jpg);
background-repeat: no-repeat;
background-position: top left;
margin-left: 0px;
margin-bottom: 10px;
}

div#bottom {
width: 232px;
background-image: url(bottom.jpg);
background-repeat: no-repeat;
background-position: bottom left;
background-color: #7c2613;
padding: 0px 0px 0px 0px;
position: relative;
top: 14px;
text-align: center;
}

Qui trovate una dimostrazione

La proprietà CSS white-space permette di impostare, in qualsiasi elemento, come vengono gestiti gli spazi bianchi inseriti nel codice. Di default, se nel codice vengono inseriti più spazi bianchi, questi vengono visualizzati come uno spazio solo, ed eventuali a capo non vengono considerati. Possiamo gestire questa cosa in HTML usando i tag <pre> o <code>. La stessa cosa può essere gestita con la proprietà CSS white-space, che ha i seguenti valori possibili:

normal: il default. Più spazi nel codice vengono considerati uno solo. Se il testo arriva alla fine del suo contenitore, viene mandato a capo. Eventuali spazi iniziali non vengono considerati. Eventuali a capo nel codice non vengono considerati.

pre: Viene tutto reso come formattato nel codice: più spazi nel codice vengono resi singolarmente. Se il testo arriva alla fine del suo contenitore non viene mandato a capo. Eventuali spazi iniziali vengono considerati. Eventuali a capo nel codice vengono considerati.

nowrap: come normal, ma non manda a capo il testo alla fine del contenitore (non fa il wrap).

pre-wrap e pre-line: in Firefox resi come normal.

Trovate qui una dimostrazione dei vari valori.

Capita spesso che il CSS (e l’HTML!) che scriviamo non faccia quello che vogliamo. Cosa fare per risolvere la cosa? Beh, “fare delle prove” in genere funziona, ma qualche volta ci fa perdere un sacco di tempo. Ecco quindi un metodo “comprovato” per risparmiare tempo e soprattutto incavolature

1. Cosa voglio fare? Chiariamoci. Spesso pensare razionalmente a cosa vogliamo fare ci fa “scattare la scintilla”
2. Quali sono gli elementi HTML che sono coinvolti?
   1. Identificarli attraverso la Web Developer Toolbar
3. Gli elementi HTML coinvolti sono scritti correttamente nel codice HTML?
   1. Quali sono i selettori CSS che devo usare per richiamarli?
   2. C’è qualche errore di scrittura?
   3. Validare il codice HTML
4. La proprietà CSS che ho impostato non funziona come credevo. Cosa credevo? O meglio, cosa mi aspetto che faccia la proprietà CSS che ho impostato?
   1. Controllare sullo standard se ho ragione
   2. Validare il CSS
5. Se ancora non funziona come vorrei, forse è coinvolta qualche altra proprietà
   1. Controllare con la developer toolbar quali proprietà CSS ho
   2. Controllare se ci sono altri selettori che mi influiscono
   3. Controllare se l’elemento eredita qualche proprietà che non avevo considerato
   4. Accentuare l’effetto della proprietà per capire se viene visualizzata (es. aumentare a dismisura i bordi)
   5. Controllare se gli elementi vicini (genitori, figli, vicini) hanno qualche proprietà che può influire
   6. Modificare altre proprietà che possano avere una qualche influenza, e per ognuna di queste modifiche ricominciare da 1

Per fare un pulsante “in rilievo” si può usare questo codice CSS:

a {
display: block;
width: 200px;
color: #ffcc66;
padding: 5px;
text-align: center;
background-color: #18326d;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom: 3px solid #000;
border-right: 3px solid #000;
border-left: 3px solid #fff;
border-top: 3px solid #fff;
}

Esempio:

Bottone

Purtroppo lo “stondamento” del bordo funziona solo su Firefox, ma l’effetto rilievo vale lo stesso

La cosa più difficile per chi deve fare una pagina Web è farla in modo che si veda correttamente su Explorer: i bachi sono tanti, e spesso l’unico modo di evitarne uno è sfruttarne un altro :!

Ad esempio, si sa che su Explorer 6 o 7 non è implementata la specifica CSS2 min-height. Per risolvere la cosa, però, si può sfruttare un altro bug:

min-height: 200px; -> riga per Firefox

_height: 200px; -> riga per Explorer.

Mah…

Per fare il preload delle immagini rollover, evitando quello “stacco” quando si caricano i rollover per la prima volta, si possono usare i CSS:

a { background-image: url('immaginehover.gif'); }

a:link, a:visited { background-image: url('immagine.gif'); }

a:hover { background-image: url('immaginehover.gif'); }

In questo modo, per tutti i tipi di link viene caricata l’immagine “immaginehover.gif”, ma per i link normali (e per quelli visitati) viene mostrata “immagine.gif” (quella senza l’hover). A questo punto il browser avrà caricato tutte le immagini dell’hover la prima volta che avrete aperto la pagina, e quindi quando andrete sul link con il mouse non dovrà caricare alcuna immagine.

Anche per quanto riguarda le immagini è bene utilizzare codice CSS per modificarne l’aspetto. In particolare, ecco le direttive CSS che corrispondono ai vari attributi, deprecati e ancora validi, del tag <img />:

width e height

Per indicare l’altezza e la larghezza dell’immagine, che in HTML venivano indicate con <img height="50" width="50" />, si usano le istruzioni CSS width: 50px; e height: 50px;

allineamento verticale (valign)

Per l’allineamento verticale si usa la proprietà vertical-align, che indica l’allineamento dell’immagine relativamente alla linea che essa occupa. I valori possibili per questa proprietà sono: top, text-top, bottom, text-bottom, middle, sub, super, baseline (il default), oltre ad un valore numerico o ad una percentuale.
In particolare vediamo l’allineamento della seconda immagine (quella piccola) rispetto alla prima, che ha allineamento verticale “middle”:

vertical-align: top:

vertical-align: text-top:

vertical-align: bottom:

vertical-align: text-bottom:

vertical-align: middle:

vertical-align: sub:

vertical-align: super:

vertical-align: baseline:

allineamento orizzontale (align)

Di default le immagini in HTML sono elementi inline, cioè fanno parte del normale flusso del testo. Ecco come si replicano con i CSS i valori dell’attributo deprecato align usati per l’allineamento orizzontale:

align=left diventa float: left;

align=right diventa float: right;

spazio orizzontale e verticale

Gli attributi vspace e hspace venivano usati per lasciare dello spazio tra l’immagine e il testo che la circondava. In CSS lo stesso effetto può essere creato usando un margine per l’immagine; cosa che non era possibile con hspace e vspace, in questo modo si possono inserire anche dei margini asimmetrici (es. a destra ma non a sinistra)

border

I bordi delle immagini compaiono inaspettatamente quando queste vengono usate come link. Per evitare di visualizzarli, invece di usare l’attributo HTML border, si può usare la proprietà CSS border, impostandola a 0 (border: 0;)

Per stilare i link va tenuto conto che questi possono essere in vari stati:

• link “normale” (non ancora visitato)
• link attivo (nel momento del click)
• link visitato
• link su cui si trova il mouse

Per indicarli si usano i selettori:

a:link
a:active
a:visited
a:hover

A ciascuno di questi selettori, e ovviamente al selettore globale a, possono essere applicati degli stili CSS. In particolare, normalmente si modificherà il colore del testo, la sua sottolineatura e il bordo in caso di immagini. Ad esempio:

a {
   color: green;
   text-decoration: none;
}

a img {
   border: 0px;
}

Se si vuole avere un effetto rollover, si possono impostare stili diversi per il selettore :hover, ad esempio:

a {
  color: green;
}a:hover {
   color: red;
}

In questo modo, passando sopra al testo del link, il suo colore cambierà da verde a rosso.