Tehnologii WEBCursul 5

CSS - Cascading Style Sheets

DescriereCSS, prescurtarea de la Cascading Style Sheets, sunt etichete folosite pentru formatarea paginilor web (de exemplu formatare text, background sau aranjare in pagina, etc.). CSS (Cascading Style Sheets) este un standard pentru formatarea elementelor unui document HTML. Stilurile pot fi declarate in interiorul unui document HTML prin intermediu tagului i/sau atributului style sau se pot ataa elementelor HTML prin intermediul unor fiiere externe. CSS se poate utiliza i pentru formatarea elementelor XHTML, XML i SVGL.

Beneficiile sintaxei CSS sunt: formatarea este introdusa intr-un singur loc pentru tot documentul; editarea rapida a etichetelor; datorita introducerii intr-un singur loc a etichetelor se obtine o micsorare a codului paginii, implicit incarcarea mai rapida a acesteia. Sintaxa CSS este structurata pe trei nivele: nivelul 1 fiind proprietatile etichetelor din documentul HTML - tip inline nivelul 2 este informatia introdusa in blocul HEAD - tip embedded nivelul 3 este reprezentat de comenzile aflate in pagini separate - tip externe Cea mai mare importanta (suprascrie orice alt parametru) o are sintaxa de nivelul 1 iar cea mai mica importanta o are cea de nivelul 3.

Comenzile CSS de nivel 1 sau inline sunt cele mai folosite, ele suprascriind orice alte comenzi CSS. Sunt amplasate in interiorul etichetelor HTML aflate in zona BODY si au sintaxa: ...textul sau obiectul asupra caruia este aplicat codul CSS...

Comenzile de nivel 2 sau embedded sunt cele gazduite oriunde intre perechea de etichete si conform sintaxei: ... comenzi CSS ... (selector {propr1:val1; propr2:val2;})--> ,unde style - specifica unde incepe si unde se termina blocul CSS iar type, impreuna cu sunt folosite pentru a ascunde de browserele vechi, care nu cunosc sintaxa CSS, continutul blocului style.

Exemplu CSS de nivel 2:

ExempluText scris cu Arial, 20px, italic, 800Text negru

Folosirea unui fisier extern sau nivel 3 care sa contina comenzi CSS este foarte practica deoarece poate fi utilizat in mai multe cazuri (mai multe fisiere HTML pot folosi acelasi fisier extern CSS) eliminand timpul necesar introducerii codului corespunzator in fiecare pagina si totodata editarea lor intr-un singur loc pentru mai multe fisiere. Extensia acestor fisiere este .css.Legatura paginilor HTML cu fisierele extene CSS se face prin introducerea urmatoarei linii:

Atributele indica urmatoarele: rel - fisierul este tip styleshhet type - tip text ce contine comenzi CSS href - fisierul sau adresa fisierului CSS.

Pentru a utiliza un stil definit intr-un fisier extern se procedeaza astfel:1. se creaza un fisier care sa contina numai descrierea stilurilor si se salveaza cu extensia .css. Continutul acestui fisier coincide cu continutul unui bloc ... , fara ca acesti delimitatori sa fie inclusi;2. in fisierul HTML care utilizeaza stilurile definite in fisierul creat la punctul 1 , se include in blocul ... o eticheta , conform cu linia de cod prezentata anterior, avand trei atribute:a. atributul rel cu valoarea "stylesheet";b. atributul href avand ca valoare adresa URL a fisierului creat la punctul 1 ; c. atributul type cu valoarea "text/css".Se utilizeaza titlurile definite in fisierul extern ca si cum ar fi definite in fisierul HTML curent intr-un bloc ....

Exemplul 1: CSS de nivel 3:Pentru exemplul de mai jos, s-a construit un stil definit intr-un fisier extern, denumit ex1.css .

This header is 36 pt This header is blue This paragraph has a left margin of 50 pixels

