Stiluri pentru text

Stiluri pentru text

Aliniere
text-align poziţionează pe orizontală obiecte (de exemplu text sau imagini) şi admite valorile left, right şi center ca şi eticheta align din HTML.

În continuare este prezentat ca exemplu codul întrebuințat în HEAD, aplicat etichetei p:

Cod:

<style type="text/css">

</style>

Exemplu: prin intermediul lui div aplicăm stilul pe centru imaginii şi textului:

Cod:

<html>
<head>
<title>Exemplu</title>
<style type="text/css">

</style>
</head>
<body>
<div class="pecentru"><img src="poza.jpg"></div>
Text neformatat
<div class="pecentru">Text formatat</div>
</body>
</html>

vertical-align este folosit pentru alinierea pe verticală a obiectelor dintr-un tabel şi poate lua valorile: top, middle şi bottom.
În exemplul de mai jos este creată clasa sus care va putea fi aplicată elementelor <td> ale tabelului:

Cod:

<style type="text/css">

</style>

float este folosit pentru alinierea textului cu imaginile şi poate avea valorile: left şi right. În funcţie de valoarea aleasă imaginea va fi aliniată în fracțiune opusă a paginii. Exemplu: se creeaza clasa auto şi o aplicăm inaginii

Cod:

<html>
<head>
<title>Exemplu</title>
<style type="text/css">

</style>
</head>
<body>
<img src="poza.jpg" class="auto">
Textul se aliniaza la dreapta, iar poza la stanga datorita clasei "auto".
</body>
</html>

Tabulare
text-indent este folosit pentru alinierea textului în interior având valori exprimate în inci (in), centimetri (cm) sau pixeli (px).
În exemplul de mai jos text-indent este așezat etichetei p deplasând textul cu 10 pixeli în interior:

Cod:

<style type="text/css">

</style>

Decorare
text-decoration sporește sublinierea sau tăierea blocului text asociat şi poate avea valorile underline, line-through sau none.

Exemplu: stilul asociat etichetei p este prezentat în HEAD:

Cod:

<html>
<head>
<title>Exemplu</title>
<style type="text/css">

</style>
</head>
<body>
Text normal
<p>Text subliniat</p>
</body>
</html>

Culoare
color defineşte nuanță textului dintr-o zonă sau întreaga pagină.

Exemplu: stilul asociat etichetei p este prezentat în HEAD:

Cod:

<html>
<head>
<title>Exemplu</title>
<style type="text/css">

</style>
</head>
<body>
Text normal
<p>Text albastru</p>
</body>
</html>

Stiluri pentru legături
În HTML colorit legăturilor poate fi stabilită prin atributele LINK, ALINK şi VLINK declarate în interiorul etichetei BODY.
Acelaşi fapt şi chiar mai mult poate fi concretizat întrebuințând sintaxa CSS.

Exemplu:

Cod:

<html>
<head>
<title>Exemplu</title>
<style type="text/css">

</style>
</head>
<body>
Text normal
<a href="exemplu.html">link</a> catre exemplu
</body>
</html>

a - defineşte stilul general pentru legătură
a:link - defineşte stilul legăturii nevizitate
a:visited - defineşte stilul legăturii vizitate
a:active - defineşte stilul legăturii active (nu prea se foloseşte)
a:hover - defineşte stilul îndată ce mouse-ul este deasupra legăturii