|
CSS Proprietà dei font
Attraverso i fogli di stile si possono ridefinire gli Head
Fonts (H1, H2, ecc.). Questa rappresenta una delle più
semplici ma utili soluzioni offerte dai CSS per
ridefinire apiacimento come gli heads saranno
visualizzati. Potrai stabilire un nuovo tipo di
carattere, colore, colore di sfondo e altri attributi
che per default sono Bold Times. Qui troverai come fare.
Puoi, al solito decidere se includere il codice
direttamente nelle tue pagine web o se costruire un file
.css esterno ed includerlo attravero l'apposito comando:
<LINK TYPE="text/css" HREF="file_di_stile.css"
REL=stylesheet
TITLE="mystylesheet">
Includi nel file esterno il codice di questo tipo,
altrimenti se lo inserirai direttamente nelle pagine
devi mettere incima ed infondo i tag <STYLE> e
</STYLE>.
H1 { font-family: verdana,arial,sans-serif;
color: #000000;
font-size: 16pt;
font-weight: normal;
background-color: #FFFF99;
text-decoration: underline }
H2 { font-family: tahoma,arial,sans-serif;
color: #003366;
font-size: 12pt;
font-weight: heavy;
text-decoration: none; }
un'altra utile caratteristica è quella di poter definire i
collegamenti non sottolineati. Questo si può fare in due
modi o introducendo il questo codice in testa alla
pagina:
A { text-decoration: none; }
Oppure inserendo nel singolo collegamento lo stile di
rappresentazione come nel seguente esempio:
<a href="file.html" style="text-decoration : none">A link
without
underline</a>
Altro attributo da non sottovalutare è il poter definire
nuovi attributi al testo al passaggio del mouse su di
esso, definito HOVER TEXT e lo si fa nel seguente modo:
A { color: blue;
font-family: verdana,arial,sans-serif;
font-weight: normal;
font-size: 8pt;
text-decoration: none; }
A:hover { color: red;
font-size: 8pt;
font-weight: normal;
text-decoration: none; }
Divertiti a giocare a mischiare gli attributi, e scopri
tutti i suoi particolari, e non dimenticarti di provare
i tuoi lavori su entrambe i Browser (IE e NS) prima di
pubblicarli!
Caratteri non
default
Se vuoi che in alcune parti delle tue pagine web i
caratteri di default usati nel resto della pagina siano
sostituiti con altri senza dover ogni volta mettere mano
alla singola formattazione del testo, puoi usare i CSS.
Specialmente se vuoi che i caratteri siano diversi in
aree ben specifiche, come nelle tabelle.
La via più facile è quella di includere nella testa del
tuo codice della singola pagina web (ossia nell'area
marcata dal Tag HEAD) la definizione dello stile della
pagina. Questo è un esempio nel quale viene definito lo
stile per il carattere di face Verdana, grandezza 12px
(circa "2" in HTML), colore Black (nero), bold
(grassetto) e non sottolineato (non-underlined). Qui
assoceremo questo stile al tag "DIV", ma potremmo
benissimo usarne uno qualsiasi.
<html>
<head>
<title>Titolo della pagina</title>
<style>
DIV { color: black;
font-family: verdana,arial,sans-serif;
font-weight: bold;
font-size: 12px;
text-decoration: none; }
</style>
</head>
<body>
<div>Cantami o diva del pelide Achille...</div>
</body>
</html>
Potrai benissimo vedere la differenza dal testo racchiuso
fra i tag "DIV" e l'altro fuori, ti consigliamo prima di
pubblicare i tuoi lavori di controllare sempre la
visualizzazione sia su IE che su Netscape.
Qui troverai la tabella di conversione fra la grandezza in
pixel dei caratteri e la sua grandezza in HTML:
| HTML |
CSS (px) |
| 2 |
12 |
| 3 |
15 |
| 4 |
18 |
| 5 |
22 |
| 6 |
30 |
| 7 |
45 |
|
