Sunteți pe pagina 1din 41

Tehnologii web client-side

CSS

CSS
Cascading Style Sheets - etichete folosite

pentru formatarea paginilor web (formatare text, background sau aranjare in pagina) 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

CSS
aspectul si controlul grafic al elementelor din pagina,

cum ar fi: textul, imaginile, fondul, culorile si asezarea acestora in cadrul ferestrei paginii inglobeaza, sub un anumit nume, atribute de formatare care se aplica asupra unui element individual din pagina, asupra unui grup de elemente sau la nivelul intregului document extinde functionalitatile HTML, permitand redefinirea etichetelor HTML existente aspectul documentului pe ansamblu, sau a unui element individual din interiorul sau, poate fi controlat mult mai usor stilurile pot fi aplicate asupra unui element, a unui document sau chiar asupra unui intreg site web

CSS
Sintaxa CSS nivelul 1 - proprietatile etichetelor din documentul HTML, tip inline nivelul 2 - informatia introdusa in blocul HEAD, tip embedded nivelul 3 - comenzile aflate in pagini separate, tip externe

CSS
Sintaxa CSS
nivelul 1 - proprietatile etichetelor din documentul HTML, tip inline <eticheta style="codul CSS dorit"> ...textul sau obiectul asupra caruia este aplicat codul CSS... </eticheta> schimba aspectul ecarei e)chete in parte, prin stabilirea unui <p style="color: #ff0000;">Text rosu</p> anume s)l in interiorul ei, cu atributul "style". Acest lucru este u)l mai ales pentru a anula alte s)luri ale elementului respec)v sau de nivelul 2 - informatia introdusa in a da elemente grace de s)l doar e)chetei respec)ve blocul HEAD, tip embedded <style type="text/css"> <!-... comenzi CSS ... --> </style> nivelul 3 - comenzile aflate in pagini separate, tip externe (definit in HEAD) <link rel="stylesheet" type="text/css" href="fisier_css.css"> sau <style type="text/css">@import url( Calea catre fisierul.css )</style>

Sintaxa CSS-ului este compusa doar din 3 parti: Proprieta)le si valorile se regasesc sub forma de perechi,despar)te selector { proprietate: valoare } de caracterul doua puncte :, ecare pereche se termina cu un /* Acesta este un comentariu */ caracter punct si virgula ";". body { background: #eeeeee; font-family: "Trebuchet MS", Verdana, Arial, serif; }

CSS
div, span si etichete CSS <div> functioneaza asemanator cu eticheta <p> <span> este similara cu eticheta <font> eticheta XHTML <eticheta argument="valoare"> eticheta CSS element{argument: valoare;} XHTML <font color="#00FF00"> <p>Text verde</p> </font> XHTML cu CSS <p style="color: #00FF00;"> Text verde </p>

Denirea selectorilor selector_HTML { proprietate1:valoare1; proprietate2:valoare2; ... } s)lurile e)chetelor respec)ve din documentul HTML vor modicate automat .nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... } selectoriii de )p clasa ofera posibilitatea congurarii unor s)luri care se pot aplica doar acelor elemente care sunt e)chetate cu clasa respec)va selector_HTML .nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... } o clasa este asociata unui selector HTML, ceea ce inseamna ca acea clasa poate folosita doar cu e)cheta HTML respec)va #iden)cator { proprietate1:valoare1; proprietate2:valoare2; ... } pentru crearea de s)luri care pot atribuite unei singure e)chete HTML dintr-o pagina Numele unei clase/iden)cator este recomandat sa e diferit de cuvantele rezervate JavaScript.

CSS
Denirea de reguli similare selector1, selector2, ... { proprietate1:valoare1; proprietate2:valoare2; ... } mai mul) selectori folosesc aceleasi deni)i css, aces)a pot avea aceeasi lista de elemente, ind scrisi separat prin virgule Denirea e)chetelor in context (imbricate) selector1 selector2 ... { proprietate1:valoare1; proprietate2:valoare2; ... } Unde "selector1" este selectorul parinte iar "selector2" o e)cheta este inconjurata de alte e)chete (aandu-se asWel una in interiorul alteia), spunem ca aceste e)chete sunt imbricate. E)cheta exterioara se numeste, in acest caz, e)cheta parinte, iar cea inferioara se numeste copil Lista de selectori imbrica) poate mai mare de doi, ul)mul selector din lista este cel care primeste toate s)lurile incluse in regula si in plus le mosteneste si pe cele ale parin)lor. De cele mai multe ori s)lurile e)chetelor din interior preiau s)lurile e)chetelor parinte. Acest mecanism se numeste mostenirea s)lurilor.

