z9l12lp

3.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!
1. 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
3. 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:
1. 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.

3.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:

p A font-family:Tahoma; font-size:12px; color:red; font-weight:bold; font-style:italic; S

h1 A font-family:Times, serif; font-size:18px; color:yellow; font-weight:bold; background-color:blue; S
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: h1 A font-family:Times, serif; font-size:18px; color:yellow; font-weight:bold; background-color:blue; S p A font-family:Verdana; font-size:11px; color:blue; S
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.
3.3. 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:24px;"> 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: span A font-size:20px; color:red; font-weight:bold; S
3.4. Gruparea
In fisierul css, se pot grupa mai multe elemente care au aceleasi atribute, dupa exemplul urmator: h1, h2, h3, h4, h5, h6 Acolor: green; S
3.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 A font-family:Verdana; font-size:20px; S

p, span A font-family: Verdana ; S

.normal A font-size : 14px ; color : black; margin-left:20px; S

.mic A font-size: 11px; color: black; S

.verde A font-size: 14px; color: green; line-height: 40px; S
>> 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.