Utilizarea stilurilor CSS (II)

(Cascade Style Sheets)

• CSS - etichete folosite pentru formatareapaginilor web (formatare text, background, aranjare in pagina, etc.).

2

Specificarea stilurilorSintaxa CSS este structurată pe trei nivele:1. nivelul 1 – proprietățtile etichetelor din documentul

HTML, tip inline2. nivelul 2 – informația introdusă in blocul HEAD, tip

embedded (intern)3. nivelul 3 - comenzile aflate in pagini separate, tip

extern

3

• 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;... }

4

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}

5

Spatiul intre litere• Spatierea se refera la cantitatea de spatiu dintre literele

unui cuvant. Se poate aduaga sau reduce spatiul dintrelitere folosind proprietatea letter-spacing, urmata de ovaloare exprimata intr-o anumita unitate de masura, cepoate lua si valori negative.

• Sintaxa generala este urmatoarea:selector { letter-spacing:valoare }

• Daca valoarea proprietatii este normal sau 0 atuncispatierea va fi fixata la valorile implicite (fara modificarisuplimentare).

6

Spatiul dintre cuvinte• Poate fi modificat folosind proprietatea word-spacing, urmata

de o valoare exprimata intr-o anumita unitate, fiind de obiceistabilita in pixeli.

• Pentru anularea spatierii intre cuvinte, valoarea proprietatiitrebuie sa fie: normal.

• Sintaxa generala este urmatoarea:selector { word-spacing:valoare }

• O valoare pozitiva semnifica un plus de spatiu adaugat lavaloarea implicita, iar o valoare negativa reduce acest spatiu.

• Daca valoarea este egala cu 0 atunci spatiul dintre cuvinteeste fixat la valoarea prestabilita, neproducand de fapt nici unefect, fiind similar cu valoarea normal.

• Ex. - marim spatiul intre cuvintele din eticheta "h2" cu 8 pixeli:h2 { word-spacing:8px; }

7

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 aceastaeste mai mare (creaza o regiune cu spatiu intre liniile detext). Alteori, daca inaltimea este mai mica (folosita larandurile de titlu), poate conferi un aspect mai stilat.

8

Pentru a stabili inaltimea randurilor se folosesteproprietatea 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 valoareaspatierii;

2. o valoare de tip absolut, exprimata in pixeli, puncte sauorice alta unitate de masura folosita in CSS, care indiferent de dimensiunea stabilita a fontului, inaltimealiniei are o valoare exacta;

3. un procent, care stabileste inaltimea liniei ca fiind egalacu un anumit procent din dimensiunea fontului folositpentru scrierea textului.

9

• Sintaxa generala pentru modificarea spatiului intre liniieste:

selector { line-height:valoare }

• Exemplu: inaltimea liniei marita cu 50% din dimensiuneafontului:

h1 { line-height:150%; }

• Inaltimea liniei poate de asemenea fi definita in cadrulproprietatii font prin introducerea caracterului "/” urmatde valoarea pentru inaltimea randului, imediat dupadimensiunea fontului.

• Exemplu: h1 { font-size:12px/28px; }

10

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). 11

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 cazurilorstabilita 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.

12

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 nudetermina un salt la linie noua, amplasat anterior sau ulterioracestora, de obicei utilizandu-se cu eticheta "span".

• Sintaxa generala este:selector { vertical-align:valoare }

13

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 fontuluielementului parinte.

• Exemplu: textul din eticheta <span> va aparea ca exponent fata de textul din stanga-dreapta lui:

span { vertical-align:super; }

14

Formarea paragrafelor• Cu ajutorul proprietatii text-indent se poate stabili ce spatiu

suplimentar este inserat la inceputul primei linii de text dintr-un paragraf.

• Pentru aceasta, proprietatea text-indent este urmata de ovaloare exprimata intr-o unitate de masura (pixeli) sau inprocente (proportional cu latimea paragrafului).

• Sintaxa generala este:selector { text-indent:valoare }

