5. Lezione: breve cenno sullo stile
Scritto da sergio il 05/05/2009 09:36:56
Prima di preseguire nel mondo dei tag html voglio fare una breve cenno sullo stile, tanto per chiarire (ancora una volta!!) con qualche esempio cosa si intende per divisione tra contenuto e sua organizzazione o struttura e lo stile prettamente estetico con cui questo contenuto viene visualizzato dal browser.
Per applicare uno stile ad un documento html esistono diversi metodi.
Abbiamo accennato nelle precedente lezione all'attirbuto "style" in possesso da tutti i tag html.
Se, partendo dall'esempio della lezione 4, vogliamo indicare uno stile per un paragrafo possiamo utilizzare l'attributo "style" del tag "p", quindi:
Code:
<p style = "...">Paragrafo bla bla</p>
Bene, ma come valorizziamo l'attributo style? Con del codice in formato CSS che tratteremo nel corso apposito, ma che ora accenneremo brevemente.
Ad esempio, il problema classico e' quello di dare indicazioni relative al font da utilizzare.
Il gruppo di istruzioni che svolgono questo scopo appartengono proprio alla famiglia "font".
Le principali sono: "font-family", "font-size", "font-weight", "font-style", ecc.
La prima indica la "famiglia" del font, ad esempio se vogliamo un Arial o un Times New Roman, ecc. Va fatto notare che un browser riconosce solo 5 famiglie di font (Serif, ad esempio il Times New Roman; Sans-Serif, come l'Arial; Cursive, Fantasy e Monospace). Altri font sono riconosciuti solo se installati sulla macchina client (chi sta guardando il nostro sito attraverso il browser), quindi siccone noi non siamo sicuri che tutti i nostri possibili visitatori abbiano installato quel font e' meglio che non andiamo a cercare font troppo particolari e ci accontentiamo.
La seconda indica la dimensione del font che puo' essere indicata in vari modi tra cui: in pixel (px), in punti (pt) o in valore relativo rispetto agli altri testi all'interno del documento (em).
La terza indica il "peso" cioe' lo spessore del font (da un font con tratto leggero fino ad arrivare al grassetto piu' marcato).
Il quarto infine viene usato per un font in corsivo (italico in linguaggio tecnico).
Vediamo un esempio giocando con questi attributi:
Code:
<html>
<head>
</head>
<body>
<p style = "font-family: sans-serif; font-size: 10px; font-weight: bold; font-style: italic;">
Paragrafo bla bla
</p>
</body>
</html>
Come vedete la sintassi di base prevede l'attributo seguito da due punti ( : ) e il valore senza alcuna parentesi e al termine il punto e vingola ( ; ) a separare l'attributo successivo.
Non voglio andare oltre nella trattazione del CSS, ci sono molteplici attributi e valori utilizzabili per sbizzarirsi, ma tratteremo questo argomento nel corso sui CSS.
Prima di chiudere la lezione, invece, vi indichero' quali sono gli altri metodi (migliori di questo) per assegnare uno stile ad un documento html.
Un secondo modo e' quello di utilizzare il tag <style></style> invece dell'attributo style dei singoli tags.
All'interno della <head> del documento (preferibilmente) viene descritto lo stile da assegnare ai singoli tags, vediamo come cambierebbe l'esempio precedente:
Code:
<html>
<head>
<style>
p {
font-family: sans-serif;
font-size: 10px;
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>
<p>Paragrafo bla bla</p>
</body>
</html>
E' decisamente piu' leggibile. All'interno del tag <style> abbiamo definito il stile per il tag "p" e abbiamo utilizzato le parentesi graffe per racchiudere le definizione dello stile (identica a quella usata all'interno dell'attributo "style" del caso precedente).
La differenza? C'e': nel caso precendente abbiamo descritto uno stile solo per QUEL tag "p", cioe' per quel paragrafo, avessimo creato un altro paragrafo avremmo dovuto descrivere di nuovo lo stile.
Qui invece abbiamo definito uno stile per TUTTI i paragrafi della pagina. Ci sono modi per andare piu' in profondita', cioe' prevedere comunque comportamenti diversi per paragrafi diversi, ad esempio definendo delle "classi", ma vedremo queste cose nel corso sui CSS.
Ultimo sistema per assegnare uno stile ad un documento html (e il piu' usato) e' quello di descrivere lo stile in un file separato salvato con estensione ".css". Questo file usera' la stessa identica sintassi che abbiamo visto nell'esempio precedente dentro al tag <style>.
Quindi il nostro "esempio.css" sara':
Code:
p {
font-family: sans-serif;
font-size: 10px;
font-weight: bold;
font-style: italic;
}
Mentre nel documento html dovremo inserire il riferimento a questo file:
Code:
<html>
<head>
<link rel="stylesheet" class="text/css" href="esempio.css">
</head>
<body>
<p>Paragrafo bla bla</p>
</body>
</head>
Sempre all'interno della <head> creiamo un "link" (legame) con uno "stylesheet" (foglio di stile), un file di tipo "text/css", cioe' file di testo con codici "css" all'interno, e nell'attributo "href" indichiamo la posizione e il nome del nostro file (nell'esempio sta nella stessa cartella del documento html).
Per essere stato un "breve cenno" credo di avervi confuso le idee per benino, dalla prossima lezione torniamo all'html esplorando i vari tags che definiscolo le strutture logiche utilizzabili all'interno di un documento web.
Alla prossima!
Ultimo aggiornamento 11/01/2020 10:22:56