Descriere: Stiluri pentru text
Download:
Autor: Anonim
Sursa (Link-ul oficial): Nu pot pune!
Propria parere: Nu l-am incercat!
Tutorialul:
Aliniere
text-align pozitioneaza pe orizontala obiecte (de exemplu text sau imagini) si admite valorile left, right si center ca si eticheta align din HTML.
In continuare este prezentat ca exemplu codul folosit in HEAD, aplicat etichetei p:
Cod: Selectaţi tot
<style type="text/css">
<!--
p{text-align: center;}
-->
</style> Cod: Selectaţi tot
<html>
<head>
<title>Exemplu 4_1</title>
<style type="text/css">
<!--
p{text-align: center;}
-->
</style>
</head>
<body>
<div class="pecentru"><img src="poza.jpg"></div>
Text neformatat
<div class="pecentru">Text formatat</div>
</body>
</html> In exemplul de mai jos este creat clasa sus care va putea fi aplicat elementelor <td> ale tabelului
Cod: Selectaţi tot
<style type="text/css">
<!--
.sus{vertical-align: top;}
-->
</style> Exemplu: cream clasa auto si o aplicam inaginii:
Cod: Selectaţi tot
<html>
<head>
<title>Exemplu 4_2</title>
<style type="text/css">
<!--
.auto{float: left;}
-->
</style>
</head>
<body>
<img src="poza.jpg" class="auto">
Textul se aliniaza la dreapta, iar poza la stanga datorita clasei "auto".
</body>
</html> text-indent este folosit pentru alinierea textului in interior avand valori exprimate in inci (in), centimetri (cm) sau pixeli (px).
In exemplul de mai jos text-indent este aplicat etichetei p deplasand textul cu 10 pixeli in interior
Cod: Selectaţi tot
<style type="text/css">
<!--
p{text-indent: 10px;}
-->
</style> text-decoration adauga sublinierea sau taierea blocului text asociat si poate avea valorile underline, line-through sau none.
Exemplu: stilul asociat etichetei p este prezentat in HEAD:
Cod: Selectaţi tot
<html>
<head>
<title>Exemplu 4_3</title>
<style type="text/css">
<!--
p{text-decoration: underline;}
-->
</style>
</head>
<body>
Text normal
<p>Text subliniat</p>
</body>
</html> color defineste culoarea textului dintr-o zona sau intraga pagina.
Exemplu: stilul asociat etichetei p este prezentat in HEAD:
Cod: Selectaţi tot
<html>
<head>
<title>Exemplu 4_4</title>
<style type="text/css">
<!--
p{color: #0000FF;}
-->
</style>
</head>
<body>
Text normal
<p>Text albastru</p>
</body>
</html> In HTML culoarea legaturilor poate fi stabilita prin atributele LINK, ALINK si VLINK declarate in interiorul etichetei BODY.
Acelasi lucru si chiar mai mult poate fi realizat folosind sintaxa CSS.
Exemplu:
Cod: Selectaţi tot
<html>
<head>
<title>Exemplu 4_5</title>
<style type="text/css">
<!--
a{font-family: arial; font-size: 20px;}
a:link {color: #0000FF;}
a:visited {color: #00FF00;}
a:active {color: #FF0000;}
a:hover {color: #000000;}
-->
</style>
</head>
<body>
Text normal
<a href="exemplu4_4.html">link</a> catre exemplul 4_4
</body>
</html> a:link defineste stilul legaturii nevizitate
a:visited defineste stilul legaturii vizitate
a:active defineste stilul legaturii active (nu prea se foloseste)
a:hover defineste stilul cand mouse-ul este deasupra legaturii