|
|
1. Utilitate
Foarte pe scurt, utilizarea codurilor CSS
(Cascading Style Sheets) a aparut ca o solutie la doua probleme ale
limbajului HTML:
- insuficienta
balizelor HTML pentru nevoile de design;
- incarcarea paginilor scrise cu
coduri HTML - pentru fiecare paragraf trebuiau specificate atributele
care il definesc.
|
|
|
Atentie!
Paginile
web raman aceleasi fisiere cu extensia html, ce difera este doar stilul
de formatare.
2. Stilurile de tip CSS in realizarea paginilor web trebuie
privite doar ca o extensie a limbajului HTML
Se pot folosi coduri HTML
combinate cu balize CSS.
|
|
De exemplu, sa presupunem ca avem doua
paragrafe intr-o pagina web, care au urmatoarele caracteristici:
- setul de caractere:
Tahoma;
- marimea: medie;
- culoarea: rosu;
- atribute de
caractere: bold si italic;
In HTML, paragrafele vor arata in modul
urmator:
<p><font face=Tahoma size=2 color=red><b><i>
'Va pot spune incotro merge Europa Universitatile mileniului III sunt
cu totul altfel decat cele pe care le aparam cu dintii. Conservatorismul
actual trebuie sa dispara. Universitatile din Occident gandesc mult mai
departe. Au niste ani-lumina avans in gandire. Se vorbeste de universitatile
virtuale la modul foarte real. Universitati fara sedii, legate (mai intai)
de oameni si de idei.'
</i></b></font></p>
<p><font face=Tahoma size=2 color=red><b><i>
Studentii manifesta un grad ridicat de interes pentru noile tehnologii ale
informatiei si comunicarii, accesul prin Internet la resurse variate cu
informatii de ultima ora, prezentate intr-o forma atractiva, precum si
posibilitatea stabilirii unui contact cu autorii articolelor fiind
factori de motivare ce determina orientarea spre cercetare
interdisciplinara si pentru specializare pe domeniile programei
de studiu.
</i></b></font></p>
|
>> Click aici pentru a vedea rezultatul.
Folosind CSS, vom avea:
<p style='font-family:Tahoma; font-size:12px; color:red; font-weight:bold;
font-style:italic;'>
'Va pot spune incotro merge Europa Universitatile mileniului III sunt
cu totul altfel decat cele pe care le aparam cu dintii. Conservatorismul
actual trebuie sa dispara. Universitatile din Occident gandesc mult
mai departe. Au niste ani-lumina avans in gandire. Se vorbeste de
universitatile virtuale la modul foarte real. Universitati fara sedii, legate
(mai intai) de oameni si de idei.'
</p>
<p style='font-family:Tahoma; font-size:12px; color:red; font-weight:bold;
font-style:italic;'>
Studentii manifesta un grad ridicat de interes pentru noile tehnologii
ale informatiei si comunicarii, accesul prin Internet la resurse variate
cu informatii de ultima ora, prezentate intr-o forma atractiva, precum si
posibilitatea stabilirii unui contact cu autorii articolelor fiind factori de
motivare ce determina orientarea spre cercetare interdisciplinara si
pentru specializare pe domeniile programei de studiu.
</p>
|
>> Click aici pentru a vedea rezultatul.
OK, insa care este avantajul? Am scris tot
atat de mult cod.
|
|
|
Ideea este ca:
Balizele
CSS ofera posibilitati mai multe de formatare a textelor si blocurilor de
elemente din paginile web.
2. Daca avem un stil de paragraf pe care il folosim foarte des,
acesta se poate defini generic in antetul paginii HTML sau intr-un fisier
separat, cu extensia css, care se apeleaza din pagina html.
|
|
2. Fisier CSS extern
Mai concret, ne vom ocupa de cazul in care dorim
un fisier separat, extern, in care definim stilurile pe care le vom folosi in
toate documentele dintr-un site.
Acest fisier se creaza in Notepad si se
salveaza cu extensia css.
Deschide Notepad, defineste generic paragraful
ca avand caracteristicile cerute mai sus, apoi definiti titlul de nivel 1
(H1), dupa modelul urmator:
Salveaza fisierul creat cu numele
'stilulmeu.css', intr-un director gol.
Apoi creaza, in acelasi director, un fisier html, in antetul caruia apeleaza
fisierul de stiluri (neaparat in sectiunea HEAD):
<html>
<head>
<title>Pagina mea cu stilurile mele</title>
<link rel='stylesheet' type='text/css' href='stilulmeu.css' />
</head>
<body>
<h1>Acesta este titlul, asa cum l-am definit</h1>
<p>Acesta este primul paragraf, care are caracteristicile definite
in fisierul de stiluri 'stilulmeu.css'. Prin modificarea fisierului css voi
obtine efecte in toate paginile html care il apeleaza.</p>
<p>Pot, de exemplu, sa schimb culoarea in 'blue'.</p>
<p>Al treilea paragraf, ca si toate care ar putea urma, se
conformeaza normelor stilului meu.</p>
</body>
</html>
|
Salveaza, apoi deschide-l intr-un browser.
>> Click aici pentru a vedea rezultatul.
Experimental, intoarce-te in Notepad, deschide
fisierul de stiluri si modifica dupa cum urmeaza:
Apoi salveaza fisierul css, revino in browser
si apasa F5, pentru Refresh.
Poti defini, in fisierul CSS, stilurile
favorite pentru textele cuprinse in paragraf (p), titluri (de la h1 pana la
h6), celule de tabel (td) etc. Apoi poti apela acest fisier din toate
paginile web pe care le creezi.
Marcaje
de tip inline
Pana acum, ne-am ocupat doar de marcaje de tip
bloc. Sa vedem ce folosim pentru a schimba culoarea sau marimea unui singur
cuvant din cadrul unui paragraf sau dintr-un titlu. Pentru aceste
interventii, se folosesc elemente de marcaj de tip inline.
Un astfel de marcaj inline este baliza <span>. Aceasta este
folosita in cadrul unui alt marcaj, de tip bloc, fara sa determine trecerea
la un alt rand.
Un exemplu:
<p>Acest paragraf este definit in 'stilulmeu2.css' si are o marime de 11 pixeli.
Insa urmatorul <span style='font-size:16px;'> cuvant</span>
este vizibil mai mare.</p>
|
>> Click aici pentru a vedea rezultatul.
Tot astfel, ii putem schimba culoarea, corpul
de litera, grosimea etc. Mai mult, daca avem un stil de insertii de tip
inline folosit destul de des intr-un site, putem defini atributele pentru
<span> direct in fisierul nostru de stiluri:
4. Gruparea
In fisierul css, se pot grupa mai multe
elemente care au aceleasi atribute, dupa exemplul urmator:
5. Clasa
Sa presupunem ca, pentru nevoile noastre de
design, avem nevoie de mai multe tipuri de formatari pentru textele din
paginile web. Unul ar trebui sa fie definit pentru textul normal, care va
constitui continutul propriu-zis al paginilor. Mai avem nevoie de un text cu
caractere mai mici, pentru explicatii suplimentare. Si ne-ar mai trebui
un text verde ingrosat, pe care il vom folosi intr-o coloana de tabel cu
background galben.
In acest moment vom defini, in fisierul estesimplu.css,
mai multe clase, pe care le vom apela in cadrul diverselor balize din
fisierul html. Pentru a defini o clasa, ii alegem un nume (de preferat cat
mai reprezentativ), ii adaugam un punct in fata si ii specificam
caracteristicile, alaturi de alte balize:
Fisierul css va arata in modul urmator:
h1
p, span
.normal
.mic
.verde
|
>> Iar fisierul html il poti vedea aici.
|
|
|
Experimenteaza. Observa. Invata singur.
Pentru realizarea paginilor html, probabil vei folosi un instrument
specializat, un editor de HTML cum ar fi Macromedia Dreamweaver sau
Microsoft FrontPage, care sunt extrem de simplu de utilizat. Insa, pentru
design profesional, vei fi nevoit sa faci corecturi in cod html.
|
|
In lectiile urmatoare vom incerca sa abordam
temele de design propriu-zis al paginilor web.
|
|
