HTML pe intelesul tuturor - ghid practic pentru crearea paginilor web

 

 

 

14.4. Cum se insereaza o foaie de stil

Cand un browser citeste o foaie de stil, va aplica documentului formatarile specificate in foia respectiva. In functie de forma in care sunt prezentate informatiile de stil, inserarea acestora intr-un document web se poate efectua in trei moduri:

a) astfel, pentru inserarea unei foi de stil externe, ideala cand stilul se va aplica mai multor pagini, trebuie folosit tag-ul <LINK> in fiecare pagina ce urmeaza sa foloseasca stilul respectiv. Atributele obligatorii pentru tag-ul <LINK> sunt REL cu valoarea “stylesheet”, TYPE cu valoarea “text/css” si HREF care are ca valoare adresa URL a fisierului care contine foaia de stil.

Acest tag se amplaseaza in sectiunea HEAD a paginii web cu urmatoarea sintaxa:

<HEAD>

<LINK REL="stylesheet" TYPE="text/css" HREF="nume_fisier.css">

</HEAD>

In aceste conditii, browserul va citi foia de stil din fisierul nume_fisier.css si va formata documentul in mod corespunzator.

O foaie de stil poate fi scrisa in orice editor de text. Fisierul nu trebuie sa contina vreun tag HTML si trebuie salvat cu extensia .css.

b) o foaie de stil interna ar trebui folosita atunci cand exista un singur document cu un stil propriu. Foaia de stil interna se defineste in sectiunea HEAD folosind tagul <STYLE> astfel:

<HEAD>

<STYLE TYPE="text/css">

h1 {color: blue}

p {margin-left: 20px}

body {background-image: url("fundal.gif")}

</STYLE>

</HEAD>

Browserul va citi acum stilurile, asa cum au fost definite, si va formata documentul in conformitate cu acestea.

Nota: In mod normal un browser ignora tag-urile necunoscute. Acest lucru inseamna ca browserele mai vechi, care nu suporta stiluri, vor ignora tag-ul <STYLE>, dar vor afisa continutul acestuia, cuprins intre tag-ul de inceput si cel de incheiere, sub forma de text. Pentru a preintampina acest neajuns, este recomandabil sa includeti continutul in interiorul unui comentariu, ca in exemplul de mai jos:

<HEAD>

<STYLE TYPE="text/css">

<!--

h1 {color: blue}

p {margin-left: 20px}

body {background-image: url("fundal.gif")}

          -->

</STYLE>

</HEAD>

c) in final, daca doriti sa folositi un stil inline, va trebui sa folositi atributul style in interiorul tag-ului respectiv. Este o metoda folosita mai ales atunci cand un stil urmeaza sa fie aplicat unei singure aparitii a unui element. Atributul style poate contine orice caracteristica CSS. Exemplul urmator arata cum se poate schimba culoarea si stilul fontului folosit intr-un paragraf, fara a mai apela la tag-urile <FONT> cu atributul color si <B>:

<p style="color:red; font-weight:bold"> Acesta este un paragraf  in care textul va fi de culoare rosie si scris cu caractere ingrosate</p>

Nu voi insista asupra foilor de stil, o prezentare amanuntita a acestora urmand sa faca subiectul unui viitor ghid.


Folosirea stilurilor in ghid programare limbaj htmlCONSIDERATII GENERALE DESPRE DESIGN SI ASPECT in ghid programare limbaj html