Informatiile de care ai nevoie muzica, IT, horoscop programare, e-marketing forum de discutii resurse.com Nume de domenii com/net/org - 50 LEI/an Web hosting 12,5 LEI/luna conturi Reseller www.domenii-web.com Nume de domenii com/net/org - 50 LEI/an Web hosting 12,5 LEI/luna conturi Reseller www.domenii-web.com Steaua.info Voteaza stirile tale! Becali, jucatori si suporteri! Citeste, adauga, comenteaza! Steaua.info

Acest articol este o introducere in foile de stil in cascada, adesea prescurtate drept CSS. Intentia mea este de a va da o idee despre ce sunt, la ce folosesc si care sunt capcanele lor.

1. Ce sunt foile de stil in cascada (CSS)?

Cea mai simpla cale de a explica foile de stil in cascada este de a vedea un exemplu.

Sa luam urmatorul fragment de cod, de exemplu, si sa-l inseram in cadrul sectiunii HEAD a unei pagini web.

<style type="text/css">
<!--
	BODY {
		background-color: white ;
		color: black ;
		font-face: Arial, Helvetica, sans-serif;
	}
-->
</style>

2. De ce sa folosesti foile de stil in cascada?

a. Formatul fata in fata cu functiile

Principalul motiv invocat de aparatorii CSS este ca acesta permite sa tii elementele de formatare separate de elementele functionale.

De exemplu, etichetele <H1></H1> (si restul familiei) sunt destinate a fi folosite in cadrul titlurilor. Cand scrii un text intre aceste doua etichete, acesta devine imediat un titlu. Totusi, unora dintre designerii web nu le plac tipul si marimea fonturilor implicite si vor recurge la construirea titlurilor folosind etichetele <FONT></FONT>. Rezultatul va fi ca paginile vor arata dezordonate, iar orice schimbare vor face la unul dintre titluri va trebui aplicata tuturor celorlalte titluri.

Cu foile de stil in cascada, daca vei dori ca toate titlurile H1 sa foloseasca un font "sans serif" cu dimensiunea de 24 de puncte, doar vei pune fragmentul urmator de cod

 H1 {
	 font-face: sans-serif ;
	 font-size: 24pt ;
 } 

Documentul tau poate fi astfel mai clar si vei folosi etichetele HTML adecvate (de exemplu H1 pentru un titlu), in loc sa umpli pagina cu tot felul de fragmente ciudate de cod.

Frumusetea foilor de stil in cascada apare in clipa in care vei scrie un tabel. De cate ori ai scris tabele ca cel ce urmeaza?

<table>
  <tr>
    <td>
      <font face="Arial,Helvetica" size=2>
      ... etc...
      </font>
    </td>
  </tr>
  <tr>
    <td>
      <font face="Arial,Helvetica" size=2>
      ... etc...
      </font>
    </td>
  </tr>
</table>

Cu foile de stil in cascada, tot ce ai de facut este sa scrii o declaratie ca aceasta

TD {
	font-face: Arial, Helvetica ;
	font-size: 10pt ;
} 

<td>
	... etc ...
</td>

b. O locatie centrala

De exemplu, daca ai salvat o foaie de stil intr-un fisier denumit "formatare.css", poti ca in sectiunea HEAD a documentului sa pui o eticheta ca aceasta:

	<LINK rel="formatting.css" type="text/css">

c. Formatarea independenta de browser

Poti chiar pozitiona orice element fara sa recurgi la tabele, si sa creezi efecte interesante cu text. sa luam, de exemplu, urmatorul cod pe care il vom introduce intr-o foaie de stil.

    .bannermain {
        font-family: Arial Black ;
        margin-left: 10px ;
        color: green ;
        font-size: 28px ;
    } 
 
    .bannershadow {
        font-family: Arial Black ;
        margin-left: 8px ;
        margin-top: -38px ;
        color: darkgreen ;
        font-size: 28px ;
    } 

  <div class="bannermain">Primul meu site</div>
  <div class="bannershadow">Primul meu site</div>

3. Probleme in folosirea foilor de stil

Problema nu sta in CSS in sine, ci in faptul ca nu oricine are un browser compatibil cu foile de stil in cascada. Numai ultimele versiuni ale Netscape si Internet Explorer (versiunile 4 sau mai noi) si Opera suporta CSS. Deoarece inca mai exista oameni care folosesc browsere vechi, frumoasa ta formatare a unei pagini poate sa nu fie vazuta de acestia cand vor incarca pagina ta creata cu ajutorul CSS.

In aceasta perioada, unii creatori de pagini web ignora foile de stil in cascada, iar altii folosesc CSS pe cat posibil incercand sa pastreze un continut logic si pentru cei cu browsere vechi. Aceasta ultima varianta am incercat si eu sa o aplic in cadrul thesitewizard.com. De asemenea, incerc sa folosesc foile de stil cat mai putin posibil, pentru a evita dependenta de CSS.

Atat timp cat foile de stil in cascada par a reprezenta valul viitorului, este o idee buna sa te familiarizezi cu ele. In plus chiar salveaza mult din timpul unui designer web, si include o multime de facilitati interesante. Multi designeri declara ca incepand sa lucreze cu foile de stil in cascada au devenit dependenti de ele!

Programare fericita!

Toate cele bune,
Christopher S.L. Heng
thesitewizard.com

Copyright 2000 Christopher S L Heng. Toate drepturile rezervate
Viziteaza http://www.thesitewizard.com/ pentru mai multe sfaturi gratuite si articole despre web design, promovare, profit si programare; sau aboneaza-te la publicatia noastra GRATUITA trimitand un email la subscribe@thesitewizard.com.