Utilizarea stilurilor CSS

Transcriere

1 Utilizarea stilurilor CSS (II) (Cascade Style Sheets)

2 CSS - etichete folosite pentru formatarea paginilor web (formatare text, background, aranjare in pagina, etc.).

3 Specificarea stilurilor Sintaxa CSS este structurata pe trei nivele: 1. nivelul 1 - proprietatile etichetelor din documentul HTML, tip inline 2. nivelul 2 - informatia introdusa in blocul HEAD, tip embedded (intern) 3. nivelul 3 - comenzile aflate in pagini separate, tip extern

4 Selectorul HTML redefinește modul de afisare a continutului unei etichete HTML Clasa o regula care poate fi aplicata oricarei etichete HTML <selector class="nume_clasa"> Text </selector>.nume_clasa {proprietate:valoare; proprietate:valoare;...} Identificator - stilizează elementele dintr-o pagină care apar o singură dată < selector id="nume_id"> Text </ selector > #nume_id {proprietate:valoare; proprietate:valoare;... }

5 Elementul class - aplicabil în mai multe locuri în cadrul aceleiaşi pagini sau în pagini diferite, în vederea inserării lui oriunde este necesar prin intermediul unei simple referiri. necesită existența comezilor CSS in zona HEAD sau intr-un fisier extern. Exemplu: <html> <head> <title>exemplul 1 </title> <style type="text/css">.rosu{color: #FF0000;} </style> </head> <body> <p class="rosu">primul text rosu introdus prin class "rosu"</p> Text negru <p class="rosu">al doilea text rosu introdus prin class "rosu"</p> </body> </html> ex1.html

6 Elementul id se aplică unui style de format o singură dată sau la o singură eticheta HTML, dând un nume acelui style. Acest element necesită existența comezilor CSS in zona HEAD sau intr-un fisier extern. Exemplu: <html> <head> <title>exemplul 2</title> <style type="text/css"> #albastru{color: #0000FF;} </style> </head> <body> <p id="albastru">text albastru introdus prin id "albastru"</p> Text negru </body> </html> ex2.html

7 Crearea etichetelor HTML personalizate etichetele <span> (creează o eticheta in linie) şi <div> (creează o zonă proprie in pagină) <span class="nume_clasa">... </span> <span id= nume_id">... </span> <span class="clasa_span">... </span>.nume_clasa {proprietate1:valoare1; proprietate2:valoare2;} #nume_id{proprietate1:valoare1; proprietate2:valoare2;... } span.clasa_span { proprietate1:valoare1;... } Exemplu: <span class="verdeboldtext">propozitie scrisă cu verde</span>.verdeboldtext { font-size: normal; color: green; font-weight: bold; } propozitie.html

8 Pentru configurarea unui bloc separat de restul continutului unui document HTML se foloseste eticheta <div>. Aceasta creaza o zona proprie in pagina, cu linie noua atat deasupra sa cat si dedesubtul sau. etichete <div> <div class="nume_clasa">... </div> <div id="div1">... </div> Definirea acestor etichete <div> intr-un cod CSS se face astfel: div { proprietate1:valoare1; proprietate2:valoare2;... }.nume_clasa { proprietate1:valoare1; proprietate2:valoare2;... } #div1 { proprietate1:valoare1; proprietate2:valoare2;... } ex_div.html

9 Definirea de reguli similare selector1, selector2,... { proprietate1: valoare1; proprietate2: valoare2;... } Definirea etichetelor imbricate selector1 selector2... { proprietate1: valoare1; proprietate2: valoare2;... } - stilurile etichetelor din interior preiau stilurile etichetelor părinte = moştenirea stilurilor css0.html

10 Determinarea ordinii execuţiei 1. Regulile CSS scrise in interiorul paginii HTML, in cadrul etichetei "style" din secţiunea "head" au o prioritate mai mare decât cele scrise intr-un fişier extern, iar regulile scrise in interiorul etichetelor au o prioritate mai mare decât cele din cadrul etichetei "style" din secţiunea "head". 2. Momentul apariţiei cu cât un stil apare mai târziu, cu atât importanţa lui este mai mare. Astfel, definiţiile unei etichete copil au prioritatea mai mare şi anuleaza toate stilurile precedente cu care intră în conflict.

11 Exemplu de stil CSS în fişier extern 1. Se creează un fişier care să conţină numai descrierea stilurilor şi se salvează cu extensia ".css". Conţinutul acestui fişier coincide cu conţinutul unui bloc <style>...</style>, fără ca aceşti delimitatori să fie incluşi. 2. În fişierul HTML care utilizează stilurile definite în fişierul creat la punctul 1, se include în blocul <head>...</head> o etichetă <link>, având trei atribute: - atributul "rel" cu valoarea "stylesheet"; - atributul "type" cu valoarea "text/css". - atributul "href" având ca valoare adresa URL a fişierului creeat la punctul 1; ex_css_ext.html

12 Adăugarea comentariilor la CSS // /* */ Ex. /* Comentariu, pe mai multe linii */ // Comentariu pe o singura linie

13 Definirea stilurilor COLOR:culoare precizează culoarea textului. BACKGROUND:culoare URL(imagine) - se precizează fundalul folosit. Ex: css1.html css2.html background-position sunt acceptate două valori: in prima poziție poate fi: top, center, bottom, percentage sau pixel in a doua poziție poate fi: right, center, left, percentage sau pixel Exemplu: imaginea de fundal este asociată etichetei BODY fiind amplasată top și center, fără repetare css2_1.html

14 FONT-FAMILY permite stabilirea fontului utilizat pentru text selector { font-family:"nume_font1", "nume_font2",..., nume_generic } nume generice de fonturi: "serif", "sansserif", "cursive", "monospace" sau "fantasy" (opţional) css3.html

15 FONT-STYLE: stil permite stabilirea stilului folosit Ex. P {font-style: italic sau normal } FONT-WEIGHT permite stabilirea grosimii pentru text Ex. P {font-weight: bold sau bolder sau lighter sau normal } FONT-SIZE permite stabilirea mărimii utilizate pentru text FONT-DECORATION permite folosirea unor efecte speciale pentru text Ex. P {font-decoration: underline sau overline sau line-through sau none} FONT-HEIGHT permite stabilirea distanţei dintre liniile paragrafului. Ex. P {font-height: 8pt sau 150% } css4.html

16 Configurarea textului Spațiul intre litere: selector { letter-spacing:valoare } Spațiul dintre cuvinte: selector { word-spacing: valoare } Spațiul intre linii: selector { line-height:valoare } Mărimea (tipul) literelor: selector { text-transform: valoare } Alinierea textului: selector { text-align:valoare } Alinierea pe verticală a textului: selector { vertical-align:valoare } Formarea paragrafelor: selector {text-indent:valoare}

17 Spatiul intre litere Spatierea se refera la cantitatea de spatiu dintre literele unui cuvant. Se poate aduaga sau reduce spatiul dintre litere folosind proprietatea letter-spacing, urmata de o valoare exprimata intr-o anumita unitate de masura, ce poate lua si valori negative. Sintaxa generala este urmatoarea: selector { letter-spacing:valoare } Daca valoarea proprietatii este normal sau 0 atunci spatierea va fi fixata la valorile implicite (fara modificari suplimentare).

18 Spatiul dintre cuvinte Poate fi modificat folosind proprietatea word-spacing, urmata de o valoare exprimata intr-o anumita unitate, fiind de obicei stabilita in pixeli. Pentru anularea spatierii intre cuvinte, valoarea proprietatii trebuie sa fie: normal. Sintaxa generala este urmatoarea: selector { word-spacing:valoare } O valoare pozitiva semnifica un plus de spatiu adaugat la valoarea implicita, iar o valoare negativa reduce acest spatiu. Daca valoarea este egala cu 0 atunci spatiul dintre cuvinte este fixat la valoarea prestabilita, neproducand de fapt nici un efect, fiind similar cu valoarea normal. Ex. - marim spatiul intre cuvintele din eticheta "h2" cu 8 pixeli: h2 { word-spacing:8px; }

19 Spatiul intre linii Inaltimea randurilor se refera la spatiul dintre liniile paragrafului. Modificarea spatiului intre linii poate avea ca efect o mai buna si usoara citire a textului in cazul in care aceasta este mai mare (creaza o regiune cu spatiu intre liniile de text). Alteori, daca inaltimea este mai mica (folosita la randurile de titlu), poate conferi un aspect mai stilat.

20 Pentru a stabili inaltimea randurilor se foloseste proprietatea line-height, urmata de o valoare care poate fi exprimata in trei moduri: 1. un numar care inseamna multiplicarea dimensiunii fontului cu numarul respectiv pentru a obtine valoarea spatierii; 2. o valoare de tip absolut, exprimata in pixeli, puncte sau orice alta unitate de masura folosita in CSS, care indiferent de dimensiunea stabilita a fontului, inaltimea liniei are o valoare exacta; 3. un procent, care stabileste inaltimea liniei ca fiind egala cu un anumit procent din dimensiunea fontului folosit pentru scrierea textului.

21 Sintaxa generala pentru modificarea spatiului intre linii este: selector { line-height:valoare } Exemplu: inaltimea liniei marita cu 50% din dimensiunea fontului: h1 { line-height:150%; } Inaltimea liniei poate de asemenea fi definita in cadrul proprietatii font prin introducerea caracterului "/ urmat de valoarea pentru inaltimea randului, imediat dupa dimensiunea fontului. Exemplu: h1 { font-size:12px/28px; }

22 Marimea (tipul) literelor se poate controla cu ajutorul proprietatii text-transform indiferent de modul cum a fost el scris initial. Pentru a schimba tipul literelor dintr-un text, proprietatea text-transform va fi urmata de o valoare care poate fi: 1. capitalize primul caracter din fiecare cuvant cu majuscula; 2. uppercase toate caracterele scrise cu majuscule; 3. lowercase - toate caracterele scrise cu litere mici; 4. none textul afisat asa cum este. Sintaxa generala este: selector { text-transform:valoare } Exemplu: toate literele vor fi afisate cu majuscule: h1 { text-transform:uppercase; } Proprietatea "text-transform" este utila daca textele sunt create in mod dinamic (ex. ele provin dintr-o baza de date sau form HTML).

23 Alinierea textului Se realizeaza folosind proprietatea text-align Un text poate fi aliniat de la marginea din stanga, din dreapta, centrat sau la ambele margini (stanga-dreapta). text-align : left, right, center, justify. Sintaxa generala este: selector { text-align:valoare } Proprietatea poate fi aplicata numai elementelor la nivel de bloc, valoarea sa implicita fiind in majoritatea cazurilor stabilita la valoarea "left". Exemplu: textul din eticheta h2 este aliniat "stanga-dreapta": h2 { text-align:justify; } In cazul in care alinierea textului este "stanga-dreapta", spatierea cuvintelor si a literelor se schimba pentru a se obtine linii de aceeasi lungime.

24 Alinierea pe verticala a textului Cu ajutorul proprietatii vertical-align se poate preciza pozitia unor elemente (in linie) in raport cu textul din jurul lor. Proprietatea poate fi folosita doar cu etichete in linie care nu determina un salt la linie noua, amplasat anterior sau ulterior acestora, de obicei utilizandu-se cu eticheta "span". Sintaxa generala este: selector { vertical-align:valoare }

25 Valoare poate lua una din urmatoarele optiuni: 1. super scrierea textului in stil exponent, deasupra liniei de baza; 2. sub - scrierea textului in stil indice, sub linia de baza; 3. baseline scrierea textului pe linia de baza; 4. top, middle, bottom, text-top, text-bottom pentru a alinia textul relativ la alinierea parintelui acestuia; 5. valoare procentuala care ridica sau coboara linia de baza a elementului proportional cu dimensiunea fontului elementului parinte. Exemplu: textul din eticheta <span> va aparea ca exponent fata de textul din stanga-dreapta lui: span { vertical-align:super; }

26 Formarea paragrafelor Cu ajutorul proprietatii text-indent se poate stabili ce spatiu suplimentar este inserat la inceputul primei linii de text dintrun paragraf. Pentru aceasta, proprietatea text-indent este urmata de o valoare exprimata intr-o unitate de masura (pixeli) sau in procente (proportional cu latimea paragrafului). Sintaxa generala este: selector { text-indent:valoare } Valorile pozitive determina o indentare tipica, in timp ce valorile negative determina o indentare agatata, fiind necesar sau marirea umplerii sau marirea marginilor. Exemplu: un spatiu de 20 pixeli la inceputul paragrafului din eticheta <p>: p { text-indent:20px; }

27 Fiecare element este incadrat intr-o casetă compusă din următoarele elemente: marginea (margin) este spațiul exterior chenarului până la celelalte elemente chenarul (border) este o bordură care inconjoară elementul completarea (padding) stabilește distanța dintre conținut și chenar Conținutul (obiectul) include informația utilă (text, tabele, imagini, formulare, etc)

28 Controale pentru chenare şi afişarea elementelor Lățimea și inălțimea unui element selector { width:valoare; height:valoare } Latimea si inaltimea elementelor pot fi specificate cu ajutorul proprietatilor width si height, dar in mod prestabilit acestea sunt determinate automat de catre navigator, fiind egale cu necesarul afisarii intregului continut. Pentru definirea latimii si inaltimii se folosesc urmatoarele tipuri de valori: 1. o valoare de tip numeric; 2. un procent, care stabileste o valoare proportionala in functie de cea a elementului parinte; 3. valoarea auto, care foloseste latimea si inaltimea calculata de navigator, si care reprezinta cantitatea de spatiu maxim pe care o poate ocupa elementul pentru afisarea intregului continut.

29 Controale pentru chenare şi afişarea elementelor Marginile unui element selector { margin-top:valoare; } selector { margin-bottom:valoare; } selector { margin-left:valoare; } selector { margin-right:valoare; } Tipul de valoare folosit poate avea urmatoarele optiuni: - o valoare de tip lungime (numerica) care poate fi si negativa; - o valoare procentuala (procent) creaza o margine proportionala cu latimea elementului parinte; - valoarea auto lasa controlul marginilor la decizia navigatorului.

30 Chenarul unui element selector { border:val_grosime val_stil val_culoare; } Proprietatea border permite stabilirea simultana a atributelor chenarului pentru toate cele patru laturi ale casetei. Aceasta foloseste 3 valori distincte, pentru a configura latimea (grosimea), stilul si culoarea: val_grosime- reprezinta grosimea chenarului si poate fi una din urmatoarele tipuri: o valoare de tip lungime (valoarea 0 determina anularea afisarii chenarului); un cuvant cheie (thin, medium, thick) care caracterizeaza o dimensiune relativa. val_stil - reprezinta numele stilului atribuit chenarului (valoarea "none" anuleaza afisarea chenarului); val_culoare - reprezinta culoarea, exprimata in cod hexa sau valoare RGB.

31 Chenarul unui element selector {border_style: valoare;} Aspectul bordurii poate fi stabilit prin atributul border-style, iar stilul este aplicat celor patru margini. Pentru a specifica valoarea pot fi folosite urmatoarele variante: Ultimele patru valori sunt reprezentate tridimensional, iar in cazul in care ele nu sunt acceptate de catre navigator, in locul lor se va folosi valoarea cu linie plina.

32 Chenarul unui element selector { border-top:grosime stil culoare; } selector { border-bottom:grosime stil culoare; } selector { border-left:grosime stil culoare; } selector { border-right:grosime stil culoare; } Adaugarea spatiului in interior, in jurul elementului selector { padding: valoare/valori; } selector { padding-top:valoare; } selector { padding-bottom:valoare; } selector { padding-left:valoare; } selector { pading-right:valoare; }

33 Poziţionarea elementelor folosind CSS este mai precisă decât prin intermediul obiectelor grafice HTML sau a tabelelor, afişarea făcându-se mult mai rapid. Prin intermediul CSS este permisă poziţionarea exactă sau relativă a elementelor într-o fereastră sau în raport cu alte elemente. Fereastra navigatorului este suprafaţa în care sunt afişate toate elementele. Ea poate fi redimensionată sau poziţionată pe ecran, sau poate fi divizată în alte ferestre prin intermediul cadrelor. Toate elementele amplasate în fereastră sunt poziţionate relativ la colţul din stânga-sus. Tipul de poziţie indică navigatorului cum să trateze amplasarea unui element într-o fereastră.

34 Controale de poziţionare Pozitionarea statica selector { position:static } Pozitionarea relativa selector { position:relative } Pozitionarea absoluta selector { position:absolute } Pozitionarea fixa selector { position:fixed }

35 Poziționarea statică Implicit, elementele sunt poziționate in fereastra "static. Când nu este specificată o poziționare "relativă", "absolută" sau "fixă"; elementele sunt dispuse unul după altul in interiorul documentului. Sintaxa pentru specificarea poziționării static este: selector { position:static } Un element static nu poate fi repoziționat in mod explicit.

36 Poziționarea relativă Un element cu poziționare "relativă" este amplasat la locul său in cadrul ferestrei sau a elementului părinte, in sensul că el apare după toate elementele dinaintea sa, respectiv inaintea tuturor elementelor amplasate după el. Sintaxa pentru specificarea poziționarii relative este: selector { position:relative } Elementele poziționate relativ pot fi mutate din locația lor folosind proprietățile "top" și "left ex_poz_relativ.html

37 Poziționarea absolută Poziționarea absolută are ca efect crearea unui element neafectat de restul documentului, plasarea lui in fereastră fiind făcută intr-o locație precisă definită prin intermediul coordonatelor x și y, indiferent de pozițiile altor elemente. Sintaxa pentru specificarea poziționării absolute este: selector { position:absolute } Originea (punctul de coordonate 0,0) este colțul din stânga-sus al ferestrei sau al obiectului in care este inclus elementul poziționat absolut. ex_poz_abs.html ex_poz.html

38 Poziționarea fixă Unele navigatoare nu recunosc valoarea fixed; acestea, in mod prestabilit vor folosi tipul "static" pentru a poziționa elementele. Poziționarea fixă a unui element este aproximativ la fel cu cea absolută, cu diferența că la derularea paginii elementul fixat rămâne pe poziția lui inițială, fără a se derula. Sintaxa pentru specificarea poziționării fixed este: selector { position:fixed } ex_poz_fix.html

39 Poziționare tridimensională Elementele sunt pozitionate pe ecran pe o suprafata bidimensionala dar pot fi asezate si unul deasupra celuilalt, intr-o stiva utilizand un indicativ (z-index) incepand cu 0, urmatorul 1 si tot asa in continuare. Elementul cu indexul cel mai mare este asezat deasupra. ex_poz_3d.html <head><style type="text/css">  </style> </head> <body> <div class="element1"><img src="poza.jpg"></div> <div class="element2"><img src="poza.jpg"></div> <div class="element3"><img src="poza.jpg"></div> </body>