Scurt tutorial CSS – Introducerea CSS in pagina
Pentru ca tot am vorbit in post-ul anterior despre modificarea unui tabel folosind Fisierele de tip CSS, am sa incerc sa vi le explic putin si pe acestea.
Mai intai, Wikipedia ne spune asa:
In computing, Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL. The CSS specifications are maintained by the World Wide Web Consortium (W3C).
CSS este un acronim provenind din Cascading Style Sheets, care inseamna “foi de stil in cascada” (cea mai apropiata traducere). In documentele W3C, CSS nu e definit ca un nou limbaj, ci ca un mecanism care permite formatarea documentului HTML.
CSS-ul nu exclude HTML-ul din pagina web. Nu se poate realiza o pagina web folosind numai CSS, care a fost proiectat astfel incat sa conlucreze cu HTML-ul. Folosind CSS, se ajunge la:
1. un control mai fin asupra paginii web
2. scaderea dimensiunii in KB a paginii web, atunci cand codul CSS e continut intr-un fisier extern
3. o mai mare comoditate: modificand fisierul CSS extern, modificati simultan toate paginile web in care acesta e inclus
4. efecte mai sofisticate decat cele produse de codul HTML: suprapunerea unei imagini peste alta imagine, a unui text peste alt text, impresia de relief, efectul hover, afisarea unor fonturi mai mari decat h1 si multe altele.
Dezavantaj: Pagina continand cod CSS poate arata diferit in navigatoare diferite, deoarece nu toate browserele interpreteaza codul CSS.
Daca mai adaugi si cod JavaScript, vei obtine efecte si mai sofisticate, chiar de animatie. CSS + JavaScript = DHTML ( Dynamic HTML ).
In documentul HTML, poti sa introdici codul CSS in mai multe moduri:
1.Codul CSS e prezent �n pagina web, iar efectul s�u se aplic� asupra �ntregului document.
[html]
<html>
<head>
<style>
b {color:red;}
i {color:blue;}
</style>
</head>
<body>
<p align=center><b>Ce este CSS-ul</b></p>
<p><i>scurte explicatii </i></p>.
</body>
</html>
[/html]
Orice text cuprins �ntre tag-urile de bold (b) va fi afisat cu rosu, oriunde s-ar afla �n document. Orice text afisat cu italice va fi de culoare albastra. Vei observa ca daca introduci codul CSS in head-ul paginii, vei mari putin marimea fisierului html.
2. Codul e prezent in pagina web, iar efectul sau se aplica elementelor izolate.
[html]
<html>
<head>
</head>
<body>
<a href="link1.htm" style="color:red;">link1</a>
<a href="link2.htm" style="color:green;">link2</a>
<a href="link3.htm" style="color:blue;">link3</a>
</body>
</html>
[/html]
Observi acum ca nu mai avem o eticheta style, ci un atribut style al etichetei link. Orice eticheta HTML poate beneficia de acest atribut. Pentru formatarea unor portiuni mari de text, puteti folosi containerele div sau span.
3. Codul CSS se afla intr-un fisier extern, cu extensia css. Efectul sau se aplica �ntregului document.
[html]
<html>
<head>
<link href="fisier.css" rel="stylesheet" type="text/css">
</head>
<body>
<a href="link1.htm">link1</a>
<a href="link2.htm">link2</a>
<a href="link3.htm">link3</a>
</body>
</html>
[/html]
Fisierul extern poti sa-l scri in Notepad si salvat cu extensia .css. Includerea lui in pagina web o poti face folosind tag-ul link, care trebuie sa se afle intre portiunile de head si /head ale documentului.
Fisierul CSS se poate importa �n pagina web
Importul trebuie declarat imediat dupa tag-ul < style >, inaintea oricarei alte linii de cod.
In exemplul alaturat, s-a realizat importul in pagina curenta a fisierului css.css din directorul “director” al site-ului www.simple-webdesign.com.
[html]
<html>
<head>
<style>
@import url(http://www.simple-webdesign.com/director/css.css);
</style>
</head>
<body>
[/html]
Pentru moment cam atat despre CSS, insa va promit ca am sa revin cu mai multe detalii si explicatii legate de folosierea CSS-ului si a fisierelor de tip CSS.
One Comment
Ar fi o idee sa prezinti si un studiu de caz supra unui website nu asa de forte (dpdv css), si sa spui cum l-ai optimiza tu :)
One Trackback
[...] din diferite zone ale unei pagini sau a unui site. Daca nu stiti inca cum se adauga fisierele CSS, click aici. Tags: CSS, tutorial | This entry was written by Simple, filed under CSS, Tutorials [...]