andreony
[admin]
 Din: bucharest
Inregistrat: acum 18 ani
Postari: 1062
|
|
Lectia 2: Marcaje CSS
2.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;
încarcarea paginilor scrise cu coduri HTML - pentru fiecare paragraf trebuiau specificate atributele care îl definesc.
Atentie!
1. Paginile web ramân aceleasi fisiere cu extensia html, ce difera este doar stilul de formatare.
2. Stilurile de tip CSS în 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 într-o pagina web, care au urmatoarele caracteristici:
setul de caractere: Tahoma;
marimea: medie;
culoarea: rosu;
atribute de caractere: bold si italic;
În HTML, paragrafele vor arata în modul urmator:
<p><font face=Tahoma size=2 color=red><b><i>
"Va pot spune încotro merge Europa... Universitatile mileniului III sunt
cu totul altfel decât cele pe care le aparam cu dintii. Conservatorismul
actual trebuie sa dispara. Universitatile din Occident gândesc mult mai
departe. Au niste ani-lumina avans în gândire. Se vorbeste de universitatile
virtuale la modul foarte real. Universitati fara sedii, legate (mai întâi)
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 într-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 încotro merge Europa... Universitatile mileniului III sunt
cu totul altfel decât cele pe care le aparam cu dintii. Conservatorismul
actual trebuie sa dispara. Universitatile din Occident gândesc mult
mai departe. Au niste ani-lumina avans în gândire. Se vorbeste de
universitatile virtuale la modul foarte real. Universitati fara sedii, legate
(mai întâi) 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 într-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, însa care este avantajul? Am scris tot atât 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 îl folosim foarte des, acesta se poate defini generic în antetul paginii HTML sau într-un fisier separat, cu extensia css, care se apeleaza din pagina html.
2.2. Fisier CSS extern
Mai concret, ne vom ocupa de cazul în care dorim un fisier separat, extern, în care definim stilurile pe care le vom folosi în toate documentele dintr-un site.
Acest fisier se creaza în Notepad si se salveaza cu extensia css.
Deschide Notepad, defineste generic paragraful ca având caracteristicile cerute mai sus, apoi definiti titlul de nivel 1 (H1), dupa modelul urmator:
p { font-family:Tahoma; font-size:12px; color:red; font-weight:bold;
font-style:italic; }
h1 { font-family:Times, serif; font-size:18px; color:yellow;
font-weight:bold; background-color:blue; }
Salveaza fisierul creat cu numele "stilulmeu.css", într-un director gol.
Apoi creaza, în acelasi director, un fisier html, în antetul caruia apeleaza fisierul de stiluri (neaparat în 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
în fisierul de stiluri "stilulmeu.css". Prin modificarea fisierului css voi
obtine efecte în toate paginile html care îl apeleaza.</p>
<p>Pot, de exemplu, sa schimb culoarea în "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 într-un browser.
>> Click aici pentru a vedea rezultatul.
Experimental, întoarce-te în Notepad, deschide fisierul de stiluri si modifica dupa cum urmeaza:
h1 { font-family:Times, serif; font-size:18px; color:yellow; font-weight:bold;
background-color:blue; }
p { font-family:Verdana; font-size:11px; color:blue; }
Apoi salveaza fisierul css, revino în browser si apasa F5, pentru Refresh.
Poti defini, în fisierul CSS, stilurile favorite pentru textele cuprinse în paragraf (p), titluri (de la h1 pâna la h6), celule de tabel (td) etc. Apoi poti apela acest fisier din toate paginile web pe care le creezi.
2.3. Marcaje de tip inline
Pâna acum, ne-am ocupat doar de marcaje de tip bloc. Sa vedem ce folosim pentru a schimba culoarea sau marimea unui singur cuvânt 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 în cadrul unui alt marcaj, de tip bloc, fara sa determine trecerea la un alt rând.
Un exemplu:
<p>Acest paragraf este definit în "stilulmeu2.css" si are o marime de 11 pixeli.
Însa urmatorul <span style="font-size:24px;"> cuvânt</span>
este vizibil mai mare.</p>
>> Click aici pentru a vedea rezultatul.
Tot astfel, îi putem schimba culoarea, corpul de litera, grosimea etc. Mai mult, daca avem un stil de insertii de tip inline folosit destul de des într-un site, putem defini atributele pentru <span> direct în fisierul nostru de stiluri:
span { font-size:20px; color:red; font-weight:bold; }
2.4. Gruparea
ÃŽn fisierul css, se pot grupa mai multe elemente care au aceleasi atribute, dupa exemplul urmator:
h1, h2, h3, h4, h5, h6 {color: green; }
2.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. Şi ne-ar mai trebui un text verde îngrosat, pe care îl vom folosi într-o coloana de tabel cu background galben.
În acest moment vom defini, în fisierul estesimplu.css, mai multe clase, pe care le vom apela în cadrul diverselor balize din fisierul html. Pentru a defini o clasa, îi alegem un nume (de preferat cât mai reprezentativ), îi adaugam un punct în fata si îi specificam caracteristicile, alaturi de alte balize:
Fisierul css va arata în modul urmator:
h1 { font-family:Verdana; font-size:20px; }
p, span { font-family: Verdana ; }
.normal { font-size : 14px ; color : black; margin-left:20px; }
.mic { font-size: 11px; color: black; }
.verde { font-size: 14px; color: green; line-height: 40px; }
>> Iar fisierul html îl poti vedea aici.
Experimenteaza. Observa. ÃŽnvata 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. Însa, pentru design profesional, vei fi nevoit sa faci corecturi în cod html.
În lectiile urmatoare vom încerca sa abordam temele de design propriu-zis al paginilor web.
_______________________________________
------ eVoLuTiOn ------
|
|
