I commenti sono usati in CSS per spiegare un blocco di codice o per apportare modifiche temporanee durante lo sviluppo. Il codice commentato non viene eseguito.
Sia i commenti a riga singola che a riga multipla in CSS iniziano con/* e terminano con*/, e puoi aggiungere tutti i commenti al tuo foglio di stile che vuoi. Ad esempio:
/* This is a single line comment*/.group:after { content: ""; display: table; clear: both;}/* This is a multi-line comment*/Puoi anche rendere i tuoi commenti più leggibili stilizzandoli:
In progetti più grandi, i file CSS possono crescere rapidamente di dimensioni e diventare difficili da mantenere., Può essere utile organizzare il tuo CSS in sezioni distinte con un sommario per rendere più facile trovare alcune regole in futuro:
Un po ‘ di più sui CSS: Sintassi e selettori CSS
Quando parliamo della sintassi dei CSS, stiamo parlando di come le cose sono disposte. Ci sono regole su cosa va dove, sia in modo da poter scrivere CSS in modo coerente che un programma (come un browser) può interpretarlo e applicarlo correttamente alla pagina.
Ci sono due modi principali per scrivere CSS.,
Inline CSS
Specifiche sulla specificità CSS: CSS Tricks
Inline CSS applica lo stile a un singolo elemento e ai suoi figli, fino a quando non si incontra un altro stile che sovrascrive il primo.
Per applicare CSS in linea, aggiungi l’attributo “style” a un elemento HTML che desideri modificare. Tra virgolette, includere un elenco delimitato da punti e virgola di coppie chiave/valore (ciascuna a sua volta separata da due punti) che indica gli stili da impostare.
Ecco un esempio di CSS in linea. Le parole ” Uno “e” Due” avranno un colore di sfondo giallo e il colore del testo di rosso., La parola ” Tre ” ha un nuovo stile che sostituisce il primo e avrà un colore di sfondo verde e il colore del testo del ciano. Nell’esempio, stiamo applicando gli stili ai tag<div>, ma puoi applicare uno stile a qualsiasi elemento HTML.
<div style="color:red; background:yellow"> One <div> Two </div> <div style="color:cyan; background:green"> Three </div></div>CSS interno
Mentre scrivere uno stile in linea è un modo rapido per cambiare un singolo elemento, c’è un modo più efficiente per applicare lo stesso stile a molti elementi della pagina contemporaneamente.,
Il CSS interno ha i suoi stili specificati nel tag <style> ed è incorporato nel tag <head>.
Ecco un esempio che ha un effetto simile all’esempio “inline” sopra, tranne che il CSS è stato estratto nella propria area. Le parole ” Uno “e” Due”corrisponderanno al selettore div e saranno testo rosso su sfondo giallo., Le parole “Tre” e”Quattro”corrisponderanno anche al selettore div, ma corrispondono anche al selettore .nested_div che si applica a qualsiasi elemento HTML che fa riferimento a quella classe. Questo selettore più specifico sovrascrive il primo e finiscono per apparire come testo ciano su uno sfondo verde.
I selettori mostrati sopra sono estremamente semplici, ma possono diventare piuttosto complessi. Ad esempio, è possibile applicare gli stili solo agli elementi nidificati; cioè, un elemento figlio di un altro elemento.,
Ecco un esempio in cui stiamo specificando uno stile che dovrebbe essere applicato solo adiv elementi che sono un figlio diretto di altridiv elementi. Il risultato è che “Due” e “Tre” appariranno come testo rosso su uno sfondo giallo, ma “Uno” e “Quattro” rimarranno inalterati (e molto probabilmente testo nero su uno sfondo bianco).
<style type="text/css"> div > div { color: red; background: yellow; }</style><div> One <div> Two </div> <div> Three </div></div><div> Four</div>CSS esterno
Tutto lo stile ha un proprio documento che è collegato nel tag<head>. L’estensione del file collegato è .css