Sintassi CSS

In questo tutorial, impareremo come definire regole CSS in una tabella di stili, attraverso le proprietà CSS è possibile impostare lo stile degli elementi HTML. Diversi elementi HTML possono avere proprietà CSS diverse che possono essere impostate. Le proprietà CSS possono essere organizzate in regole CSS. Le regole CSS combinano un insieme di proprietà CSS e applicano tutte le proprietà all'elemento HTML che corrisponde alla regola CSS.

Capire la sintassi CSS

La tabella di stili CSS è composta da un insieme di regole, che vengono interpretate dal browser web e applicate agli elementi corrispondenti nel documento, ad esempio paragrafi, titoli, ecc.

Le regole CSS hanno due parti principali, un selettore e una o più dichiarazioni:

Il selettore specifica quale elemento della pagina HTML è applicabile alla regola CSS.

mentre le dichiarazioni all'interno del blocco determinano la formattazione degli elementi sul sito web. Ogni dichiarazione contiene un attributo e un valore, questi valori sono separati da due punti (:) separato da un punto e virgola (;) con chiusura e il gruppo di dichiarazioni è racchiuso tra parentesi graffe{}.

Questa proprietà è l'attributo di stile che si desidera modificare. Possono essere il tipo di carattere, il colore, lo sfondo, ecc. Ogni proprietà ha un valore, ad esempio il valore della proprietà color può essere blueo#0000FFetc.

h1 {color:blue;text-align:center;}

Per rendere CSS più leggibile, è possibile inserire una dichiarazione su ogni riga, come mostrato di seguito:

h1　{
　　　　color:　blue;
　　　　text-align:　center;
　　　}

Nell'esempio soprah1è un selettore,coloretext-alignè una proprietà CSS, mentre la datablue（Il colore del testo all'interno dell'etichetta h1 è blu）ecenter（Testo centrato all'interno dell'etichetta h1）sono i valori corrispondenti a queste proprietà.

Scrivi commenti CSS

Di solito si aggiungono commenti per rendere il codice sorgente più facile da capire. Possono aiutare altri sviluppatori (o te stesso in futuro quando editi il codice sorgente) a capire cosa stai cercando di fare con CSS. I commenti sono importanti per i programmatori, ma vengono ignorati dai browser.

I commenti CSS iniziano con/*，per terminare*/，come mostrato nell'esempio di seguito:

/*　This　is　a　CSS　comment　*/
h1　{
　　　　color:　blue;
　　　　text-align:　center;
}
/*　This　is　a　multi-line　CSS　comment　that　spans　across　more　than　one　line　*/
p　{
　　　　font-size:　18px;
　　　　text-transform:　uppercase;
}

Puoi anche commentare parte del codice CSS per la debug, come segue:

h1　{
　　　　color:　blue;
　　　　text-align:　center;}
/*p　{
　　　　font-size:　18px;
　　　　text-transform:　uppercase;}
*/

Distinzione tra maiuscole e minuscole in CSS

Nonostante i nomi delle proprietà CSS e molti valori delle proprietà non siano distinguibili per maiuscole e minuscole, i selettori CSS sono distinguibili per maiuscole e minuscole, ad esempio:.maincontente.mainContentSono due classi di selettore di classe diverse, distinguenti per maiuscole e minuscole.

Pertanto, per motivi di sicurezza, dovresti presupporre che tutti i componenti delle regole CSS siano distinguibili per maiuscole e minuscole.

InCapitolo successivoIn questo corso, imparerai vari tipi di selettori CSS.