-
.
Introduzione al CSS
Se il presente articolo è di tuo gradimento dai un +1 a questo postPrefazione
HTML, CSS, Javascript: che robe sono?
Questo probabilmente è quello che pensa l'utente medio, perciò prima di partire con questa guida forse è meglio cercare di riordinare un po' le idee.
HTML è un linguaggio di marcatori, usato per scrivere le pagine Web: cosa significa questo? Che attraverso l'HTML è possibile creare dei documenti che non siano formati solo da del testo, ma che comprendano anche dei contenuti multimediali e dei collegamenti ad altri contenuti (i famosi link).
CSS invece è un linguaggio per la formattazione dei contenuti; per i più curiosi infine Javascript è uno dei tanti linguaggi di programmazione lato client che vengono usati sul web, per effetti grafici particolari o per l'elaborazione di alcuni dati.
Cosa collega quindi HTML e CSS? Il fatto che l'HTML è nato per descrivere la logica del documento, e non come deve essere impaginato: tuttavia, durante la browser war (per i meno anziani del web, la browser war fu un periodo, tra gli anni 90 e il 2000, in cui Nescape Navigator e Microsoft Internet Explorer si diedero letteralmente guerra per accaparrarsi il maggior numero di utenti) uno dei tanti stratagemmi che usarono i 2 browser per guadagnarsi più utilizzatori fu l'aggiunta di tag HTML proprietari che permettessero ai web master di impaginare come volevano il proprio sito: questo scatenò il caos, in quanto ogni sito per essere compatibile con ogni browser necessitava di essere riscritto almeno 4 volte, con un'enorme spreco di banda e moltissimi disagi per l'utente finale; inoltre questa situazione forzò la modifica dell'HTML, rendendolo un grosso guazzabuglio di elementi che non avevano niente a che fare con esso.
Per porre rimedio almeno in parte a questa catastrofe vennero quindi ideati i CSS, con lo scopo di separare completamente la descrizione logica del documento (affidata all'HTML) dalla formattazione (affidata al CSS); il risultato è stato raggiunto?
Ovviamente no.
Al giorno d'oggi infatti, i browser si sono adattati a questo guazzabuglio, perciò oggi è davvero difficile che una pagina HTML organizzata malissimo non venga interpretata: questo quindi non ha incentivato i vari web master ad aggiornare le proprie pagine in modo tale da rispettare lo standard; inoltre, i browser basati su un motore grafico open source (come Gecko o Webkit) offrono un'interpretazione dei CSS pressoché perfetta, ma (ovviamente) un certo browser di cui non farò il nome (vi basta sapere che è prodotto dalla Microsoft...) riesce ad interpretare bene le vecchie porcherie, ma non altrettanto bene i CSS: unito al fatto che è il browser più diffuso ha aiutato a non allargare l'adozione dei CSS.Articolo realizzato da ~iSamur@i.
Edited by ~iSamur@i - 30/12/2014, 19:05. -
.
Sintassi del CSS
Per applicare qualsiasi modifica coi CSS, bisogna creare una regola CSS: con regola si intende l'insieme di selettori, proprietà e valori; se non avete capito niente tranquilli, ora vi illustrerò i 3 pezzi:
1) Un selettore indica al browser a quali elementi HTML deve riferirsi la nostra regola: possiamo quindi ad esempio selezionare tutti i tag span, o solo quelli con una certa classe ad esempio.
2) Le proprietà sono i vari aspetti dell'elemento che siamo interessati a modificare: una proprietà ad esempio è il margine o lo sfondo dell'elemento.
3) Il valore è la caratteristica che quella proprietà deve assumere: prendendo sempre lo sfondo come esempio, un valore potrebbe essere il rosso.
I valori sono assegnati alle rispettive proprietà con la seguente sintassi:CODICEproprietà: valore;
(da notare che il punto e virgola non è fondamentale se dobbiamo assegnare solo una coppia ad un selettore, ma se vogliamo assegnarli più coppie lo diventa).
Una regola quindi si costruisce assegnando ad un selettore una o più coppie di proprietà-valore, con la seguente sintassi:CODICEselettore{
coppia1;
coppia2;
coppia3;
}
teoricamente è possibile assegnare infinite coppie allo stesso selettore, inoltre è possibile assegnare le stesse coppie a più selettori, così:CODICEselettore1, selettore2, selettore3{
coppia1;
coppia2;
coppia3;
}
ed anche qui ovviamente non c'è un limite.
Infine esiste la possibilità di commentare i CSS con la seguente sintassi:CODICE/* CSS */
tutto il codice commentato non sarà interpretato, perciò può tornare molto utile per lasciare delle spiegazioni o per fare dei test.
NB: CSS è case sensitive, perciò è diverso scrivere Parola e parola, ricordatevene perché è spesso fonte di errori.
Edited by ~iSamur@i - 30/12/2014, 19:02. -
.
I Selettori
Prima abbiamo parlato dei selettori: vediamoli più nel dettaglio.
Con un selettore andremo ad indicare a quale elemento (o a quali elementi) della pagina vanno collegate una o più coppie proprietà-valore; i selettori sono suddivisi in 7 famiglie:- Selettori di tipo
- Selettori di attributo
- Selettori di classe
- Selettori di id
- Pseudoclassi
- Pseudo elementi
- Combinatori
Prima di spiegare ogni famiglia inoltre va fatta una premessa sulla cascata: vi siete sempre chiesti perché si chiamino fogli di stile a cascata? Semplicemente perché le varie regole vengono interpretate dal browser a cascata: se esistono 2 regole A e B, ed entrambe possono essere applicate allo stesso elemento, si crea un conflitto e le regole verranno applicate in cascata (quindi la regola che è più in basso nella dichiarazione degli stili sovrascriverà le regole precedenti); a volte questo discorso può essere molto scomodo, perciò è stato inserito un meccanismo di priorità: ogni regola, a seconda della famiglia del selettore (sarebbe più corretto dire a seconda della specificità del selettore), ha un certo valore, perciò regole con un valore complessivo di priorità maggiore non vengono sovrascritte; i valori sono:- Selettori di tipo - valore 1
- Selettori di attributo - valore 10
- Selettori di classe - valore 10
- Selettori di id - valore 100
- Pseudoclassi - valore 10
- Pseudo elementi - valore 1
- Combinatori - valore 0
Esistono inoltre 2 eccezioni, gli stili in linea, che hanno una priorità pari a 1000, e la direttiva !important, che aggiunge 1000 all'importanza di una coppia attributo-valore, permettendogli di sovrascrivere coppie dichiarate in una regola con specificità maggiore; la sintassi del !important èCODICEselettore{
coppia1;
coppia2 !important;
coppia3;
}
(ovviamente non c'è limite al numero di !important che si possono inserire).Selettori di tipo
I selettori di tipo sono i selettori più generici in assoluto, e permettono di selezionare tutti gli elementi uguali: con un solo selettore è possibile ad esempio selezionare tutti gli span del documento.
La sintassi è la seguente:CODICEtag{
coppia1;
coppia2;
coppia3;
}
Questo tipo di selettore quindi è ottimo per creare una base comune, ad esempio specificando il colore del font di ogni paragrafo, che in seguito sarà affinata da altre regole utilizzanti dei selettori più specifici.Selettori di attributo
Ogni tag HTML ha la possibilità di aggiungere alcuni attributi (un esempio può essere l'href del tag a): con i selettori di attributo si selezionano gli elementi che hanno qualche attributo valorizzato in un certo modo; è possibile, per esempio, selezionare tutti i tag a che puntano a un certo sito, oppure tutti i paragrafi con un certo titolo; la sintassi è la seguente:CODICE[espressione]{
coppia1;
coppia2;
coppia3;
}
Ovviamente al posto di espressione va inserita la condizione a cui siamo interessati, espressa con una sintassi molto simile a quella delle espressioni regolari; poiché questi selettori sono usati raramente non verranno trattati tutti i casi in questa guida.Selettori di classe
I vari elementi di una pagina possono essere raggruppati per classi: con classe si indica tutti gli elementi che hanno delle proprietà in comune, perciò non devono necessariamente essere degli elementi dello stesso tipo.
Una classe si assegna ad un'elemento in HTML con la seguente sintassi:CODICE<tag class="classe"></tag>
mentre si seleziona in CSS con la seguente sintassi:CODICE.classe{
coppia1;
coppia2;
coppia3;
}Selettori di id
Gli id sono dei nomiche dovrebbero essereunivoci, per riconoscere un particolare elemento in una pagina.
Si assegna un id ad un'elemento in HTML con la sintassi:CODICE<tag id="id"></tag>
e si seleziona in CSS con:CODICE#id{
coppia1;
coppia2;
coppia3;
}Pseudoclassi
Con pseudoclasse si intende una proprietà di quell'elemento che non può essere definita mediante l'uso dei selettori già visti; queste proprietà in genere sono dinamiche, in quanto i vari elementi possono assumerle dopo un certo periodo (quali link sono già stati visitati, o su quale elemento è sopra il mouse in quel momento, per esempio).
La sintassi per le pseudoclassi è:CODICE:pseudoclasse{
coppia1;
coppia2;
coppia3;
}
Infine va notato cheinternet exploreralcuni browser hanno dei problemi con queste pseudoclassi.Pseudo elementi
Gli pseudo elementi sono parti di un'elemento della pagina, che non vengono riconosciuti con un nome particolare: uno pseudo elemento è la prima riga di ogni paragrafo.
L'uso più comune di questa tipologia di selettori è l'aggiunta dinamica di alcuni elementi al testo, per esempio con delle icone per segnalare degli acronimi, o per mettere in risalto la prima lettera di un paragrafo.
Esistono 2 sintassi differenti per gli pseudo elementi:CODICE::pseudo-elemento{
coppia1;
coppia2;
coppia3;
}
eCODICE:pseudo-elemento{
coppia1;
coppia2;
coppia3;
}
la prima è stata introdotta coi CSS3, mentre la seconda è presente fin dai CSS1, perciò certi browser (giuro che non lo faccio apposta, ma internet explorer viene sempre fuori quando si tratta di problemi) non vanno d'accordo con la prima sintassi.Combinatori
Prima di tutto una premessa: la gerarchia.
I vari elementi dell'HTML sono organizzati in modo gerarchico, a seconda di come sono scritti nella pagina.
Prendiamo come esempioCODICE<p>
<b>
</b>
<a>
<i>
</i>
<a>
</p>
<span>
</span>
come potete vedere dentro al tag p ci sono degli altri tag, e affianco a p c'è uno span.
I tag annidati dentro al tag p sono i suoi discendenti, perciò i tag a,b e i discendono da p; i discendenti che sono annidati dentro ad un tag sono i figli di quel tag, perciò a e b sono figli di b, mentre i è figlio di a, ma non di p; infine tag adiacenti sono detti fratelli: p e span sono fratelli, così come b e a.
Tutti i selettori visti fino ad ora, possono essere combinati fra di loro, in modo tale da eseguire delle selezioni più mirate: con i combinatori è quindi possibile selezionare solo gli elementi figli di certi elementi, per esempio.
La sintassi dei combinatori è:CODICEselettore1 combinatore selettore2{
coppia1;
coppia2;
coppia3;
}
al posto di combinatore va scritto:- " " se vogliamo selezionare i discendenti
- "+" se vogliamo selezionare i fratelli
- ">" se vogliamo selezionare i figli
Nel caso dei combinatori, la specificità del selettore sarà data dalla somma delle specificità dei vari componenti: un selettore comeCODICE.classe1 .classe2
Avrà specificità 20 ad esempio.
Edited by ~iSamur@i - 1/1/2015, 18:58. -
.
CSS: Come si inseriscono
I CSS possono essere inseriti in una pagina web principalmente in quattro metodi:
1) Tag linkQuesto metodo non può essere usato su Forumfree & co.
col tag link si "linka" in un documento HTML un'altro file contenente le regole CSS; per farlo si inserisce nell'head della pagina il seguente tag:CODICE<link rel="stylesheet" href="indirizzo del file" type="text/css" />
2) Tag Style
col tag style si possono definire le regole direttamente nella pagina HTML: basta infatti scriverle dentro al tag style così:CODICE<style>
regola 1
regola 2
regola 3
</style>
in genere il tag style si mette nell'head della pagina, ma in realtà è corretto metterlo in qualsiasi punto di essa (l'head è preferito perchè in genere dentro ad esso si mettono tutti i contenuti che non sono informazioni per l'utente)
3) @importQuesto metodo non può essere usato su Forumfree & co.
@import non è un vero e proprio metodo a parte, bensì una variante del metodo col tag style: semplicemente si può mettere dentro a questo tag questa regola per fargli prendere tutte le regole contenute in un'altro file, in modo molto simile al tag link; la sintassi è:CODICE<style>
@import url(indirizzo del file);
</style>
4) In linea
l'ultimo metodo è quello di scrivere direttamente nel tag HTML il CSS, con la seguente sintassi:CODICE<span style="qui vanno le regole"></span>
(ovviamente non vale solo per span, ma per qualsiasi tag)
Questo metodo però è il meno raccomandato dei 4, in quanto rende la pagina molto ridondante, e in realtà andrebbe usato solo per fare dei test; servizi come Forumfree però non permettono ad ogni utente di modificarsi il tag style per aggiungersi le proprie regole, perciò questo in realtà è l'unico modo utilizzabile liberamente da chiunque per stilizzare ad esempio dei post.
Da notare infine che proprio perché sono inseriti in linea i CSS in questo caso non hanno bisogno del selettore, in quanto si applicheranno solo a quell'elemento.
Edited by ~iSamur@i - 1/1/2015, 18:43. -
.
La guida è pubblica (da circa 6 ore in realtà, ma io non ero presente prima 
), potrebbe essermi sfuggito qualche errore in fase di rilettura, oppure qualche parte potrebbe non essere troppo chiara, sono ben accetti quindi suggerimenti e correzioni (vi mangio lentamente in caso, tranquilli).
Probabilmente ci sarà chi mi farà notare l'eccessiva cattiveria verso IE, a onor del vero bisognerebbe dire che le ultime versioni hanno un supporto al CSS migliore (mantengono comunque molte rogne), ma dato l'oscuro passato ed il fatto che non è aggiornabile sempre (IE 6 è ancora diffuso grazie a molti PC pubblici o aziendali con XP) credo che sia meglio mettere in guardia le persone dei sicuri problemi.. -
Alexander Cerutti.
User deleted
Bella guida, ma una cosa che sfrugge a molte persone, è che l'uso di un ID stilizzato in CSS, ha una priorità maggiore rispetto ad una classe. Di conseguenza, se si ha un elemento stilizzato sia con una classe che un ID, ed entrambi contengono una proprietà CSS che si sovrappone, prevarrà sempre (sinceramente non mi ricordo se anche usando !important o meno) quella contenuta in ID. 
. -
.
Non ho ben capito la tua osservazione, il fatto che un id batta una classe è dovuto alla maggiore specificità del selettore, nella spiegazione dei valori mi sembra sia abbastanza chiara come cosa. . -
Alexander Cerutti.
User deleted
Purtroppo è una cosa che non tutti capiscono leggendo una guida e che non c'è scritta dappertutto, quindi ho fatto tale osservazione perché appunto nel topic non era specificato. Viceversa era specificato il fatto che comunque l'ID deve essere univoco (o meglio, dovrebbe).
Purtroppo, non si comprende bene quel testo nella spiegazione dei valori, e provo anche a spiegare perché:CITAZIONEPrima di spiegare ogni famiglia inoltre va fatta una premessa sulla cascata: vi siete sempre chiesti perché si chiamino fogli di stile a cascata? Semplicemente perché le varie regole vengono interpretate dal browser a cascata: se esistono 2 regole A e B, ed entrambe possono essere applicate allo stesso elemento, si crea un conflitto e le regole verranno applicate in cascata (quindi la regola che è più in basso nella dichiarazione degli stili sovrascriverà le regole precedenti);
Io leggendo questo paragrafo, non sono riuscito a comprendere in che modo intendi "applicare due regole allo stesso elemento", ovvero se tu intendi due proprietà applicate allo stesso elemento ma messe in classi/ID/entrambi differenti oppure se intendi ad esempio <... style="bg-color: red; bg-color: yellow"> .(le ho abbreviate perché non avevo voglia di scrivere) Inoltre leggendo quello stesso paragrafo, non si capisce in dettaglio quella questione che ti ho fatto notare, ovvero il fatto che un ID ha più priorità di una classe, perché non è specificato. Dal mio punto di vista, quando si crea una guida, bisogna fare una guida dettagliata al massimo, altrimenti non è detto che chiunque la legga capisca l'intero contenuto, perfino quelle "minuzie" che si prova a far sottintendere. Che sia chiaro che non voglio adottare un "tono di scontro", e ti chiedo scusa se ti sembra così.
. -
.Purtroppo è una cosa che non tutti capiscono leggendo una guida e che non c'è scritta dappertutto, quindi ho fatto tale osservazione perché appunto nel topic non era specificato. Viceversa era specificato il fatto che comunque l'ID deve essere univoco (o meglio, dovrebbe).
Purtroppo, non si comprende bene quel testo nella spiegazione dei valori, e provo anche a spiegare perché:CITAZIONEPrima di spiegare ogni famiglia inoltre va fatta una premessa sulla cascata: vi siete sempre chiesti perché si chiamino fogli di stile a cascata? Semplicemente perché le varie regole vengono interpretate dal browser a cascata: se esistono 2 regole A e B, ed entrambe possono essere applicate allo stesso elemento, si crea un conflitto e le regole verranno applicate in cascata (quindi la regola che è più in basso nella dichiarazione degli stili sovrascriverà le regole precedenti);
Io leggendo questo paragrafo, non sono riuscito a comprendere in che modo intendi "applicare due regole allo stesso elemento", ovvero se tu intendi due proprietà applicate allo stesso elemento ma messe in classi/ID/entrambi differenti oppure se intendi ad esempio <... style="bg-color: red; bg-color: yellow"> .(le ho abbreviate perché non avevo voglia di scrivere)
Ti sei risposto da solo in realtà: se si parla di regola, ci si riferisce all'insieme selettore-coppie proprietà/valore, perciò mi riferivo ad una situazione del tipoCODICE<div id="id1">Hello</div>CODICE#id1{color: red}
div{color: blue}
In questo caso le 2 regole sono in conflitto, dato che entrambe sono applicabili a quell'elemento; tuttavia, gli id hanno un valore di specificità maggiore rispetto al selettore di tipo, perciò la prima regola verrà applicata, e la seconda non sovrascriverà la prima.CITAZIONEInoltre leggendo quello stesso paragrafo, non si capisce in dettaglio quella questione che ti ho fatto notare, ovvero il fatto che un ID ha più priorità di una classe, perché non è specificato. Dal mio punto di vista, quando si crea una guida, bisogna fare una guida dettagliata al massimo, altrimenti non è detto che chiunque la legga capisca l'intero contenuto, perfino quelle "minuzie" che si prova a far sottintendere. Che sia chiaro che non voglio adottare un "tono di scontro", e ti chiedo scusa se ti sembra così.
Subito dopo quel paragrafo sono elencati i valori di specificità dei vari selettori, mi sembrava più ordinata e facile da leggere come soluzione (piuttosto che avere i vari valori mescolati alla spiegazione).. -
Alexander Cerutti.
User deleted
Io queste cose le so perché mi sono informato da altre parti e perché comunque anche io le conosco (e sto imparando sempre meglio in questo periodo alcune cose nonostante siano già 3 anni che faccio web design), però se fossi stato un neofita, non avrei capito (infatti ho anche fatto fatica a capire il dettaglio di ciò che c'è scritto). 
Mi sono risposto da solo perché appunto le cose le so (). Però la questione dei valori nell'elenco non l'ho ben capito. Potresti spiegarmi meglio a cosa ti riferisci di preciso?
. -
.
Quando dicevo che ti sei risposto da solo, mi riferivo a questo: CITAZIONEse esistono 2 regole A e B, ed entrambe possono essere applicate allo stesso elemento, si crea un conflitto e le regole verranno applicate in cascata (quindi la regola che è più in basso nella dichiarazione degli stili sovrascriverà le regole precedenti)CITAZIONEovvero se tu intendi due proprietà applicate allo stesso elemento ma messe in classi/ID/entrambi differenti oppure se intendi ad esempio <... style="bg-color: red; bg-color: yellow">
Io parlavo di regole, non di coppie proprietà-valore perciò...CITAZIONEPerò la questione dei valori nell'elenco non l'ho ben capito. Potresti spiegarmi meglio a cosa ti riferisci di preciso?
A seconda di quanto sia specifico il selettore, in fase di interpretazione del CSS da parte del browser esso gli assegna un "peso" (ovvero, un valore numerico); quando deve stilizzare un determinato elemento, viene applicata la prima regola il cui selettore è valido per quel determinato elemento, dopodiché se vengono trovate altre regole, anch'esse applicabili a quell'elemento, nel caso in cui esse contengano una coppia proprietà/valore già definita in precedenza, si controlla il peso: se il peso della regola più recente è superiore a quello della regola precedente verrà applicata la nuova regola (dove era in conflitto), in caso contrario resterà la regola vecchia; ci sono diversi modi di determinare quel peso (ad esempio se vai a vedere sul sito del W3C troverai il calcolo fatto con 3 variabili), tutti quanti validi, io però preferisco quello che ho illustrato con potenze di 10, lo trovo più semplice da capire per i neofiti e anche per farsi velocemente i conti.. -
Alexander Cerutti.
User deleted
Perfetto, adesso ho capito! Questa cosa non la sapevo di preciso.
. -
.hide.
User deleted
Ottima guida, grazie 
.
