»  Pagina principala  »  Tutoriale »  Tutorial complet CSS

Tutorial complet CSS

4.1 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:

<style type="text/css">
<!--
p{text-align: center;}
-->
</style>

Exemplu: prin intermediul lui div aplicam stilul pecentru imaginii si textului

<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>

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

<style type="text/css">
<!--
.sus{vertical-align: top;}
-->
</style>

float este folosit pentru alinierea textului cu imaginile si poate avea valorile: left si right. In functie de valoarea aleasa imaginea va fi aliniata in partea opusa a paginii.

Exemplu: cream clasa auto si o aplicam inaginii

<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>

4.2 Tabulare
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

<style type="text/css">
<!--
p{text-indent: 10px;}
-->
</style>

4.3 Decorare
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

<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>

4.4 Culoare
color defineste culoarea textului dintr-o zona sau intraga pagina.

Exemplu: stilul asociat etichetei p este prezentat in HEAD

<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>

4.5 Stiluri pentru legaturi
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

<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 defineste stilul general pentru legatura
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




« Inapoi 1 2 3 4 5 6 7 8 Inainte »
Pagina Urmatoare: Stiluri pentru background




Link-ul autorului:
www.drogoreanu.ro/tutorials/css.php

Comentarii



   danut manolache

mi-a placut foarte mult expunerea precisa, fara inflorituri. daca as avea banuti sigur as face cursuri cu acest domn.
multumesc mult
danut
23-Jul-2010 - 11:27


   dan

<b>super</b>
05-Sep-2010 - 08:19


   elena

Ms mult pt timpul acordat in realizarea acestui tutorial

10-Sep-2010 - 13:16


   vizitator

Util, Multumesc
25-Oct-2010 - 15:15


   alina

Imi spuneti va rog ce cod trebuie sa contina o pagina simpla de css pe care sa o salvez cu .css pe notepad pe care apoi sa o pot folosi ca foaie externa sa puna culoarea de fundal pentru alte pagini? O pagina care se salveaza cu .CSS are doar elemente de CSS sau trebuie combinate cu HTML si salvata cu .CSS ? Pagina externa care contine link catre fisierul .CSS(si coduri HTML) trebuie salvata cu .CSS sau .HTML? Va multumesc.
18-Nov-2010 - 09:15


   Mihai

Alina, n-am apucat sa citesc acest articol dar sunt sigur ca gasesti raspunsuri pentru intrebarile tale in el.
Totusi o sa incerc eu sa te lamurasc cat de cat cum sta treaba cu HTML-ul si CSS-ul ...
In primul rand sa spunem ca avem niste fisiere HTML in care avem niste TAG-uri de tip DIV, cateva de tip IMG si altele de tip A (ancora).
In sectiunea HEAD a fisierului cu extensia HTML se pune un link (<link rel="stylesheet" type="text/css" href="fisier_de_stil.css">) catre fisierul nostru cu extensia CSS.
In acest fisier CSS avem DOAR cod CSS, si facem legatura cu elementele din fisierul HTML prin ID-uri, CLASE si cateodata cu numele tagului (nerecomandat totusi).
Astfel, presupunand ca avem in fisierul cu extensia HTML un tag DIV cu ID-ul "test", in CSS il vom selecta cu "div#test".
"div" -  numele de tag (putea fi la fel de bine "a", "img" sau un alt tag)
"#" -  ne spune ca este vorba de un ID nu de o CLASA (clasa fiind notata cu punct)
"test" - numele ales de noi pentru div-ul respectiv.
Ca sa-ti raspund la intrebari...pentru a da valoare culorii de fundal a unui div sau a unei parti de continut exista atributul "background-color" (ex: div#test {background-color : red;} - div-ul cu id-ul numit "test" va avea culoarea de fundal rosie).
La a 2-a intrebare...O pagina salvata cu extensia CSS poate avea cod de mai multe feluri...dar niciodata HTML (la nivelul asta, la care esti, e bine sa stii ca se pune doar cod CSS).
Pagina "externa" cum o numesti tu...e defapt pagina principala care are partea de cod HTML unde exista obiectele cu numele lor ce urmeaza a fi stilizate intr-un fisier CSS si trebuie salvata cu extensia HTML.
Poate nu m-am facut foarte inteles ... dar sper ca te-am mai luminat putin ... si poate e util si pentru cei ce vor urma ...
19-Mar-2011 - 01:04


   Alex

Imi spune si mie cineva cum pot trage o linie verticala de exemplu la un CV si cum pot numerota randurile?Multumesc
27-Mar-2011 - 11:55


   Valentin

articolul este  ffff bun .stiind f.bine html si css este usor sa treci mai departe.altfel o dai "in bara".
10-Apr-2011 - 13:36


   Radu

cel mai tare site web de pe tot internetul. N-am cuvinte sa multumesc celor care au scris aceste tutoriale, atat de la obiect si le-au facut atat de accesibile. De mult caut un tutorial despre CSS iar in numai 8 pagini autorul a punctat depsre cam tot ce ai nevoie ca sa pornesti serios la drum.

Sunteti cei mai adevarati  
17-Apr-2011 - 12:17


   cornerro

exemplul 4.1 contine o greseala: codul css e pentru un "p" in timp ce html-ul introduce un "div".
limbajul e sofisticat si contine inconsecvente formale, uneori inadvertente semantice. pentru cei care au parcurs deja un tutorial de genul acestuia: http://www.html.net/tutorials/css/, lectiile de aici vor capata mai mult sens.
oricum, multumim pentru efort!
05-Jun-2011 - 23:05


   antinogel

ar fi fost f simplu si elegant, ceea ce nu este cazul, ca informatiile pe care le oferi sa le pui pe o singura pagina, nu sa trebuiasca sa navighezi prin nu stiu cate pagini, si de asemeni o posibilitatea de descarcare, salvare, printare, ceea ce de asemeni nu este cazul, probabil face parte din politica general de pe internet de pierdere de cat mai mult timp pe sit sau pagina, pentru ranking nu? slabut situl dar cu multe pretentii, ati impanzit internetul cu tot felul de tampenii
08-Jul-2011 - 17:36



Voteaza acest articol!
 



Trimite un comentariu!

Nume *
E-mail *
Comentariu *
  Vreau sa fiu anuntat de urmatoarele mesaje la acest articol

Security image

Catalin Drogoreanu

Inginer electronist din Bucuresti. In 2003 a inceput activitatea de webdesigner ca o activitate in timpul liber. Are cunostinte de HTML, CSS, PHP, MySQL si Adobe Photoshop.
http://www.drogoreanu.ro

Cloud tag

tutorial, photoshop, html, css, javascript, flash, php, mysql, grafica 3D, tutorial, coduri, scripturi, generator de coduri, cursuri php