Introducere

Introducere

De ce folosim CSS

Cu ajutorul CSS-ului putem crea pagini web simple dar si complexe folosind efecte diverse. Cu CSS putem stabili culoarea, marimea si fontul textului, de asemenea putem crea un layout (un suoport pentru elementele HTML) personalizat adaugand margine, culoare sau imagine de fond si multe altele. In concluzie CSS poate ajuta in a mentine codul html cat mai simplu si mai ordonat.

Cascading Style Sheets pe numele lui mic CSS se foloseste pentru a personaliza tagurile HTML..In principiu HTML a fost conceput pentru a marca elementele unei pagini:

......

..............

Toate atributele de personalizare au fost scoase si salvate intr-un fisier extern cu extensia ".css".

In felul acesta modificand un singur fisier putem schimba forma in care sunt afisate toate paginile unui website. Putem schimba culoarea textului, fontul, marimea, putem personaliza div-uri, formulare si multe altele.

Sintaxa CSS este urmatoarea

tag { atribut: valuare }

sau

element { proprietate: valuare}

Oricare dintre cele doua expresii este adevarata.

Sa luam un exemplu practic pe care il vom studia putin.

h1 { color: green }

Ce inseamna mai exact? Ca "Titlul de marimea 1 are culoarea verde". body { color: black }

Aceasta inseamna: "Culoarea de fond a continutului este negru"Observatii si reguli de scriere a codului CSSIn cazul in care valoarea elementului se compune din doua cuvinte le vom pune intre ghilimele

p { font-family: "times new roman"}

Daca vom scrie mai mult decat o proprietate le vom separa una de cealalta prin punct si virgula (;).

p { text-align: right;color: green; }

Recomandare:Se recomanda sa se scrie toate aceste propietati una sub alta pentru o mai buna citire ulterioara a codului. De asemenea se recomanda sa puneti punct si virgula dupa toate proprietatile elementului chiar daca este ultima dintr-un sir sau daca elementul are o singura proprietate. Luand in calcul acestea codul CSS ar deveni urmatorul:p {text-align:right;color:green;font-family:"times new roman";}

O alta regula CSS spune ca mai multe elemente cu aceleasi proprietati se pot grupa dupa cum urmeaza:h1, h2, h3, p {

font-family:arial;color:green;

}

Comentariile in CSS au aceasi functie ca si comentariile HTML, de a specifica ce am facut intr-o anumita expresie, sau daca lipseste ceva sau orice altceva ne trece prin minte.

/*Un comentariu se marcheaza asa*/p {text-align:right;color:green;/*Un comentariu se marcheaza asa*/font-family:"times new roman";}

CSS - Class si Id Pentru a stabili in CSS o clasa de elemente cu aceleasi proprietati vom folosi atributul class sau id.

Atributul class

Clasele de elemnte in CSS pot fi stabilite pentru un singur tag HTML sau pentru orice alt tag care are la atributul class valoarea stabilita anterior. Desi suna putin cam complicat este chiar simplu. Sa ne uitam la urmatorul exemplu care stabileste o clasa in CSS.

p.center {text-align:center}p.right {text-align:right}

Cu aceasta bucata de cod CSS am stabilit doua clase de paragrafe, unul centrat si altul aliniat la dreapta. Acum le vom aplica in HTML.

Paragraf centrat.Paragraf aliniat la dreapta.

In cazul in care vrem sa folosim aceasi clasa pentru mai multe elemente vom elimina tagul din numele clasei.Sa zicem ca vrem sa centram mai multe elemente. De exemplu un div, un titlu, un paragraf si o imagine. Putem folosi aceasi clasa.

.center {text-align:center}

Ar trebui mentionat ca numele clasei ".center", este un nume generic si nu are nimic de-a face cu actiunea asupra unui tag. Se putea numi la fel de bine si ".altnume".

.altnume {text-align:center}

Un titlu centratIn acest loc apare paragraful editat de dumneavoastra. (Tot acest paragraf va fi centrat in mijlocul div-ului).

Cu toate acestea, va sfatuiesc sa folositi nume descriptive si intuitive. Sunt mult mai simple si servesc mai bine la intelegerea ulterioara a codului CSS

Nota:Inceperea numelui cu un numar NU este recomandata. Clasele denumite gen: ".165464" sau ".6ceva" sunt interpretate doar de IE

CSS - Id

