curs webdesign
Stiluri CSS Elementul Div – continuare Divizia poate fi defintă ca: element de tip bloc folosit pentru definirea unor zone din fişierul HTML. O divizie poate conţine toate părţile care alcătuiesc siteul dvs., incluzând alte divizii, span-uri, imagini, text, etc. Puteţi defini o divizie într-un fişier HTML, plasând următorul cod intre tag-urile <body> </body> : <div> Continutul siteului este plasat aici </div>
Bineînţeles, veţi dori să îl stilizaţi un pic. Modificăm în acest caz, astfel:
<div id="container"> Continutul siteului este plasat aici </div>
Iar în fişierul css avem următorul cod: #container{ width: 70%; margin: auto; padding: 20px; border: 1px solid #666; background: #ffffff; } Acum, tot conţinutul din divizia noastră va fi stilizat după regula "container", pe care am definit-o în fişierul css. O divizie, realizează implicit o trecere la linie nouă (linebreak). Puteţi folosi atât ID-urile cât şi clasele pentru stilizarea unei divizii în cadrul site-ului dvs.
Tabele zebră Zebra, tabele şi rânduri ! Hai să ne uităm puţin la următoarea imagine:
1
curs webdesign
Oricine a folosit vreodata iTunes, va recunoaşte imediat originea imaginii. Dungile care alternează între alb şi albastru au dublu rol: în primul rând arată mai bine din punct de vedere estetic şi în al doilea rând ghidează ochiul privitorului, permiţându-i acestuia să observe mai bine detaliile unui rând. Dacă aveţi impresia că al doilea motiv nu este chiar aşa de întemeiat observaţi diferenţele în aceste imagini. În eventualitatea în care utilizaţi o aşezare dinamică (liquid layout) în pagina unui site, puteţi ajunge în situaţia arătată în comparaţia de mai sus. Coloanele sunt separate de mult spaţiu alb (gol), făcând dificilă trecerea de la o coloană la alta pe acelaşi rând. Obtinerea efectului de linii colorate diferit este destul de usor: se alterneaza culorile fundalului pentru liniile pare si impare: una albă, una albastră etc. Acest lucru poate fi făcut cu două clase CSS (una pentru dungile pare şi alta pentru dungile impare) care se alocă câte una pentru fiecare rând, alternativ. Un exemplu simplu arată aşa:
<html> <head> <title>tabele</title> <style type=”text/css”> #playlist tbody tr. par td { background-color: #eee; } #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 --> </tr> <tr class=”impar”> <!—Aici este linia de a doua culoare --> </tr> </tbody> </table>
2
curs webdesign
</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> <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 --> </tr> </tbody> </table> </body> </html>
Destul de simplu, nu ? După compactarea spaţiului alb în cel de al doilea exemplu am obţinut două lucruri: pe de o parte vizitatorii vor avea linii colorate diferit şi vor naviga uşor, iar pe de altă parte se face economie de trafic (fişierul fiind mai mic).
3
curs webdesign
Meniu lista CSS Un lucru des subestimat, sau omis, când vine vorba de CSS, este flexibilitatea lui când este aplicat pe codul, de altfel static, HTML. Deşi pare amuzant, când sunt folosite în cod HTML, listele sunt doar... liste! Dar, cu ajutorul CSS-ului, putem realiza din listele inerte ale html-ului nişte meniuri uşoare, atrăgătoare şi chiar dinamice. De ce am ales listele (<li>) ? La modul simplu, putem spune că prin flexibilitatea CSS-ului, putem stiliza listele într-un mod creativ. Iată câteva din avantajele folosirii listelor:
• • •
sunt extrem de simple ca funcţionare şi pot fi aranjate aproape în orice mod. putem obţine un meniu de tip listă foarte uşor pot fi folosite într-un fel de "buclă" (loop)... Atunci când avem mai multe elemente de tip listă într-o pagină, folosim tagurile <ul> şi <li>, stilizate cu CSS.
În trecut, singurele moduri de realizare a unor meniuri animate, atractive, erau fie folosirea javascript-ului, care este destul de greoi şi neprietenos cu motoarele de căutare, fie folosirea unor hărţi de imagini, fie folosirea unor imagini pe post de butoane care măreau dimensiunea paginii. Oricare dintre aceste metode este mult inferioară CSS-ului. Primul exemplu Prima dată vom face o coloană, apoi modificăm un pic html-ul şi apoi aplicăm stilul CSS. Mai întâi, trebuie să punem linkurile (meniul) într-o listă şi într-un div. Acum, meniul nostru arată aşa: <a href="#a">Link 1</a> <br> <a href="#a">Link 2</a> <br> <a href="#a">Link 3</a> <br> <a href="#a">Link 4</a> <br> <a href="#a">Link 5</a> <br> <a href="#a">Link 6</a> <br> Aplicând schimbările despre care spuneam (listele şi div-ul), va arăta aşa: <div class="menu"> <ul> <li><a href="#a">Link 1</a> </li> <li><a href="#a">Link 2</a> </li> <li><a href="#a">Link 3</a></li> <li><a href="#a">Link 4</a></li> <li><a href="#a">Link 5</a></li> <li><a href="#a">Link 6</a></li> </ul> </div> Urmează să introducem câteva linii şi în fişierul .css:
4
curs webdesign
.menu { padding: 0px; margin: 0px; } Asta nu face altceva decât sa ne asigure că nu se aplică padding sau margine la meniul din div. Dacă div-ul nu va fi introdus într-un alt div sau celulă de tabel, poate ar fi bine sa îi specificaţi şi înălţimea şi lăţimea. Să continuăm... .menu ul { list-style: none; padding: 0px; margin: 0px; text-align: left; } Am obţinut astfel, o distorsionare a modului în care se afişează în mod normal listele neordonate (<ul>). Cu ajutorul lui "liststyle: none;" scoatem bullet-ul afişat implicit în faţa listelor şi apoi scoatem orice padding sau margine aplicate în mod natural de tag-ul <ul>. .menu li { border-top: 5px solid #E9EFE5; } Chiar dacă proprietatea folosită aici este în mod natural o bordură, în cazul de faţă ne va asigura un spaţiu între două 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; } Linia "display: block;" este o funcţie a CSS-ului care ne ajută să extindem spaţiul ocupat de text, pe orizontală în interiorul div-ului, pe toată lăţimea acestuia. Iată o ilustraţie, în dreapta, pentru a înţelege 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;
5
curs webdesign
color: #fff; background-color: #000; border-left: 15px solid #EFB52B; } Exemplu cu imagini în chenare:
O galerie de imagini este o cerinţă destul de uzuală pentru o pagină web – o serie de imagini thumbnail care fac legătura cu imagini de dimensiuni mai mari. În acest exemplu este prezentată o tehnică de afişare a acestor imagini folosind CSS. Creare listă de imagini Pentru o galerie de imagini, este esenţială o listă de imagini, pentru care, în HTML, ar fi logic să folosiţi o listă neordonată. Pentru fiecare element din listă, imaginea thumbnail are o etichetă şi un link către imaginea mare. Aranjarea imaginilor în linii şi coloane Pentru a aranja imaginile thumbnail în rânduri trebuie să folosiţi următorul cod CSS: li { display: inline; float: left; } Am fi putut să folosim şi tabele, dar cu CSS numărul coloanelor variază în funcţie de lăţimea disponibilă. Având în vedere ca imaginile thumbnail pot fi de dimensiuni diferite, puteţi adăuga valori pentru lăţime şi înălţime astfel încât să obţineţi o aranjare uniformă. li { display: inline; float: left; width: 101px; height: 101px; } Adăugarea unei imagini de fundal Ca să faceţi lucrurile şi mai drăguţe, puteţi adăuga o imagine de fundal (frame.gif) în < li >.
li { display: inline; float: left; width: 101px; height: 101px; margin: 4px; background: transparent url(frame.gif) no-repeat top left; }
6
curs webdesign
Poziţionarea imaginilor thumbnail în centru Pentru a centra thumbnail-urile, ele pot fi transformate în imagini de fundal pentru tag-ul <a>.
CSS: li a { display: block; width: 101px; height: 101px; background-position: center; background-repeat: no-repeat; text-decoration: none; } Afişarea etichetelor Mutarea unei imagini thumbnail într-una de fundal duce la pierderea etichetei imaginii din HTML. Pentru a o afişa, trebuie să o includeţi într-un < span > din tagul < a >. CSS: li { height: 115px; } li a span { font-size: 9px; position: relative; top: 103px; color: #666; text-transform: uppercase; display: block; text-align: center; } li a:hover span { color: red; }
TEMĂ Să se creeze o pagină cu galerie CSS de imagini şi să se includă în site-ul dvs, apoi CSS-izaţi celelalte pagini dând efecte textului şi tabelelor existente.
7