CSS sau Cascading Stylesheets este un limbaj de programare ce se afla in stransa legatura cu HTML.CSS se utilizeaza pentru a crea designul unui website, webmasterii din toata lumea utilizand aceast limbaj de programare robust pentru a crea site-uri tot mai atragatoare cu ajutorul noilor versiuni de CSS3.Dar ce inseamna tot acest cod?

Limbajul a fost complet dezvoltat pe parcursul mai multor ani.Confuziile pot aparea cel mai adesea din cauza intelegerii gresite a codului, dar si incurcarea unor taguri.CSS aduce o multime de noi concepte, dar noi vom acoperi doar cateva din cele mai importante optiuni pentru a deveni pe viitor  un guri CSS.

De ce sa te specializezi in CSS?

Acesta intrebare isi are radacinile chiar de la aparitia CSS-ului, iar raspunsurile apar tot la acea vreme.CSS-ul este un limbaj robust, acesta nu fiind asemanator cu programarea sau scripting-ul in sine.Este mai mult un limbaj pentru design, modul in care este utilizat influentand designul unui website.

css code screen CSS Back to Basics: Terminology Explained

CSS-ul este un limbaj de programare prin care poti influenta fiecare element HTML in parte.Toate blocurile, paragrafele, imaginile sau liukurile pot fi modificate prin reguli CSS.Rafinarea semanticii web-ului a fost intotdeauna un pas enorm.De aceea CSS-ul este inca lider printre designeri – nimeni nu a creat ceva mai bun!

Proprietati si Valori

Cel mai simplu mod de a te juca cu CSS este sa-l inserezi direct in codul HTML.Codul este simplificat in 2 actiuni:alegerea elementului unde vrei sa aplici stilurile si deciderea stilurilor aplicate.Rezultatul va iesi prin adaugarea unor anumite proprietati si valori.

Cel mai simplu exemplu ar fi color: red; acesta este o pereche de proprietati deosebit de simpla. Proprietatea utilizata este color care ne ofera posibilitatea sa adaugam orice valuare valida pentru a schimba culoarea textului. Valoarea ar putea fi scrisa si in codul HEX sau RGB (Red-Green-Blue).De multe ori designerii nu vor mentiona de idea valorilor fiindca de multe ori poate sa va induca in eroare.

Cauta cat mai multe informatii!Exemplul de mai sus doar arata o valoare…totusi gandeste-te ca sunt o multime de valori si proprietati.Exista o multime de resurse gratuite pe Internet, dar poti gasi toate informatiile necesare in carti de specialitate ce le poti gasi de obicei la orice librarie.

Selectori

Selectorii sunt necesari pentru terminarea unei linii de cod CSS.Acestea sunt declarate pentru a recunoste ce element trebuie modificat.Sunt o multime de selectori unii dintre ei fiind asa decomplicati incat un designer obsinuit nici nu ar avea nevoie de asa ceva.Vezi W3C selector daca vrei sa afli mai multe.

Cel mai simplu mod de a incepe defeinitiile stilurilor este sa utilizezi chiar elementul HTML ca un selector.De aici rezulta ca poti manipula paragrafele prin tagurile <p>, blocurile prin <div> si intreaga pagina cu <html> si <body>.Mai jos este un mic exemplu la un paragraf:
[cc lang=”css”]p { font-family: Arial, sans-serif; color: #222; font-weight: bold; }[/cc]
Ceea ce ii da CSS-ului adevarata popularitate este usurinta cu care poti adauga stiluri unui anumit element cu ajutorul id-ului sau a claselor.Pur si simplu adaugi un id sau o clasa in codul HTML si apoi o accesezi in CSS.
[cc lang=”html” escaped=”true”]<p id=”first”>Ceva text de tip dummy…</p>
<p class=”comment”>Ceva text de tip dummy…</p>[/cc]
Iar in fila CSS adaugi:
[cc lang=”css”]/* stileaza paragraful cu id-ul first */
p#first { font-size: 14px; }
/* stileaza paragraful cu clasa comment */
p.comment { font-size: 1.0em; line-height: 1.3em; }[/cc]
Totusi trebuie sa faci diferenta intre un id si o clasa.Id-urile sunt unice, deci pot fi utilizate doar o singura data, pe cand clasele pot fi utilizate de cate ori este necesar.Asa ca vom vedea adesea sectiuni dintr-un website(gen header, sidebar, footer) utilizand id-uri, iar sectiuni continute de acestea utilizand clase.

Pentru a conecta o pagina HTML cu o pagina CSS trebuie sa utilizezi tagul:
[cc lang=”html” escaped=”true”]<head>
<link rel=”stylesheet” type=”text/css” href=”style.css”/>
</head>[/cc]
Nu uita ca tagul de mai sus merge doar in partea head a website-ului.Daca ai fila css in folderul Stiluri atunci adaugi la href stiluri/style.css.

Problemele cu Internet Explorer

Problemele cu Internet Explorer!Stim cu totii ca IE nu se prea intelge cu restul lumii…pana la IE8, toate browserele de la Microsoft nu s-au bucurat de o reputatie prea buna!Singurul care este chiar bun, IE9, nu merge pe Windows XP ci numai pe Vista sau Windows 7.Asa ca 75% din toti userii pc-ului nu se pot bucura de browser.Din aceasta cauza webmasterii trebuie sa creeze din pacate file css speciale numai pentru IE.Pentru a le utiliza trebuie sa inserezi fila css in comment-uri speciale:
[cc lang=”html” escaped=”true”]<!–[if IE]>
Instructiuni speciale pentru IE – IE9 nu are probleme, dar poate 8,7
<![endif]–>[/cc]
Poti pune orice de versiune de IE, dar daca vrei ca sa creezi o singura fila pentru toate versiunile IE scrie pur si simplu [if IE].

Ordonare a codului

Codul tau CSS trebuie sa fie ordonat!Cel mai usor este sa pui stilurile una sub alta ca in imaginea de mai jos:

Daca vrei mai comprimat atunci urmeaza sablonul acesta:
[cc lang=”css”]div#nav { display: block; width: 100%; padding: 3px 6px; margin-bottom: 20px; }
div#nav ul { list-style: none; display: block; }
div#nav ul li { float: left; margin-right: 10px; font-size: 12px; }
div#nav ul li a { color: #0f0f0f; text-decoration: none; display: inline-block;
padding: 2px 5px; }[/cc]

Concluzie

Dupa ce am discutat cateva din problemele de baza din CSS pot spune ca  numai dupa cateva ore de informatii citite poti deja sa incepi sa creezi un design.Acest lucru face ca CSS sa fie cel mai popular printre web designeri.

O noua versiune, CSS3 incepe sa faca primii pasi in lumea web-ului si sa speram ca in numai cativa ani sa o utilizam la potentialul ei adevarat.CSS 3 ne va permite sa ne detasam si mai mult de JavaScript facand CSS-ul un limbaj mai individual, lucru dorit de orice webmaster.

Leave a comment

Your email address will not be published. Required fields are marked *

Send this to a friend