martedì 21 giugno 2011

CSS III Lezione: il testo

Lezione 3 : i CSS

Vediamo alcune proprietà per formattare il testo:

Per allineare il testo useremo:

text-align : center; \* testo al centro*\
text-align : left; \* testo a sinistra *\
text-align : right; \* testo a destra *\
text-align : justify; \* testo giustificato *\

Il grassetto e il corsivo del nostro testo sarà applicato con:

font-style: italic \* se vogliamo scrivere il testo in corsivo*\

a font-style è possibile associare:

italic
normal
oblique
inherit

font-weight: bold \* se vogliamo scrivere testo in grassetto *\

Le proprietà di font-weigth sono:

normal
bold
bolder
lighter
inherit

Per il testo sottolineato:

text-decoration: underline; \*testo sottolineato*\

Le proprietà di text-decoration sono:

overline (linea sopra il testo)
underline (sottolineato)
line-through (sbarrato)
blink (lampeggiante -non IE)
none (nessuno)

Per decidere di quanto il testo deve rientrare:

text-indent: 10px

text-indent: 10%

Per lo spazio tra i caratteri:

letter-spacing: 6px;

Per indicare la famiglia di font che il browser utilizzerà per la pagina bisogna utilizzare il tag:

font-family: Arial, verdana, Sans-serif;

La dimensione del font:

font-size: 30px;
font-size: 30pt;
font-size: 30%;
font-size: 8em;

Cosa cambia tra le misure? Il pixel è il formato video, mentre il point il formato di stampa, l'em e la percentuale sono misure relative (a differenza delle prime due che sono misure assolute), ad esempio se l'em è 1, e abbiamo dichiarato il font base a 12 px, il font con l'em sarà del 150% in più ovvero di 18 px, la percentuale è simile all'em.

I tag font possono essere raggruppati:

         p {
                
                font-weight: bold;
                font-size: 18px;
                font-family: Verdana, Arial,Sans-serif;
      font-style: italic; 

        }

Può essere riscritta come:

p {

font:bold, small-caps,italic, 18px ,Arial;

}

Con l'ordine:

font-weigth, font-variant (questo attributo ha solo due varianti small-caps, che trasforma tutte le lettere maiuscole in una dimensione minore come fossero lettere minuscole, e normal), font-style, font-size, font-family.

lunedì 20 giugno 2011

CSS: II Lezione La sintassi

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:

Primi esercizi con Css

Questo è il titolo della pagina

Primo elemento
Secondo elemento

Documento creato da:

Firma