Tel: +40 720 34 21 22

2. Cum arata stilurile? Cum le definesc? Unde le definesc?

Un stil are forma

numestil {

valori;

valori;

}

numestil – acesta este numele pe care il alegi pentru stil. Poate sa fie orice insiruire de litere sau cifre, dar fiecare stil pe care il creezi trebuie sa aiba un nume unic.

{ } – ceea ce pui intre acolade sunt elementele care formeaza stilul

Spre exemplu, sa presupunem ca dorim sa creem un stil pentru textele unui site web, care sa transforme textul in culoarea rosie de marimea 14 pixeli. Vom defini acest stil de forma:

scrisrosu {

textul trebuie sa aiba culoarea rosie;

textul trebuie sa aiba dimensiunea de 14 pixeli;

}

Scrisrosu va fi numele unic al stilului iar intre acolade vom pune 2 comenzi: una care sa faca textul sa fie rosu iar alta care sa il faca sa fie de 14 pixeli marime (invatam in curand si cum facem asta 🙂 ).

Ce sunt elementele de mai sus?
Comenzile in CSS sunt formate din selectori (selectors) si declaratii (declarations). Declaratile sunt la randul lor formate din proprietati si valori, iar selectorii ii dicteaza browser-ului carui element din pagina sa ii schimbe stilul. Declaratile incep si se termina cu acolade “{ }”, iar proprietatile sunt delimitate prin “;”. Nu te speria, nu trebuie sa retii ce scrie in acest paragraf.

Atentie! CSS este un limbaj case sensitive. Conteaza daca scrii cu litere mari sau mici. Asta in schimb trebuie sa retii.


Unde definesc stilurile?

Stilurile CSS pot fi definite in doua locuri:

  • in head-ul unei pagini web
  • intr-un fisier separat, individual.

Cea de-a doua varianta este cea recomandata.

Definirea unui stil CSS in head-ul paginii se face editand pagina HTML si adaugand stilul intre tag-urile <head> si </head>. Codul in pagina HTML ar arata de forma:

<head>

……

<style>

stil1 {
text-align: left;
}

stil2 {
text-align: right;
}

</style>

…..

</head>

A doua varianta, adica definirea unui still CSS separat, individual se face creand o pagina cu stiluri, numita de exemplu stiluri.css. In aceasta varianta in head-ul paginii HTML vom adauga o legatura (un link) catre pagina de stil. Pagina HTML ar arata de forma:

<head>

…..

<link rel=”stylesheet” type=”text/css” href=”stiluri.css”>

….

</head>

Apoi in fisierul stiluri.css vom scrie:

stil1 {
text-align: left;
}

stil2 {
text-align: right;
}

Aceste fisiere de stil, cand vei lucra pe site-uri vei vedea ca ajung sa aiba cateva sute de randuri, unele chiar peste 1000 de randuri. Deasemenea site-urile moderne au mai mult de un fisier de stil. De aceea este importanta regula ultimului venit pe care o invatam in modulul urmator.

Mai avem doua module cu notiuni teoretice apoi ne apucam de treaba si practic. 🙂

SEE ALL Add a note
YOU
Add your Comment