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 partea 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 deținând valori exprimate în inci (in), centimetri (cm) sau pixeli (px).
În exemplul de mai jos text-indent este fixat etichetei p deplasând textul cu 10 pixeli în interior:

Cod:

<style type="text/css">

</style>

Decorare
text-decoration adaugă 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 culoarea 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 nuanță 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 conceput folosind 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