|
Quando si vuole utilizzare codice css in una pagina Web ci sono diversi modi per farlo. il modo più semplice è quello di inserire codice
css direttamente in ogni Tag che si vuole modificare, infatti ogni Tag Html ha un attributo style che serve per l'appunto ad inserire codice
css. I restandi
modi necessitano dei selettori che esamineremo più avanti.
Dunque, ho detto che il primo metodo consente di inserire codice css direttamente all'interno di ogni Tag inserendolo all'interno del
rispettivo attributo style, vediamo quì sotto un esempio che all'interno del Tag <p></p> imposta la dimensione del testo a 25px ed il colore in rosso.
<p style="font-size: 40px; color: red">Testo di 40 pixel in colore rosso</p>
Come si può notare si scrive l'attributo css seguito da due punti e poi il rispettivo valore, se si desidera inserire più attributi
bisogna separarli con un punto e virgola, per l'ultimo attributo non è necessario, ma se si inserisce funziona uguale. Quì sotto vediamo il risultato.
Testo di 40 pixel in colore rosso
Selettore Universale
Il secondo metodo consente di inserire tutto il codice css all'interno del Tag <style></style> inserito all'interno del tag
<head></head>, ma questa volta è necessario usare i selettori. Il primo selettore si chiama selettore universale ed è rappresentato da un
asterisco. Questo selettore seleziona tutti i Tag all'interno della pagina Web, per questo motivo non risulta molto utile, però ad esempio se si
desidera impostare un colore di testo per tutti i Tag della pagina allora può essere utile.
Vediamo un esempio.
<html>
<head>
<title>selettore universale</title>
<style type="text/css">
*{color: red}
</style>
</head>
<body>
<p>
</body>
</html>
Selettore di tipo
Il selettore di tipo, anche detto selettore di elementi è così chiamato perchè è costituito dal nome di ogni singolo Tag Html. E'
possibile impostare più selettori di tipo separandoli con una virgola.
<html>
<head>
<title>selettore di tipo</title>
<style type="text/css">
h1{
border:1px
solid red;
}
table, div, h1, p{
margin: 5px;
border: 1px white solid;
margin-left:5px;
}
</style>
</head>
<body>
<p>Selettore
di tipo</p>
</body>
</html>
Selettore di classe
I selettori di classe sono particolari tipi che si possono creare indicando un punto seguito da un nome a piacere che si vuole dare al
selettore, segue una parentesi graffa aperta poi i vari nomi di attributo seguito da un due punti ed il valore quindi un punto e virgola, per assegnarli a qualsiasi Tag si voglia, basta inserire il loro nome (privo del punto iniziale) all'interno dell'attributo
class che ogni Tag
possiede. Anche con questo tipo come nel tipo precedente è possibile inserire nella dichiarazione più nomi di classi separati da una virgola, inoltre è anche
possibile inserire più nomi di classe all'interno dell'attributo class del Tag separati da uno spazio.
<html>
<head>
<title>selettore di classe</title>
<style type="text/css">
.titolo{
color: red;
font-size: 40px;
margin: 40px;
}
.testo{
color: black;
font-size: 20px;
margin-left: 40px;
}
</style>
</head>
<body>
<p
class="titolo">Titolo pagina</p>
<p class="testo">
Contenuto della pagina
</p>
</body>
</html>
Selettore di id
I selettori di id invece che iniziare con un punto iniziano con un simbolo di cancelletto (#) seguito da un nome a piacere come
nel selettore di classe, ma per applicarli ad un qualsiasi Tag vanno inseriti nell'attributo id che ogni Tag Html possiede senza il simbolo iniziale di
cancelletto. Bisogna ricordare che il
nome che si assegna all'attributo id di qualsiasi Tag è univoco (cioè può esisterne solo uno all'interno della pagina web).
<html>
<head>
<title>selettore di id</title>
<style type="text/css">
#titolo{
color: red;
font-size: 40px;
margin: 40px;
}
#testo{
color: black;
font-size: 20px;
margin-left: 40px;
}
</style>
</head>
<body>
<p
id="titolo">Titolo pagina</p>
<p id="testo">
Contenuto della pagina
</p>
</body>
</html>
E' anche possibile inserire tutto il codice css all'interno di un documento separato, il nome del documento che avrà estensione
.css và poi inserito nell'attributo href del Tag <link> all'interno del Tag <head></head> nel modo che possiamo vedere quì
sotto.
<html>
<head>
<title>titolo</title>
<link href="titoli.css" rel="stylesheet" type="text/css">
</head>
<body>
.
.
.
</body>
</html>
Il documento che conterrà il codice css non ha una struttura di base come ad esempio un documento html, conterrà semplicemente
solo i blocchi di codice css come vediamo quì sotto.
#titolo{
color: red;
font-size: 40px;
margin: 40px;
}
#testo{
color: black;
font-size: 20px;
margin-left: 40px;
}
|
