h1 { color: green }Marco Andreini
La pagina web è utile per trasferire le informazioni. Quest’ultima ha due aspetti fondamentali:
forniti con linguaggi di marcatura come HTML
determinati dall’interpretazione browser
Ogni browser ha un suo modo predefinito di presentare il contenuto
a volte la presentazione è senbilmente diversa in funzione del browser
Ci sono comportamenti grafici predefiniti per gli elementi HTML
si possono comunque personalizzare i vari aspetti della presentazione con l’uso degli stili
definiscono il modo con cui il browser presenta il contenuto
la presentazione può riguardare più media (video, stampa, presentazione, audio, …)
non uniforma la presentazione, fornisce delle indicazioni
sono documenti che comprendono un insieme di regole di presentazione
sono istruzioni che permettono di indicare l’aspetto stilistico di uno o più elementi
h1 { color: green }Le regole utilizzano un linguaggio semplice ed intuitivo attraverso il quale è abbastanza facile capirne la semantica, il linguaggio naturale di riferimento è naturalmente l’inglese.
La regola dell’esempio sopra indica che il colore (color) del testo
degli elementi di tipo h1 viene impostato a verde (green).
|
|
selettore | dichiarazione |
la parte prima delle parentesi graffe - specifica gli elementi assoggettati a questa regola ed è il collegamento tra il documento HTML e lo stile
la parte dentro le graffe - è la parte della regola che imposta il comportamento stilistico degli oggetti coinvolti
h1 { color : green }
// selettore { proprietà : valore }la parte prima dei due punti che descrive una caratteristica che un oggetto può avere
la parte dopo i due punti che indica quale comportamento deve avere la proprietà selezionata
Raggruppare le regole perchè?
per semplificare la struttura e la scrittura dei CSS
per razionalizzare gli stili
per ridurre le dimensioni del foglio di stile
Riportando come selettore l’elenco dei singoli selettori separati da ","
h1, h2, h3 { font-weight: bold }corrispondente a:
h1 { font-weight: bold }
h2 { font-weight: bold }
h3 { font-weight: bold }usando lo stesso selettore, ma elencando le dichiarazioni separate da ";"
h1 { color: blue; font-weight: bold; text-align: center }corrispondente a:
h1 { color: blue }
h1 { font-weight: bold }
h1 { text-align: center}Si possono anche mescolare le due tipologie di raggruppamento.
h1, h2, h3 { color: blue; font-weight: bold }Si può indicare un foglio di stile ad una pagina HTML
utilizzando l’attributo style su uno o più elementi HTML
utilizzando l’elemento style al documento HTML
collegando un foglio di stile esterno per mezzo dell’elemento link
Il javascript è un linguaggio di programmazione interpretato
inizialmente progettato per permettere l’esecuzione di script all’interno del browser (quindi lato client)
nato per dare la possibilità di interagire con l’utente in modo più diretto
si utilizza il pattern event/observer per personalizzare le azioni dell’utente
Si inserisce nella pagina web con l’elemento script
<html>
...
<script type="text/javascript">
document.write('<p>Ciao mondo!</p>');
</script>
...
</html>