Dimensioni della scritta differenti tra elementi HTML e uso di <span> e class

**MisterMPG** · 12-10-2019, 13:37

Scusate sono all'inizio con l'html mi potete spiegare perchè usando il primo listato la scritta "Paris is the capital of France" viene piu' piccola di "Paris" sopra?
Nel secondo important è sempre in rosso ma non capisco bene l'uso di span.note sopra e poi invece l''uso di
span class="note">Important</span> piu' sotto che porta la parola important and essere sempre rossa.
Grazie a tutti.

codice:

<!DOCTYPE html>
<html>
   <style>
      .city {
         background-color: tomato;
         color: white;
         padding: 10px;
      }
   </style>
   <body>

      <h2>Same Class, Different Tag</h2>
      <p>Even if the two elements do not have the same tag name, they can have the same class name, and get the same styling:</p>

      <h2 class="city">Paris</h2>
      <p class="city">Paris is the capital of France.</p>

   </body>
</html>

---------------------------------------------------------------------------------------------

codice:

<!DOCTYPE html>
<html>
   <head>
      <style>
         span.note {
            font-size: 120%;
            color: red;
         }
      </style>
   </head>
   <body>

      <h1>My <span class="note">Important</span> Heading</h1>
      <p>This is some <span class="note">important</span> text.</p>

   </body>
</html>

**KillerWorm** · 12-10-2019, 16:05

Ciao, premetto che si tratta di nozioni di base che è possibile apprendere attraverso lo studio di qualche guida. Senza offesa, ma affrontare un argomento del genere attraverso il forum non è appropriato perché rischia di svilupparsi in un corso con rapporto discente-docente. Se stai iniziando dalle basi è ti serve apprendere quindi i fondamentali, ti consiglio eventualmente di dare uno sguardo ai primi 2 capitoli dei link utili CSS (discussione in evidenza) dove puoi trovare vari riferimenti a guide di base e nozioni sui principi di funzionamento dei CSS. Sicuramente ti saranno utili per comprendere certi meccanismi e chiarire questi dubbi.

Ad ogni modo rispondo brevemente alle due domande:

mi potete spiegare perchè usando il primo listato la scritta "Paris is the capital of France" viene piu' piccola di "Paris" sopra?

Ogni tag HTML possiede uno stile di default che è definito dal browser stesso, cioè dei valori predefiniti per le varie proprietà CSS attribuite per ogni elemento. Tutto quello che puoi fare è sovrascrivere tali proprietà definendo opportunamente il tuo foglio di stile.

Nel tuo caso l'elemento <h2> possiede di default un valore per la grandezza del carattere che risulta maggiore rispetto a quello predefinito per l'elemento <p>. Tra le proprietà da te definite, per la classe .city non è inclusa quella che definisce la dimensione del testo (font-size), per tale motivo gli elementi a cui è attribuita quella classe sono mostrati comunque in base al valore preimpostato per tale proprietà.

Nel secondo important è sempre in rosso ma non capisco bene l'uso di span.note sopra e poi invece l''uso di
span Nel secondo important è sempre in rosso ma non capisco bene l'uso di span.note sopra e poi invece l''uso di
span class="note">Important</span> piu' sotto che porta la parola important and essere sempre rossa.>Important</span> piu' sotto che porta la parola important and essere sempre rossa.

L'elemento HTML <span> è un semplice contenitore di contenuto in linea. L'attributo class (che è possibile definire per qualsiasi elemento HTML) ti permette di "selezionare" tale elemento attraverso un selettore di classe (vedi una guida di base per queste nozioni). Nel tuo caso, il selettore CSS span.note va a selezionare qualsiasi elemento <span> che abbia classe .note; nel corpo di tale regola sono poi impostati i valori per le due proprietà font-size:120% e color:red. Per tale motivo i due elementi <span>, che hanno classe .note, vengono mostrati con una dimensione del testo al 120% (rispetto al loro contenitore padre) e di colore rosso.

Per altre informazioni di base ti rimando alle guide, come anticipato.

MOD: l'uso di titoli generici per le discussioni è assolutamente da evitare e generalmente porta alla chiusura della discussione (vedi regolamento di sezione). Benché l'argomento di questa discussione è piuttosto generico e tratta di nozioni basilari, ti prego in futuro di sforzarti a trovare dei titoli più esplicativi. Per il momento ho provveduto io.

Quando si posta del codice sul forum è opportuno usare gli appositi tag [CODE] (vedi regolamento di sezione). Per il momento ho corretto io ma prego di fare maggiore attenzione in futuro. Grazie.

Buon proseguimento

**MisterMPG** · 12-10-2019, 16:13

Grazie!!
Una sola cosa , quando uso lo span devo sempre prima mettere ad esempio span.pippo (anzichè l'esempio di prima che era span.note) con le specifiche insomma lo span seguito dal punto e il riferimento (ad esempio pippo) e poi successivamente richiamare diventando cosi?
<h1>My <span class="pippo">Important</span> Heading</h1>?
Sono alle superiori il prof usa a lezione questo link:
https://www.w3schools.com/html/html_classes.asp
Ma francamente non ho ben capito l'uso dlelo span, già tu mi hai aiutato molto.
Ma i link che hai messo sono per superiori? MI consigli qualcosa che spieghi bene senza andare oltre certi livelli a cui ora non posso ambire?

**Vincent.Zeno** · 13-10-2019, 14:58

la dichiarazione di stile va fatta sempre prima del marcatore, altrimenti lo stile non verrà applicato.

span è un marcatore in linea che non ha proprietà (come dimensioni, colore, posizione).
per "in linea" si intende che non va nemmeno a capo da solo, rimane lì dove lo metti. e in visualizzazione seguirà il normale flusso della pagina.

come usarlo.
essendo indipendente dal flusso dei contenuti e non avendo significato intrinseco è utile per attribuire un valore arbitrario dove necessario. ad esempio cambiando colore, dimensioni, decorazioni.
nel tuo esempio si da risalto ad una parola specifica all'interno del titolo hN
i Motori di Ricerca (MdR) evoluti possono (e sanno) tenere in considerazione questi attributi.

le pagine linkate fin'ora sono basilari, la roba complicata verrà dopo

Discussione: Dimensioni della scritta differenti tra elementi HTML e uso di <span> e class

Strumenti discussione

Ricerca discussione

Visualizza

Dimensioni della scritta differenti tra elementi HTML e uso di <span> e class

Permessi di invio