Appunti sui CSS

Dopo aver creato i vari file con stili diversi, si importano. Ricorda nell'importazione con LINK l'attributo media che puo' essere impostato per esempio per far si che un foglio di stile venga usato nel momento della stampa, secondo questa tabella:

all. Il CSS si applica a tutti i dispositivi di visualizzazione.
screen. Valore usato per la resa sui normali browser web.
print. Il CSS viene applicato in fase di stampa del documento.
projection. Usato per presentazioni e proiezioni a tutto schermo.
aural. Da usare per dispositivi come browser a sintesi vocale.
braille. Il CSS viene usato per supporti basati sull'uso del braille.
embossed. Per stampanti braille.
handheld. Palmari e simili.
tty. Dispositivi a carattere fisso.
tv. Web-tv.

importa il foglio predefinito e quello alternativo.
Per passare dall'uno all'altro da codice (con un link) bisogna usare javascript.
Questo va nel HEAD per importare lo script

e questo è lo scriptino

function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 &&
       a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}

function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 &&
       a.getAttribute("title") && !a.disabled)
       	return a.getAttribute("title");
  }
  return null;
}

Nella definizione dei valori, nelle regole, i valori possono essere raggruppati separandoli con la virgola. Inoltre tutti gli elementi possiedono un attributo display che se posto a none li nasconde (utile per nascondere le immagini). Per esempio

h3,h5 {
  display:none;
}

nasconde gli header 3 e 5

Selezione di paragrafi e company:

Se metto solamente il valore lo cambio a tutto il documento

h1 {
  color:red;
}

Posso selezionare anche tutti gli oggetti1 contenuti in oggetti2 (a qualsiasi livello) così

oggetto2 oggetto1 {
	color:red;
}

O ancora scegliere tutti gli oggetti1 che siano figli diretti di oggetti2:

oggetto2 + oggetto1 {
	color:red;
}

Posso altrimenti selezionare gli oggetti che possiedono un determinato attributo

elemento [ attributo] { color:red; }

o il cui attributo è pari a un determinato valore:

elemento [ attributo = "valore" ] {color:red; }

o che solamente contenga un determinato valore:

elemento [ attributo t= "valore" ] {color:red; }

o inizi con esso

elemento [ attributo |= "valore" ] {color:red; }

Posso anche selezionare gli elementi per id o per class, che sono due nomi assegnati agli elementi, in modo che id identifica univocamente un oggetto (non posso creare due oggetti con lo stesso id) mentre possono esserci piu' oggetti con lo stesso nome di classe. Per id

#nome

per classe

.nome

Una magia importante è che con pseudo-elementi si puo' inserire con i css del codice che nell'HTML non è presente: gli pseudo elementi seguono sempre un elemento e i due punti:

a:link

link è uno pseudo elemento che indica che il link (a) non deve essere visitato. Gli pseudo elementi importanti per la magia sono :before e :after che piazzano il codice presente nella variabile content, rispettivamente prima e dopo l'elemento... Per esempio

<div id="citazione">Cogito ergo sum</div>
#citazione:before {
	content: open-quote
}

#citazione:after {
	content: close-quote	
}

Appunti sull'uso dei fogli di stile CSS

Creare vari fogli di stile:

Selezione di paragrafi e company: