Ecco un blog carino e interessante sull’uso dei CSS e delle novità introdotte dai CSS3:
flepstudio
In particolare consiglio la lettura di questi due articoli:
http://css.flepstudio.org/css-proprieta/display.html
http://css.flepstudio.org/box-model/collasso-margine-margin-colapse.html
In una pagina web che utilizza i CSS è meglio utilizzare come le misure in pixel o in em ?
A mio avviso sarebbe meglio utilizzare gli em, anche se forse sono un po’ più complicati da calcolare…
Ma per fortuna, ecco un utilissimo tool di conversione pixel -> em:
http://riddle.pl/emcalc/
A volte capita di imbattersi nel fastidiosissimo problema delle PNG trasparenti con Internet Explorer 6.
Le soluzioni che si trovano spesso in rete parlano di javascript di fix, CSS compatibili e bla bla bla.
Basterebbe unicamente salvare l’immagine PNG ad 8 bit con trasparenza indice!
In questo modo ho risolto diversi casi di questo tipo, e molto velocemente anche
Per importare un CSS all’interno di una pagina web ci sono diverse soluzioni. Le più usate sono link e import… Ma quali sono le differenze?
Su html.it c’è una spiegazione dettagliata, mentre qui riassumo la differenza più importante:
- Con il comando import si possono sovrascrivere le regole del foglio di stile…
ad esempio, dichiarando il foglio di stile in questo modo
<style type="text/css">
@import url("advanced.css");
body { font:80% Verdana,Helvetica,sans-serif; }
</style>
se all’interno di advanced.css dovesse esserci una regola per il tag body, questa viene sovrascritta dalla regola dichiarata subito dopo l’istruzione import!
- Se nella pagina sono richiamati due file css, uno tramite <link> e uno tramite @import, ha la precedenza di interpretazione quello importato con @import.
- Purtroppo l’istruzione import non è supportata dai browser datati…
In questo articolo tutti i pro e contro dei diversi tipi di layout che si possono scegliere per il proprio sito web:
a 2 o 3 colonne, a larghezza fissa o mobile, posizionamenti assoluti o relativi… eccetera eccetera!
Avete notato che quando si stampa una pagina web, il layout su carta non corrisponde mai a quello visualizzato a video?
Questo dipende dal fatto che la stampa non considera le immagini di sfondo, non vengono prese in considerazione le direttive di float e molto altro…
Ecco un articolo che spiega in dettaglio come definire un foglio di stile apposito per la stampa, utilizzando la direttiva di media=”print”.
Come fare per centrare verticalmente un testo in un DIV? Ci sono diversi modi… quelli che ho trovato più “facili” sono questi:
1) DIV con altezza dichiarata: applicare al div una line-height nello style pari alla sua altezza
ES:
#div {
height: 100px;
line-height: 100px;
}
2) DIV di cui non si conosce l’altezza:
ES:
<div style="width:300px; height: 200px;">
<div style="height: 100%; top: 50%; position:relative">prova</div>
</div>
riferimento: CSS pratici
