Stiluri de text in CSS

Threaded Mode | Linear Mode

Stiluri de text in CSS

Author

Message

FrozenDesigns
Designer incepator

Posts: 220
Group: Registered
Joined: Feb 2008
Status: Offline
Reputation: 0
Lei: 898.79

Post: #1

Stiluri de text in CSS

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 folosit Ã®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 avÃ¢nd valori exprimate Ã®n inci (in), centimetri (cm) sau pixeli (px).
ÃŽn exemplul de mai jos text-indent este aplicat 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 culoarea legÄƒturilor poate fi stabilitÄƒ prin atributele LINK, ALINK ÅŸi VLINK declarate Ã®n interiorul etichetei BODY.
AcelaÅŸi lucru ÅŸi chiar mai mult poate fi realizat 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 cÃ¢nd mouse-ul este deasupra legÄƒturii

My portofolio

02-15-2008 02:57 AM

« Next Oldest | Next Newest »

View a Printable Version
Send this Thread to a Friend
Subscribe to this Thread | Add Thread to Favorites

Forum Jump: