23 marzo 2009

Proprietà CSS per Elaborare il Testo

Il testo, in una pagina web, e l'elemento che determina più di ogni altro componente, la bellezza e la particolarità(tra cui la leggibilità in primis)della stessa.

I Cascading Style Sheets, hanno introdotto proprietà per il tag font dalle potenzialità molto vicine a quelli della carta stampata. Ecco cosa possiamo ottenere con le sole proprietà letter-spacing, e vertical-align, su di un semplice font della famiglia sans-serif.

Il corpo del documento(body) e impostato con una grandezza del font a 1.2em, una famiglia di font sans-serif, e la spaziatura(letter-spacing) tra le lettere a normale. Mentre h1, ha un valore di spaziatura tra le lettere, negativo di -5px, il secondo h2 ha un valore di spaziatura di 1.25em.

Sub e sup(subscript, e superscript), sub viene allineato verticalmente in modo negativo al -100%, mentre sup in modo verticale al 100% della possibilità. Chiudono le due classi impostate cosi, .prima-classe con una spaziatura tra le lettere di 3pixel, e .seconda-classe con una spaziatura a normale(normal;).


Questo e l'esempio completo del markup e del Css.

<html>

<head>

<title>letter-spacing, vertical-align</title>

<style type="text/css">

body {

font-size: 1.2em;
font-family: arial, helvetica, sans-serif;
letter-spacing: normal;
}

h1 {

letter-spacing: -5px;
}

h2 {

letter-spacing: 1.25em;
}

sub {

vertical-align: -100%;
}

sup {

vertical-align: 100%;
}

.prima-classe {

letter-spacing: 3px;
}

.seconda-classe {

letter-spacing: normal;
}


</style>

</head>

<body>

<div id="contenitore">

<h1> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h1>

<p class="prima-classe"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<h2> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h2>

<h3>Lorem ipsum dolor <sup>sit amet,</sup> consectetuer <sub>adipiscing elit.</sub><br />

<span class="seconda-classe"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span></h3>
</div>

</body>
</html>



Nessun commento: