Home Stampante Corso HTML e Css

Lezione_5 - Cos'è CSS.

CSS Cascading Style Sheets. Significato di cascading. Sequenza di applicazione delle regole di stile. UserAgentStyleSheet, AuthorStyleSheet.

Cos'è CSS

CSS è un linguaggio per la definizione della formattazione di documenti sui diversi tipi di media.

Prendendo come riferimento una pagina web, con html se ne definisce il contenuto. Con CSS l'aspetto. Gli elementi di html sono oggetti dotati di proprietà visuali a cui possono essere assegnati valori mediante la definizione di regole di stile all'interno di script css. Gli script css possono essere all'interno del file html o in uno o più file esterni.

Abbiamo visto come per ogni elemento di un documento html, CSS definisca un box, un'area rettangolare destinata ai contenuti. Questi possono essere dati terminali come stringhe di testo o immagini, o altri contenitori, venendosi così a determinare una gerarchia di contenimento padre figlio. Ad esempio, in un documento html, tutti gli elementi visualizzabili sono contenuti nell'elemento body che pertanto è l'antenato comune a tutti gli altri. CSS sfrutta questi tipi di relazione consentendo l'ereditarietà di alcune proprietà.

Il nome "Cascading Syle Sheets" rivela un importante meccanismo di funzionamento di CSS: il cascading, consistente nell'applicazione in sequenza di regole di stile proveniente da fonti diverse quali: il programma di restituzione o User Agent (ad esempio un browser), l'autore del documento o Author e il fruitore del documento o User.

Browser, autore, utente possono applicare ad un stessa proprietà di stile, uno di seguito all'altro (in cascata), valori differenti. Prevarrà l'ultimo valore applicato. CSS stabilisce che l'ordine di applicazione delle dichiarazioni delle proprietà sia il seguente:

  1. Dichiarazioni contenute nel foglio di stile dello User Agent (il browser)
  2. Dichiarazioni, 'normali', contenute nel foglio di stile dello User
  3. Dichiarazioni, 'normali', contenute nel foglio di stile dello Author
  4. Dichiarazioni, 'importanti', contenute nel foglio di stile dello Author
  5. Dichiarazioni, 'importanti', contenute nel foglio di stile dello User

Questo meccanismo di cascata, insieme all'ereditarietà, e al fatto che, per tutte le possibili proprietà, i progettisti di CSS abbiano stabilito un valore iniziale di default, fa si che tutti gli elementi presenti nei documenti siano sempre rappresentabili in una forma dignitosamente fruibile. L'ereditarietà si applica dopo la cascata con priorità agli ascendenti più prossimi e l'assegnazione dei valori alle proprietà è fatto mediante una successione ordinata di step che tiene conto, in aggiunta a cascata ed ereditarietà, dei vincoli imposti dal media di restituzione.
Questo documento,contiene un numero minimo di dichiarazione di stile dell'autore, eppure viene visualizzato sullo schermo di un desktop o di uno ephone in modo abbastanza ordinato e può anche essere stampato senza problemi. I caratteri sono dimensionati in modo da essere leggibili sia a video che su carta, le linee di testo sono adeguatamente distanziate e le righe di intestazione sono appropriatamente evidenziate.

Dal punto di vista dell'autore, la cascata di stili di cui tener conto è la seguente

  1. Dichiarazioni contenute nel foglio di stile dello User Agent
  2. Dichiarazioni, 'normali', contenute nel foglio di stile dello Author
  3. Dichiarazioni, 'importanti', contenute nel foglio di stile dello Author

Che nella maggior parte dei casi può ridursi a:

  1. Dichiarazioni contenute nel foglio di stile dello User Agent
  2. Dichiarazioni, 'normali', contenute nel foglio di stile dello Author

Prima mi iniziare a scrivere nuove regole di stile vediamo come alcuni oggetti sono restituiti usando solo le impostazioni dello User Agent. Prova degli stili di default e successivamente applicando alcune regole di stile dell'autore Prova stili autore.

Esercizi.

Per prima cosa scarica il file HTML_05.rar nella cartella CorsoHTML che avrai creato in precedenza.

Estrai la cartella HTML_05 e apri in Notepad++ i file HTML_05.html e HTML_05.css.

Esegui gli esercizi proposti.

Se vuoi vedere il file dell'esempio prima di scaricarlo clicca qui.

Nota.

Il lettore potrà ora fare altre prove ed eventualmente annotare propri appunti nella sezione dedicata.

Un ultima raccomandazione:durante gli esercizi tenere aperti di due strumenti di validazione del codice: W3C Markup Validation Service e W3C CSS Validation Service e verificare i file su cui si è lavorato dopo aver eseguito le modifiche. I browser sono molto tolleranti, e visulizzano bene le pagine anche in presenza di errori, ma gli errori è meglio evitarli.