Come descritto nell’ tutorial precedente , la sintassi di base del css vede coinvolti i seguenti elementi principali:
- selector
- property
- value
Il selector , rappresenta l’elemento html a cui si riferisce una regola css, quindi identifica e seleziona gli elementi al quale applicare uno stile.
In questo articolo vedremo le tipologie di selector più utilizzate:
SELECTOR DI TIPO TAG
Seleziona gli elementi di cui modificare il layout tramite il nome del tag
Data la seguente pagina html:
<!doctype html>
<html lang = "it">
<head>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<h1> Titolo di esempio </h1>
</body>
</html>Dato il seguente foglio di stile:
h1 {
color: blue;
background-color: pink;
}
Avremo il seguente Output
SELECTOR DI TIPO ID
Il selettore Id ,utilizza l’ attributo id di uno specifico elemento , quindi a differenza del selettore tag , che agisce sul layout del tag in generale, il selettore id agisce su un unico elemento.
Data la seguente pagina html:
<!doctype html>
<html lang = "it">
<head>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<h1> Titolo di esempio </h1>
<h1 id="h_uno">paragrafo con id univoco </h1>
<p>paragrafo generico</p>
<p id="p_uno">paragrafo con id univoco </p>
</body>
</html>Dato il seguente foglio di stile:
h1 {
color: blue;
background-color: pink;
}
#h_uno {
background-color: yellow;
}
#p_uno {
background-color:green;
}Avremo il seguente risultato
SELETTORE DI TIPO CLASS
Come il selettore Id , il selettore dell’ attributo class , applica il layout definito nel foglio di stile ad una specifica classe.
Data la seguente pagina html:
<!doctype html>
<html lang = "it">
<head>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<h1 class="rosa"> Titolo di esempio </h1>
<p class="giallo"> Sono un paragrafo </p>
</body>
</html>Dato il seguente foglio di stile:
.rosa {
text-align: center;
color: pink;
}
.giallo{
background-color: yellow;
}Avremo il seguente risultato:
SELETTORE UNIVERSALE
E’ possibile applicare lo stile desiderato all’ intero documento tramite il selettore universale (*)
Data la seguente pagina html:
<!doctype html>
<html lang = "it">
<head>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
<h1> Titolo di esempio </h1>
<h1> Titolo di esempio </h1>
<p> Sono un paragrafo </p>
</body>
</html>Dato il seguente foglio di stile:
* {
text-align: center;
color: pink;
}Avremo il seguente risultato:
