Esempio di commento CSS - Come commentare CSS

I commenti vengono utilizzati nei CSS per spiegare un blocco di codice o per apportare modifiche temporanee durante lo sviluppo. Il codice commentato non viene eseguito.

Sia i commenti su una sola riga che su più righe nei CSS iniziano /*e finiscono con */, e puoi aggiungere tutti i commenti che desideri al tuo foglio di stile. Per 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:

/* *** * SECTION FOR H2 STYLE *** * A paragraph with information * that would be useful for someone * who didn't write the code. * The asterisks around the paragraph * help make it more readable. *** */

Organizzazione CSS con commenti

In progetti più grandi, le dimensioni dei file CSS possono aumentare rapidamente e diventare difficili da mantenere. Può essere utile organizzare il CSS in sezioni distinte con un sommario per facilitare la ricerca di determinate regole in futuro:

/* * CSS TABLE OF CONTENTS * * 1.0 - Reset * 2.0 - Fonts * 3.0 - Globals * 4.0 - Color Palette * 5.0 - Header * 6.0 - Body * 6.1 - Sliders * 6.2 - Imagery * 7.0 - Footer */ /*** 1.0 - Reset ***/ /*** 2.0 - Fonts ***/ /*** 3.0 - Globals ***/ /*** 4.0 - Color Palette ***/ /*** 5.0 - Header ***/ /*** 6.0 - Body ***/ h2 { font-size: 1.2em; font-family: "Ubuntu", serif; text-transform: uppercase; } /*** 5.1 - Sliders ***/ /*** 5.2 - Imagery ***/ /*** 7.0 - Footer ***/

Qualcosa in più sui CSS: sintassi CSS e selettori

Quando parliamo della sintassi dei CSS, parliamo di come sono disposte le cose. Ci sono regole su cosa va dove, sia così puoi scrivere CSS in modo coerente e un programma (come un browser) può interpretarlo e applicarlo correttamente alla pagina.

Esistono due modi principali per scrivere CSS.

CSS in linea

Specifiche sulla specificità CSS: trucchi CSS

Il CSS in linea applica lo stile a un singolo elemento e ai suoi figli, finché non si incontra un altro stile che sostituisce il primo.

Per applicare CSS in linea, aggiungi l'attributo "style" a un elemento HTML che desideri modificare. All'interno delle virgolette, includi un elenco delimitato da punto 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 un colore del testo rosso. La parola "Tre" ha un nuovo stile che sostituisce il primo e avrà un colore di sfondo verde e un colore del testo ciano. Nell'esempio, applichiamo stili ai tag, ma puoi applicare uno stile a qualsiasi elemento HTML.

 One Two Three 

CSS interno

Sebbene scrivere uno stile in linea sia un modo rapido per modificare un singolo elemento, esiste 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 ed è incorporato nel tag.

Ecco un esempio che ha un effetto simile all'esempio "inline" sopra, tranne per il fatto che il CSS è stato estratto nella propria area. Le parole "Uno" e "Due" corrisponderanno al divselettore e saranno testo rosso su sfondo giallo. Le parole "Tre" e "Quattro" corrisponderanno anche al divselettore, ma corrispondono anche al .nested_divselettore che si applica a qualsiasi elemento HTML che fa riferimento a quella classe. Questo selettore più specifico sostituisce il primo e finiscono per apparire come testo ciano su sfondo verde.

 div { color: red; background: yellow; } .nested_div { color: cyan; background: green; } One Two Three Four 

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 che è figlio di un altro elemento.

Ecco un esempio in cui stiamo specificando uno stile che dovrebbe essere applicato solo agli divelementi che sono figli diretti di altri divelementi. Il risultato è che "Due" e "Tre" appariranno come testo rosso su sfondo giallo, ma "Uno" e "Quattro" rimarranno inalterati (e molto probabilmente il testo nero su sfondo bianco).

 div > div { color: red; background: yellow; } One Two Three Four 

CSS esterno

Tutto lo stile ha il proprio documento che è collegato nel tag. L'estensione del file collegato è.css