Ultimo aggiornamento: 8 giugno 2021

§1. User Agent Style Sheets

Questa pagina mostra la visualizzazione di default di alcuni elementi html quando è applicato al documeno solo il foglio di stile dello 'User Agent' (del browser).

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

• Foglio di stile dello User Agent

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. 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

• all
• braille
• embossed
• handheld
• print
• projection
• screen
• speech
• tty
• tv

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

Tabella 2. Ancora una tabella elementare.

Tabella 3. Una tabella complessa

§1.6 Aspetto di default dell'elemento form

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

Nome cliente: 

    Telefono: 

      E-mail: 

                Orario: 

Istruzioni particolari: 

Invia