§1. Author Style Sheets

Il contenuto di questa pagina è quasi identico a quello di provaUserAgentStyleSheet.html con l'introduzione di un limitato numere di regole di stile in un file prodotto dall'autore.

In questo modo agli elementi della pagina viene applicata la seguente cascata di fogli di stile:

L'aspetto di questo documento risulterà leggermente diverso quando presentato su browser differenti.

Nel seguito del documento inserirò alcuni degli elementi html di uso più comune per verificarne la restituzione su diversi browser.

L'idea è quella di utilizzare, quanto più possibile, le impostazioni degli user agent, le quali, è ragionevole credere, siano state scelte con ponderazione. Sono arrivato a questo proposito dopo aver ingarbugliato diversi documenti. Infatti la relativa semplicità della scrittura delle regole di stile può portare alla prolificazione di modifiche ai valori di proprietà di cui non si è capito bene il funzionamento. Questo, unito ai meccanismi di cascata e di ereditarietà, può portare a risultati indesiderati: una cascata di errori per correggere altri errori.

Le regole generale alla quale attenersi sono:

  1. rispettare le impostazioni di default suggerite in: sample.html (appendice D delle specifiche CSS 2.2);
  2. tenendo conto del box model, usare con oculatezza le proprietà margin, border e padding;
  3. considerare il meccanismo di ereditarietà. Non replicare regole di stile ereditarie a meno che ciò non sia strettamente necessario. Se si hanno dubbi sulla ereditarietà di una proprietà consultare: propidx.html (appendice F delle specifiche CSS 2.2);
  4. valutare l'effetto delle regole di stile applicate ad un elemento su i suoi discendenti.

In definitiva scrivere il numero minimo di regole per ottenere l'effetto desiderato.

§1.1 Aspetto di default degli elementi h1,..., h6

Elemento h1

Elemento h2

Elemento h3

Elemento h4

Elemento h5
Elemento h6

§1.2 Apparente neutralità dell'elemento div

Elemento p. Figlio, come tutti gli altri elementi inseriti sino ad ora, dell'elemento body.

Elemento p. Figlio di un elemento div.

Elemento p. Questo mostra come, non modificandone le proprietà di default, gli elementi div siano neutrali per quanto riguarda la visualizzazione degli elementi discendenti. La maggiore marcatura di 'neutrali' è ottenuta con l'elemento strong.

§1.3 Prova dell'elemento mark - prova di mark all'interno di h2

Prova di mark all'interno dell'elemento p

Prova di mark all'interno dell'elemento em

Prova di em all'interno dell'elemento mark

§1.4 Elenchi puntati, elenchi numerati, liste di definizioni

Elenco puntato.

elenco dei possibili media types

Elenco numerato

Ordine di cascata:

  1. Dichiarazioni contenute nel foglio di stile dello User Agent
  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

Liste di definizioni

Origini dei fogli di stile:

User Agent
E' il programma che elabora il documento, normalmente un browser. Ogni browser ha suoi fogli di stile di default
Author
E' l'autore del documento: Può inserire o collegare al documento, nessuno, uno o più fogli di stile. In questo documento non ho inserito ne collegato alcun foglio di stile.
User
E' l'utente del documento. Ha la possibilità di applicare ai documenti un proprio foglio di stile. La modalità di applicazione dei fogli di stile utente dipende dal browser utilizzato.

§1.5 Aspetto di default dell'elemento tab

Segue una serie di tabelle con struttura progressivamente più complessa

Tabella 1. Righe di celle

table Elemento utilizzato per rappresentare dati in forma tabulare.
tr Elemento che contiene una riga di celle di tipo td
td Elemento che rappresenta una cella di dati

Tabella 2. Ancora una tabella elementare.

Tabella 2. Gli elementi per tabelle elementari.
Nome elemento Descrizione
table Elemento utilizzato per rappresentare dati in forma tabulare.
caption Titolo della tabella.
thead Elemento che contiene un blocco di righe contenenti le intestazioni delle colonne
tbody Elemento che contiene un blocco di righe contenenti le colonne di dati
tr Elemento che contiene una riga di celle
th Elemento che rappresenta una cella di intestazione
td Elemento che rappresenta una cella di dati

Tabella 3. Una tabella complessa

Fatturato semestrale. Questa tabella mostra i valori del fatturato semestrale e totale, ripartito per linea prodotto, di un negozio di articoli di bricolage.
Anno di riferimento 2016
Linea prodotto Primo semestre Secondo semestre Totale
Elettroutensili 45.630 49.570 95.200
Utensili manuali 37.132 30.141 67.273
Materiali e minuterie 21.776 23.111 44.887
Vernici e collanti 34.237 36.566 70.803
Totale 138.775 139.388 278.163

§1.6 Aspetto di default dell'elemento form

Dati cliente
Taglia
Ingredienti
Consegna
Submit

La stessa form "formattata con gli elementi di input racchiusi in elementi div e pre

Dati cliente
Taglia
Ingredienti
Consegna
Submit