Cresterea priorita)i unei deni)i selector { proprietate1:valoare1; proprietate2:valoare2 !important; ... } atribuie maximum de prioritate in determinarea ordinii unei execu)i; plasata inaintea caracterului ;

CSS
Determinarea ordinii execu/ei (cascada) 1. Regulile CSS scrise in interiorul paginii HTML, in cadrul e/chetei "style" din sec/unea "head" au o prioritate mai mare decat cele scrise intr-un sier extern, iar regulile scrise in interiorul e/chetelor au o prioritate mai mare decat cele din cadrul e/chetei "style" din sec/unea "head". 2. Existenta atributului !important confera prioritate maxima la asare deni/ei in care este u/lizat. 3. Sursa regulilor exista numeroase navigatoare care permit u/lizatorului sa-si deneasca propriile foi de s/l. Totusi, foile de s/l ale autorului le anuleaza pe cele ale vizitatorului daca acestea din urma nu au valoarea "!important". 4. Specicitate cu cat o regula dispune de mai mul/ selectori HTML, de clasa si de iden/cator, cu atat prioritatea ei creste. ID-urile au valoarea 100, clasele au valoarea 10, iar selectorii HTML au valoarea 1. 5. Momentul apari/ei cu cat un s/l apare mai tarziu, cu atat importanta lui este mai mare. AsSel, deni/ile unei e/chete copil au prioritatea mai mare si anuleaza toate s/lurile precedente cu care intra in conict.

CSS
comenzi CSS incluse in zona HEAD
<html> <head> <title>Exemplul 1_1</title> <style type="text/css"> <!-- p{color: #00FF00;}--> </style> </head> <body> <p>Text verde</p> Text negru <p>Text verde</p> </body> </html>

Adaugarea comentariilor la CSS ajuta la intelegerea codului, facandu-se asWel cunoscut, pentru mai tarziu, rolul anumitor elemente din codul CSS; u)le si in cazul navigatoarelor care nu suporta CSS

CSS
Elementele id si class
<html> <head> <title>Exemplu 2_1</title> <style type="text/css"> <!-- #albastru{color: #0000FF;}--> </style> </head> <body> <p id="albastru">Text albastru introdus prin id "albastru"</p> Text negru Obiectele de /p iden/cator (ID) sunt asemanatoare cu </body> clasele. Pot aplicate oricarei e/chete HTML, dar spre deosebire de clase, numele unui iden/cator trebuie </html> atribuit numai unei singure e/chete HTML dintr-o pagina, pentru alta e/cheta se adauga un ID cu nume diferit. In interiorul codului CSS, iden/catorul este denit prin adaugarea unui caracter diez (#) inaintea numelui

Elementele id si class
<html> <head> <title>Exemplu 2_2</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> Clasa este un obiect care poate aplicat oricarei e/chete </html> HTML. O clasa trebuie creata in interiorul e/chetei HTML inainte de a denita intr-un cod CSS. Crearea clasei in interiorul e/chetei se face simplu, prin specicarea cuvantului class si numele clasei. In interiorul codului CSS, clasa trebuie denita prin adaugarea unui caracter punct (.) inaintea numelui clasei

CSS

CSS
Stiluri pentru fonturi font-family
<html> <head> <title>Exemplu 3_1</title> <style type="text/css"> <!-- p{font-family: font1,font2,arial;}--> </style> </head> <body> <p>Text scris cu fontul Arial</p> Text negru <p>Text scris cu fontul Arial</p> </body> </html>
selector { font-family:"nume_font1", "nume_font2", ..., nume_generic }

Dupa ul)ma virgula se pot folosi urmatoarele nume generice de fonturi: "serif", "sans-serif", "cursive", "monospace" sau "fantasy". Numele fonturilor trebuie sa e incadrate intre ghilimele simple sau duble, mai ales daca numele acestora con)ne spa)i @font-face { font-family:nume_font src: url(loca)e_font); } Pentru a ingloba un font intr-o pagina si a-l descarca, se foloseste intruc)unea @font-face

CSS
Stiluri pentru fonturi font-size
<head> <title>Exemplu 3_3</title> <style type="text/css"> <!-- p{font-size: 20px;}--> </style> </head> <body> <p>Text scris cu font de 20px</p> Text negru </body> </html>

selector { font-size:valoare } Pixelii reprezinta cea mai des u/lizata unitate de masura pentru stabilirea dimensiunii fontului.

