|
CSS = Cascading Style Sheets Un singur fisier care defineste toate valorile pe care ar trebui sa le definesti in tagurile HTML, si pe care toate paginile il verifica inainte de afisare pentru a se formata conform specificarilor tale date in fisierul CSS.
Este un avantaj considerabil pentru ca la designul unui site mai mare nu trebuie sa definesti valorile pentru taguri decat o data in fisierul . CSS in loc sa o faci pentru fiecare pagina in parte. Exemplu: Sa presupunem ca ai zece pagini care contin tagul <em> (italic) de zece ori si vei dori ca tot textul care este cuprins intre aceste taguri sa aiba culoarea albastra.
In mod normal vei introduce pentru fiacare tag <em> in parte in cele zece pagini culoarea albastra. Asta inseamna ca trebuie sa definesti pentru o suta de taguri culoarea. In loc, poti face asa: Faci un fisier .css, sa zicem style.css care sa contina linia : em { color: blue; } apoi introduci <link rel="stylesheet" type="text/css" href="style.css"> in head-ul fiecarei pagini care vei dori sa aiba <em> de culoare albastra (cele 10 pagini de care vorbeam mai sus).
Acum tot textul pe care il vei avea intre tagurile <em> din cele zece pagini va arata asa. Concept em { color: blue; } Exemplul de deasupra este o simpla regula CSS. O regula consta din doua parti principale: selectorul "H1" si declaratia "color: blue". Declaratia are doua parti: proprietatea "color" si valoarea "blue". Selectorul este legatura dintre fisierul HTML si style sheet. Toate elementele HTML pot fi selectori (<h>, <p>, <img>, etc.). Legatura in HTML Sunt trei metode pentru a implementa functii CSS intr-un site: - folosirea unu singur fisier CSS pentru toate paginile
- integrarea comenzilor CSS in tag-ul <head> al fiecarei pagini
- folosirea atributului style direct in tagurile HTML
Folosirea unu singur fisier CSS pentru toate paginile In mod normal aceasta este metoda cea mai utilizata pentru folosirea functiilor CSS. Faci un singur fisier css pe care il verifica fiecare pagina in parte inainte de afisare. In acest fel daca modifici ceva in acest fisier acel ceva se va modifica pentru toate paginile care verifica css-ul inainte de afisare (un font, de exemplu). Poti sa iti schimbi intreaga schema de culori, fonturi, etc. pentru intreg sit-ul facand modificari numai in fisierul css. Creaza cu un editor de text (notepad de ex.) un fisier nou si modfica-i numele si extensia in test.css. Acum mai creaza un fisier pe care il numesti test.html. In fisierul test.css introdu urmatoarea linie: p {font-family: Arial, sans-serif; color: #0000FF; font-size: 120%; } In fisierul test.html introdu : <head> <title>test</title> <link rel="stylesheet" type="text/css" href="test.css"></link> </head> <body> <p>Text de proba</p> </body> </code> Tocmai ai definit fontul, culoarea fontului si marimea fontului pentru orice tag <p> din test.html. Rezultatul va fi acesta : Text de proba Integrarea comenzilor CSS in tag-ul <head> al fiecarei pagini Daca vrei sa folosesti acelasi design pentru toate paginile sit-ului atunci iti recomand sa folosesti metoda de mai sus. De fapt chiar si in cazul in care vei avea mai multe design-uri e bine sa o folosesti poate si numai pentru faptul ca te poti organiza mai bine (iti va fi mai simplu sa ai toate informatiile ce tin de design intr-un singur fisier atunci cand sit-ul va lua proportii). In fine, pentru a avea aceleasi rezultate ca mai sus deschide test.html, sterge din tag-ul <head>: <link rel="stylesheet" type="text/css" href="test.css"></link> si pune in loc <style type="text/css"> p {font-family: Arial, sans-serif; color: #0000FF; font-size: 120%; } </style> Dupa cum vezi, rezultatul este acelasi. Folosirea atributului style direct in tagurile HTML Daca vrei sa modifici un tag anume poti introduce functiile de stil in interiorul acestuia. test.html va arata astfel acum : <head> <title>test</title> </head> <body> <p style="font-family: Arial, sans-serif; color: #0000FF; font-size: 120%;">Text de proba</p> </body> Formatarea se va opri in momentul in care se inchide tag-ul, in cazul nostru </p>. Poti folosi metoda aceasta pentru formatarea unor anumite taguri intr-un alt mod fata de cum este formatat in fisierul css. De exemplu daca in fisierul nostru test.css stilul pentru tagurile </p> este p {font-family: Arial, sans-serif; color: #0000FF; font-size: 120%; } toate tagurile <p> vor avea culoarea albastra (#0000FF). Daca vei dori ca un anume tag <p> sa aiba culoarea rosie de ex., vei introduce in tag-ul respectiv style="color: red;". In cazul nostru va arata astfel : <p style="color: red;">Text de proba</p> Deci, toate tag-urile <p> vor avea culoare albastra in afara de cel in care am specificat culoare rosie, care va avea culoarea rosie. |
