Sono Andrea Tonin dello studio Luce Digitale di Rovigo, mi occupo per lavoro di web design per compagnie e marchi internazionali. Con questo corso gratuito vorrei introdurvi alla programmazione dei fogli di stili, detti CSS.
In CSS i selettori di attributo assegnano le regole di stile ad un oggetto HTML in base al valore di un attributo.
Ad esempio vediamo il codice:
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<style type="text/css">
p[lang] {
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<p lang="it">Testo in italiano</p><br>
<p lang="eg">English Text</p><br>
<p>Nessun attributo</p>
</body>
</html>
Il risultato qui sotto:
Testo in italiano
English Text
Nessun attributo
Dal codice si evince che:
p[lang] { regola css }
Applica la regola css a tutti i tag p con attributo lang
<p lang="it">Testo in italiano</p>
Il selettore può essere più restrittivo, specificando anche il valore dell’attributo come nell’esempio sottostante:
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<style type="text/css">
p[lang="en"] {
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<p lang="it">Testo in italiano</p><br>
<p lang="en">English Text</p><br>
<p>Nessun attributo</p>
</body>
</html>
Il risultato sarà il seguente, cioè l’applicazione della regola solamente all’attributo con valore lang=”en”:
Testo in italiano
English Text
Nessun attributo