pixeli (px), puncte (pt), inci sau centimetri, procent

CSS keyword xx-small x-small small medium large x-large xx-large

numar FONT size 1 2 3 4 5 6 7

CSS
Stiluri pentru fonturi
Text inclinat selector { font-style:valoare } "valoare": normal, italic sau oblique cursivul se refera la versiunea unui font a carui caractere au o inclinare spre dreapta, iar oblicul este un font inclinat fortat spre dreapta

font-style
Grosimea fontului selector { font-weight:valoare }
1

bold, bolder, lighter, o valoare cuprinsa intre 100 si 900, normal elimina formatarea cu caractere aldine (ingrosate)

font-weight

<html> <head> <title>Exemplu 3_4</title> <style type="text/css"> <!-p{ font-family: arial; font-size: 20px; font-style: italic; font-weight: 800;} --> </style> </head> <body> <p>Text scris cu Arial, 20px, italic, 800</p> Text negru </body> </html>

CSS
Majuscule mici selector { font-variant:valoare } - folosite de obicei in cadrul /tlurilor, ele ind ob/nute prin conver/rea literelor mici in majuscule cu o dimensiune mai mica decat a majusculelor normale
h1 { font-variant:small-caps; }

valoarea small-caps Valori mul/ple pentru font selector { font:val_font-family val_font-style val_font-variant val_font- weight val_font-size val_height }
h1 { font:"Arial",sans-serif italic small-caps bold 14pt; }

Daca o anumita valoare din lista este omisa, navigatorul va folosi valoarea prestabilita.

CSS

Stiluri pentru text


Spa)ul intre litere selector { lecer-spacing:valoare }
h1 { leHer-spacing:3px; }

can)tatea de spa)u dintre literele unui cuvant. Se poate adauga sau reduce spa)ul dintre litere folosind proprietatea lecer-spacing, urmata de o valoare exprimata intr-o anumita unitate de masura, ce poate lua si valori nega)ve Spa)ul dintre cuvinte selector { word-spacing:valoare }
h2 { word-spacing:8px; }

poate modicat folosind proprietatea word-spacing, urmata de o valoare exprimata intr-o anumita unitate, ind de obicei stabilita in pixeli Spa)ul intre linii selector { line-height:valoare }
h1 { line-height:150%; }

poate avea ca efect o mai buna si usoara ci)re a textului in cazul in care aceasta este mai mare (creaza o regiune cu spa)u intre liniile de text)
Inal>mea liniei poate de asemenea denita si in cadrul proprieta>i "font-size", prin introducerea caracterului "/" urmat de valoarea pentru inal>mea randului, imediat dupa dimensiunea fontului. Exemplu: h1 { font-size:12px/28px; }

CSS Stiluri pentru text


Marimea (/pul) literelor selector { text-transform:valoare }
h1 { text-transform:uppercase; }

se poate controla marimea literelor din text, indiferent de modul cum a fost el scris ini/al. proprietatea text-transform va urmata de o valoare care poate :
1 capitalize primul caracter din ecare cuvant sa e scris cu majuscula; 2 uppercase toate caracterele sa e scrise cu majuscule; 3 lowercase -toate caracterele sa e scrise cu litere mici; 4 none textul sa e asat asa cum este.

CSS
Stiluri pentru text text-align
<style type="text/css"> <!-p{text-align: center;} --> </style>

float

#un_id { oat:right; }

selector { oat:valoare; } determina o mutare fortata a elementului in direc)a data de valoarea men)onata, lasand loc liber in spa)ul opus direc)ei, care va ocupat de urmatorul element din codul HTML valoare poate : lef, right si none posibilitatea de a "infasura" anumite elemente in jurul altora; "none" permite elementului sa e plasat acolo unde este posibil, iar celelalte valori forteaza plasarea elementului in stanga sau in dreapta ecranului, textul din exteriorul e)chetei HTML respec)ve va plasat in partea opusa, in jurul elementului. <html> <head> <title>Exemplu 4_2</title> <style type="text/css"> <!-.auto{float: left;} --> </style> </head>

vertical-align
<style type="text/css"> <!-.sus{vertical-align: top;} --> </style>

CSS
clear
#un_div { oat:right; } p { clear:both; }

display

li { display:inline; } #un_id { display:none; }