Observatii: Fundalul documentului creat va fi galben, pentru h1 se va utiliza un font cu marimea de 36pt, pentru h2 textul va avea culoarea albastra, iar pentru editarea paragrafului se va utiliza aliniat stanga, cu marginea de 50 de pixeli.Fisierul extern care contine stilul de nivelul 3 este salvat cu numele ex1.css si are urmatorul continut:body {background-color: yellow}h1 {font-size: 36pt}h2 {color: blue}p {margin-left: 50px}

Exemplul 2: CSS de nivel 3:Pentru exemplul de mai jos, s-a construit un stil definit intr-un fisier extern, denumit ex2.css. This is a header 1 You can see that the style sheet formats the text This is a link

Observatii: Fundalul documentului creat va fi de culoarea bronzului (tan), pentru h1 se va utiliza un font cu marimea de 20pt si culoarea maroon, iar pentru hr se va folosi culoarea navy; Pentru editarea paragrafului se va utiliza aliniat stanga, cu marginea de 15 de pixeli si marimea fontului de 11pt. De asemenea, link-ul va ave urmatoarea caracteristica: culoarea generala verde, culoarea dupa vizitare galbena, culoarea la activare albastra si culoarea la planare (hover) va fi neagra.Fisierul extern care contine stilul de nivelul 3 este salvat cu numele ex2.css si are urmatorul continut:body {background-color: tan}h1 {color:maroon; font-size:20pt}hr {color:navy}p {font-size:11pt; margin-left: 15px}a:link {color:green}a:visited {color:yellow}a:hover {color:black}a:active {color:blue}

Este permisa folosirea comentariilor in CSS ca si in HTML: /* Acesta este un comentariu in CSS */

id si class sunt comenzi care dau unei formatari CSS un nume. Se folosesc atunci cand dorim sa aplicam un style de formatare unei anume zone. Pentru compatibilitate cu versiunile anterioare de browsere numele asociate zonelor nu vor contine caracterul _.

Elementul id se aplica unui style de format o singura data sau la o singura eticheta HTML, plasandu-se un nume acelui style. Acest element necesita existenta comezilor CSS in zona HEAD sau intr-un fisier extern.

Exemplu: folosirea elementului id Exemplu 2_1Text albastru introdus prin id "albastru"Text negru

Elementul class este similar cu id dar spre deosebire de acesta poate fi folosit de mai multe ori sau pentru zone mai mari. Ca si la id necesita existenta comezilor CSS in zona HEAD sau intr-un fisier extern.

Exemplu: folosirea elementului class Exemplu 2_2Primul text rosu introdus prin class "rosu"Text negruAl doilea text rosu introdus prin class "rosu"

Stiluri pentru fonturi:Aceste elemente specifica argumentul fontului care se asociaza unui element HTML fiind incluse ori in zona HEAD ori in interiorul etichetei dorite.In cazul de fata se remarca asemanarea cu eticheta font din HTML care accepta argumentele type, style, size si weight. font-familyfont-family este de fapt o lista de fonturi din care browserul va folosi in ordinea in care le recunoaste (primul folosit va fi primul din lista, daca nu este recunoscut il foloseste pe al doilea si tot asa mai departe). Este recomandat ca ultima pozitie din lista sa fie un font generic (de exemplu serif, sans-serif sau monospace). In situatia in care numele fontului este format din doua cuvinte se incadreaza intre ghilimele duble pentru ca browserul sa le interpreteze impreuna.

Exemplu: CSS introdus in HEAD aplicat etichetei p. Browserul nu recunoaste primele doua fonturi din lista, folosindu-l pe al treilea

Exemplu 3_1

Text scris cu cu fontul ArialText negruText scris cu cu fontul Arial

Exemplu: acelasi exemplu dar CSS introdus in eticheta p din HTML

Exemplu 3_2

Text scris cu cu fontul ArialText negruText scris cu cu fontul Arial

font-sizeEste parametrul prin care stabilim dimesiunea fontului, exprimat in pixeli (px), puncte (pt), keywords sau procente. Are o functionare asemanatoare cu eticheta .

