Sei fortunato, esiste una vecchia discussione con gli esempi già pronti...:
pagina.html:
codice:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio</title>
<link href="static.css" rel="stylesheet" type="text/css">
<link href="tizio.css" rel="stylesheet" type="text/css" title="Tizio" media="print" />
<link href="caio.css" rel="stylesheet" disabled="true" type="text/css" title="Caio" media="print" />
<link href="sempronio.css" rel="stylesheet" disabled="true" type="text/css" title="Sempronio" media="print" />
<script type="text/javascript">
function filterPrint (sStyleSheet) {
for (var oStyleSh, nIdx = 0; nIdx < document.styleSheets.length; nIdx++) {
oStyleSh = document.styleSheets[nIdx];
if (oStyleSh.title) { oStyleSh.disabled = oStyleSh.title !== sStyleSheet; }
}
print();
}
</script>
</head>
<body>
[ <span class="intLink" onclick="filterPrint('Tizio');">Stampa nello stile tizio (predefinito)</span> | <span class="intLink" onclick="filterPrint('Caio');">Stampa nello stile Caio</span> | <span class="intLink" onclick="filterPrint('Sempronio');">Stampa nello stile sempronio</span> ]</p>
<span class="classeEsempio">Testo di esempio</span>
</body>
</html>
static.css (lo stile statico che resta al di là della tua scelta):
codice:
.intLink {
text-decoration: underline;
color: #0000ff;
cursor: pointer;
}
tizio.css:
codice:
.classeEsempio {
color: inherit;
text-decoration: none;
font-style: normal;
font-size: small;
}
caio.css:
codice:
.classeEsempio {
color: red;
text-decoration: none;
font-style: italic;
}
sempronio.css:
codice:
.classeEsempio {
color: inherit;
text-decoration: underline;
font-style: normal;
}
In questo modo hai tre fogli di stile (tizio.css, caio.css, sempronio.css) che si alternano uno per volta a seconda della scelta e con cui puoi fare davvero tutto (rendere invisibili classi di elementi, renderle di colore diverso, etc. etc.). Se vuoi che il css scelto sia visibile anche a schermo oltre che in stampa, elimina media="print" (in rosso) dall'html di esempio che ho postato. 
Rispondi quotando
