CSS Plaza - Introducere in CSS

Padding css

Mostenit: NU

Padding-ul este distanta dintre bordura unui element (X)HTML si continutul lui. Majoritatea regulilor de la marginile css se aplica si la padding, cu exceptia ca aici nu exista valoarea "auto" si nu pot fi declarate valori negative.

[cod] padding-top: lungime procent; padding-left: lungime procent; padding-right: lungime procent; padding-bottom: lungime procent; [/cod]

Puteti observa in exemplul de mai sus, ca aveti la dispozitie doua posibilitati pentru proprietatea "padding": lungime si procent. Este posibil sa declarati padding-ul pentru un element intr-o singura proprietate, astfel:

[cod] padding: 10px 10px 10px 10px; [/cod]

Daca declarati toate cele patru valori, ca in exemplul de mai sus, ordinea lor este urmatoarea:

[cod] 1. sus 2. dreapta 3. jos 4. stanga [/cod]

In cazul in care declarati o singura valoare, aceasta este valabila pentru toate cele patru laterale ale elementului respectiv.

[cod] padding: 10px; [/cod]

Daca declarati doar doua sau trei valori, valorile nedeclarate sunt luate din partile opuse:

[cod] padding: 10px 10px; /* 2 valori */ padding: 10px 10px 10px; /* 3 valori */ [/cod]

Dupa cum stiti ordinea celor 4 valori este: sus, dreapta, jos, stanga. Cand declarati doar primele doua inseamna ca ati declarat valoarea pentru sus si pentru dreapta. Valorile pentru celelalte doua vor fi: jos=sus, stanga=dreapta.

Daca nu declarati padding-ul unui element, acesta va fi implicit egal cu zero.

NOTA: daca valoarea pe care o atribuiti marginii este egala cu zero, nu mai este necesara specificarea unitatii de masura, fie ea pixel, punct, sau oricare alta.

Se poate vedea mai jos, cum containerul principal are padding-ul setat la 30px (pixeli) intre marginea lui si textul continut.

[cod] #container{ width: 70%; margin: auto; padding: 30px; border: 1px solid #666; background: #ffffff; } [/cod]

Sintaxa css

Sintaxa CSS-ului este diferita de cea a (X)HTML-ului. Insa nu este foarte dificil de inteles css-ul daca esti atent si incepi sa intelegi cum lucreaza. Sintaxa CSS-ului este compusa doar din 3 parti:

[cod] selector { proprietate: valoare } [/cod]

Selectorul este elementul (X)HTML pe care doresti sa il stilizezi. Proprietatea este chiar titlul (numele) proprietatii respective, iar valoarea reprezinta stilul pe care il aplici proprietatii.

Fiecare selector poate avea multiple proprietati, si fiecare proprietate din acel selector are valori independente. Proprietatea este separata de valoare cu semnul ":". Toate proprietatile impreuna cu valorile lor, apartinand aceluiasi selector sunt cuprinse intre acolade "{}". Multiplele valori din aceasi proprietate sunt separate prin virgula "," si daca o valoare contine mai mult de un cuvant, acestea se cuprind intre ghilimele '"'. Aveti mai jos un exemplu:

