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.