Tutoriale CSS
Pagina 1 din 1
Tutoriale CSS
Scris de Blytz Sam Iun 02, 2012 12:35 am
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 .Acest lucru se face ca in exemplul ce urmeaza:
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 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:
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:
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.
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.
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 .Acest lucru se face ca in exemplul ce urmeaza:
- Cod:
<head>
2
<title>titlu pagina</title>
3
<style type="text/css">
4
Aici se definesc stilurile CSS
5
</style>
6
</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.
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 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:
1
<link rel="stylesheet" type="text/css" href="Calea catre fisierul.css" />
- Cod:
1
<style type="text/css">@import url( Calea catre fisierul.css )</style>
- Cod:
01
<head>
02
<title> titlu pagina </title>
03
<link rel="stylesheet" type="text/css" href="stil.css" />
04
</head>
05
06
sau
07
08
<head>
09
<title> titlu pagina </title>
10
<style type="text/css"> @import url( Calea catre fisierul.css ) </style>
11
</head>
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:
- Cod:
1
<p style="color: #ff0000;">Text rosu</p>
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.
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.
Blytz- WebMaster
- Mesaje : 863
Reputatie : 12
Data de inscriere : 15/01/2011 -
Pagina 1 din 1
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum|
|
|