[cod] body { background: #eeeeee; font-family: "Trebuchet MS", Verdana, Arial, serif; } [/cod]

Dupa cum se observa, culoarea fundalului (background) este separata de font (font-family) cu ajutorul semnului ";" si un tab (semicoloana), diferitele valori pentru font sunt despartite prin virgule, iar valoarea "Trebuchet MS" deoarece contine doua cuvinte este cuprinsa intre ghilimele.

Aplicand acest stil vom obtine un corp de pagina (body) de culoare gri deschis, iar fontul folosit va fi unul despre care suntem siguri ca majoritatea utilizatorilor il au instalat pe sistemele lor.

Layoutul codului se poate modifica, insa este mai usor de citit daca fiecare proprietate este pe o linie separata, una sub alta, fiecare cu un tab in fata.

Mostenirea

Atunci cand plasezi un element in interiorul altuia, elementul plasat va mosteni proprietatile elementului in care a fost plasat. Asta doar daca nu se atribuie aceleasi proprietati insa cu valori diferite fiecarui element. De exemplu, un font specificat pentru corp (body) va fi folosit in toata pagina, indiferent de elementul unde este folosit, doar daca nu specificati un font diferit pentru elementul respectiv.

[cod] body {font-family: Verdana, serif;} [/cod]

In acest caz, tot textul din fisierul (X)HTML va folosi fontul Verdana.

Daca doresti sa folosesti un alt font pentru un element anume (de exemplu pentru paragraf sau pentru H1), va trebui sa definesti acest lucru, cum este in exemplul de ma jos:

[cod] h1 {font-family: Georgia, sans-serif;}
p {font-family: Tahoma, serif;} [/cod]

Acum toate tagurile vor folosi fontul Georgia si toate paragrafele (<p>) vor folosi Tahoma, lasand totusi restul textului (din alte taguri) neschimbat, folosind in continuare Verdana.

Exista insa si cazuri cand elementele plasate in interiorul altor elemente, nu mostenesc proprietatile acestora din urma. De exemplu, daca marginea pentru corp este setata la valoarea de 20 pixeli, celelalte elemente din pagina nu vor avea si ele marginea setata la 20 de pixeli.

[cod] body {margin: 20px;} [/cod]

Combinarea selectorilor

Puteti combina elementele unui selector astfel:

[cod] h1, h2, h3, h4, h5, h6 { color: #009900; font-family: Georgia, sans-serif; } [/cod]

Dupa cum observati in codul de mai sus, am grupat toate elementele de tip header intr-un singur selector. Ele sunt separate de virgule. Rezultatul acestui stil este acela ca toate tagurile header vor fi de culoare verde cu font Georgia. Daca un utilizator nu are instalat pe sistem primul font (Georgia), atunci se va folosi in mod automat urmatorul font si anume sans-serif.

Tagurile de comentarii

Comentariile, ca si in cazul programarii in alte limbaje, sunt foarte folositoare, si te pot ajuta sa identifici repede un anume element sau rolul pe care acel element il are. Puteti folosi comentariile si in fisierele .css, dupa cum se exemplifica in continuare:

[cod] /* Acesta este un comentariu si nu va fi interpretat de browsere */ [/cod]

Observati ca la inceputul comentariului avem un slash "/" urmat de un asterisc "*", dupa care urmeaza comentariul respectiv, iar la inchiderea lui ordinea este inversa. Primul este asteriscul urmat de slash.

ID-urile css

ID-urile sunt similare cu clasele, cu exceptia ca un ID nu poate fi folosit pe aceeasi pagina (X)HTML decat o singura data. In general, ID-urile se folosesc pentru stilizarea elementelor dintr-o pagina care apar doar o singura data, altfel, folosirea claselor este recomandata. Containerul principal al paginii din exemplul de mai jos, este definit astfel:

[cod] <div id="container"> Tot continutul paginii este plasat in acest container. </div> [/cod]

Am ales sa folosesc ID-ul in loc de clasa, deoarece elementul respectiv apare o singura data pe pagina. Urmeaza codul din fisierul CSS, care arata cam asa:

[cod] #container { width: 80%; margin: auto; padding: 20px; border: 1px solid #666; background: #ffffff; } [/cod]

De observat ca selectorul ID-urilor incepe cu semnul diez (#) si nu cu punct (.) cum se intampla in cazul claselor.

Fundaluri css

Mostenit: NU

Fundalul

Puteti stiliza fundalul unui element cu o declaratie de proprietate adecvata.

[cod] background: #ffffff url(calea_catre_imagine) top left no-repeat fixed; [/cod] [ul] Valori: [li]attachment[/li] [li]color[/li] [li]image[/li] [li]position[/li] [li]repeat[/li] [/ul]

Sau, puteti seta fiecare proprietate separat, dupa cum urmeaza:

Atasament fundal

Daca folositi o imagine ca fundal, puteti specifica daca fundalul se misca o data cu pagina (la scroll vertical) sau este fix cu ajutorul proprietatii "background-attachment".

[cod] background-attachment: valoare; [/cod] [ul] Valori: [li]fixed[/li] [li]scroll[/li] [/ul]

Culoarea fundalului

Proprietatea "background-color" specifica culoarea fundalului:

[cod] background-color: valoare; [/cod] [ul]Posibile valori: [li]color name[/li] [li]hexadecimal number[/li] [li]RGB color code[/li] [li]transparent[/li] [/ul]

Imaginea de fundal

Se poate seta o magine ca fundal al unui element, cu proprietatea "background-image".

[cod] background-image: url(calea_catre_imagine); [/cod] [ul]Valori: [li]url[/li] [li]none[/li] [/ul]

Pozitia fundalului

Imaginea folosita cu rol de fundal se poate pozitiona cu ajutorul proprietatii background-position.

[cod] background-position: valoare; [/cod] [ul]Valorile posibile sunt: [li]top left[/li] [li]top center[/li] [li]top right[/li] [li]center left[/li] [li]center center[/li] [li]center right[/li] [li]bottom left[/li] [li]bottom center[/li] [li]bottom right[/li] [li]x-% y-%[/li] [li]x-pos y-pos[/li] [/ul]

Repetarea fundalului

Se poate face ca imaginea folosita la fundal sa se repete pe axa x sau pe axa ya ecranului folosind proprietatea "background-repeat".

[cod] background-repeat: valoare; [/cod] [ul]Valori: [li]no-repeat[/li] [li]repeat[/li] [li]repeat-x[/li] [li]repeat-y[/li] [/ul]

Introducere in css

Fisierul CSS (cascading style sheet - foi de stil in cascada) va permite separarea continutului (X)HTML de stilul de afisare in pagina. Ca de obicei, utilizati codul (X)HTML pentru aranjarea continutului in pagina, insa toata prezentarea (fonturi, culori, fundaluri, borduri, etc) se realizeaza din fisierul CSS. In acest moment, puteti folosi CSS-urile in doua moduri, si anume interne sau externe.

Stilurile interne

Mai intai vom aborda metoda stilurilor interne. Aceasa metoda inseamna ca veti plasa codul CSS in interiorul fiecarei pagini html pe care doriti sa folositi stilurile respective, intre tagurile <head> </head> .Acest lucru se face ca in exemplul ce urmeaza:

[cod]<head> <title>titlu pagina</title> <style type="text/css">Aici se definesc stilurile CSS</style> </head>[/cod]

Folosind aceasta metoda (stilurile interne), fiecare fisier (X)HTML va contine codul CSS folosit la stilizare. Asta inseamna ca atunci cand doriti sa faceti o schimbare de stil (marimea fontului, culoare, etc) va trebui sa operati modificarea in toate paginile ce contin acel stil. Metoda descrisa pana acum este buna atunci cand avem de stilizat doua, trei pagini, insa cand avem de a face cu siteuri de zeci sau sute de pagini este destul de neplacut sa modificam toate paginile.

Stilurile externe

In continuare vom explora metoda stilurilor externe. Un fisier CSS extern poate fi realizat cu orice editor simplu de text (Notepad, Wordpad, etc) sau cu editoare avansate gen Dreamweaver. Fisierul CSS nu contine sub nici o forma cod (X)HTML, ci doar cod CSS. Fisierul trebie salvat cu extensia .css. Inserarea fisierului extern in paginile (X)HTML se face foarte usor, prin plasarea unui link (legatura) in sectiunea <head> </head> a fiecarei pagini pe care dorim sa folosim stilul respectiv. Iata un exemplu de inserare a unui fisier extern .css intr-o pagina (X)HTML:

[cod]<link rel="stylesheet" type="text/css" href="Calea catre fisierul.css" />[/cod]

sau puteti folosi metoda de import dupa cum urmeaza:

[cod] <style type="text/css">@import url( Calea catre fisierul.css )</style> [/cod]

Oricare dintre metode este buna si se obtine plasand unul dintre codurile de mai sus in sectiunea <head> </head> a paginii, dupa cum exemplificam mai jos:

[cod]<head> <title> titlu pagina </title> <link rel="stylesheet" type="text/css" href="stil.css" /> </head> sau <head> <title> titlu pagina </title> <style type="text/css"> @import url( Calea catre fisierul.css ) </style> </head>[/cod]

Folosind metoda fisierelor CSS externe, toate paginile (X)HTML vor folosi acelasi fisier de stil. Asta inseamna ca dca doriti sa faceti o schimbare care sa aiba efect in toate paginile, este de ajuns sa modificati un singur fisier, si anume cel de stil (.css), si efectul se va observa pe toate paginile (X)HTML ce folosesc acel fisier. Astfel faceti schimbari in tot siteul, indiferent de cate pagini are, fara efort si mai ales foarte repede.

Iata cateva motive pentru care aceasta metoda este mai buna.

[ul] [li] Intretinere mai usoara [/li] [li] Dimensiuni reduse ale paginilor [/li] [li] Economie de banda internet [/li] [li] Flexibilitate [/li] [/ul]

Ordinea cascadelor

In paragrafele de mai sus am explicat cum se foloseste un fisier CSS fie ca este intern sau extern. Daca ati inteles este deja ceea ce am explicat mai sus, probabil va intrebati daca puteti folosi ambele metode? Raspunsul este DA. Puteti folosi atat metoda stilurilor interne cat si metoda stilurilor externe. Totusi, ar mai fi o posibilitate... Stilurile "in linie" (inline styles).

Stilurile in linie

Pana acum nu am spus nimic despre acesta metoda, pentru ca, intr-un fel, nu este ceea ce ar trebui sa invatati. Stilurile in linie se definesc chiar in codul (X)HTML, in elementul pe care doriti sa il stilizati. Iata un exemplu:

[cod]<p style="color: #ff0000;">Text rosu</p>
[/cod]

Text rosu

Stilurile in linie nu va vor permite schimbari rapide si facile, pe mai multe fisiere in acelasi timp, fiecare element necesitand atentia dvs, pe toate paginile, etc.

Deci, ce metoda este mai buna?

Avand in vedere ca v-am prezentat trei metode de folosire a stilurilor CSS, este normal sa va intrebati care este cea mai buna, sau daca folositi dou metode in acelasi timp, care este ordinea folosirii lor pentru o interpretare corecta de catre browsere. Toate metodele, se vor executa in cascada, intr-o "pseudo-foaie de stil", in ordinea urmatoare:

[ul] [li] Stiluri in linie [/li] [li] Foaie de stil interna [/li] [li] Foaie de stil externa [/li] [/ul]

Daca ne referim la "care este mai buna", putem spune ca depinde de ceea ce v-ati propus sa realizati/obtineti. Daca aveti o singura pagina pe care trebuie sa o stilizati, puteti folosi metoda stilurilor interne fara nici o problema. Pe de alta parte, daca aveti de stilizat un numar mare de pagini, cel mai bine este sa folositi foile de stil externe. Modul in care veti implementa foile externe in paginile dvs ramane la latitudinea dvs, si aveti de ales intre metoda cu link sau metoda cu @import, dupa cum am exemplificat mai sus.

Trebuie specificat insa ca metoda importului (@import) va fi un pic mai greoaie, fiind posibil sa dureze o secunda, doua, pana se incarca foaa de stil, timp in care continutul este afisat nestilizat.

Utilizatorii cu disabilitati

Folosirea foilor de stil externe mai are un avantaj major, si anume permit vizualizarea continutului paginii html si de catre utilizatorii cu disabilitati. De exemplu, utilizatorul respectiv, poate renunta la folosirea foii de stil pe care ati definit-o dvs si poate aplica o foaie de stil speciala, a lui, care il ajuta sa vizualizeze pagina intr-un mod facil. Poate mari fontul, poate schimba culorile, etc.

Probleme de browser

Pe masura ce vom aprofunda folosirea CSS-ului, veti descoperi ca nu toate browserele interpreteaza la fel stilurile. CSS-ul va fi interpretat diferit de browsere, ceea ce va va cauza dureri de cap. Exista totusi metode de rezolvare a acestor metode pe care le vom explica la momentul potrivit.