Exemplu: CSS introdus in HEAD aplicat etichetei p, dimensiunea exprimata in pixeli

Exemplu 3_3

Text scris cu font de 20pxText negru

Pentru dimensiunea exprimata in puncte folosim acelasi exemplu inlocuid px cu pt. Dimensiunea exprimata prin keywords foloseste cuvinte in loc de cifre. Sapte cuvinte inlocuiesc dimensiunile de la 1 la 7 de la veche eticheta FONT FACE din HTML.CSS keyword numar FONT size xx-small 1 x-small 2 small 3 medium 4 large 5 x-large 6 xx-large 7

Pentru verificare se poate folosi exemplul anterior in care se inlocuieste 20px cu unul din cuvintele de mai sus. Procentele sunt o alta valoare pe care o poate lua font-size. Aceasta modalitate poate fi vizualizata diferit de browsere diferite. Ca verificare folositi acelasi exemplu schimband 20px cu 200%.

font-stylefont-style este folosit pentru a adauga caracteristica italica fontului. Poate lua valorile normal si italic.

font-weightfont-weight este parametrul care stabileste grosimea caracterului putand lua valorile numerice de la 100 la 900 sau BOLD, BOLDER, LIGHTER.

compunerea stilurilorStilurile prezentate anterior pot fi folosite simultan in interiorul aceeasi etichete fiind despartite de caracterul ; (punct si virgula).Exemplu: folosirea unui stil compus aplicat etichetei p.

Exemplu 3_4

Text scris cu Arial, 20px, italic, 800Text negru

Atribute pentru fonturi1. font-weight: normal, bold;2. font-size: 10pt, 15pt,20pt;3. font-family: serif, sans-serif, cursive, monospace4. font-style: normal, italic;

Stiluri pentru text: alinieretext-align pozitioneaza pe orizontala obiecte (de exemplu text sau imagini) si admite valorile left, right si center ca si eticheta align din HTML.In continuare este prezentat ca exemplu codul folosit in HEAD, aplicat etichetei p:

Exemplu: prin intermediul lui div aplicam stilul pecentru imaginii si textului

Exemplu 4_1

Text neformatatText formatat

vertical-align este folosit pentru alinierea pe verticala a obiectelor dintr-un tabel si poate lua valorile: top, middle si bottom.In exemplul de mai jos este creat clasa sus care va putea fi aplicat elementelor ale tabelului

float este folosit pentru alinierea textului cu imaginile si poate avea valorile: left si right. In functie de valoarea aleasa imaginea va fi aliniata in partea opusa a paginii. Exemplu: cream clasa auto si o aplicam imaginii

Exemplu 4_2

Textul se aliniaza la dreapta, iar poza la stanga datorita clasei "auto".

tabularetext-indent este folosit pentru alinierea textului in interior avand valori exprimate in inci (in), centimetri (cm) sau pixeli (px). In exemplul de mai jos text-indent este aplicat etichetei p deplasand textul cu 10 pixeli in interior

decoraretext-decoration adauga sublinierea sau taierea blocului text asociat si poate avea valorile underline, line-through sau none. Exemplu: stilul asociat etichetei p este prezentat in HEAD

Exemplu 4_3

Text normalText subliniat

culoarecolor defineste culoarea textului dintr-o zona sau intraga pagina. Exemplu: stilul asociat etichetei p este prezentat in HEAD

Exemplu 4_4

Text normalText albastru

stiluri pentru legaturiIn HTML culoarea legaturilor poate fi stabilita prin atributele LINK, ALINK si VLINK declarate in interiorul etichetei BODY. Acelasi lucru si chiar mai mult poate fi realizat folosind sintaxa CSS. Exemplu:

Exemplu 4_5

Text normallink catre exemplul 4_4

a defineste stilul general pentru legaturaa:link defineste stilul legaturii nevizitatea:visited defineste stilul legaturii vizitatea:active defineste stilul legaturii active (nu prea se foloseste)a:hover defineste stilul cand mouse-ul este deasupra legaturii