selector { clear:valoare; } anuleaza ocuparea unui spa)u care a fost lasat liber de un element care u)lizeaza proprietatea "oat". valoare specica latura in jurul careia este interzisa infasurarea textului si poate lua valoarea: lef, right sau both. Se poate folosi si valoarea "none", ceea ce are ca efect anularea altor atribute ale proprieta)i clear. selector { display:valoare; } poate stabili daca un element va de )p block, incluzand linii noi deasupra si dedesubtul sau, daca este inclus in linie, daca este tratat sub forma de lista sau daca elementul este asat sau nu Valoare poate una din urmatoarele op)uni: 1list-item plaseaza in prima linie a textului un indicator pentru ar)cole de )p lista, dar si un salt deasupra si dedesubtul ar)colului; 2block deneste e)cheta ca ind de )p bloc si plaseaza un salt la linie noua deasupra si dedesubtul ei; 3inline deneste e)cheta ca o e)cheta in linie si elimina caracterele de salt la linie noua; 4none determina ascunderea elementului si neasarea lui de catre navigator; codul acestuia este incarcat insa con)nutul sau nu e asat in pagina.

Stiluri pentru text Tabulare text-indent


<style type="text/css"> <!-p{text-indent: 10px;} --> </style>

CSS

Decorare text-decoration
Valorile pot fi
1 2 3 4

underline pentru a sublinia textul overline pentru a trasa o linie deasupra textului line-through pentru a taia textul cu o linie blink pentru a face textul sa apara si dispara intermitent

<html> <head> <title>Exemplu 4_3</title> <style type="text/css"> <!-p{text-decoration: underline;} --> </style> </head> <body> Text normal <p>Text subliniat</p> </body> </html>

Pentru a elimina decora)ile se foloseste valoarea "none". Prin folosirea acestei valori se elimina si sublinierile link-urilor, chiar daca navigatorul are prestabilit sa le arate subliniat.

CSS

Proprietatea color poate schimba culoare oricarui element, e el text, linie orizontala sau element de )p formular

Stiluri pentru text Culoare color


<html> <head> <title>Exemplu 4_4</title> <style type="text/css"> <!-p{color: #0000FF;} --> </style> </head> <body> Text normal <p>Text albastru</p> </body> </html>

Stiluri pentru legaturi


<html> <head> <title>Exemplu 4_5</title> <style type="text/css"> <!-a{font-family: arial; font-size: 20px;} a:link {color: #0000FF;} a:visited {color: #00FF00;} a:active {color: #FF0000;} a:hover {color: #000000;} --> </style> </head> <body> Text normal <a href="exemplu4_4.html">link</a> catre exemplul 4_4 </body> </html>

CSS
<html> <head> <title>Exemplu 5_1</title> <style type="text/css"> <!-body {background-color: #FFFF00;} p {background-color: #FF0000;} --> </style> </head> <body> Text normal <p>Text cu background rosu</p> </body>

Daca se foloseste valoarea "transparent" navigatorul va asa culoarea prestabilita sau cea a elementului parinte.

Stiluri pentru background Stiluri pentru background background-color background-image


<html> <head> <title>Exemplu 5_2</title> <style type="text/css"> <!-p {background-image: url(poza.jpg);} --> </style> </head> <body> Text normal <p>Text cu imagine de fond</p> </body> </html>

CSS

valoarea poate : 1repeat pentru a repeta imaginea pe toata suprafata elementului respec)v; 2repeat-x pentru a repeta imaginea numai pe orizontala; 3repeat-y pentru a repeta imaginea numai pe ver)cala; 4no-repeat pentru a asa imaginea o singura data, fara repetare.

Stiluri pentru background background-repeat


<html> <head> <title>Exemplu 5_3</title> <style type="text/css"> <!-p {background-image: url(poza.jpg); background-repeat: no-repeat;} --> </style> </head> <body> Text normal <p>Text cu imagine de fond</p> </body>

Stiluri pentru background background-position


<html> <head> <title>Exemplu 5_4</title> <style type="text/css"> <!-body {background-image: url(poza.jpg); background-repeat: no-repeat; background-position: top center;} --> Coordonatele x si y pot exprimate ca valori </style> absolute sau ca procente. Se pot folosi si </head> cuvintele cheie: "lef", "center" sau "right" <body> pentru coordonata x; respec)v "top", "center" Text normal sau "bocom" pentru coordonata y. </body> body { background-posi>on:10px 10px; } </html>

