Documente Academic
Documente Profesional
Documente Cultură
Css Plaza
Încărcat de
Marius SirbuDrepturi de autor
Formate disponibile
Partajați acest document
Partajați sau inserați document
Vi se pare util acest document?
Este necorespunzător acest conținut?
Raportați acest documentDrepturi de autor:
Formate disponibile
Css Plaza
Încărcat de
Marius SirbuDrepturi de autor:
Formate disponibile
Object 10 Object11 41 40 39 38 37 36 35 34 33 32 31 30 29 28 27 26 25 24 23 22 21 20 19 18 17 16 15 14 13 12 9 8 7 6 5 4 3 2 1
1/63
Tutoriale CSS
Introducere 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: <head> <title>titlu pagina</title> <style type="text/css"> Aici se definesc stilurile CSS </style> </head> 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.
2/63
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: <link rel="stylesheet" type="text/css" href="Calea catre fisierul.css" /> sau puteti folosi metoda de import dupa cum urmeaza: <style type="text/css">@import url( Calea catre fisierul.css )</style> 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: <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>
3/63
</head> 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. Intretinere mai usoara Dimensiuni reduse ale paginilor Economie de banda internet Flexibilitate
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: <p style="color: #ff0000;">Text rosu</p> Text rosu Stilurile in linie nu va vor permite schimbari rapide si usoare, pe mai multe fisiere in acelasi timp, fiecare element necesitand atentia dvs, pe toate paginile, etc.
4/63
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 doua 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: Stiluri in linie Foaie de stil interna Foaie de stil externa 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 foaia 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 personalizat. 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 probleme pe care le vom explica la momentul potrivit.
5/63
CSS Clase Clasele va permit sa stilizati anumite taguri sau elemente din codul (X)HTML, diferentiat. Similar cu metoda "in linie" din introducere in css. Exceptia in cazul claselor consta in faptul ca stilurile pot fi schimbate prin schimbarea foii de stil. Astfel puteti folosi acelasi selector in fisierul (X)HTML si totusi va arata diferit, in functie de foaia de stil utilizata. Ca sa o spunem cat mai simplu, propozitia pe care o cititi, este definita in foaia de stil CSS astfel: p{ font-size: normal; color: #333333; } Simplu, insa, daca doresc sa schimb culoarea cuvantului "propozitia" in verde, bold, lasand insa restul propozitiei neschimbata? Voi folosi urmatorul cod in fisierul (X)HTML: Ca sa o spunem cat mai simplu, <span class="verdeboldtext">"propozitia"</span> pe care o cititi, este definita in foaia de stil CSS astfel: .verdeboldtext { font-size: normal; color: #090; font-weight: bold; } bold Rezultatul final arata asa: Aceasta este o propozitie scrisa cu verde si
Ar trebui sa retineti ca definirea unei clase incepe cu semnul punct(.). Numele de "verdeboldtext" este dat doar de exemplu, puteti folosi orice
6/63
denumire, insa recomandarea este sa folositi denumiri intuitive, care sa va spuna rapid cum arata stilul respectiv. Puteti folosi clasa ".verdeboldtext" ori de cate ori este nevoie.
CSS Sintaxa 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: selector { proprietate: valoare } 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: body { background: #eeeeee; font-family: "Trebuchet MS", Verdana, Arial, serif; } 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.
7/63
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. body {font-family: Verdana, serif;} 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: h1 {font-family: Georgia, sans-serif;} p {font-family: Tahoma, serif;} 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. body {margin: 20px;} Combinarea selectorilor Puteti combina elementele unui selector astfel: h1, h2, h3, h4, h5, h6 { color: #009900;
8/63
font-family: Georgia, sans-serif; } 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: /* Acesta este un comentariu si nu va fi interpretat de browsere */ 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.
CSS ID-uri 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: <div id="container"> Tot continutul paginii este plasat in acest container. </div> 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:
9/63
#container { width: 80%; margin: auto; padding: 20px; border: 1px solid #666; background: #ffffff; } De observat ca selectorul ID-urilor incepe cu semnul diez (#) si nu cu punct (.) cum se intampla in cazul claselor. Retineti ca diferenta dintre class si id este ca id apare o singura data in pagina in timp ce class poate fi folosit ori de cate ori este nevoie CSS Divizii Daca ati parcurs deja primele patru capitole (pagini), putem spune ca aveti cunostintele de baza in CSS. Acum ne abatem putin atentia de la CSS si ne indreptam spre partea de folosite a lui in paginile (X)HTML. Divizii Divizia poate fi definta ca: element de tip bloc folosit pentru definirea unor zone din fisierul (X)HTML. O divizie poate contine toate partile care alcatuiesc siteul dvs., incluzand alte divizii, span-uri, imagini, text, etc. Puteti defini o divizie intr-un fisier (X)HTML, plasand urmatorul cod intre tag-urile <body> </body> : <div> Continutul siteului este plasat aici </div> Bineinteles, veti dori sa il stilizati un pic. Modificam in acest caz, astfel: <div id="container">
10/63
Continutul siteului este plasat aici </div> Iar in fisierul css avem urmatorul cod: #container{ width: 70%; margin: auto; padding: 20px; border: 1px solid #666; background: #ffffff; } Acum, tot continutul din divizia noastra va fi stilizat dupa regula "container", pe care am definit-o in fisierul css. O divizie, realizeaza implicit o trecere la linie noua (linebreak). Puteti folosi atat ID-urile cat si clasele pentru stilizarea unei divizii in cadrul site-ului dvs.
CSS Span Span-urile sunt similare diviziilor cu exceptia ca sunt de tipul "in linie" si nu de tip "bloc". Span-urile nu executa implicit linie noua dupa inserarea lor. Puteti folosi span-ul pentru stilizarea unor zone de text, dupa cum urmeaza: <span class="italic">Acest text este italic</span> In fisierul CSS avem: .italic{ font-style: italic; } Rezultatul final este: Acest text este italic.
11/63
Scopul acestei pagini cat si a paginii Divizii CSS este acela de a va arata bazele folosirii CSS-ului in fisierele (X)HTML.
CSS Margini Mostenite: NU Dupa cum probabil ati ghicit, proprietatea "margine" se refera la marginea (spatiul) dintre un element (X)HTML si celelalte elemente din jurul lui. Marginea poate fi setata pentru extremitatile "sus", "stanga", "dreapta" si "jos" ale unui element. Vezi exemplul de mai jos: margin-top: lungime procente sau auto; margin-left: lungime procente sau auto; margin-right: lungime procente sau auto; margin-bottom: lungime procente sau auto;
Dupa cum vedeti in exemplul de mai sus, aveti la dispozitie 3 variante pentru valori pentru margine: lungime, procent, auto. De asemenea, puteti declara toate cele 4 margini intr-o singura proprietate: margin: 10px 10px 10px 10px; Daca folositi varianta din urma, ordinea marginilor este urmatoarea: sus dreapta jos stanga
Daca este declarata o singura valoare, aceasta este valabila pentru toate cele 4 margini: margin: 10px; In cazul in care declarati doar doua sau trei dintre margini, valorile nedeclarate sunt "luate" din partea opusa:
12/63
margin: 10px 10px; /* 2 valori */ margin: 10px 10px 10px; /* 3 valori */ Se poate seta marginea si cu valori negative. In cazul in care nu se declara marginile unui element, acestea sunt in mod implicit egale cu zero. margin: -10px; Elementele precum paragrafele (<p>) au margini implicite in anumite browsere, asa ca va trebui sa declarati marginea egala cu zero ca sa nu aveti diferente de randare in browsere diferite. Acest lucru se obtine astfel: p {margin: 0;} 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. Observati in exemplul de mai jos, cum elementele sunt setate la 20px (pixeli) fata de corp (body). body{ margin: 20px; background: #eeeeee; font-size: small; font-family: Tahoma, Arial, "Trebuchet MS", Helvetica, sans-serif; text-align: left; } CSS Padding 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,
13/63
cu exceptia ca aici nu exista valoarea "auto" si nu pot fi declarate valori negative. padding-top: lungime procent; padding-left: lungime procent; padding-right: lungime procent; padding-bottom: lungime procent; 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: padding: 10px 10px 10px 10px; Daca declarati toate cele patru valori, ca in exemplul de mai sus, ordinea lor este urmatoarea: sus dreapta jos stanga
In cazul in care declarati o singura valoare, aceasta este valabila pentru toate cele patru laterale ale elementului respectiv. padding: 10px; Daca declarati doar doua sau trei valori, valorile nedeclarate sunt luate din partile opuse: padding: 10px 10px; /* 2 valori */ padding: 10px 10px 10px; /* 3 valori */ 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.
14/63
zero.
Daca nu declarati padding-ul unui element, acesta va fi implicit egal cu
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. #container{ width: 70%; margin: auto; padding: 30px; border: 1px solid #666; background: #ffffff; }
CSS Fonturi Mostenit: DA Fontul Proprietatile fontului pot stabili stilul, marimea, inaltimea liniei si tipul fontului folosit: font: italic bold normal small/1.4em Verdana, sans-serif; Exemplul de mai sus seteaza textul unui element, ca fiind italic, bold, de marime relativa, cu distanta intre linii de 1.4em si un font Verdana sau orice alt font de tipul sans-serif.
15/63
Familia de fonturi Puteti stabili ce font va fi folosit la afisare cu ajutorul proprietatii "fontfamily". Aveti doua posibilitati pentru valori: family-name generic family Daca stabiliti o anumita familie de fonturi, este bine sa specificati la sfarsit si o familie generica de fonturi. Ca si cum ar fi o lista de prioritati. Astfel incat, daca vizitatorul nu are instalate fonturile preferate de dvs, vor fi folosite fonturile din familia generica. font-family: Verdana, sans-serif; Marimea fontului Marimea textului este data de proprietatea "font-size": font-size: valoare; Exista o multime de posibilitati pentru valoare: xx-large x-large larger large medium small smaller x-small xx-small length % (procent)
Sunt destule lucruri de invatat la capitolul "marime font", si vom aborda acest aspect intr-un articol dedicat. Stilul fontului Proprietatea "font-style" specifica stilul fontului: font-style: valoare;
16/63
Posibilele valori pot fi: normal itailc oblique Varianta fontului Puteti stabili varianta fontului cu ajutorul proprietatii font-variant: font-variant: valoare; Pentru "valoare" puteti folosi urmatoarele variante: normal small-caps Grosimea fontului Grosimea fontului folosit este controlata de proprietatea "font-weight": font-weight: valoare; Posibilele valori sunt: lighter normal 100 200 300 400 500 600 700 800 900 bold bolder
17/63
CSS Ancore linkuri si pseudo clase Mai jos, gasiti cateva metode prin care puteti utiliza CSS-ul pentru a stiliza linkurile: a:link {color: #009900;} a:visited {color: #999999;} a:hover {color: #333333;} a:focus {color: #333333;} a:active {color: #009900;}
Acum, hai sa aruncam o privire la fiecare linie din exemplu, sa vedem "cu ce se ocupa" fiecare: a:link {color: #009900;} Prima linie, seteaza culoare unui link implicit, cand nu are loc nici un eveniment. a:visited {color: #999999;} Cea de-a doua linie, ne arata ce culoare are linkul, cand vizitatorul a vizitat deja pagina respectiva, mai exact a executat click anterior pe acel link. a:hover {color: #333333;} Linia numarul trei, seteaza culoarea linkului atunci cand mouseul este deasupra lui. Este evenimentul cunoscut ca si "mouse-over" (mouse deasupra). a:focus {color: #333333;} Aceasta linie, este asemanatoare cu cea anterioara, insa are efect cand utilizatorul foloseste tastatura pentru navigare (tasta "Tab") si nu mouseul. a:active {color: #009900;} Ultima linie specifica culoarea unui link atunci cand acesta este apasat. La click pe link, culoarea se va schimba cu cea specificata in aceasta linie. NOTA: Trebuie sa declarati "a:link" si "a:visited" inainte de "a:hover". mai mult, trebuie sa declarati "a:hover" inaintea lui "a:active".Folosind regula generala de mai sus, toate linkurile din pagina dvs vor fi afectate, si vor folosi aceasta
18/63
regula. Puteti seta stiluri de linkuri separate pentru anumite portiuni din pagina, daca doriti acest lucru. Pseudo Clasele Este posibil sa setati culori diferite pentru linkurile din pagina (de exemplu meniul de o culoare, linkurile din text de o alta culoare, etc ) folosind pseudo-clasele. De exemplu, sa spunem ca doriti ca linkurile din text sa fie diferite de cele din coloana din stanga sau dreapta. Puteti obtine acest lucru astfel: #content a:link {color: #009900;} #content a:visited {color: #999999;} #content a:hover {color: #333333;} #content a:focus {color: #333333;} #content a:active {color: #009900;}
Presupunand ca aveti continutul principal intr-un div numit "content", toate linkurile din acest div vor fi stilizate de acest selector. Daca div-ul dvs are alt nume este de ajuns sa schimbati numele in foaia de stil din "#content" in unul potrivit. Apoi, linkurile dintr-o coloana le stilizam asa: #column a:link {color: #009900;} #column a:visited {color: #999999;} #column a:hover {color: #333333;} #column a:focus {color: #333333;} #column a:active {color: #009900;} Inca odata, presupunem ca div-ul coloanei se numeste "column". Aceeasi metoda se aplica si pentru a declara o clasa in loc de un id.
19/63
a.column:link {color: #009900;} a.column:visited {color: #999999;} a.column:hover {color: #333333;} a.column:focus {color: #333333;} a.column:active {color: #009900;} In acest caz insa, va trebui sa atribuiti fiecarui link clasa potrivita: <a class="column" href="#" title="textul linkului">textul linkului</a> Exista totusi o cale ma usoara: .column a:link {color: #009900;} .column a:visited {color: #999999;} .column a:hover {color: #333333;} .column a:focus {color: #333333;} .column a:active {color: #009900;} ... urmand ca in fisierul (X)HTML sa avem: <div class="column"> <a href="#" title="textul linkului"> textul linkului </a> < /div> Sunt si alte proprietati care pot fi aplicate linkurilor, insa in acest articol ne-am propus sa ne referim doar la culori. Aproape orice proprietate folosita la stilizarea textului poate fi aplicata si la linkuri. CSS Fundaluri Mostenit: NU
20/63
Fundalul Puteti stiliza fundalul unui element cu o declaratie de proprietate adecvata. background: #ffffff url(calea_catre_imagine) top left no-repeat fixed; Valori: attachment color image position repeat 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". background-attachment: valoare; Valori: fixed scroll Culoarea fundalului Proprietatea "background-color" specifica culoarea fundalului: background-color: valoare; Posibile valori: color name hexadecimal number RGB color code transparent
21/63
Imaginea de fundal Se poate seta o magine ca fundal al unui element, cu proprietatea "background-image". background-image: url(calea_catre_imagine); Valori: url none Pozitia fundalului Imaginea folosita cu rol de fundal se poate pozitiona cu ajutorul proprietatii background-position. background-position: valoare; Valorile posibile sunt: top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos
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". background-repeat: valoare; Valori: no-repeat
22/63
repeat repeat-x repeat-y
CSS Validarea fisierelor Un moft sau e chiar necesara? Subiectul validarii fisierelor (X)HTML sau CSS a fost, si este inca, dezbatut pe multe forumuri de specialitate si probabil va mai fi mult timp de acum inainte. Intotdeauna vor fi pareri pro validare si pareri contra. Haideti sa vedem care sunt cateva dintre avantajele si dezavantajele obtinute in urma alegerii noastre de a valida sau nu o pagina. Ce inseamna "a valida" o pagina? Pentru cei care va puneti o asemenea intrebare, indiferent ca vorbim de cod (X)HTML sau CSS, raspunsul este unul singur: validarea unei pagini ne asigura ca sintaxa codului scris este corecta, conform specificatiilor "W3 Consortium". (organizatie al carei scop este acela de a emite specificatii ce asigura promovarea unui web "curat" si standardizat) Trebuie sa spunem insa, ca daca avem o pagina valida, asta nu inseamna neaparat ca ea va fi afisata corect pe toate browserele. De ce sa validam codul? 1 - Asigurarea compatibilitatii pe cat mai multe browsere Chiar daca realizati siteul in asa maniera incat se vede perfect in browserul dvs favorit, este posibil sa nu fie afisat corect in toate browserele. Asta pentru ca nu toate au acelasi sistem de randare al paginii, unele sunt mai permisive cu erorile, altele mai stricte, etc. Avand o pagina valida, ne asiguram ca am eliminat cel putin o problema, si obtinem o compatibilitate maxima cu un numar mai mare de browsere. 2 Vizibilitate in motoarele de cautare Cand exista erori (de cod, de sintaxa) pe o pagina, unele browsere compenseaza aceste erori, si afiseaza totusi corect pagina. Nu la fel sta situatia insa, cand vorbim de motoarele de cautare. La fel ca si browserele, cand interpreteaza o pagina, crawlerul unui motor de cautare trebuie sa
23/63
interpreteze codul sursa al paginii, si sa ia anumite decizii, in functie de continutul gasit. Avand o pagina invalida, riscati sa nu va fie indexata pagina, sau sa fie indexata partial. 3 Profesionalism Pana la urma, modul in care realizati paginile web, reflecta profesionalismul si aptitudinile dvs. Un portofoliu de site-uri valide va cantari mai greu in fata viitorilor clienti decat un portofiliu plin de pagini invalide, chiar daca ele se afiseaza corect in browser. De ce sa NU validam codul? Nu am gasit inca un raspuns la aceasta intrebare... Probabil pentru ca nu exista nici un avantaj in a avea pagini invalide... Cum si unde validam un fisier CSS? Pentru validarea fisierelor CSS folositi unealta pusa la dispozitie de W3C la adresa http://jigsaw.w3.org/css-validator/.
ReferinteCSS CSS background Descriere Proprietarea CSS background - O scurtatura pentru a seta fundalul tuturor proprietatilor intr-o singura declaratie. Valori posibile background-color background-image background-repeat background-attachment background-position
24/63
Valoare prestabilita background nu are nici o valoare prestabilita in css Exemple background: #fff; background: #fff url(img.gif); background: #fff url(img.gif) repeat-x; background: #fff url(img.gif) repeat-x fixed; background: #fff url(img.gif) no-repeat fixed 10px 50%; Versiunea Folosit incepand cu versiunea CSS 1 Compatibil cu urmatoarele browsere CSS background-attachment Descriere Proprietarea CSS background-attachment - Stabileste daca imaginea specificata pentru fundal, se va misca sus jos (scroll) odata cu continutul sau daca ramane fixa. Valori posibile scroll fixed Valoare prestabilita Valoarea prestabilita pentru background-attachment in CSS este scroll
25/63
Exemple background-attachment: fixed; Versiunea Folosit incepand cu versiunea CSS 1 Compatibil cu urmatoarele browsere
Proprietatea CSS background-attachment este majoritatea browser-elor
compatibila
cu
CSS background-color Descriere Proprietarea CSS background-color - Stabileste culoarea de fundal a unui element. Valori posibile color-rgb color-hex color-name transparent
Valoare prestabilita Valoarea prestabilita pentru background-color in CSS este transparent Exemple background-color: black;
26/63
background-color: #922; Versiunea Folosit incepand cu versiunea CSS 1 Compatibil cu urmatoarele browsere
Proprietatea CSS background-color este compatibila cu majoritatea browser-elor
CSS background-image Descriere Proprietarea CSS background-image - Seteaza o imagine pentru a fi folosita ca fundal. Imaginea se va repeta implicit pe axele x si y, daca nu specificati altceva in proprietatea background-repeat. Calea catre imagine poate fi relativa sau absoluta. Valori posibile url none Valoare prestabilita Valoarea prestabilita pentru background-image in CSS este none Exemple background-image: url(image.gif); background-image: url(http://www.yoursite.com/images/image.gif);
27/63
Versiunea Folosit incepand cu versiunea CSS 1 Compatibil cu urmatoarele browsere
Proprietatea CSS background-image este compatibila cu majoritatea browser-elor
CSS background-position Descriere Proprietarea CSS background-position - Seteaza pozitia de start a unei imagini de fundal. Aceasta proprietate, poate fi aplicata doar elementelor de tip block-level. Valori posibile top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos
Valoare prestabilita Valoarea prestabilita pentru background-position in CSS este 0% 0%
28/63
Exemple background-position: top left; background-position: 10% 50%; background-position: 10px 20px; Versiunea Folosit incepand cu versiunea CSS 1 Compatibil cu urmatoarele browsere
Proprietatea CSS background-position este compatibila cu majoritatea browser-elor
CSS background-repeat Descriere Proprietarea CSS background-repeat - Stabileste daca si cum, o imagine de fundal se repeta pe axa x sau y. Valori posibile repeat repeat-x repeat-y no-repeat
Valoare prestabilita Valoarea prestabilita pentru background-repeat in CSS este repeat
29/63
Exemple background-repeat: repeat-y; background-repeat: no-repeat; Versiunea Folosit incepand cu versiunea CSS 1 Compatibil cu urmatoarele browsere
Proprietatea CSS background-repeat este compatibila cu majoritatea browser-elor
CSS border Descriere Proprietarea CSS border - Varianta scurta pentru setarea marginei pe toate partile unui element. Se pot seta grosimea, culoarea si stilul cu o singura declaratie. Valori posibile border-width border-style border-color Valoare prestabilita border nu are nici o valoare prestabilita in css Exemple border: 1px;
30/63
border: 1px dotted; border: thick solid #aaa; Versiunea Folosit incepand cu versiunea CSS 1 Compatibil cu urmatoarele browsere Proprietatea CSS border este compatibila cu majoritatea browser-elor CSS border-bottom Descriere Proprietarea CSS border-bottom - O scurtatura pentru setarea latimii, stilului si a culorii pentru marginea de jos a unui element. Valori posibile border-bottom-width border-bottom-style border-bottom-color Valoare prestabilita border-bottom nu are nici o valoare prestabilita in css Exemple border-bottom: thin; border-bottom: 2px solid; border-bottom: thick dotted black; Versiunea Folosit incepand cu versiunea CSS 1
31/63
Compatibil cu urmatoarele browsere
Proprietatea CSS browser-elor
border-bottom este
compatibila
cu
majoritatea
CSS border-bottom-color Descriere Proprietarea CSS border-bottom-color - Seteaza culoarea marginei de jos a unui element. Valori posibile color-rgb color-hex color-name transparent
Valoare prestabilita border-bottom-color nu are nici o valoare prestabilita in css Exemple border-bottom-color: #922; border-bottom-color: yellow; Versiunea Folosit incepand cu versiunea CSS 1 Compatibil cu urmatoarele browsere
32/63
Proprietatea CSS border-bottom-color este compatibila cu majoritatea browser-elor CSS border-bottom-style Descriere Proprietarea CSS border-bottom-style - Seteaza stilul marginei de jos a unui element Valori posibile none hidden dotted dashed solid double groove ridge inset outset inherit
Valoare prestabilita border-bottom-style nu are nici o valoare prestabilita in css Exemple border-bottom-style:dotted; border-bottom-style:groove; Versiunea Folosit incepand cu versiunea CSS 1
33/63
Compatibil cu urmatoarele browsere
Proprietatea CSS border-bottom-style este compatibila cu majoritatea browser-elor CSS border-bottom-width Descriere Proprietarea CSS border-bottom-width marginea de jos a elementului respectiv. Valori posibile thin medium thick length Seteaza grosimea pentru
Valoare prestabilita Valoarea prestabilita pentru border-bottom-width in CSS este medium Exemple border-bottom-width: 1px; border-bottom-width: medium; Versiunea Folosit incepand cu versiunea CSS 1 Compatibil cu urmatoarele browsere
34/63
Proprietatea CSS border-bottom-width este compatibila cu majoritatea browser-elor CSS border-collapse Descriere Proprietarea CSS border-collapse - Specifica modelul de margine a unui tabel. Valori posibile collapse separate Valoare prestabilita border-collapse nu are nici o valoare prestabilita in css Exemple border-collapse: collapse; Versiunea Folosit incepand cu versiunea CSS 2 Compatibil cu urmatoarele browsere
Proprietatea CSS browser-elor CSS border-color Descriere
border-collapse este
compatibila
cu
majoritatea
Proprietarea CSS border-color - Seteaza culoarea celor patru margini a elementului respectiv.
35/63
Valori posibile color-rgb color-hex color-name transparent inherit
Valoare prestabilita border-color nu are nici o valoare prestabilita in css Exemple border-color: #666; border-color: green; /* toate cele patru margini sunt verzi */ border-color: green blue red ; /* ordinea este sus, dreapta si stanga, jos */ border-color: green blue red black; /* ordinea este sus, dreapta, jos, stanga */ Versiunea Folosit incepand cu versiunea CSS 1 Compatibil cu urmatoarele browsere
Proprietatea CSS border-color este compatibila cu majoritatea browserelor
36/63
CSS border-left Descriere Proprietarea CSS border-left - Scurtatura folosita pentru grosimii, stilului si a culorii, pentru marginea stanga a unui element. Valori posibile border-left-width border-left-style border-left-color Valoare prestabilita border-left nu are nici o valoare prestabilita in css Exemple border-left: thin; border-left: 2px solid; border-left: thick dotted black; Versiunea Folosit incepand cu versiunea CSS 1 Compatibil cu urmatoarele browsere setarea
elor
Proprietatea CSS border-left este compatibila cu majoritatea browser-
37/63
CSS border-left-color Descriere Proprietarea CSS border-left-color - Seteaza culoarea celor patru margini a elementului respectiv. Valori posibile color-rgb color-hex color-name transparent
Valoare prestabilita border-left-color nu are nici o valoare prestabilita in css Exemple border-color: red; border-color: #666; Versiunea Folosit incepand cu versiunea CSS 1 Compatibil cu urmatoarele browsere
Proprietatea CSS browser-elor
border-left-color este
compatibila
cu
majoritatea
38/63
CSS border-left-style Descriere Proprietarea CSS border-left-style - Seteaza stilul marginii din stanga a unui element. Valori posibile none hidden dotted dashed solid double groove ridge inset outset
Valoare prestabilita border-left-style nu are nici o valoare prestabilita in css Exemple border-left-style: ridge; border-left-style: solid; Versiunea Folosit incepand cu versiunea CSS 1 Compatibil cu urmatoarele browsere
39/63
Proprietatea CSS browser-elor CSS border-left-width Descriere
border-left-style este
compatibila
cu
majoritatea
Proprietarea CSS border-left-width - Seteaza grosimea marginii din stanga a unui element. Valori posibile thin medium thick length
Valoare prestabilita Valoarea prestabilita pentru border-left-width in CSS este medium Exemple border-left-width: 3px; border-left-width: medium; Versiunea Folosit incepand cu versiunea CSS 1 Compatibil cu urmatoarele browsere
Proprietatea CSS border-left-width este compatibila cu majoritatea browser-elor
40/63
CSS border-right Descriere Proprietarea CSS border-right - Scurtatura pentru setarea grosimii, a silului si a culorii pentru marginea dreapta a unui element. Valori posibile border-right-width border-right-style border-right-color Valoare prestabilita border-right nu are nici o valoare prestabilita in css Exemple border-right: thin; border-right: 2px solid; border-right: thick dotted black; Versiunea Folosit incepand cu versiunea CSS 1 Compatibil cu urmatoarele browsere
elor
Proprietatea CSS border-right este compatibila cu majoritatea browser-
CSS border-right-color
41/63
Descriere Proprietarea CSS border-right-color - Seteaza culoarea marginii din dreapta unui element. Valori posibile color-rgb color-hex color-name transparent
Valoare prestabilita border-right-color nu are nici o valoare prestabilita in css Exemple border-right-color: red; border-right-color: #ff3; Versiunea Folosit incepand cu versiunea CSS 1 Compatibil cu urmatoarele browsere
Proprietatea CSS border-right-color este compatibila cu majoritatea browser-elor CSS border-right-style Descriere Proprietarea CSS border-right-style - Seteaza stilul marginii din dreapta unui element.
42/63
Valori posibile none hidden dotted dashed solid double groove ridge inset outset
Valoare prestabilita border-right-style nu are nici o valoare prestabilita in css Exemple border-right-style: dashed; border-right-style: dotted; Versiunea Folosit incepand cu versiunea CSS 1 Compatibil cu urmatoarele browsere
Proprietatea CSS border-right-style este compatibila cu majoritatea browser-elor CSS border-right-width
43/63
Descriere Proprietarea CSS border-right-width - Seteaza latimea marginei din dreapta a unui element. Pentru a putea modifica latimea unei margini, aceasta trebuie mai intai stabilita. De aceea vom stabili mai intai proprietatea border-style, dupa care vom utiliza border-right-width pentru a o redimensiona. Valori posibile thin medium thick length inherit
Valoare prestabilita Valoarea prestabilita pentru border-right-width in CSS este medium Exemple border-style:dashed; border-right-width:1em; Versiunea Folosit incepand cu versiunea CSS 1 Compatibil cu urmatoarele browsere
Proprietatea CSS border-right-width este compatibila cu majoritatea browser-elor
44/63
CSS border-style Descriere Proprietarea CSS border-style - Aceasta proprietate CSS seteaza stilul celor patru margini ale unui element. Aceasta proprietate CSS poate avea de la 1na pana la patru valori. Valori posibile none hidden dotted dashed solid double groove ridge inset outset inherit
Valoare prestabilita border-style nu are nici o valoare prestabilita in css Exemple border-style: dashed double solid groove ; /* Ordinea fiind sus, dreapta, jos, stanga */ border-style: solid; /* Toate cele 4 margini vor fi o linie solida */ Versiunea Folosit incepand cu versiunea CSS 1
45/63
Compatibil cu urmatoarele browsere
Proprietatea CSS border-style este compatibila cu majoritatea browserelor CSS border-top Descriere Proprietarea CSS border-top - Seteaza toate proprietatile borduri de sus folosind o singura declaratie. Pot fi specificate border-top-width, border-topstyle, si border-top-color. Aceasta proprietate CSS este foarte utila atunci cand vrem sa scurtam codul CSS. Valori posibile border-top-width border-top-style border-top-color inherit
Valoare prestabilita border-top nu are nici o valoare prestabilita in css Exemple border-style: dashed; /* In cazul in care una dintre cele trei valori nu este specificata, va fi introdusa automat valoarea standard in cazul in care aceasta exista.*/
border-top:thin dotted #efefef; Versiunea Folosit incepand cu versiunea CSS 1
46/63
Compatibil cu urmatoarele browsere
Proprietatea CSS border-top este compatibila cu majoritatea browserelor CSS border-top-color Descriere Proprietarea CSS border-top-color - Stabileste culoarea borduri de sus a unui element. Inainte de a stabilii culoarea unui element folosind proprietatea CSS border-top-color, trebuie mai sa declaram proprietatea border-style. Bordura trebuie sa existe inainte de a modifica culoarea acesteia. Valori posibile color_name hex_number rgb_number transparent inherit
Valoare prestabilita border-top-color nu are nici o valoare prestabilita in css Exemple border-style: solid; border-top-color: #000; Versiunea Folosit incepand cu versiunea CSS 1
47/63
Compatibil cu urmatoarele browsere
Proprietatea CSS browser-elor
border-top-color este
compatibila
cu
majoritatea
Internet Explorer 6 la fel ca si versiunile ulterioare nu este compatibil cu valoarea "transparent" a proprietatii css border-top-color. In momentul de fata, nici o versiune a Internet Explorer nu este compatibila cu valoarea "inherit" a proprietatii css border-top-color. CSS border-top-style Descriere Proprietarea CSS border-top-style - Seteaza stilul bordurii de sus, a unui element. Valori posibile none hidden dotted dashed solid double groove ridge inset outset inherit
Valoare prestabilita border-top-style nu are nici o valoare prestabilita in css Exemple border-top-style: dashed;
48/63
Versiunea Folosit incepand cu versiunea CSS 1 Compatibil cu urmatoarele browsere
Proprietatea CSS browser-elor
border-top-style este
compatibila
cu
majoritatea
In momentul de fata, nici o versiune a Internet Explorer nu este compatibila cu valoarea "inherit" a proprietatii css border-top-style. CSS border-top-width Descriere Proprietarea CSS border-top-width - Seteaza latimea marginei de sus a unui element. Pentru a putea modifica latimea unei margini, aceasta trebuie mai intai stabilita. De aceea vom stabili mai intai proprietatea border-style, dupa care vom utiliza border-top-width pentru a o redimensiona. Valori posibile thin medium thick length inherit
Valoare prestabilita Valoarea prestabilita pentru border-top-width in CSS este medium Exemple border-style: dashed; border-top-width: 3px;
49/63
Versiunea Folosit incepand cu versiunea CSS 1 Compatibil cu urmatoarele browsere
Proprietatea CSS border-top-width este compatibila cu majoritatea browser-elor In momentul de fata, nici o versiune a Internet Explorer nu este compatibila cu valoarea "inherit" a proprietatii css border-top-color.
CSS border-width Descriere Proprietarea CSS border-width - Seteaza latimea celor patru margini a elementului respectiv. Valori posibile thin medium thick length inherit
Valoare prestabilita Valoarea prestabilita pentru border-width in CSS este medium Exemple border-width: 3px; /* toate cele patru margini sunt verzi */ border-width: thin medium thick; /* ordinea este sus, dreapta si stanga, jos */
50/63
border-width: thin medium thick 3px; /* ordinea este sus, dreapta, jos, stanga */ Versiunea Folosit incepand cu versiunea CSS 1 Compatibil cu urmatoarele browsere
Proprietatea CSS border-width este compatibila cu majoritatea browserelor
In momentul de fata, nici o versiune a Internet Explorer nu este
compatibila cu valoarea "inherit" a proprietatii css border-width.
CSS outline Descriere Proprietarea CSS outline - Deseneaza o linie in afara bordurii, de jurimprejurul unui element. In principiu outline si border sunt asemanatoare cu diferenta ca linia desenata de outline va fi la fel de jur-imprejurul elemetului, va avea aceasi culoare, stil si latime. Valori posibile outline-color outline-style outline-width inherit
Valoare prestabilita Valoarea prestabilita pentru outline in CSS este invert none medium Exemple .exemplu a:focus {
51/63
outline: 3px dashed green; } /* In cazul in care nu va fi stabilita una dintre valori, va fi introdusa automat valoarea standard. */ /* In cazul in care nu este specificata cea de-a doua valoare si anume outline-style, elementul nu va dispune de nici un chenar, dat fiind faptul ca valoarea standard pentru outline-style este none */ Versiunea Folosit incepand cu versiunea CSS 2 Compatibil cu urmatoarele browsere
Proprietatea CSS outline este compatibila cu majoritatea browser-elor Doar versiunea 8+ a Internet Explorer este compatibila cu proprietatea outline a CSS, si doar in cazul in care a fost specificat un !DOCTYPE. Meniu lista CSS Un lucru des subestimat, sau omis, cand vine vorba de CSS, este flexibilitatea lui cand este aplicat pe codul, de altfel static, (X)HTML. Desi pare amuzant, cand sunt folosite in cod (X)HTML, listele sunt doar... liste! Dar, cu ajutorul css-ului, putem realiza din listele inerte ale html-ului niste meniuri usoare, atragatoare si chiar dinamice. De ce am ales listele (<li>) ? La modul simplu, putem spune ca prin flexibilitatea css-ului, putem stiliza listele intr-un mod creativ. Iata cateva din avantajele folosirii listelor: sunt extrem de simple ca functionare, si pot fi aranjate aproape in orice mod. pentru ca cel mai bine se pricep la listari, si putem obtine un meniu de tip lista foarte usor
52/63
pot fi folosite intr-un fel de "bucla" (loop)... Atunci cand avem mai multe elemente de listat intr-o pagina, folosim tagurile <ul> si <li>, stilizate cu css. In trecut, singurele moduri de realizare a unor meniuri animate, atractive, erau fie folosirea javascript-ului, care este destul de greoi si neprietenos cu motoarele de cautare, fie folosirea unor harti de imagini, fie folosirea unor imagini pe post de butoane care mareau dimensiunea paginii. Oricare dintre aceste metode este mult inferioara css-ului. Primul exemplu: Prima data vom face o coloana, apoi modificam un pic html-ul, si apoi aplicam stilul css. Mai intai, trebuie sa punem linkurile (meniul) intr-o lista si intr-un div. Acum, meniul nostru arata asa: <a href="#">Link 1</a> <br> <a href="#">Link 2</a> <br> <a href="#">Link 3</a> <br> <a href="#">Link 4</a> <br> <a href="#">Link 5</a> <br> <a href="#">Link 6</a> <br> asa: Aplicand schimbarile despre care spuneam (listele si div-ul), va arata <div class="menu"> <ul> <li><a href="#">Link 1</a> </li> <li><a href="#">Link 2</a> </li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li>
53/63
<li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> </ul> </div> Urmeaza sa introducem cateva linii si in fisierul css: .menu { padding: 0px; margin: 0px; } Asta nu face altceva decat sa ne asigure ca nu se aplica padding sau margine la meniul din div. Daca div-ul nu va fi introdus intr-un alt div sau celula de tabel, poate ar fi bine sa ii specificati si inaltimea si latimea. Sa continuam... .menu ul { list-style: none; padding: 0px; margin: 0px; text-align: left; } Am obtinut astfel, o distorsionare a modului in care se afiseaza in mod normal listele neordonate (<ul>). Cu ajutorul lui "list-style: none;" scoatem bullet-ul afisat implicit in fata listelor, si apoi scoatem orice padding sau margine aplicate in mod natural de tag-ul <ul> .menu li {
54/63
border-top: 5px solid #E9EFE5; } Chiar daca proprietatea folosita aici este in mod natural o bordura, in cazul de fata ne va asigura un spatiu intre doua elemente ale meniului. .menu a { display: block; background-color: #A8BE96; color: #000; text-decoration: none; width: 100%; border-left: 15px solid #4F633F; padding-left: 2px; }
55/63
Linia "display: block;" este o functie a css-ului care ne ajuta sa extindem spatiul ocupat de text, pe orizontala in interiorul div-ului, pe toata latimea acestuia. Iata o ilustratie, pentru a intelege mai bine: In afara de asta, am stabilit si culoarea linkurilor ca fiind nergu (color: #000;), am dezactivat sublinierea automata a linkurilor (text-decoration: none;) si am inlaturat si un posibil bug. Fara "width: 100%;" de multe ori nu se afiseaza corect. De asemenea, mai folosim un truc, si anume marginea din partea stanga. Obtinem astfel, un fel de bullet stilizat. Padding-ul este adaugat pentru evitarea suprapunerii textului pe bullet-ul creat astfel. .menu a:hover { text-decoration: none; color: #fff; background-color: #000; border-left: 15px solid #EFB52B; } Meniul nu ar avea nici un farmec fara un efect de mouse-over. Asadar obtinem cu aceasta declaratie urmatoarele: textul isi schimba culoarea in alb, fundalul devine negru, iar bullet-ul devine orange.
Tabele zebra folosind CSS
Zebra, tabele si randuri ! Hai sa ne uitam putin la urmatoarea imagine:
56/63
Orcine a folosit vreodata iTunes, va recunoaste imediat originea imaginii. Dungile care alterneaza intre alb si albastru au dublu rol: In primul rand arata mai bine din punct de vedere estetic si in al doi-lea rand ghideaza ochiul privitorului, permitandu-i acestuia observe mai bine detaliile unui rand. Daca aveti impresia ca al doilea motiv nu este chiar asa de intemeiat observati diferentele in aceste imagini. In eventualitatea in care utilizezi o asezare dinamica (liquid layout) in pagina unui site, poti ajunge in situatia arata in comparatia de mai sus. Coloanele sunt separate de mult spatiu alb (gol), facand dificila trecerea de la o coloana la alta pe acelasi rand. Solutia #1: Suspectul principal Obtinerea efectului de linii colorate diferit in XHTML este destul de usor: se alterneaza culorile fundalului pentru liniile pare si impare. Una alba, una albastra, etc .. Acest lucru poate fi facut cu doua clase CSS (una pentru dungile pare si alta pentru dungile impare) care se aloca cate una pentru fiecare rand, alternativ. Un exemplu simplu arata asa:
<html> <head> <title>tabele</title> <style type=text/css> #playlist tbody tr. par td { background-color: #eee; }
57/63
#playlist tbody tr.impar td { background-color: #fff; } </style> </head> <body> <table id=playlist> <tbody> <tr class=par> <!Aici este linia de prima culoare --> </tr> <tr class=impar> <!Aici este linia de a doua culoare --> </tr> <tr class=par> <!Aici este linia de prima culoare --> </tr> <tr class=impar> <!Aici este linia de a doua culoare --> </tr> <tr class=par> <!Aici este linia de prima culoare -->
58/63
</tr> <tr class=impar> <!Aici este linia de a doua culoare --> </tr> </tbody> </table> </body> </html> Pentru ca avem de a face doar cu doua posibilitati (par / impar), putem scapa mai usor aplicad o singura clasa presupunand ca pe urmatoarea va fi aplicata regula de baza si anume cealalta clasa: <html> <head> <title>tabele</title> <style type=text/css> #playlist tbody tr td { background-color: #eee; } #playlist tbody tr.impar td { background-color: #fff; } </style> </head> <body>
59/63
<table id=playlist> <tbody> <tr class=impar> <!Aici este linia de prima culoare --> </tr> <tr> <!Aici este linia de a doua culoare --> </tr> <tr class=impar> <!Aici este linia de prima culoare --> </tr> <tr> <!Aici este linia de a doua culoare --> </tr> <tr class=impar> <!Aici este linia de prima culoare --> </tr> <tr> <!Aici este linia de a doua culoare -->
60/63
</tr> </tbody> </table> </body> </html>
Destul de simplu, nu ? Dupa compactarea spatiului alb in cel de al doilea exemplu am obtinut doua lucruri: pe de o parte vizitatotii vor avea linii colorate diferit si vor naviga usor, iar pe de alta parte se face economie de trafic (fisierul fiind mai mic). Oricum, inca avem o problema: In primul exemplu iti smulgi parul scriind cod, iar al doi-lea exemplu este destul de primitiv. Mergem mai departe... Problema #1: Lucrul manual Scopul foilor de stil (CSS), indiferent ca sunt folosite intr-un site web prin intermediul unui fisier de stil (*.css) sau ca sunt folosite intr-o aplicatie precum Adobe InDesign, este sa verifice proprietatile vizualizarii elementelor cuprinse in document si de vreme ce selectorii de stil iti permit sa specifici un anumit stil pentru un anumit element din document, solutia de mai sus obliga autorul sa aplice clasa potrivita (par sau impar) la cel putin jumatate din randurile tabelului. Din moment ce tabelul contine putine randuri aceasta nu este o problema, insa cand avem de a face cu zeci sau sute de randuri copy & paste devine un calvar. Problema poate fi evitata atunci cand tabelul este generat dinamic (server-side, din php de exemplu) , solicitand autorul sa scrie doar cateva linii de cod. Dar nu toate paginile web sunt generate dinamic si daca construiesti o aplicatie web este de dorit sa optimizezi codul paginii (prin CSS sau JavaScript) astfel incat aceasta sa se incarce cat mai repede vizitatorului. Problema #2: Consistenta randurilor Este posibil ca atunci cand ai de a face cu multe randuri si tot schimbi stilurile manual incercand sa gasesti varianta optima, sa le incurci cu totul si sa ai doua sau mai multe randuri consecutive cu acelasi stil. Trebuie sa o iei de la capat si iar nu e bine... Ce e de facut ? Ai putea sa folosesti pseudoselectorii din CSS3 (http://www.w3.org/TR/2001/CR-css3-selectors-
61/63
20011113/#structural-psudos) si ai rezolvat problema... Oricum, suportul browser-elor pentru CSS3 este destul de incomplet si iar nu e cea mai buna solutie.. Solutia: Cutia cu scule Si aceasta este inca o solutie la problema noastra... Metoda par/impar mentionata mai sus foloseste CSS pur; Este timpul sa lasam la o parte barosul si sa folosim niste unelte mai fine: JavaScript si DOM. In loc sa aplicam noi manual clasele css pe randurile corespunzatoare, vom folosi un pic de JavaScript pentru navigarea prin tabel si aplicarea automata a claselor css. Cam asa arata aceasta reteta: ne orientam sa gasim tabelul pe care il vom colora alternativ pe randuri. cautam toate elementele <tr> continute de elementul <tbody>. navigam printre <td> -uri si aplicam clasa css corespunzatoare (determinata de pozitia fiecarui <tr>) Schimbam culorile claselor dupa gust. Pe cat de simplu pare in teorie, pe atat de simplu este si in practica. Ceea ce urmeaza este solutia practica ce va face treaba in locul nostru (ca sa vezi ce inseamna sa fii documentat). Vezi scriptul Aceasta metoda are doua avantaje: putem folosi clasele css pentru elemente mai specifice in tabel (de exemplu, folosind metafora iTunes, putem indica daca melodia este pornita sau oprita sau daca este selectata in acel moment). putem aplica automat linii colorate diferit la orice tabel din orice pagina ce are functia stripe() inclusa. Trebuie doar sa facem apel la functie cu id-ul tabelului ca argument la momentul potrivit in pagina.Veziexemplu In timp ce ultima solutie necesita un timp de preparare mai mare si atentie sporita comparata cu prima solutie, codul ei este mai clar, simplu si usor de personalizat. Si din moment ce ai realizat-o nu iti ramane decat sa o folosesti ori de cate ori ai nevoie. Despre autor David F. Miller a jonglat cu liniile de cod, atribute si elemente inca din vremea absolvirii "University of Calgary" (http://www.ucalgary.ca) in anul 2002. Site-ul lui personal (http://www.fivevoltlogic.com) - neactualizat de peste 3 ani - ar trebui sa cuprinda, intr-o zi, munca lui efectuata intre timp. Copyright Articol tradus de
62/63
pe site-ulA List Apart de Postolache Mirabela pentru CssPlaza. Se poate prelua aceasta traducere a articolului doar cu obligatia afisarii sursei ( http://www.cssplaza.com/) precum si cu obligatia respectarii conditiilor impuse pentru articolul original. Translated with the permission of A List Apart Magazine and the author[s].
CSS-ul si sfarsitul tabelelor Ce este atat de rau la un tabel? Daca ai lucrat macar o data cu un site realizat din tabele, sunt sigur ca stii deja raspunsul la aceasta intrebare. HTMl-ul se transforma intr-o insiruire confuziva de coloane si randuri, fara o delimitare clara sau macar intuitiva. Daca doresti sa aplici un nou design site-ului tau bazat pe tabele, va trebui sa ai multa rabdare, nervi, timp, pentru ca toate astea se vor consuma in timpul acestui redesign. Realizarea unui site din tabele poate fi comparata cu construirea unui castel din carti de joc. Ce este CSS-ul? CSS inseamna Cascading Style Sheets, tradus fiind cam asa: Foi de Stil in Cascada... Mai exact, CSS-ul iti permite sa aplici stiluri diferite, pe bucati separate de cod HTML, folosind numele tag-ului, ID-uri sau clase de stiluri, definite de tine. Acest lucru se face folosind selectorii CSS. Daca nu sunteti deloc familiar cu CSS-ul puteti aborda intre tim articolul Introducere in CSS. Selectorii CSS Primul lucru care ar trebui sa il stiti, ar fi cum functioneaza acesti selectori. Exista multi selectori aproape inutili, insa baza nu este foarte greu de inteles. CSS-ul se bazeaza pe tagurile din codul HTML, care au ID-uri sau clase. Singura diferenta intre o clasa si un ID este aceea ca un ID se refera la un singur tag (definit de acel ID), pe cand o clasa se poate aplica la mai multe taguri. Daca folosesti in foaia de stil numele unui tag, atunci acel stil se va aplica la toate tagurile de acel tip din pagina web respectiva. Mai exact: p /* va fi aplicat tuturor paragrafelor */
63/63
p.ceva /* va fi aplicat tuturor paragrafelor din clasa "ceva" */ p#ceva /* doar paragrafului cu ID-ul "ceva" */ .ceva /* tuturor tagurilor din clasa "ceva" */ #ceva /* doar tagului cu ID-ul "ceva" */ Pentru a aplica regulile de stil fiecarui selector de mai sus, trebuie sa puneti acolade {} dupa el, iar intre aceste acolade sa specificati regulile de stil dorite. Va recomand si sectiunea Referinte CSS.
S-ar putea să vă placă și
- Java ScriptDocument459 paginiJava Scriptdumitrus100100% (3)
- Manual Aplicatie Inf Lege 273-2006Document12 paginiManual Aplicatie Inf Lege 273-2006Sergiu Gabriel KotorbacsÎncă nu există evaluări
- Declaratie Pe Proprie RaspundereDocument1 paginăDeclaratie Pe Proprie RaspundereMarius SirbuÎncă nu există evaluări
- Lista 5 1Document6 paginiLista 5 1Marius SirbuÎncă nu există evaluări
