CSS – Cum se face

Cum se insereaza o Foaie de Stil(Style Sheet) ?

Cand un browser citeste o foaie de stil, atunci va formata documentul in concordanta cu acea foaie de stil. O foaie de stil se poate insera intr-un document in trei moduri dupa cum urmeaza:

Foi de Stil externe

Foile de Stil esterne sunt ideale pentru cazurile in care trebuie sa se formateze un numar mare de pagini. Cu ajutorul unei foi de stil externe se poate schimba design-ul unui intreg site doar modificand un singur fisier. Fiecare pagina va trebui sa trebui sa contina un link catre foaia de stil prin tag-ul <link> ce va trebui plasat in sectiunea head ca in exemplul urmator:

<head>
<link rel="stylesheet" type="text/css"
href="stil.css" />
</head>

Browser-ul va citi definitiile de stil din fisierul stil.css si va formata pagina web in conformitate cu ele.

O foaie de stil externa poate fi scrisa utilizandu-se rice editor de text si va trebui sa nu contina nici un tag html. Foile se stil trebuie sa aibe intotdeauna extensia .css:

hr {color: red}
div {margin-left: 25px}
table {background-image: url("imagini/fundal.gif")}
ATENTIE! Nu lasati spatii goale intre valoarea proprietatii si unitatea de masura. Daca spre exemplu folositi ”margin-left: 25 px” in loc de “margin-left: 25px” va functiona bine doar in browser-ul IE6, nu si in Mozilla/Firefox sau Netscape.

Foi de stil interne

Foile de stil interne sunt recoamndate doar atunci cand o singura pagina are un design mai deosebit. Definitiile de stil se declara in zona de head a documentului prin tag-ul <style> ca in exemplul urmator:

<head>
<style type="text/css">
hr {color: red}
div {margin-left: 25px}
body {background-image: url("imagini/fundal.gif")}
</style>
</head>

ATENTIE! Un browser ignora in mod normal tag-urile pe care nu le cunoaste. Asta inseamna ca un browser mai vechi care nu suporta tag-ul <styles> va ignora acest tag dar continutul lui va fi afisat in fereastra browser-ului. Pentru a corecta aceasta problema este nevoie de ascunderea continutului tag-ului <styles> in comentariile HTML ca in exemplul urmator:

<head>
<style type=”text/css”>
<!–
hr {color: red}
div {margin-left: 25px}
body {background-image: url(“imagini/fundal.gif”)}
–>
</style>
</head>

Stiluri inline

Stilul inline se foloseste doar in cazul in care se aplica pentru o singura aparitie a unui elemnt intrucat se pierd foarte multe facilitati prin amestecarea formatarii cu continutul documentului.

Pentru a folosi stilurile inline se foloseste atributul style in tag-ul ce trebuie formatat. To use inline styles you use the style attribute in the relevant tag. Atributul style poate contine orice proprietate CSS. Exemplul urmator demonstreaza scimbarea culorii si a marginii din astanga ale unui paragraf:

<p style="color: red; margin-left: 20px">
Acesta este un paragraf
</p>

Foi de stil multiple

Daca aceleasi proprietati ale aceluiasi selector au fost definite in foi de stil diferite, atunci valoarea va fi mostenita mergandu-se pe ierarhia: inline-interne-externe.

Spre exemplu o foaie de stil externa are definite proprietetile pentru selectorul h3 in felul urmator:

h3 
{
color: green;
text-align: right;
font-size: 10pt
}

Iar o foaie de stil interna are definite urmatoarele proprietati pentru selectorul h3:

h3 
{
text-align: center; 
font-size: 15pt
}

Daca pagina care contine foaia de stil interna este legata si de foaia de stil externa, atunci selectorul h3 va avea urmatoarele proprietati:

color: green; 
text-align: center; 
font-size: 15pt

Culoarea va fi mostenita de la foaia de stil externa iar aliniamentul textului si marimea vor fi mostenite de la stilul intern.

Lasa un raspuns

Adresa ta de email nu va fi publicata. Campurile necesare sunt marcate *

Poti folosi aceste etichete HTML si atribute: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>