Despre CSS

Scris de BODO Mar Iun 14, 2011 12:14 pm

Tutorial - Despre CSS

CSS - Cascading Style Sheets ( Foi de Stil in Cascada ) aduce un control sporit tag-urilor HTML oferind o imbunatatire a prezentarii paginilor web, a designului.

HTML : Poate fi utilizate in moduri diferite dar sub aceias actiune.Mai jos se afla un exemplu de coduri scurte care executa aceias actiune de modificare.
Varianta 1:
#clasa{ valoarea dorita}

Cod:: <div id="clasa">CONTINUT</div>

Varianta 2:
.clasa{ valoarea dorita}

Cod:: <div class="clasa">CONTINUT</div>

Cod:: <span class="clasa">CONTINUT</span>

Cascading Style Sheets (CSS): este cea mai importanta ramura a paginilor web.
Toate codurile css functioneaza cu cuvinte din limba engleza si daca stim minimul de engleza vom crea cate coduri dorim.

Dictionar pentru modificarea textelor:

font-size: #px;	Marimea Textului	Modificati valoarea #px in or care alta valoare 7px,8px...etc.
font-family: Verdana;	Fontul Textului	Inlocuiti Verdana cu orcare alt font care va place.
color: #000000;	Culoarea textului	Modificati #000000 cu alt cod pentru culori html.
font-weight: bold;	Utilizare bold la text	Aici nu se pot face modificari .

Acestea 4 sunt cele mai importante si cele mai utilizate valori css.

Dictionar pentru modificarea tabelelor:

background-color: transparent;	fundal transparent	Nu se pote personaliza la acest cod.
width: #px;	Latime Tabel	Modificati # la o valoare de cifre mai mare (ex:10,11,12)
height: #px	Inaltimea	Modificati # la o valoare de cifre mai mare (ex:10,11,12)
background-color: #;	Fundal Tabel	Modificati # cu ajutorul codurilor de culori html.
border-radius: #px;	Rotunjite tabel	Modificati # la o valoare de cifre mai mare (ex:5,6,7)
padding: #px;	Distanta dintr-e text si tabel .	Modificati # la o valoare de cifre mai mare (ex:1,2,3)
background-repeat: no-repeat;	Fundal fara reperater	Nu se pote personaliza la acest cod.
border:#px;	Contur tabel	Modificati # la o valoare de cifre mai mare (ex:1,2,3)
background: url(LINK IMAGINE) ;	Fundal cu o imagine.	Modificati LINK IMAGINE cu o imagine incarcata pe un host de imagini.

Pentru a crea codul nostru personalizat adaugati css in pagina html in tagul html:

Cod:: <style type="text/css">CODURI CSS</style>

Am creat o structura pentru a va da seama despre cum ar trebui asezate intro pagina html.

Cod:: <style type="text/css">#nume_clasa { background-color: #f3f3f3; border-radius: 4px; border:1px; }</style> <div id="nume_clasa">Ana are mere.</div>

In acest tutorial am dat exemple de structura unui css si cum putem realiza asa ceva. Acuma depinde de fiecare daca va retine ceva.

Tutorial realizat de $tefaN | DesignART
***Important !
Reproducerea si/sau copierea acestui tutorial NU este permisa fara acordul postatorului !