CSS - Sintassi

Un CSS comprende regole di stile che vengono interpretate dal browser e quindi applicate agli elementi corrispondenti nel documento. Una regola di stile è composta da tre parti:

  • Selector- Un selettore è un tag HTML a cui verrà applicato uno stile. Potrebbe essere qualsiasi tag come <h1> o <table> ecc.

  • Property- Una proprietà è un tipo di attributo del tag HTML. In parole povere, tutti gli attributi HTML vengono convertiti in proprietà CSS. Potrebbero essere colore , bordo ecc.

  • Value- I valori vengono assegnati alle proprietà. Ad esempio, la proprietà color può avere valore rosso o # F1F1F1 ecc.

Puoi inserire la sintassi della regola dello stile CSS come segue:

selector { property: value }

Example - È possibile definire un bordo della tabella come segue -

table{ border :1px solid #C00; }

Qui la tabella è un selettore e il bordo è una proprietà e il valore dato 1px solido # C00 è il valore di quella proprietà.

Puoi definire i selettori in vari modi semplici in base al tuo comfort. Consentitemi di inserire questi selettori uno per uno.

I selettori di tipo

Questo è lo stesso selettore che abbiamo visto sopra. Ancora una volta, un altro esempio per dare un colore a tutte le intestazioni di livello 1 -

h1 {
   color: #36CFFF; 
}

I selettori universali

Piuttosto che selezionare elementi di un tipo specifico, il selettore universale abbina semplicemente il nome di qualsiasi tipo di elemento -

* { 
   color: #000000; 
}

Questa regola rende il contenuto di ogni elemento nel nostro documento in nero.

I selettori discendenti

Supponiamo di voler applicare una regola di stile a un particolare elemento solo quando si trova all'interno di un particolare elemento. Come indicato nell'esempio seguente, la regola di stile verrà applicata all'elemento <em> solo quando si trova all'interno del tag <ul>.

ul em {
   color: #000000; 
}

I selettori di classe

È possibile definire regole di stile in base all'attributo di classe degli elementi. Tutti gli elementi che hanno quella classe verranno formattati secondo la regola definita.

.black {
   color: #000000; 
}

Questa regola rende il contenuto in nero per ogni elemento con l'attributo di classe impostato su nero nel nostro documento. Puoi renderlo un po 'più particolare. Ad esempio:

h1.black {
   color: #000000; 
}

Questa regola rende il contenuto in nero solo per gli elementi <h1> con l'attributo di classe impostato su nero .

Puoi applicare più di un selettore di classe a un dato elemento. Considera il seguente esempio:

<p class = "center bold">
   This para will be styled by the classes center and bold.
</p>

I selettori di ID

È possibile definire regole di stile in base all'attributo id degli elementi. Tutti gli elementi che hanno quell'ID verranno formattati secondo la regola definita.

#black {
   color: #000000; 
}

Questa regola rende il contenuto in nero per ogni elemento con l' attributo id impostato su nero nel nostro documento. Puoi renderlo un po 'più particolare. Ad esempio:

h1#black {
   color: #000000; 
}

Questa regola rende il contenuto in nero solo per gli elementi <h1> con l' attributo id impostato su nero .

Il vero potere dei selettori di id è quando vengono utilizzati come base per i selettori discendenti, ad esempio:

#black h2 {
   color: #000000; 
}

In questo esempio tutte le intestazioni di livello 2 verranno visualizzate in colore nero quando quelle intestazioni si troveranno nei tag con l' attributo id impostato su nero .

I selettori figlio

Hai visto i selettori discendenti. C'è un altro tipo di selettore, che è molto simile ai discendenti ma ha funzionalità diverse. Considera il seguente esempio:

body > p {
   color: #000000; 
}

Questa regola renderà tutti i paragrafi in nero se sono figli diretti dell'elemento <body>. Altri paragrafi inseriti in altri elementi come <div> o <td> non avrebbero alcun effetto su questa regola.

I selettori di attributi

Puoi anche applicare stili agli elementi HTML con attributi particolari. La regola di stile di seguito corrisponderà a tutti gli elementi di input che hanno un attributo type con un valore di testo -

input[type = "text"] {
   color: #000000; 
}

Il vantaggio di questo metodo è che l'elemento <input type = "submit" /> non viene modificato e il colore viene applicato solo ai campi di testo desiderati.

Ci sono le seguenti regole applicate al selettore di attributi.

  • p[lang]- Seleziona tutti gli elementi del paragrafo con un attributo lang .

  • p[lang="fr"]- Seleziona tutti gli elementi del paragrafo il cui attributo lang ha un valore esattamente "fr".

  • p[lang~="fr"]- Seleziona tutti gli elementi del paragrafo il cui attributo lang contiene la parola "fr".

  • p[lang|="en"]- Seleziona tutti gli elementi del paragrafo il cui attributo lang contiene valori che sono esattamente "en" o che iniziano con "en-".

Regole di stile multiple

Potrebbe essere necessario definire più regole di stile per un singolo elemento. È possibile definire queste regole per combinare più proprietà e valori corrispondenti in un unico blocco come definito nel seguente esempio:

h1 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Qui tutte le coppie di proprietà e valore sono separate da un file semicolon (;). Puoi tenerli su una o più righe. Per una migliore leggibilità, li teniamo in righe separate.

Per un po ', non preoccuparti delle proprietà menzionate nel blocco sopra. Queste proprietà verranno spiegate nei prossimi capitoli e potrai trovare dettagli completi sulle proprietà in Riferimenti CSS

Selettori di raggruppamento

Puoi applicare uno stile a molti selettori, se lo desideri. Basta separare i selettori con una virgola, come mostrato nell'esempio seguente:

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Questa regola di definizione dello stile sarà applicabile anche agli elementi h1, h2 e h3. L'ordine della lista è irrilevante. A tutti gli elementi del selettore verranno applicate le dichiarazioni corrispondenti.

Puoi combinare i vari selettori di ID insieme come mostrato di seguito:

#content, #footer, #supplement {
   position: absolute;
   left: 510px;
   width: 200px;
}