Atribute pentru text1. text-align: right, center, left, justify;2. text-indent:1cm; (pentru primul rand din paragraf)3. line-height: distanta dintre randurile unui paragraf

Stiluri pentru fundal:Background ca si culoare sau imagine poate fi definita pentru intreaga pagina, o celula a tabelului sau pentru text.

culoare de fondbackground-color defineste culoarea de fond si poate fi asociat oricarei etichete HTML.

Exemplu: definim un stil pentru intreg BODY si un altul pentru eticheta p

Exemplu 5_1

Text normalText cu background rosu

imagine de fondImaginile pot fi folosite ca fundal in spatele intregii pagini, a unui obiect sau a textului. background-image asociaza o imagine ca fundal unui obiect.Exemplu: definim un stil pentru eticheta p

Exemplu 5_2

Text normalText cu imagine de fond

repetareFunctie de dimensiunile obiectului caruia ii sunt asociate, imaginile de fond se repeta pe orizontala si verticala. Repetarea poate fi controlata prin parametrul background-repeat care poate lua valorile:repeat-x imaginea se repeta pe orizontala;repeat-y imaginea se repeta pe verticala;no-repeat imaginea nu se repeta.

Exemplu: imaginea nu se repeta sub eticheta p

Exemplu 5_3

Text normalText cu imagine de fond

pozitiaIn mod normal imaginea de fundal incepe din coltul stanga sus al obiectului asociat, dar acest lucru poate fi controlat prin comanda CSS background-position. Sunt acceptate doua valori:in prima pozitie poate fi: top, center, bottom, percentage sau pixel;in a doua pozitie poate fi: right, center, left, percentage sau pixel.Exemplu: imaginea de fundal este asociata etichetei BODY fiind amplasata top si center, fara repetare

Exemplu 5_4

Text normal

Atribute pentru fundal:4. background-color:red;5. background-image:url(cale_fisier);6. background-repeat (sau repeat-x, repeat-y);7. background-attachment: fixed|scroll;8. background-position: 20% 50%; (la 1/5 de marginea din stanga si de sus) sau: 2cm 3cm sau: 2cm 50% sau: left right top bottom9. background: le include pe toate

Stiluri pentru liste: list-style-typeFolosind eticheta ol din HTML cream liste ordonate sau numerotate. Adaugand comenzi CSS in zona HEAD putem adauga pe langa numere si cifre sau alte simboluri. Browserul Netscape nu permite asocierea comenzilor CSS decat pentru eticheta li. Sintaxa este:

valoarea poate fi: disc disc circle cerc square patrat decimal numere intregi lower-roman numere romane, caractere mici (i, ii, iii, iv) upper-roman numere romane, caractere mari (I, II, III, IV) upper-alpha litere mari (A, B, C, D) lower-alpha litere mici (a, b, c, d) none nimic

Exemplu: lista ordonata folosind marcaje cu litere mici

Exemplu 6_1

Necesar materiale:

1. caramida
2. ciment
3. ipsos

list-style-imageIn afara simbolurilor de marcaj prestabilite cunoscute de browser pot fi folosite si imagini prin comansa CSS list-style-image. Imaginile sunt introduse prin adresa url(). Exemplu: lista ordonata folosind ca marcaj imaginea punct.gif

Exemplu 6_2

Necesar materiale:

caramida

ciment

ipsos

Stiluri pentru chenare si margini:Fiecare element este incadrat intr-o caseta care este compusa din urmatoarele elemente:marginea (margin) este spatiul exterior chenarului pana la celelalte elementechenarul (border) este o bordura care inconjoara elementulcompletarea (padding) stabileste distanta dintre continut si chenarContinutul include informatia utila (text, tabele, imagini, formulare, etc.). Originea elementului este considerat coltul din dreapta sus fata de care se vor raporta toate dimensiunile prezentate in continuare.