CSS
Stiluri pentru liste list-style-type
<html> <head> <title>Exemplu 6_1</title> <style type="text/css"> <style type="text/css"> <!-<!-li {list-style-type: lower-alpha;} li {list-style-type: valoare;} --> --> </style> </style> </head> valoare disc <body> disc disc Cerinte: circle cerc <ol> square patrat decimal numere intregi <li>examen</li> lower-roman numere romane, caractere mici (i, ii, iii, <li>proiect</li> iv) <li>activitate pe parcurs</li> upper-roman numere romane, caractere mari (I, II, III, </ol> IV) </body> upper-alpha litere mari (A, B, C, D) </html> lower-alpha litere mici (a, b, c, d)

CSS
Stiluri pentru liste list-style-image
<html> <head> <title>Exemplu 6_2</title> <style type="text/css"> <!-li {list-style-image: url(punct.gif);} --> </style> </head> <body> Cerinte: <ul> <li>examen</li> <li>proiect</li> <li>activitate pe parcurs</li> </ul> </body>

CSS
Chenare si margini
marginea (margin) este spatiul exterior chenarului pana la celelalte elemente chenarul (border) este o bordura care inconjoara elementul completarea (padding) stabileste distanta dintre continut si chenar continutul include informatia utila (text, tabele, imagini, formulare, etc.)

width si height - la/mea si inal/mea


unui element
Tipuri de valori:
1 2 3

- o valoare de )p numeric, de obicei in pixeli; - un procent, care stabileste o valoare propor)onala in func)e de cea a elementului parinte; - valoarea auto, care foloseste la)mea si inal)mea calculata de navigator, si care reprezinta can)tatea de spa)u maxim pe care o poate ocupa elementul pentru asarea intregului con)nut.

<html> <head> <title>Exemplu 7_1</title> <style type="text/css"> <!-img {width: 50px; height: 100px;} --> </style> </head> <body> <img src="margini.gif"> </body> </html>

Sintaxa generala pentru congurarea la)mii si inal)mii este:

#un_id { width:300px; height:500px; }

CSS
margin
div { margin:10px 5px 8px 15px; }

selector { margin:valoare/valori; } permite stabilirea distantei dintre un element si alte elemente alaturate, prin specicarea unei valori pentru marginea din ecare latura (sus, dreapta, jos, stanga). Daca specica) cele 4 valori in aceeasi deni)e, acestea reprezinta marginile elementului in urmatoarea ordine: sus, dreapta, jos, stanga. Daca specica) doar o valoare, aceasta va aplicata tuturor marginilor. Daca specica) doua sau trei valori, atunci valorile care lipsesc sunt copiate dupa valorile marginilor opuse Valoare poate avea urmatoarele op)uni:
1 2 3

border

div { border:1px solid blue; }

selector { border:val_grosime val_s)l val_culoare; } permite stabilirea simultana a atributelor chenarului pentru toate cele patru laturi ale casetei. Foloseste 3 valori dis)ncte, pentru a congura la)mea (grosimea), s)lul si culoarea liniei bordurii. Pot folosite si proprieta) separate pentru ecare: "border-width", "border-style" si "border- color" - prima valoare (val_grosime) reprezinta grosimea chenarului si poate una din urmatoarele )puri: - o valoare de )p lungime (valoarea 0 determina anularea asarii chenarului); - un cuvant cheie (thin, medium, thick) care caracterizeaza o dimensiune rela)va. - a doua valoare (val_s)l) reprezinta numele s)lului atribuit chenarului (valoarea "none" anuleaza asarea chenarului); - ul)ma valoare (val_culoare) reprezinta culoarea, exprimata in cod hexa sau valoare RGB

- o valoare de )p lungime (numerica) care poate si nega)va; - o valoare procentuala (procent) creaza o margine propor)onala cu la)mea elementului parinte; - valoarea auto lasa controlul marginilor la decizia navigatorului.

Pentru a stabili valoarea marginii doar pentru o singura latura:

CSS
<html> <head> <title>Exemplu 7_2</title> selector { border-width:valoare; } <style type="text/css"> selector { border-style:valoare; } <!-selector { border-color:valoare; } img {margin-left: 100px; margin-top: 25px;} --> </style> </head> <body> <img src="margini.gif"> </body> </html>

border-style

