CSS: Lezione 2 La sintassi
Nei css, esterni o interni alla classe, abbiamo visto che è possibile ridefinire le caratteristiche di alcuni tag html (nella lezione precedente abbiamo modificato il tag h1), ma possiamo anche ridefinire altre classi ed apllicarle ad un contenitore.
Ad esempio, se nell'<head> scriviamo:
<style type=" text/css">
.miaclasse {
font-family: Verdana, Arial,Sans-serif;
color: red;
font-size: 11px;
text-align: center;
}
</style>
E nel body scriviamo:
<p class= “miaclasse”> Questo testo è arial e in rosso e allineato al centro </p>
Attenzione: la classe è preceduta da un punto e può essere riutilizzata per più contenitori.
Invece se scriviamo:
<style type ="text/css">
#mioid {
font-family: Verdana, Arial,Sans-serif;
color: red;
font-size: 11px;
text-align: center;
}
</style>
Abbiamo creato un id. Qual'è la differenza con la classe, direte voi?
L'id può essere applicato ad un solo elemento, la classe a più di uno. Solitamente questo è utilizzato col tag <div>, ma nessuno vieta di utilizzarlo con qualche altro contenitore htm.
Per richiamarlo all'interno del body si scrive:
<div id= “mioid”> Questo contenitore è rosso, in Arial e allineato al centro </div>
Facciamo un esempio:
<html>
<head>
<title> Primi esercizi con Css</title>
<style type="text/css">
.miaclasse {
font-family: Verdana, Arial,Sans-serif;
color: red;
font-size: 16px;
text-align: center;
}
#mioid {
font-family: Verdana, Arial,Sans-serif;
color: #990066;
font-size: 11px;
text-align: rigth;
}
H1 {
color: #009900;
font-size: 22px;
text-align: center;
font-style: italic;
}
</style>
</head>
<body>
<H1> Questo è il titolo della pagina</H1>
<div id = "mioid">
<ul>
<li> Primo elemento </li>
<li> Secondo elemento </li>
</ul>
</div>
<div class ="miaclasse"> Documento creato da: </div>
<p class = "miaclasse"> Firma</p>
</body>
</html>
Il risultato:
Questo è il titolo della pagina
- Primo elemento
- Secondo elemento
Documento creato da:
Firma
Nessun commento:
Posta un commento