Fogli di stile definisci l'aspetto di un elemento di una pagina web agganciandoti agli attributi che applichi a quell'elemento. Questi attributi possono essere un ID o una classe e, come tutti gli attributi, aggiungono informazioni utili agli elementi a cui sono collegati.
A seconda dell'attributo che aggiungi a un elemento, puoi scrivere un selettore CSS per applicare il stili visivi necessari per ottenere l'aspetto grafico di quell'elemento e del sito web nel complesso.
Mentre gli ID o le classi funzionano allo scopo di agganciarli con le regole CSS, il web design moderno i metodi favoriscono le classi rispetto agli ID, in parte, perché sono meno specifici e più facili da usare in generale.
Una o più classi in CSS?
Nella maggior parte dei casi, assegni un singolo attributo di classe a un elemento, ma in realtà non sei limitato a una sola classe come sei con gli ID. Mentre un elemento può avere un solo attributo ID, puoi dare a un elemento diverse classi e, in alcuni casi, farlo renderà la tua pagina più facile da modellare e molto altro flessibile.
Se devi assegnare più classi a un elemento, aggiungi le classi aggiuntive e separale semplicemente con uno spazio nel tuo attributo.
Ad esempio, questo paragrafo ha tre classi:
Questo sarebbe il testo del paragrafo
Questo imposta le seguenti tre classi sul tag di paragrafo:
- citazione
- In primo piano
- Sinistra
Notare gli spazi tra ciascuno di questi valori di classe. Quegli spazi sono ciò che li configura come classi diverse e individuali. Questo è anche il motivo per cui i nomi delle classi non possono contenere spazi perché così facendo li imposterebbero come classi separate.
Una volta che hai i valori della tua classe in HTML, puoi quindi assegnarli come classi nel tuo CSS e applicare gli stili che desideri aggiungere. Per esempio.
.pullquote {... }
.In primo piano {... }
p.sinistra {... }
In questi esempi, le dichiarazioni CSS e le coppie di valori appaiono all'interno delle parentesi graffe, che è il modo in cui quegli stili verrebbero applicati al selettore appropriato.
Se tu imposta una classe su un elemento specifico (per esempio, p.sinistra), puoi ancora usarlo come parte di un elenco di classi; tuttavia, tieni presente che interesserà solo quegli elementi che sono specificati nel CSS. In altre parole, il p.sinistra lo stile si applicherà solo ai paragrafi con questa classe poiché il tuo selettore in realtà sta dicendo di applicarlo a "paragrafi con un valore di classe di sinistra," Al contrario, gli altri due selettori nell'esempio non specificano un determinato elemento, quindi si applicherebbero a qualsiasi elemento che utilizza quei valori di classe.
Classi multiple, semantica e JavaScript
Un altro vantaggio dell'utilizzo di più classi è che aumenta le possibilità di interattività.
Applicare nuove classi agli elementi esistenti utilizzando JavaScript senza rimuovere nessuna delle classi iniziali. Puoi anche usare le classi per definire il semantica di un elemento — aggiungere classi aggiuntive per definire cosa significa semanticamente quell'elemento. Questo approccio è come Microformati lavori.
Vantaggi di più classi
La sovrapposizione di più classi può semplificare l'aggiunta di effetti speciali agli elementi senza dover creare uno stile completamente nuovo per quell'elemento.
Ad esempio, per spostare gli elementi a sinistra oa destra, potresti scrivere due classi:
sinistra.
e.
giusto.
con appena.
galleggiante: sinistro;
e.
galleggiante: a destra;
in loro. Quindi, ogni volta che hai un elemento che devi spostare a sinistra, devi semplicemente aggiungere la classe "left" al suo elenco di classi.
C'è una linea sottile per camminare qui, tuttavia. Ricorda che gli standard web dettano la separazione tra stile e struttura. La struttura viene gestita utilizzando HTML mentre lo stile è in CSS. Se il tuo documento HTML è pieno di elementi che hanno tutti nomi di classe come "rosso" o "sinistra", che sono nomi che dettare come dovrebbero apparire gli elementi piuttosto che quello che sono, stai attraversando quella linea tra struttura e stile.
Svantaggi di più classi
Il più grande svantaggio dell'utilizzo di più classi simultanee sui tuoi elementi è che può renderli un po' ingombranti da guardare e gestire nel tempo. Può diventare difficile determinare quali stili influenzano un elemento e se eventuali script lo influenzano. Molti dei framework oggi disponibili, come Bootstrap, fanno un uso massiccio di elementi con più classi. Quel codice può sfuggire di mano e difficile da lavorare molto rapidamente se non stai attento.
Quando si utilizzano più classi, si corre anche il rischio che lo stile di una classe prevalga sullo stile di un'altra. Questa collisione può quindi rendere difficile capire perché i tuoi stili non vengono applicati anche quando sembra che dovrebbero. Rimani consapevole della specificità, anche con gli attributi applicati a quell'elemento.
Utilizzando uno strumento come gli strumenti per i webmaster in Google Chrome, puoi vedere più facilmente come le tue classi influenzano i tuoi stili ed evitare questo problema di stili e attributi in conflitto.