CSS
<html> <head> <title>Exemplu 7_3</title> <style type="text/css"> <!-.clasa1 {border-width: 2px; border-style: dotted; border-color: red;} .clasa2 {border-width: 3px; border-style: dashed; border-color: blue;} .clasa3 {border-width: 2px; border-style: solid; border-color: green;} .clasa4 {border-width: 3px; border-style: double; border-color: black;} .clasa5 {border-width: 2px; border-style: groove; border-color: silver;} .clasa6 {border-width: 3px; border-style: ridge; border-color: lime;} .clasa7 {border-width: 2px; border-style: inset; border-color: yellow;} .clasa8 {border-width: 3px; border-style: outset; border-color: aqua;} .clasa9 {border-width: 2px; border-style: hidden; border-color: olive;} --> <body> <div class="clasa1">border-width: 2px; border-style: dotted; border-color: red;</div><br> <div class="clasa2">border-width: 3px; border-style: dashed; border-color: blue;</div><br> <div class="clasa3">border-width: 2px; border-style: solid; border-color: green;</div><br> <div class="clasa4">border-width: 3px; border-style: double; border-color: black;</div><br> <div class="clasa5">border-width: 2px; border-style: groove; border-color: silver;</div><br> <div class="clasa6">border-width: 3px; border-style: ridge; border-color: lime;</div><br> <div class="clasa7">border-width: 2px; border-style: inset; border-color: yellow;</div><br> <div class="clasa8">border-width: 3px; border-style: outset; border-color: aqua;</div><br> <div class="clasa9">border-width: 2px; border-style: hidden; border-color: olive;</div> </body> </html>

<html> <head> <title>Exemplu 8_2</title> <style type="text/css"> <!-.absolut {position: absolute; left: 200px; top: 150px;} .relativ {position: relative; left: 50px; top: 50px;} --> </style> </head> <body> <div class="absolut">Pozitionare absoluta, independent de celelate obiecte din pagina</div> Text <div class="relativ">Pozitionare relativa, dupa "Text"</ div> </body> are ca efect crearea unui element neafectat de restul este amplasat la locul sau in cadrul ferestrei sau a </html> documentului, plasarea lui in fereastra ind facuta intr-o loca)e elementului parinte, in sensul ca el apare dupa toate precisa, denita prin intermediul coordonatelor x si y, elementele dinaintea sa, respec)v inaintea tuturor indiferent de pozi)ile altor elemente. Originea (punctul de elementelor amplasate dupa el. Elementele pot coordonate 0,0) este coltul din stanga-sus al ferestrei sau al mutate din loca)a lor folosind proprieta)le "top" si obiectului in care este inclus elementul pozi)onat absolut. "lef" sau "bocom" si "right"

Pozitionare absoluta <html> <head> <title>Exemplu 8_1</title> </head> <body> <h4 style="position: absolute; left: 50px; top: 50px">Text 1</h4> <h4 style="position: absolute; left: 100px; top: 200px">Text 2</h4> </body> </html>

Pozitionare relativa

CSS
Includerea unui element absolut intr-un element relativ
elementul absolut este pozi)onat folosind ca origine coltul din stanga-sus al elementului rela)v

Includerea unui element relativ intr-un element absolut


acesta se va deplasa o data cu elementul absolut

<div class=rela>v> ... <div class=absolut> ... </div> ... </div>

<div class=absolut> ... <div class=rela>v> ... </div> ... </div>

.rela>v {posi>on:rela>ve; top:30px; leY:50px; } .absolut {posi>on:absolute; top:15px; leY:0px; }

.absolut {posi>on:absolute; top:20px; leY:25px; } .rela>v {posi>on:rela>ve; top:10px; leY:5px; }

CSS
Vizibilitatea unui element
h1 { visibility:hidden; }

Suprafata vizibila a unui element


selector {clip:rect(val1 val2 val3 val4); } stabileste por)unea din elementul respec)v care este vizibila in fereastra navigatorului. Restul con)nutului acelui element nu dispare, ci este invizibil pentru vizitator. Se foloseste proprietatea clip cu valoarea rect (denita prin patru valori separate prin spa)i si incadrate de paranteze rotunde) Valorile construesc un patrulater, denesc distanta dintre coltul din stanga-sus al elementului si laturile de sus, dreapta, jos si stanga ale regiunii vizibile.

selector { visibility:valoare } valoare poate : 1 hidden ascunde elementul de la asarea pe ecran; 2 visible aseaza elementul; 3 inherit vizibilitatea elementului este mostenita de la elementul parinte. Controleaza faptul daca un element este vizibil sau nu. Chiar daca elementul este invizibil, el va ocupa un spa)u liber in pagina, acolo unde ar trebuit sa e asat.

#viz { clip: rect(25 300 125 100); }

CSS
Definirea pozitiei depasirii
selector { overow:valoare; }

Aspectul indicatorului de mouse


selector { cursor:valoare; }

