PDA

View Full Version : niubbo css chiede delucidazioni su porzione codice

il24
20-09-2014, 13:58
vorrei fare un esempio di codice

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

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

.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/docs/Web/CSS/inheritance
il24
20-09-2014, 17:03
sperando di aver capito allora:
così avrebbe font pari a 12

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