width si heightLatimea si inaltimea unui element sunt stabilite in HTML prin atributele width si height. Aceste atribute pot fi adaugate sau suprascrise prin comenzi CSS. Exemplu: folosind comenzi CSS modificam dimensiunile originale ale imaginii

Exemplu 7_1

padding si marginpadding stabileste distanta dintre obiect si chenar simultan pentru toate laturile. Distantele pot fi stabilite si individual folosind padding-top, padding-bottom, padding-left sau padding-right. margin stabileste distanta dintre chenar si celelalte obiecte din pagina simultan pentru toate laturile. Distantele pot fi stabilite si individual folosind margin-top, margin-bottom, margin-left sau margin-right. Valorile pentru padding si margin pot fi exprimate in: px (pixeli), in (inci), pt (puncte) sau cm (centimetri). Exemplu: folosind comenzi CSS imaginea este pozitionata la 100px fata de latura stanga si 25px fata de latura de sus

Exemplu 7_2

borderNetscape si Internet Explorer afiseaza diferit chenarele. Comanda CSS pentru definirea chenarului este border avand proprietatile asociate width, style si color. Pentru a fi siguri ca aceste proprietati functioneaza atat in Internet Explorer cat si in Netscape trebuie sa declaram pentru border cel putin width si style. border-width stabileste grosimea chenarului si poate fi exprimata in px (pixeli), pt (puncte), cm (centimetri) sau in (inci). border-style stabileste tipul chenarului si poate fi dotted, dashed, solid, double, groove, ridge, inset si outset. border-color stabileste culoarea chenarului si poate fi exprimata prin valoare hexazecimala sau in cuvinte. Exemplu: definim noua clase utilizand proprietatile border-width border-style si border-color

Exemplu 7_3

border-width: 2px; border-style: dotted; border-color: red;
border-width: 3px; border-style: dashed; border-color: blue;
border-width: 2px; border-style: solid; border-color: green;
border-width: 3px; border-style: double; border-color: black;
border-width: 2px; border-style: groove; border-color: silver;
border-width: 3px; border-style: ridge; border-color: lime;
border-width: 2px; border-style: inset; border-color: yellow;
border-width: 3px; border-style: outset; border-color: aqua;
border-width: 2px; border-style: hidden; border-color: olive;

Pozitionarea prin CSSPozitionarea permite asezarea unui obiect intr-un anume loc folosind coordonatele. Totodata obiectele pot fi pozitionate pe straturi diferite, unul deasupra celuilalt. Atat pozitionarea absoluta (ASOLUTE) cat si cea relativa (RELATIVE) folosesc proprietatile LEFT si TOP exprimate in px (pixeli), in (inci), pt (puncte), ems, procentaje sau cm (centimetri). Pozitionare absoluta plaseaza obiectul in pagina exact in locatia data de left si top. Astfel poate fi creat un element liber fata de celelalte din pagina. Obiectul poate fi orice, de exemplu text sau imagine. Exemplu: am aplicat pozitionarea absoluta etichetei h4

Exemplu 8_1

Text 1Text 2

Pozitionare relativa este pozitia normala pe care o ocupa un element, dupa elementele anterioare si inaintea celor urmatoare. Poate fi deplasat fata de aceasta pozitie folosind proprietatile left si top. Exemplu: am folosit doua obiecte unul pozitionat absolut celalalt relativ

Exemplu 8_2

Pozitionare absoluta, independent de celelate obiecte din paginaTextPozitionare relativa, dupa "Text"

Pozitionarea tridimensionalaElementele sunt pozitionate pe ecran pe o suprafata bidimensionala dar pot fi asezate si unul deasupra celuilalt, intr-o stiva utilizand un indicativ (index-z) incepand cu 0, urmatorul 1 si tot asa in continuare. Elementul cu indexul cel mai mare este asezat deasupra. Exemplu: am folosit doua obiecte unul pozitionat absolut celalalt relativ

Exemplu 8_3