• Valorile pozitive determina o indentare tipica, in timp cevalorile negative determina o indentare agatata, fiind necesarsau marirea umplerii sau marirea marginilor.

• Exemplu: un spatiu de 20 pixeli la inceputul paragrafului dineticheta <p>:

p { text-indent:20px; } 15

Fiecare element este incadratintr-o casetă compusă din următoarele elemente:• marginea (margin) este

spațiul exterior chenaruluipână la celelalte elemente

• chenarul (border) este o bordură care inconjoarăelementul

• completarea (padding) stabilește distanța dintreconținut și chenar

• Conținutul (obiectul) include informația utilă (text, tabele, imagini, formulare, etc) 16

Controale pentru chenare şi afişarea elementelor

Lățimea și inălțimea unui elementselector { width:valoare; height:valoare }

• Latimea si inaltimea elementelor pot fi specificate cu ajutorul proprietatilorwidth 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 ocupaelementul pentru afisarea intregului continut.

17

Controale pentru chenare şi afişarea elementelor

Marginile unui elementselector { 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.

18

Proprietatea border permite stabilirea simultana a atributelor chenaruluipentru toate cele patru laturi ale casetei. Aceasta foloseste 3 valoridistincte, pentru a configura latimea (grosimea), stilul si culoarea:

val_grosime- reprezinta grosimea chenarului si poate fi unadin urmatoarele tipuri: o valoare de tip lungime (valoarea 0determina 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 sauvaloare RGB.

Chenarul unui elementselector { border:val_grosime val_stil val_culoare; }

19

• Aspectul bordurii poate fi stabilit prin atributul border-style, iar stiluleste 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 valoareacu linie plina.

Chenarul unui elementselector {border_style: valoare;}

20

Chenarul unui elementselector { 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 elementuluiselector { padding: valoare/valori; }selector { padding-top:valoare; }selector { padding-bottom:valoare; }selector { padding-left:valoare; }selector { pading-right:valoare; }

21

• 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ă.

22

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

23

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 unuldupă 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.

24

Poziționarea relativă

Un element cu poziționare "relativă" este amplasatla locul său in cadrul ferestrei sau a elementuluipărinte, in sensul că el apare după toate elementeledinaintea sa, respectiv inaintea tuturor elementeloramplasate după el.Sintaxa pentru specificarea poziționarii relativeeste:

selector { position:relative }Elementele poziționate relativ pot fi mutate dinlocația lor folosind proprietățile "top" și "left“ex_poz_relativ.html

25

Poziționarea absolutăPoziționarea absolută are ca efect crearea unuielement neafectat de restul documentului,plasarea lui in fereastră fiind făcută intr-o locațieprecisă definită prin intermediul coordonatelor x șiy, indiferent de pozițiile altor elemente.Sintaxa pentru specificarea poziționării absoluteeste:

selector { position:absolute }Originea (punctul de coordonate 0,0) este colțuldin stânga-sus al ferestrei sau al obiectului in care este inclus elementul poziționat absolut. ex_poz_abs.html ex_poz.html

26

Poziționare tridimensională• Elementele sunt

pozitionate pe ecran pe o suprafata bidimensionaladar pot fi asezate si unuldeasupra 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 esteasezat deasupra.

• ex_poz_3D.html

<head><style type="text/css"><!--.element1 {position: absolute; left: 30px; top: 30px; z-index: 3}.element2 {position: absolute; left: 80px; top: 50px; z-index: 2}.element3 {position: absolute; left: 130px; top: 70px; z-index: 1}--></style> </head><body><div class="element1"><imgsrc="poza.jpg"></div><div class="element2"><imgsrc="poza.jpg"></div><div class="element3"><imgsrc="poza.jpg"></div></body> 27

Stiluri pentru legături

• In HTML culoarea legaturilorpoate fi stabilita prin atributeleLINK, ALINK si VLINK declarate in interiorul eticheteiBODY.

a defineste stilul general pentrulegaturaa:link defineste stilul legaturiinevizitatea:visited defineste stilul legaturiivizitatea:active defineste stilul legaturiiactive (nu prea se foloseste)a:hover defineste stilul candmouse-ul este deasupra legaturii

<html><head> <title>Exemplu </title><style type="text/css"><!--a{font-family: arial;font-size:20px;}a:link {color: #0000FF;}a:visited {color: #00FF00;}a:hover {color: red;}--></style> </head><body>Text normal<a href="ex3.html">link</a> catreexemplul</body> </html> ex4.html

• Exemplu link /buton folosind o singura imagine si CSS ex_4_0.html

Creare Meniu Dublu cu CSS• Meniu Dublu vertical cu CSS• ex_4_meniu1.html• Meniu Dublu orizontal-vertical cu CSS• ex_4_meniu2.html

Stiluri pentru liste• In cazul listelor singurul lucru care se poate stiliza este

marcatorul listei, fie că este o listă ordonată sau neordonată. Proprietățile CSS pentru stilizarea listelor sunt:

• list-style-type – specifică tipul marcatorului listei

• list-style-image - specifică imaginea folosită ca marcator

• list-style-position - specifică dacă marcatorul lista va apare in interiorul sau exteriorul conținutului casetei asociate

• list-style - proprietatea prescurtată, pune toate proprietățile de stilizare a listelor intr-una singură

list-style-typeselector {list-style-type:valoare;}Valoarea poate fi:• disc• circle• square• none• decimal• lower-roman• upper-roman• lower-alpha• upper-alpha ex5.html

list-style-image ex6.html ex6_1.html

• list-style-position inside – marcatorul este in interiorul casetei alocate elementului <li> (la o distanță mai mare de marginea paginii)outside – marcatorul este in exteriorul casetei alocate elementului <li>, valoare predefinită ex7.htmlinherit – forțează elementul să moștenească valoarea proprietății elementului părinte • list-styleselector {list-style:val_type val_position val_image;}ex8.html

Afișarea alăturată a articolelor listelor

Listele sunt adesea folositela crearea barelor de navigare orizontale. Pentruaceasta ele sunt asezateuna langa alta. Acest lucruse poate realiza, prinpropietatea• display:inline;și• list-style-type:none;(pentru a nu afisa marcatorii)ex9.html

<head> <style type='text/css'>.ex9

{display:inline;list-style-type:none;background-color:lightgreen;border:3px double green;padding:5px 4px;margin:10px 1px;}

</style> </head><body> <ul><li class='ex9'>Home</li><li class='ex9'>About us</li><li class='ex9'>Contact us</li></ul>

</body>

Proprietăți CSS specifice pentru stilizarea tabelelor

Proprietatea Descriereborder-collapse

Determină dacă contururile tabelului se vor uni

border-spacing Determină spațiul dintre contururile a douăcăsuțe alăturate

caption-side Determină locul de amplasare a titluluitabelului

empty-cells Determină dacă se afișează sau nu, conturul și fundalul pentru căsuțele goale

table-layout Determină șablonul folosit pentru tabel

selector{border-collapse: valoare;}

collapse- contururile se unesc intr-un singur contur, dacă este posibil (vor fi ignorate propietățile border-spacing și empty-cells)separate- valoare predefinita. Afișeazăcontururi separate pentru fiecare căsuță și tabelinherit – forțează elementul să moștenească valoarea proprietății elementului părinte. ex1_tab.html

<style type='text/css'>#ex1_bc

{border-collapse:collapse;}table, td{border:2px solid green;}

</style><table class='ex1_bc'><tr><td>Nr.crt.</td><td>Nume</td><td>Adresa</td></tr><tr><td align=center>1</td><td>Popescu Nicolae</td>

<td>Timișoara, str.V.Alecsandri,nr.1</td></tr>

</table>

selector{border-spacing :val-num;}

<style type='text/css'>.ex2_bs

{border-spacing: 10px;}table, td

{border:2px solid green;}</style>

<table class='ex2_bs'><tr><td>&nbsp;</td><td>Nume</td><td>Adresa</td></tr><tr><td>1</td><td>Popescu Nicolae</td><td>Timișoara, str. V.

Alecsandri, nr. 1</td></tr></table><br />

ex2_tab.html

selector{caption-side :valoare;}

Valorile admise sunt: • top - valoarea predefinită;

titlul se așează deasupratabelului

• bottom - titlul se așeazăsub tabel

• inherit – forțeazăelementul să moștenească valoareaproprietății elementuluipărinte

<style type='text/css'> .ex3_cs {caption-side:bottom;} table, td {border:2px solid green;} </style>

ex3_tab.html

selector{empty-cells :valoare;}Valorile admise sunt: • show - valoarea predefinita; se

afiseaza conturul casutei goale• hide - conturul casutelor goale

nu se afiseaza• inherit - forteaza elementul sa

mosteneasca valoareaproprietatii elementului parinte

<style type='text/css'>.ex4_ec{empty-cells:hide;}

table, td{border:2px solid green;}</style>

<table class='ex4_ec'><caption>Tabel locatari</caption><tr><td></td><td>Nume</td><td>Adresa</td></tr><tr><td>1</td><td>Popescu Nicolae</td><td>Timișoara, str. V. Alecsandri,

nr. 1</td></tr></table>ex4_tab.html

selector{table-layout :valoare;}Valorile admise sunt: • auto - valoarea predefinită;

lățimea căsuțelor tabel se intind cât să cuprindă conținutul

• fixed – căsuțele dacă suntdimensionate nu-și modificălățimea

• inherit – forțează elementul sămoștenească valoareaproprietății elementului părinte

ex5_tab.html

<style type='text/css'>.ex5_tl

{table-layout:fixed;}.ex5_d

{width:40%;} table, td{border:2px solid green;}

</style>

Exemplu formatare tabel folosindfișier extern css

ex_6_tab.html fis_stil1.css

Animații prin CSSanimation – are rolul de a spune browser-ului că elementul in care se află această proprietate va fi animat@keyframes – arată locul unde are loc animațiaanimation-delay –unitatea de timp cu care va intarzia animația

animation-direction –dacă animația va decurge intr-un singur sens sau nuanimation-duration- durata in milisecunde sau secunde va dura animația la o rulareanimation-fill-mode – ce stiluri se aplică pe un element când animația este la sfârșit sau are o întârziereanimation-iteration-count – numărul de rulări ale animației

animation-name – numele animației

animation-play-state – animația este in pauză sau rulează

animation-timing-function – viteza de rulare

https://daneden.github.io/animate.css/https://robots.thoughtbot.com/css-animation-for-beginners

@keyframes example {0% {background-color: red; left:0px; top:0px;}25% {background-color: blue; left:0px; top:200px;}50% {background-color: green; left:200px; top:200px;}75% {background-color: yellow; left:200px; top:0px;}100% {background-color: red; left:0px; top:0px;}

}

ex_animatie1.html

CSS3 transition• poate fi utilizat pentru a anima proprietățile CSS, adăugând

un efect de animație când se modifică proprietățile CSS ale unui element HTML, schimbând gradual de la un stil la altul

CSS3 transition are 4 componente:• transition-property - Specifica numele proprietatii (sau

proprietatilor) la care transition trebuie aplicat (precum: width, color, font-size, etc.)

• transition-duration - Specifica durata tranzitiei(animatiei), in secunde (s), milisecunde (ms), (implicit 0).

• transition-timing-function - Defineste tipul vitezeiefectului in timpul transformarii: ease (implicit), linear, ease-in, ease-out, ease-in-out

• transition-delay - Defineste timpul de asteptare panacand incepe efectul "transition" (implicit 0)

Stiluri pentru imagini in CSS

• border-radius ex_imagini_1.html• border-radius-left• border-radius-right• border-radius-top• border-radius-bottom

• border ex_imagini_2.html• opacity - seteaza nivelul de opacitate al unui element

HTML, opacity permite modificarea transparenteielementului ex_imagini_3.html

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 creat la punctul 1; pag_css.html