Uneori elementele nu sunt in totalitate con)nute in Navigatorul modica indicatorul de mouse in func)e casetele lor, caseta neind sucient de mare, asWel ca o parte de con)nutul deasupra caruia se aa acesta. Valoare a con)nutului nu este asata sau depaseste marginea stabilita. poate : Proprietatea overow permite tratarea con)nutului in exces, controland asWel modul de asare sau nu al acesuia. "valoare" stabileste unde va plasata depasirea, folosind una din valorile: 1 visible ex)nde caseta elementului asWel incat sa incapa tot con)nutul sau, ignorand delimitarea suprafetei vizibile. Este op)unea prestabilita. 2 hidden ascunde con)nutul care nu incape in caseta elementului, si impiedica apari)a barei de derulare. 3 scroll adauga intotdeauna bare de derulare elementului, pentru ca sa se poata accesa tot con)nutul elementului. 4 auto barele de derulare apar doar atunci cand este necesar.
.supdim { overow:scroll; }

CSS
hover si focus
face ca atunci cand mouse-ul se aa deasupra butonului (care are id="unid") acesta sa isi schimbe culoarea de fundal, iar cand se da click pe zonele de text din formular (care au class="test"), la fel se modica culoarea background.
<html> <head> <>tle>hover si focus</>tle> <style type="text/css"> #unid:hover { background-color:#dadafe; } .test:focus { background-color:#ededfe; } </style> </head> <body> <form ac>on="" method="post"> <input type="text" class="test" /><br /> <textarea cols="20" rows="5" class="test"></textarea><br /> <input type="buHon" value="Buton" id="unid" /> </form> </body> </html>

CSS
Pozitionarea tridimensionala (z-index)
<html> <head> <title>Exemplu 8_3</title> <style type="text/css"> <!-.element1 {position: absolute; left: 30px; top: 30px; z-index: 3} .element2 {position: absolute; left: 50px; top: 50px; z-index: 2} .element3 {position: absolute; left: 70px; top: 70px; z-index: 1} --> </style> </head> <body> <div class="element1"><img src="images/ login.gif"></div> <div class="element2"><img src="images/ login.gif"></div> <div class="element3"><img src="images/ login.gif"></div></body> </html> selector { z-index:valoare; } implica asezarea elementelor in s)va, unele in raport cu altele. Amplasarea se face in mod automat, incepand cu valoarea 0 si con)nuand prin incrementare cu o unitate, in ordinea apari)ei lor in documentul HTML si rela)v la elementele parinte. "valoare" este un numar intreg, pozi)v, 0 sau nega)v

CSS3 - Background
background-size
permite determinarea marimii imaginii de background. AsWel, pute) folosi aceeasi imagine in mai multe elemente cu dimensiuni diferite Valori : auto - e valoarea predenita (default). Redimensioneaza laturile imaginii asWel incat se men)ne aspectul imaginii, daca ambele valori sunt auto, imaginea apare la dimensiunile ei. procente - Redimensioneaza lungimea si inal)mea pozei pt. background, in procente rela)ve la elementul parinte (nu la imagine). Prima valoare reprezinta lungimea, a doua inal)mea. Daca se specica numai o valoare, cealalta e setata "auto". pixeli - Redimensioneaza lungimea si inal)mea la marimile specicate. Daca se specica numai o valoare, cealalta e setata "auto". cover - Poza pt. background e marita (sau micsorata) asWel incat sa acopere toata suprafata de fundal. contain - Poza pt. background e marita (sau micsorata) asWel incat sa e cuprinsa in zona de con)nut.
<style type="text/css"><!-- #id1 { width:200px; height:100px; border:1px solid blue; background:url('css3.jpg'); background-size:100px 60px; background-repeat:no-repeat; } #id2 { width:300px; height:120px; border:1px solid #01da02; background:url('css3.jpg'); background-size:contain; background-repeat:no-repeat; } #id3 { width:300px; height:120px; border:1px solid silver; background:url('css3.jpg'); background-size:cover; } --></style> <div id="id1">Dimensiuni in pixeli</div> <div id="id2">Valoare contain</div> <div id="id3">Valoare cover</div>

