niubbo css chiede delucidazioni su porzione codice

il24 · 20-09-2014, 13:58

vorrei fare un esempio di codice

Quote:

.header-full #logo h1 {margin:0px auto;
float: none;
text-align: center;
}

quale sarebbe un esempio di riga di codice html dove queste proprietà verrebbero applicate?

wingman87 · 20-09-2014, 14:25

Codice:

<!DOCTYPE html>
<html>
<head>
  <style>
  .header-full #logo h1 {
    margin:0px auto;
    float: none;
    text-align: center;
  }
  </style>
</head>
<body>
  <div class="header-full">
    <div id="logo">
      <h1>Qui viene applicato lo stile</h1>
    </div>
  </div>
</body>
</html>

Ti ho evidenziato le caratteristiche salienti dell'html che "matchano" con il selettore della regola css:
.header-full matcha con gli elementi aventi class header-full
#logo matcha con gli elementi che hanno id logo (dovrebbe essercene solo uno per la definizione di id)
h1 matcha con i tag h1
concatenando questi selettori semplici, separati da spazio, stai imponendo che h1 deve essere discendente (non necessariamente diretto) di un #logo che a sua volta deve essere discendente di un .header-full

il24 · 20-09-2014, 14:35

quindi la discendenza è nella struttura ad albero dell'html
se h1 lo spostassi fuori dall ID tutto non verrebbe applicato giusto?
Un'ultima domanda se la classe impone per esempio una dimensione x il testo , la regola di h1 descritta prevale?

wingman87 · 20-09-2014, 14:54

Se sposti l'h1 fuori dal #logo la regola non viene applicata.
Se a livello di .header-full specifichi un font-size, questo viene ereditato anche dai figli, se vuoi che a quel punto h1 abbia un font-size diverso devi specificarlo con una regola più specifica (scusa il gioco di parole).

Ad esempio con il codice html di prima, in questo modo h1 avrà un font-size di 10px:

Codice:

.header-full {
    font-size:10px;
}
.header-full #logo h1 {
    margin:0px auto;
    float: none;
    text-align: center;
  }

così invece avrà un font-size di 14px:

Codice:

.header-full {
    font-size:10px;
}
.header-full #logo h1 {
    margin:0px auto;
    float: none;
    text-align: center;
    font-size:14px;
  }

Il fatto che la regola venga ereditata vale per font-size e molte altre regole ma non per tutte. Vedi qui per maggiori informazioni: https://developer.mozilla.org/en-US/...SS/inheritance

il24 · 20-09-2014, 17:03

sperando di aver capito allora:
così avrebbe font pari a 12

Quote:

.header-full {
font-size:10px;
}
#logo {
font-size:12px;
}
.header-full #logo h1 {
margin:0px auto;
float: none;
text-align: center;
}

Perche' comanderebbe il font-size di #logo su .header-full , giusto?

wingman87 · 21-09-2014, 10:12

Sì, perché risalendo l'albero da h1 incontri prima #logo e poi .header-full, quindi h1 eredita da #logo.

20-09-2014, 14:25	#2
wingman87 Senior Member Iscritto dal: Nov 2005 Messaggi: 2775	Codice: <!DOCTYPE html> <html> <head> <style> .header-full #logo h1 { margin:0px auto; float: none; text-align: center; } </style> </head> <body> <div class="header-full"> <div id="logo"> <h1>Qui viene applicato lo stile</h1> </div> </div> </body> </html> Ti ho evidenziato le caratteristiche salienti dell'html che "matchano" con il selettore della regola css: .header-full matcha con gli elementi aventi class header-full #logo matcha con gli elementi che hanno id logo (dovrebbe essercene solo uno per la definizione di id) h1 matcha con i tag h1 concatenando questi selettori semplici, separati da spazio, stai imponendo che h1 deve essere discendente (non necessariamente diretto) di un #logo che a sua volta deve essere discendente di un .header-full

20-09-2014, 14:54	#4
wingman87 Senior Member Iscritto dal: Nov 2005 Messaggi: 2775	Se sposti l'h1 fuori dal #logo la regola non viene applicata. Se a livello di .header-full specifichi un font-size, questo viene ereditato anche dai figli, se vuoi che a quel punto h1 abbia un font-size diverso devi specificarlo con una regola più specifica (scusa il gioco di parole). Ad esempio con il codice html di prima, in questo modo h1 avrà un font-size di 10px: Codice: .header-full { font-size:10px; } .header-full #logo h1 { margin:0px auto; float: none; text-align: center; } così invece avrà un font-size di 14px: Codice: .header-full { font-size:10px; } .header-full #logo h1 { margin:0px auto; float: none; text-align: center; font-size:14px; } Il fatto che la regola venga ereditata vale per font-size e molte altre regole ma non per tutte. Vedi qui per maggiori informazioni: https://developer.mozilla.org/en-US/...SS/inheritance

20-09-2014, 14:35	#3
il24 Senior Member Iscritto dal: Aug 2001 Messaggi: 912	quindi la discendenza è nella struttura ad albero dell'html se h1 lo spostassi fuori dall ID tutto non verrebbe applicato giusto? Un'ultima domanda se la classe impone per esempio una dimensione x il testo , la regola di h1 descritta prevale?

21-09-2014, 10:12	#6
wingman87 Senior Member Iscritto dal: Nov 2005 Messaggi: 2775	Sì, perché risalendo l'albero da h1 incontri prima #logo e poi .header-full, quindi h1 eredita da #logo.

Strumenti
Mostra una versione stampabile Invia questa pagina per email