Id-ul se foloseste la fel ca si class. De fapt singura diferenta intre class si id este sintaxa de definire. Vom folosi un diez (#) in loc de punct pentru a defini id-ul in CSS#center {text-align:center;color:blue;font-family:"sans serif";}

CSS - Extern intern sau inline

In momentul de fata codul CSS se poate stoca sau pune in trei locuri si anume:

- fisier extern (.css)- in head- in tagul care se vrea personalizat (inline)

Fisier .css extern

In general fisierele externe de CSS sunt cele mai folosite. Este de recomandat sa folositi aceasta metoda pentru o mai simpla modificare a intregului website. In acest fel se poate modifica un site intreg schimband continutul unui singur fisier .css.Singura conditie este ca toate paginile site-ului sa contina in sectiunea head tag-ul .

Un fisier CSS se poate scrie in orice editor de text, notepad, notepad++, word, macromedia, etc dar trebuie salvat cu extensia ".css"

Un exemplu simplu de cod CSS ar fi urmatorul:body { background-image: url("img/imagine.png"); }hr { color: #efefef;}p { margin-left: 15px;}

Observatie: NU lasati spatiu intre numarul specificat si unitatea de masura. Folosind "margin-left:15 px;" in loc de "margin-left:15px;" vom genera erori in Firefox si Opera.

CSS intern

Codul CSS in head, nu ar trebui folosit prea mult, cu exceptia faptului ca aveti o pagina care are nevoie de un stil propriu si nu il imparte cu nici o alta pagina.

Codul CSS intern este acelasi ca si la cel introdus intr-un CSS extern., cu exceptia unor taguri speciale care il incapsuleaza. Dar sa aruncam o privire la exemplul urmator.

body { background-image: url("img/imagine.png"); }hr { color: #efefef; }p { margin-left:15px;}

Dupa cum am mentionat anterior, pentru a plasa CSS in HTML vom folosi tagul impreuna cu atributul type="text/css", pe care le vom pune in sectiunea head a documentului HTML.

CSS inline

CSS inline nu inseamna nici mai mult nici mai putin decat CSS in interiorul tagului HTML. Folosind CSS-ul sub aceasta forma vom pierde toate avantajele pentru care a fost creat si anume pentru a nu amesteca tagurile HTML cu formatarea si prezentarea lor. Exista totusi si avantaje in a folosi CSS-ul in aceasta maniera dupa cum vom vedea. Dar mai intai sa vedem cum anume se poate introduce CSS intr-un tag HTML.

Acesta este un paragraf formatat cu ajutorul CSS.

Observatie:Dupa cum se observa in exemplul anterior valoarea fontului este o valoare compusa din trei cuvinte. In acest caz in loc de ghilimele duble am folosit ghilimele simple pentru a evita conflictul cu ghilimele duble folosite pentru a incapsula valoarea atributului style.

Sa mai aruncam o privire peste exemplul in discutie:

style="text-align:right;color:green;font-family:`times new roman`;margin-left:15px;"

Daca am folosii acelasi tip de ghilimele peste tot, browser-ul ar intrerpreta sfarsitul valorii inainte de vreme. Iata bucata de cod CSS care va fi interpretata de browser:

style="text-align:right;color:green;font-family:"

Restul codului CSS fiind ignorat.

Prevalenta metodelor de a insera CSS in documentele HTML

Codul CSS se poate insera in HTML dupa cum urmeaza:

- fisier extern (.css)- in head- in tagul care se vrea personalizat (inline)Vom adauga acum si cea de-a 4-a modalitate si anume:

- toate trei anterioare.

Ce se intampla insa atunci cand formatam un element si folosim mai multe modalitati de inserare a CSS-ului?Ordinea de reproducere in browser va fi urmatoarea:

1. Formatare CSS inline (in interiorul tag-ului HTML)2. Formatere CSS interna (in sectiunea head a documentului)3. Formatare CSS externa (fisier .css extern)4. Standardul browser-ului (valori CSS atribuite standard)

ConcluzieFormatarea inline anuleaza toate celelalte expresii CSS de formatare. Iar standardele de formatare ale browser-ului intervin doar atunci cand nu este specificata o alta formatare CSS.

Exceptie:In cazul in care tagul este pus dupa tagul codul CSS aflat in fisierul .css extern va anula codul CSS intern.

body { background-image: url("img/imagine.png"); }hr { color: #efefef;}p { margin-left: 15px;}

CSS BackgroundPentru a formata background-ul elementelor HTML cu ajutorul CSS vom folosi urmatoarele atribute

- background-color - background-image - background-repeat - background-attachment - background-position

Background solid

body { background-color: #efefef; } h1 { background-color:red, }p { background-color:rgb(255,0,0); }div { background-color: black; }

Dupa cum se observa culoarea background-ului poate fi exprimata in sistemul hexadecimal, RGB sau folosind numele in engleza.

Background imagine

Ca si valoare standard browserul va repeta imaginea pe latimea si lungimea pagini pentru a crea background-ul

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

Pentru a repeta imaginea doar pe verticala sau doar pe orizontala vom folosi urmatorul cod CSS:

body{background-image:url("o_imagine.gif");background-repeat:repeat-x;}

Aceasta functie speciala a CSS-ului se poate folosi la crearea background-urilor cu efect gradient. Pentru a repeta inaginea pe verticala in loc de "repeat-x" vom folosi "repeat-y".

Daca nu vrei ca imaginea sa se repete trebuie sa specifici acest lucru

body{background-image:url("o_imagine.gif");background-repeat:no-repeat;}

Odata ce am specificat ca nu vrem ca imaginea sa se repede si in cazul in care nu specificam altceva browserul va adauga: background-position: top left; ca valoare standard.

CSS - background-attachment

CSS background-attachment se foloseste pentru a pune ca background o imagine care se misca impreuna cu continutul sau pur si simplu este fixa. Sintaxa CSS ar fi urmatoarea:

body{ background-image:url("o_imagine.png");background-repeat:no-repeat;background-attachment:fixed;}

Scurtarea codului CSS

body {background-color:#ffffff;background-image:url("o_imagine.gif");background-repeat:no-repeat;background-position:top right;}

Tot ce am scris mai sus se poate rezuma la expresia CSS de mai jos

body { background-color: #ffffff url("o_imagine.gif") no-repeat top right; }

Cand se foloseste varianta scurta a acestor atribute ordinea lor va fi mereu urmatoarea:

-background-color -background-image -background-repeat -background-attachment -background-positionNu conteaza daca unul sau mai multe valori lipsesc atata timp cat se pastreaza aceasta ordine.Uniti de msur

Unele dintre proprietile elementelor coninute ntr-o pagin web necesit scrierea unei dimensiuni. Cu excepia valorilor nule, dup dimensiune trebuie scris unitatea de msur.

U.M. Explicaie

% procent. Ex: p.big {line-height: 200%}

in inch. Ex: h2 {margin: 0.5in;}

cm centimetri. Ex. h2 {margin: 0.5cm;}

mm milimetri

em 1 em este egal cu mrimea normal a fontului. Ex. h1 {font-size: 2em;} (identic cu font-size:200%)

pt point 1pt=1/72in

pc pica 1pc=12px

px pixeli. Exemplu: p {font-size: 12px}

Exemplu:

p {margin: 0 20px 0 20px}

Fonturi

n CSS fontul este definit prin denumire, dar, deoarece pe calculatorul pe care se afieaz pagina web fontul indicat poate lipsi, dup denumirea fontului (fonturilor) se precizeaz familia din care acesta face parte. Proprietatea utilizat este fontfamily.

Fontul

Familia

"Times New Roman", Gramond, Georgia

serif

Arial, Verdana, Helvetica

sans-serifCourier, "Courier New"

monospace

Exemplu:

h1 {font-family: verdana,helvetica, sans-serif;}

h2 {font-family: "Times New Roman", serif;}Majoritatea paginilor web folosesc Verdana.

nclinarea caracterelor se stabilete cu ajutorul proprietii font-style, valorile posibile fiind normal, italic sau oblique.

Exemplu:

h2 {font-family: "Times New Roman", serif;

font-style: italic;

}Folosind proprietatea font-variant se poate impune scrierea cu majuscule mici (font-variant: small-caps) sau normal (font-variant: normal). Scrierea bold se poate impune folosind font-weight: Proprietatea poate avea valorile bold sau normal.

Dimensiunea caracterelor poate fi impus folosind proprietatea font-size. De obicei mrimea este definit n pixeli (px) sau procentual (% sau em). Este recomandat varianta definirii procentuale deoarece n acest caz rmne posibil mrirea fontului folosind opiunile programului de navigare. Varianta definirii mrimii caracterelor n uniti absolute (px, in, cm, etc.) se aplic n cazurile n care modificarea mrimii fontului n momentul afirii ar afecta grav aspectul acesteia. De exemplu textul plasat deasupra unui buton desenat nu trebuie s poat fi mrit.

Exemplu:

h1 {font-family: arial, verdana, sans-serif;

font-size: 150%; font-weight: bold}

h2 {font-family: "Times New Roman", serif;

font-size: 120%;}h1 { font-size: 30px; }h2 { font-size: 20px; }p { font-size: 12px; }

Formatarea textului

Formatarea textului se realizeaz cu un set de proprieti care permit diverse tipuri de alinieri, indentri i spaieri.

Indentarea textului se realizeaz folosind proprietatea text-indent. Efectul indentrii este decalarea poziiei de nceput a primei linii a fiecrui paragraf cu o mrime impus.

Exemplu:

p {

text-indent: 50px;

}

Alinierea textului se realizeaz folosind proprietatea text-align. Valorile posibile ale proprietii sunt: left, right, center sau justify.

Exemplu:

th {

text-align: right;

}

td {

text-align: center;

}

p {

text-align: justify;

}

Sublinierea sau bararea textului se realizeaz folosind proprietatea text-decoration. avnd valorile posibile none, underline (subliniat), overline (barat), line-through (tiat).

Exemplu:

h1 {

text-decoration: underline;

}

h2 {

text-decoration: overline;

}

h3 {

text-decoration: line-through;

}

Modificarea distanei dintre caractere se realizeaz folosind proprietatea letter-spacing.

Exemplu:

h1 {

letter-spacing: 6px;

}

p {

letter-spacing: 3px;

}

Controlul scrierii cu majuscule se realizeaz folosind proprietatea text-transform. Valorile posibile sunt:

- capitalize - prima liter va fi majuscul

- uppercase - toate literele vor fi majuscule,

- lowercase - toate literele vor fi mici,

- normal - caracterele vor fi scrise normal.p { text-transform: uppercase; }p { text-transform: lowercase; }p { text-transform: capitalize; }

PAGE 8