CSS3 - Background
gradient
Proprietatea background poate primi o valoare speciala care deneste o culoare gradient. Sintaxa pentru codul ce deneste gradient-ul difera de la un browser la altul, de aceea trebuie specicata pentru ecare din navigatoarele web majore
<style type="text/css"><!-- #id1 { width:300px; height:120px; lter: progid:DXImageTransform.MicrosoY.gradient(startColorstr='#daf eda', endColorstr='#0308fe'); /* IE 7, 8 */ background-image: -ms-linear-gradient(top leY, #01fe02, #0102fe); /* IE10 */ background: -moz-linear-gradient(top leY, #1f1, #f, #11f); /* Mozilla Firefox */ /* Safari, Chrome */ background-image: -webkit-gradient(linear, leY top, right boHom, color-stop(0, #0f1), color-stop(0.5, #f), color-stop(1, #01f)); background-image: -o-linear-gradient(top leY, #01fe02, #0102fe); /* Opera 11.1+ */ background: linear-gradient(top leY, #1f1, #f, #11f); /* W3C Markup */ } --></style> <div id="id1"></div>

Direc)a culorilor gradient-ului si distanta pe care culorile o iau poate controlata (top lef). Pentru distanta culorii in gradient, vom adauga o valoare de )p procent dupa culoare (sau o valoare intre 0 si 1 pt. browsere Webkit)

CSS3 - Border
Colturi rotunjite - border-radius
permite crearea cu usurinta a colturilor rotunjite in designul elementelor, fara a nevoie de imagini sau mai multe tag-uri <div> Internet Explorer suporta border-radius incepand cu IE9, dar pute) folosi libraria de func)i JavaScript DD_roundies ca sa asa) colturi rotunjite in navigatoare web care nu recunosc aceasta proprietate CSS
<style type="text/css"><!-- #id1 { width:300px; height:120px; border:2px solid blue; border-radius:28px; } --></style> <div id="id1"> </div>

CSS3 - Border
Umbre ptr. chenare - box-shadow
se foloseste pentru a adauga umbre la chenare. Este recunoscuta in IE9+, Firefox 4, Chrome, si Opera. element { box-shadow: X_offset Y_offset blur marime culoare inset; } - elm - este elementul HTML la care se aplica aceasta proprietate. - X_oset - este pozi)a /distanta umbrei pe latura orizontala. Sunt permise si valori nega)ve. - Y_oset - este pozi)a /distanta umbrei pe latura ver)cala. Sunt permise si valori nega)ve. - blur - deneste distanta "blur" (op)onala, 0 sau nespecicata inseamna fara "blur"). - marime - marimea umbrei (op)onala). - culoare - culoarea umbrei (op)onala, negru daca nu e specicata). - inset - schimba umbra din exterior sa apara in interior.
style type="text/css"><!-- #id1 { width:300px; height:120px; background-color:#bbfeda; box-shadow: 11px 11px 5px #7878da; -webkit-box-shadow: 11px 11px 5px #7878da; /* Safari si Chrome */ } --></style> <div id="id1"></div>

CSS3
text-shadow
permite adaugarea unui efect de umbra care sa e aplicat la textul dintr-un element HTML. Umbra apare in jurul literelor text-shadow: offset_X offset_Y blur culoare;
<style type="text/css"><!-- h2 { /* pt. IE8+ */ lter:progid:DXImageTransform.MicrosoY.Shadow(color=#a 0a1fe, direc>on=135, strength=5); text-shadow: 2px 3px 3px #a0a1fe; } --></style>

- oset_X - specica pozi)a umbrei pe orizontala. Sunt permise si valori nega)ve. - oset_Y - specica pozi)a umbrei pe ver)cala. Sunt <h2>Text cu text-shadow</h2> permise si valori nega)ve. - blur - deneste distanta pentru valoarea "blur" (op)onal). - culoare - deneste culoarea umbrei (op)onal). Daca nu e specicata, se foloseste negru. Incepand cu versiunea 8 a Internet Explorer putem folosi o proprietate lter pentru a crea efecte de umbra pt. text si in IE. - color - specica culoarea umbrei. filter:progid:DXImageTransform.Microsoft.Sh - direc)on - poate avea una din aceste valori numerice: 0=top, adow(color=val, direction=val, 45=top right, 90=right, 135=bocom right, 180=bocom, strength=val); 225=bocom lef, 315=top lef. - strength - reprezinta can)tatea de "blur".

CSS3
opacity
seteaza nivelul de opacitate al unui element HTML, opacity permite modicarea transparentei elementului. IE8 si versiuni anterioare folosesc o varianta alterna)va, proprietatea lter. filter: alpha(opacity=X); opacity: X; /* pt. IE */
<style type="text/css"><!-- #dv { background-color:blue; width:200px; height:100px; lter:alpha(opacity=40); /* pt. IE */ opacity:0.4; } --></style> <div id="dv">Un con>nut oarecare ...</div>

X - reprezinta o valoare intre 0 (complet transparent) si 1.0 (fara transparenta

S-ar putea să vă placă și