Curs 3

Programare Web Front End
Partea a II-a
Victor BUCATĂ
Facultatea de Inginerie Electrică - U.P.B.

Cuprins
1 Introducere
2 Limbajul CSS
Tipuri de utilizare CSS
Sintaxa CSS
Selectarea elementelor
Unităt,i de măsură
Fundaluri
Formatarea textului
Modelul dreptunghiular/Pozit,ionare
3 Limbajul JavaScript
Motivat,ie
Elementele limbajului
Ce sunt CSS s, i JavaScript?
Ce este CSS?
I CSS este acronimul de la Cascading Style Sheets (Foi de Stil ı̂n
Cascadă).
I CSS descrie modul ı̂n care sunt afis, ate elementele HTML pe
ecran, hârtie sau alte suporturi.
I CSS cres, te eficient, a. Poate controla aspectul mai multor pagini
Web foarte us, or.
I Foile de stil externe sunt stocate ı̂n fis, iere CSS.
Ce este JavaScript?
I JavaScript este un limbaj de programare de script (codul este
vizibil utilizatorului), interpretat ı̂n browser, dezvoltat de Netscape s, i
Sun s, i cu care pot fi create pagini web interactive.
I HTML 5 cont, ine s, i descrierea unor funct, ii API (Application
Programming Interface) JavaScript care interact, ionează cu
documentul HTML prin intermediul arborelui DOM (Document
Object Model).
I Limbajul JavaScript nu are nicio legătură cu limbajul Java, este doar
o coincident, ă de nume
Limbajul CSS
Tipuri de utilizare CSS
Există mai multe tipuri de utilizare CSS:
1 intern
2 extern
3 ı̂n linie
CSS intern
Codul CSS se plasează ı̂n cadrul elementului head ı̂ntre tagurile
<style> s, i </style>, ca mai jos:
1 <head>
2 <title></title>
3 <style type="text/css">
4 Continutul CSS se plaseaza aici
5 </style>
6 </head>
7 <body>
8 ...
9 </body>
CSS intern
I Folosind această metodă, fiecare fis, ier HTML cont, ine codul CSS
necesar pentru pagina respectivă.
I Dacă se face o modificare, ea trebuie repetată ı̂n toate fis, ierele
HTML.
I Această metodă este potrivită ı̂n cazul unei singure pagini web sau
dacă fiecare pagină are un stil separat.
CSS extern
I Un fis, ier CSS extern este un fis, ier text simplu.
I Fis, ierul nu cont, ine decât cod CSS. Se salvează cu extensia .css iar
legătura din fis, ierul HTML se plasează ı̂n elementul head ca mai jos:
1 <head>
2 <title></title>
3 <link rel="stylesheet" type="text/css" href="Cale catre
4 foaiadestil.css" />
5 </head>
I Sau poate fi folosită metoda @import ca mai jos:

1 <head>
2 <title></title>
3 <style type="text/css">@import url("Cale URL catre
4 foaiadestil.css")
5 </style>
6 </head>
CSS extern
I Folosind un fis, ier CSS extern, toate fis, ierele HTML trimit către un
singur fis, ier CSS pentru modul de prezentare a paginilor.
I Dacă trebuie modificat stilul pentru toate paginile din site, este
suficientă editarea unui singur fis, ier .css.
I Întret, inere mai us, oară
I Dimensiunea mai mică a fis, ierelor
I În consecint, ă consum de trafic mai mic
I Flexibilitate
I Se pot folosi ı̂mpreună cele două metode, de fapt mai există s, i o a
treia: CSS ı̂n linie (inline)
CSS ı̂n linie (inline)
Stilurile CSS ı̂n linie sunt definite chiar ı̂n cadrul elementului pe care
dorim să-l prezentăm, ca mai jos:
1 <body>
2 <p style="color: #ff0000;">Text scris cu rosu</p>
3 </body>
Propagarea ı̂n cascadă
I În cazul folosirii ı̂n acelas, i timp a tuturor celor 3 variante, prioritatea
este următoarea:
1 Stilurile ı̂n linie (ı̂n cadrul elementului HTML)
2 CSS intern
3 CSS extern
I CSS extern poate necesita put, in mai mult timp pentru afis, are.
I Browserele nu afis, ează ı̂ntotdeauna ı̂n acelas, i fel stilurile.
I Pentru anumite clase de utilizatori, eliminarea stilurilor de pe
pagină este preferată.
Sintaxa CSS
Exemplu de fişier CSS
1 /* Acesta este un comentariu */
2 h1,h2,h3 {font-family: Arial, sans-serif;} /* utilizeaza primul
font disponibil */
3 p, table, li, address { /* se aplica asupra tuturor tag-urilor*/
4 font-family: "Courier New"; /* se cuprind intre " " valorile cu
spatii */
5 margin-left: 15pt; /* specifica indentarea */
6 }
7 p, li, th, td {font-size: 80\%;} /* dimensiunea fontului este de
80% */
8 th {background-color:#FAEBD7;} /* culorile se pot specifica in
hexa */
9 body { background-color: #ffffff;}
10 h1,h2,h3,hr {color:red;} /* se pot specifica culori si prin nume*/
11 a:link {color:darkred;} /* un link nevizitat */
12 a:visited {color:darkred;} /* un link vizitat*/
13 a:active {color:red;} /* un link activ */
14 a:hover {color:red;} /* cand mouse-ul este peste el */
Sintaxa CSS
Sintaxa CSS constă numai din 3 părt, i: selector, proprietate s, i valoare.
1 selector {proprietate: valoare}
I Selectorul reprezintă identificarea elementului (elementelor) HTML

căruia dorim să-i aplicăm un stil.
I Proprietatea reprezintă un aspect al stilului pe care dorim să-l
modificăm.
I Valoarea reprezintă ceea ce atribuim proprietăt, ii respective.
I CSS este case-insensitive cu except, ia numelor claselor s, i a
ID-urilor.
Sintaxa CSS
I Există s, i proprietăt, i cu valori multiple separate prin virgule.
I Dacă o valoare individuală cont, ine mai mult de un singur cuvânt, se
folosesc ghilimelele ca mai jos:
1 body {
2 background: #eeeeee;
3 font-family: "Trebuchet MS", Verdana, Arial, serif;
4 }
Introducerea comentariilor
I Exemple de comentarii:
1 /* Acesta este un comentariu */
2
3 /* Acesta este un
4 comentariu pe mai multe
5 linii*/
Selectarea elementelor
Mos, tenirea
I Atunci când un element este cuprins ı̂n altul, elementul cuprins va
mos, teni ı̂n general proprietăt, ile elementului părinte.
I Exemplu:
1 body {font-family: Verdana, serif;}
I Acum tot textul din fis, ierul HTML va avea fontul Verdana (dacă nu
există Verdana, se va alege alt font serif). Dacă se dores, te un alt
font pentru titlurile h1 sau pentru paragrafe - exemplu:
1 h1 {font-family: Georgia, sans-serif;}
2 p {font-family: Tahoma, serif;}
I Există s, i proprietăt, i care nu se mos, tenesc, exemplu:

1 body {margin: 20px;}
Obs: Serifele sunt liniut, ele, mai mult sau mai put, in subt, iri/fine, cu care se
termină unele din trăsăturile principale ale unor caractere de literă.
Clasele CSS
I Selectorul de clasă permite asocierea stilurilor diferit pentru diverse
elemente.
I Se comportă asemănător cu CSS inline.
I Un selector de clasă se poate folosi de oricâte ori dorim.
I Un selector de clasă ı̂ncepe cu caracterul punct (.)
I Este bine să se folosească nume de clase descriptive s, i nu
denumiri legate de aspect, de exemplu: buton, textimportant etc.
Clasele CSS
I Exemplu de selector de tip:
1 p {
2 font-size: small;
3 color: #333333
4 }
I Cuvântul propozit, ia” să fie verde s, i bold. Codul HTML:

”
1 <p>Pe scurt, <span class="textimportant">propozitia</span>
2 pe care o cititi este reprezentata in fisierul CSS ca mai jos:
3 </p>
I Codul CSS (selector de clasă):

1 .textimportant {
2 font-size: small;
3 color: #008080;
4 font-weight: bold;}
ID-uri CSS
I ID-urile sunt similare cu clasele dar odată ce ID-ul a fost desemnat,
el nu poate fi desemnat din nou ı̂n acelas, i fis, ier HTML.
I Un selector ID se foloses, te pentru a stabili stilul unui element unic
iar selectorii clasă se folosesc pentru mai multe elemente.
I De exemplu containerul principal al paginii este ca mai jos:
1 <div id="container">
2 Tot ceea ce se afla in document este inclus in acest div.
3 </div>
I Codul CSS (se foloses, te simbolul # s, i nu punctul):

1 #container{
2 width: 80%;
3 margin: auto;
4 padding: 20px;
5 border: 1px solid #666;
6 background: #ffffff;}
Pseudoclasele
Exemple:
1 #continut a:link {color: #009900;}
2 #continut a:visited {color: #999999;}
3 #continut a:hover {color: #333333;}
4 #continut a:focus {color: #333333;}
5 #continut a:active {color: #009900;}
Pseudoclasele
Alt exemplu:
1 a.column:link {color: #009900;}
2 a.column:visited {color: #999999;}
3 a.column:hover {color: #333333;}
4 a.column:focus {color: #333333;}
5 a.column:active {color: #009900;}
În fis, ierul HTML:

1 <a class="column" href="" title="">textul legaturii</a>
Pseudoclasele
Sau mai us, or:
1 .column a:link {color: #009900;}
2 .column a:visited {color: #999999;}
3 .column a:hover {color: #333333;}
4 .column a:focus {color: #333333;}
5 .column a:active {color: #009900;}
În fis, ierul HTML:

1 <div class="column">
2 <a href="" title="">textul legaturii</a>
3 </div>
Tipuri de selectori
I universal (orice element) Exemplu:
* {font: 10px Arial;}
I de tip (orice element de un acel tip) Exemplu:
h1 {text-decoration: underline;}
I de grup (elemente de mai multe tipuri) Exemplu:
h1, h2, h3 {font-family: Verdana;}
I de clasă (elemente de mai multe tipuri atunci când nu se dores, te
afectarea tuturor instant, elor ale tipurilor respective) Exemplu:
.numeclasa {text-decoration: underline;}
I ID (un singur element atunci când nu se dores, te afectarea tuturor
instant, elor anui anumit tip) Exemplu:
#numeid{text-decoration: underline;}
Tipuri de selectori
I descendent (un element cuprins ı̂n altul pe un anumit nivel)
Exemplu:
#continut h1 {text-decoration: underline;}
I copil (un element cuprins imediat ı̂n altul) Exemplu:
#continut > p {font-weight: bold;}
I frat, i alăturat, i (elemente alăturate ce au acelas, i părinte) Exemplu:
h1 + p {font: 10px Arial;}
I frat, i general (elemente ce au acelas, i părinte) Exemplu:
h1 ˜ p {font: 10px Arial;}
Selectorul de atribut
Selector de atribut (un element ce se potrives, te cu atributul listat)
(Obs.: Atributele sunt proprietăt, i ce se află ı̂n interiorul tagurilor HTML.)
I un atribut având orice valoare
Element[atribut]
I un atribut cu o anumită valoare
Element[atribut="val"]
I un atribut cu o anumită valoare dintr-o listă separată prin spat, ii
Element[rel˜="next"]
1 a[target] {
2 background-color: yellow;
3 }
sau
1 a[target="_blank"] {
2 background-color: yellow;
3 }
Selectorul de atribut (continuare)
I valoarea atributului este ”val” sau ı̂ncepe cu ”val” urmat imediat
de ”-”
*[lang|="val"]
I un atribut cu valoarea ı̂ncepând cu prefixul ”val”
Element[atributˆ="val"]
I un atribut cu valoarea terminată cu sufixul ”val”
Element[atribut$="val"]
I un atribut ce cont, ine cel put, in o instant, ă a substringului ”val”
Element[atribut*="val"]
Unităt, i de măsură CSS
Unităt, i de măsură absolute
I cm - centimetri
I in - inci
I mm - milimetri
I pc - pica (1pc = 12 puncte)
I pt - punct (1pt = 1/72 inci)
Unităt, i de măsură relative
I % - procent
I ch - lăt, imea caracterului 0” pentru fontul utilizat
”
I em - (1em = mărimea fontului pentru elementul curent)
I ex - dimensiunea x a fontului elementului
I gd - dimensiunea celulei definite prin grila layout-grid”
”
I px - dimensiunea pixelului pentru dispozitivul curent
I rem - mărimea fontului elementului rădăcină
I vh - ı̂nălt, imea ecranului dispozitivului curent
I vw - lăt, imea ecranului dispozitivului curent
I vm - minimul dintre vh s, i vw
Unităt, i de măsură pentru unghiuri
I deg - grade
I grad - 100grad = 90deg
I rad - radiani
I turn - rotiri (1turn = 360deg)
Unităt, i de măsură pentru timp s, i frecvent, ă
Timp:
I ms - milisecunde
I s - secunde
Frecvent, ă:
I Hz
I kHz
Unităt, i de măsură - culori
I numele culorii - red, blue, green, dark green
I rgb(x,y,z) - red = rgb(255,0,0)
I rgb(x%,y%,z%) - red = rgb(100%,0,0)
I rgba(x,y,z,alpha) - red = rgba(255,0,0,1)
I #rrggbb - ı̂n hexazecimal - red = #ff0000 (sau prescurtat #f00)
I hsl(hue, saturation, lightness) - red = hsl(0,100%,50%)
I hsla(hue, saturation, lightness, alpha) - red = hsl(0,100%,50%,1)
I flavor - o culoare de accentuare (de obicei aleasă de utilizator).
I currentColor - valoarea calculată a proprietăt, ii color.
Fundaluri CSS
Fundaluri CSS
I Nu se mos, tenesc.
I Exemplu:
1 background: #ffffff url(path_to_image) top left no-repeat
fixed;
I Subproprietăt, i:
I attachment
I color
I image
I position
I repeat
I size
Fundaluri CSS - Attachment
Exemplu:
1 background-attachment: valoare;
Valoare poate fi:

I fixed
I scroll
Fundaluri CSS - Color
Exemplu:
1 background-color: valoare;
Valoare poate fi:

I numele culorii
I număr hexazecimal
I cod de culoare RGB
I transparent
Fundaluri CSS - Image
Exemplu:
1 background-image: url(cale_la_imagine);
Valori posibile:
I url
I none
Fundaluri CSS - Position
1 background-position: valoare;
Valoare poate fi:

I top left
I top center
I top right
I center left
I center center
I center right
I bottom left
I bottom center
I bottom right
I x-% y-%
I x-poz y-poz
Fundaluri CSS - Repeat
Exemplu:
1 background-repeat: valoare;
Valori posibile:
I repeat
I repeat-x
I repeat-y
Fundaluri CSS - Size
Exemplu:
1 background-size: auto|length|cover|contain|initial|inherit;
Valoare poate fi:

I auto = valoarea implicită
I length = lăt, imea/ı̂nălt, imea imaginii (se pot folosi s, i procente)
I cover = acoperă ı̂ntreg containerul
I contain = redimensionare ca imaginea să fie mereu vizibilă
Formatarea textului
Proprietatea font
I Se pot stabili valorile pentru stil, pondere, variantă, mărime,
mărimea rândului s, i familia fontului:
I font-family
I font-size
I font-style
I font-variant
I font-weight
Proprietatea font-family
I Se pot adăuga două valori: numele familiei fontului s, i numele
generic al familiei de fonturi.
I Exemplu:
1 font-family: Verdana, sans-serif;
Proprietatea font-size
Exemplu:
1 font-size: valoare;
I xx-large
I x-large
I larger
I large
I medium
I small
I smaller
I x-small
I xx-small
I mărime
I % (procent)
Proprietatea font-style
Exemplu:
1 font-style: valoare;
Valoare poate fi:

I normal
I italic
I oblic
Proprietatea font-variant
Exemplu:
1 font-variant: valoare;
Valoare poate fi:

I normal
I small-caps
Proprietatea font-weight
Exemplu:
1 font-weight: valoare;
Valoare poate fi:

I lighter
I normal
I 100
I 200
I ...
I 900
I bold
I bolder
Proprietăt, i legate de grafica textului - culoarea
I Culoarea textului se stabiles, te astfel:
1 color: valoare;
I Valorile posibile sunt:

I numele culorii - exemplu: red, black etc.
I număr hexazecimal - exemplu: #ff0000, #000000 etc.
I cod de culoare RGB - exemplu: rgb(255,0,0), rgb(0,0,0) etc.
Grafica textului - spat, ierea ı̂ntre caractere
I Valoarea 0 ı̂mpiedică alinierea justify a textului.
I Se foloses, te astfel:
1 letter-spacing: valoare;

I normal
I lungime
Grafica textului - alinierea textului
1 text-align: valoare;

I left
I right
I center
I justify
Grafica textului - decorarea textului
1 text-decoration: valoare;

I none
I underline
I overline
I line-through
I blink
Grafica textului - indentarea textului
I Prima linie dintr-un element HTML poate fi indentată.
1 text-indent: valoare;

I lungime
I procentaj
Grafica textului - transformarea textului
I Textul poate scris cu litere mari sau mici indiferent de ceea ce era
original.
1 text-transform: valoare;

I none
I capitalize
I lowercase
I uppercase
Grafica textului - tratarea spat, iilor
I Spat, iile albe pot fi controlate.
1 white-space: valoare;

I normal - spat, iile multiple sunt ignorate
I pre - spat, iile multiple nu sunt ignorate
I nowrap - nu se face saltul la o linie nouă decât dacă este ı̂ntâlnit
elementul <br>
Grafica textului - spat, iul dintre cuvinte
I Spat, iul dintre cuvinte poate fi controlat. Pot fi folosite s, i valori
negative.
1 word-spacing: valoare;

I normal
I length - se dă dimensiunea cu care să fie spat, iate cuvintele.
Liste ordonate s, i neordonate
I Exemplu cu o singură declarat, ie pentru listele ordonate s, i cele
neordonate:
1 list-style: valoare valoare valoare;
I Subproprietăt, i:
I type
I position
I image
Liste ordonate s, i neordonate - image
I Exemplu:
1 list-style-image: url(cale_catre_imagine.gif, jpg sau png);
I Este bine să fie declarată s, i list-style-type ı̂n cazul ı̂n care utilizatorul
nu afis, ează imaginile.
Liste ordonate s, i neordonate - position
I Exemplu:
1 list-style-position: valoare;
I Valori:
I inside
I outside
Liste ordonate s, i neordonate - type
I Exemplu:
1 list-style-type: valoare;
I Valori:
I disc
I circle
I square
I decimal
I lower-roman
I upper-roman
I lower-alpha
I upper-alpha
I none
Linkuri formatate CSS
I Culoarea linkului fără nicio act, iune produsă:
a:link {color: #009900;}
I Culoarea unui link deja vizitat:
a:visited {color: #999999;}
I Culoarea când pointerul este plasat pe link:
a:hover {color: #333333;}
I Asemănător cu hover dar atunci când linkul a fost accesat prin
tastatură:
a:focus {color: #333333;}
I Culoarea când linkul este apăsat:
a:active {color: #009900;}
I Obs: a:link s, i a:visited trebuie declarate ı̂nainte de a:hover iar acesta
ı̂nainte de a:active.
Modelul dreptunghiular
Elementele HTML de bloc s, i de linie
Elementele bloc:
I Au valori definite pentru dimensiunile spat, iului ocupat.
I De obicei ı̂ncep pe o linie nouă cu except, ia cazului când sunt
flotante s, i sunt alăturate altor elemente bloc flotante.
I Pot cont, ine la rândul lor alte elemente bloc sau de linie.
I Sunt folosite de obicei pentru port, iuni mai mari de cont, inut (imagini,
paragrafe etc.).
I Se foloses, te proprietatea display:
1 display: block;
Elementele HTML de bloc s, i de linie
Elementele de linie:
I Nu au valori definite pentru dimensiunile spat, iului ocupat.
I Ocupă lăt, imea necesară afis, ării cont, inutului.
I Nu este obligatoriu să ı̂nceapă pe o linie nouă.
I Nu pot cont, ine elemente bloc.
I Pot cont, ine alte elemente de linie.
I Sunt folosite de obicei pentru port, iuni mai mici de cont, inut (câteva
cuvinte).
I Se foloses, te proprietatea display:
1 display: inline;
Elementele HTML linie-bloc (inline-block)
Elementele inline-block:
I Au valori definite pentru dimensiunile spat, iului ocupat.
I Nu este obligatoriu să ı̂nceapă pe o linie nouă.
I Pot cont, ine alte elemente bloc.
I Pot cont, ine alte elemente de linie.
I Exemplu proprietatea display:
1 display: inline-block;
Elementele Div
I Elementele Div sunt elemente bloc HTML. Un element Div poate
cont, ine orice element.
I Exemplu (cod HTML):
1 <div id="container">
2 Aici se afla continutul siteului
3 </div>
I Exemplu (cod CSS):

1 #container{
2 width: 70%;
3 margin: auto;
4 padding: 20px;
6 background: #ffffff;
7 }
Elementele Span
I Elementele Span sunt similare cu elementele Div dar sunt de linie s, i
nu de bloc, nu este obligatoriu să ı̂nceapă pe linie nouă. Pot cont, ine
port, iuni de text.
I Exemplu (cod HTML):
1 <span class="italic">Acest text este italic</span>
I Exemplu (cod CSS):

1 .italic{
2 font-style: italic;
3 }
Modelul dreptunghiular ( Box Model”)
”
I Modelul dreptunghiular generează cele mai multe probleme pentru

ı̂ncepători, dar o dată ı̂nt, eles, este foarte puternic.
I RET, INET, I: ORICE ELEMENT BLOC DE PE O PAGINĂ
CORESPUNDE UNEI CUTII DREPTUNGHIULARE!
Width : 492px = 20px + 6px + 20px + 400px + 20px + 6px + 20px
Height : 192px = 20px + 6px + 20px + 100px + 20px + 6px + 20px

Modelul dreptunghiular ( Box Model”)
”
I content = cont, inut

I padding = margine interioară
I border = chenar
I margin = margine exterioară
Obs: Pentru elementele de linie nu se iau ı̂n considerat, ie
dimensiunile.
Proprietăt, ile CSS Width s, i Height
I Exemplu pentru ı̂nălt, ime (height):
1 height: valoare;
I Valori:
I auto
I lungime
I procentaj
I Similar pentru proprietatea lăt, ime (width)
Proprietăt, ile CSS Width s, i Height - ı̂nălt, imea rândurilor
I Exemplu pentru ı̂nălt, imea rândurilor:
1 line-height: valoare;
I Valori:
I normal
I număr
I mărime
I procentaj
Proprietăt, ile CSS Width s, i Height - ı̂nălt, imea maximă
I Exemplu pentru ı̂nălt, imea maximă:
1 max-height: valoare;
I Valori:
I none
I lungime
I procentaj
I Similar pentru proprietatea lăt, ime maximă (max-width)
Proprietăt, ile CSS Width s, i Height - ı̂nălt, imea minimă
I Exemplu pentru ı̂nălt, imea minimă:
1 min-height: valoare;
I Valori:
I lungime
I procentaj
I Similar pentru proprietatea lăt, ime minimă (min-width)
Proprietatea Margin
I Proprietatea margin nu se mos, tenes, te.
I Proprietatea margin declară spat, iul dintre un element HTML s, i
elementele din jurul său.
I Poate fi stabilită pentru toate cele patru părt, i:
1 margin-top: lungime, procentaj sau auto;
2 margin-left: lungime, procentaj sau auto;
3 margin-right: lungime, procentaj sau auto;
4 margin-bottom: lungime, procentaj sau auto;
I După cum vedet, i există trei tipuri de valori posibile: lungime (unităt, i
absolute), procentaj (unităt, i relative) sau auto.
Proprietatea Margin ı̂n varianta cu 4 sau mai put, ine valori
I Există posibilitatea de a declara proprietatea margin ı̂n varianta 4
valori (ı̂n ordinea sus, dreapta, jos, stânga):
1 margin: 10px 10px 10px 10px;
I Proprietatea margin ı̂n varianta 3 sau 2 valori (valorile nedeclarate

rezultă din partea opusă existentă):
1 margin: 10px 10px 10px;
I Proprietatea margin ı̂n varianta o valoare (aceeas, i valoare pentru

toate părt, ile):
1 margin: 10px;
I Dacă nu este declarată, proprietatea margin ia valoarea 0.

I Proprietatea margin poate avea valori negative
Proprietatea Padding
I Proprietatea padding nu se mos, tenes, te.
I Proprietatea padding (margine interioară) declară spat, iul dintre
chenarul (border) unui element s, i cont, inutul din el.
I Poate fi stabilită pentru toate cele patru părt, i:
1 padding-top: lungime sau procent;
2 padding-left: lungime sau procent;
3 padding-right: lungime sau procent;
4 padding-bottom: lungime sau procent;
I Nu poate fi folosită valoarea auto s, i nici valori negative.

I Poate fi declarată cu 4, 3 , 2 sau o valoare la fel ca ı̂n cazul
proprietăt, ii margin.
I Valoarea implicită pentru padding este 0.
Chenare (border) CSS
I Exemplu:
I Valori:
I culoare
I stil
I grosime
Chenare (border) CSS - culoare
Exemplu:
1 border-color: valoare;
Valoare poate fi:

I numele culorii
I număr hexazecimal
I cod de culoare RGB
I transparent
Chenare (border) CSS - stil
1 border-style: valoare;
Valoare poate fi:

I dashed
I dotted
I double
I groove
I hidden
I inset
I none
I outset
I ridge
I solid
Chenare (border) CSS - grosime
1 border-width: valoare;
Valoare poate fi:

I grosime
I Thin
I Medium
I Thick
Chenare CSS (border) - pentru o singură parte
I Exemplu:
1 border-bottom: 1px solid #333333;
I Valori:
I culoare
I stil
I grosime
I Alte exemple:
1 border-bottom-color: valoare;
2 border-bottom-style: valoare;
3 border-bottom-width: valoare;
Chenare CSS (border) - raza chenarului
I Exemplu:
1 border-top-right-radius: lungime;
2 border-bottom-right-radius: lungime;
3 border-bottom-left-radius: lungime;
4 border-top-left-radius: lungime;
I Alt exemplu:
1 border-radius: 2em 1em 4em / 0.5em 3em;
este achivalent cu:

1 border-top-left-radius: 2em 0.5em;
2 border-top-right-radius: 1em 3em;
3 border-bottom-right-radius: 4em 0.5em;
4 border-bottom-left-radius: 1em 3em;
Elemente flotante - proprietatea display
I Proprietatea display modifică modul ı̂n care este afis, at un element
(opt, iunile principale: bloc sau de linie).
1 display: valoare;
I Valori:
I block - elementul este de tip bloc
I inline - elementul este de tip linie
I inline-block - elementul este de tip linie-bloc
I list-item - elementul este afis, at ca un item de listă
I none - elementul nu este afis, at deloc.
Elemente flotante - proprietatea float
I Proprietatea float modifică modul ı̂n care este afis, at un element.
1 float: valoare;
I Valori:
I left - elementul este afis, at ı̂n partea stângă a elementului părinte
I right - elementul este afis, at ı̂n partea dreaptă a elementului părinte
I none - nu se face nicio modificare a afis, ării
Elemente flotante - proprietatea clear
I Proprietatea clear specifică dacă se permite pozit, ionarea altor
elemente flotante lateral.
1 clear: valoare;
I Valori:
I none - pot fi elemente flotante pe orice parte
I both - nu permite niciun element flotant
I left - nu pot fi elemente flotante ı̂n stânga
I right - nu pot fi elemente flotante ı̂n dreapta
Proprietatea clip
I Proprietatea clip specifică cât din element este vizibil.
1 clip: valoare;
I Valori:
I auto
I shape
I Exemplu:
1 clip: rect(10px, 10px, 10px, 10px);
Proprietatea overflow
I Proprietatea overflow controlează ceea ce se face atunci când
cont, inutul depăs, es, te cadrul.
1 overflow: valoare;
I Valori:
I auto
I hidden
I visible
I scroll
I Exemplu:
1 #overflow_box {width:200px; height:200px; border-top: 1px
solid
2 #eee; border-left: 1px solid #eee; border-bottom: 1px solid
3 #eee; padding: 10px; overflow: auto;}
Proprietatea visibility
I Proprietatea visibility permite ascunderea unui element. Spre
deosebire de display:none, visibility:hidden ocupă spat, iul
elementului pe pagină.
1 visibility: valoare;
I Valori:
I hidden
I visible
Proprietatea z-index
I Proprietatea z-index defines, te ordinea de suprapunere a
elementelor.
1 z-index: valoare;
I Valori:
I auto
I number
Proprietatea position
I Proprietatea position determină modul ı̂n care sunt pozit, ionate
elementele.
1 position: valoare;
I Valori:
I static - implicit
I relativ - ı̂l pozit, ionează relativ la pozit, ia normală
I absolute - la marginea din stânga sus a elementului părinte (a paginii)
I fixed -fixat la scroll
Proprietatea position
I Proprietatea position lucrează cu următoarele proprietăt, i:
I top
I left
I right
I bottom
I Exemplu:
1 position: absolute; top: 10px; right: 10px;
Proprietatea box-sizing
I Proprietatea box-sizing (CSS3) modifică modul de calcul al
dimensiunilor reale ale cadrului unui element.
I Exemplu:
1 box-sizing: border-box;
I content-box (implicită)
I padding-box
I border-box (cea mai utilă)
I inherit
I initial
Concluzie s, i resurse suplimentare
I Această sect, iune a avut drept scop numai prezentarea generală a
CSS.
I Multe lucruri nu le-am acoperit (pseudoelementele, transformările,
tranzit, iile, limbaje de preprocesare a CSS) dar sper ca v-am oferit o
privire de ansamblu.
I Este util s, i rezumatul pe care ı̂l putet, i găsi aici: http://coding.
smashingmagazine.com/wp-content/uploads/
images/css3-cheat-sheet/css3-cheat-sheet.pdf
I Sau putet, i căuta cu Google CSS cheatsheets”
”
I Un alt ghid util: http://www.cssbasics.com/full.pdf
Limbajul JavaScript
De ce să ı̂nvăt, JavaScript?
JavaScript este unul din cele 3 limbaje pe care trebuie să le cunoască
orice programator web:
I HTML pentru a defini cont, inutul paginilor web
I CSS pentru a specifica aspectul paginilor
I JavaScript pentru a programa comportarea paginilor
Observat, ii importante!
I JavaScript s, i Java sunt limbaje complet diferite atât din punct de
vedere conceptual cât s, i din cel al proiectării.
I JavaScript a fost inventat de Brendan Eich ı̂n 1995 s, i care a devenit
standard ECMA ı̂n 1997.
I ECMA-262 este numele oficial. ECMAScript 2016 (Iunie 2016) este
ultima versiune JavaScript.
Scripturi HTML - JavaScript
Folosind JavaScript, paginile web devin mai interactive.
Scriptul de mai jos scrie Salut JavaScript! ı̂ntr-un element HTML cu
id=”demo”:
1 <body>
2 <p id="demo"></p>
3 <script>
4 document.getElementById("demo").innerHTML = "Salut JavaScript!";
5 </script>
6 </body>
Tagul <script>este folosit pentru a defini un script pe partea de client ca

de exemplu cod JavaScript.
Dacă browserul nu suportă JavaScript:
1 <noscript>Din pacate browserul dumneavoastra nu suporta JavaScript
!</noscript>
2
3 <p>Un browser ce nu suporta JavaScript va afisa textul din cadrul
elementului noscript.</p>
JavaScript - Exemple
Elementul <script>cont, ine fie instruct, iuni de script fie face o trimitere
către un fis, ier script extern prin intermediul atributului src.
JavaScript este folosit uzual pentru manipularea imaginilor, validarea
formularelor s, i modificări dinamice de cont, inut.
Exemple de ce poate face JavaScript:
Poate modifica cont, inutul HTML:
1 document.getElementById("demo").innerHTML = "Hello JavaScript!";
JavaScript poate modifica stilurile CSS:

1 document.getElementById("demo").style.fontSize = "25px";
JavaScript poate modifica atributele HTML:

1 document.getElementById("image").src = "picture.gif";
Elementele limbajului
Exemplele pentru sintaxa de bază le gasiti la adresa
http://itee.elth.pub.ro/˜vbucata/ia/cursuri/
ex-javascript/index.php
Vă mult, umesc pentru atent, ie!

Curs 3

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Curs 3

Încărcat de

Drepturi de autor:

Formate disponibile

Programare Web Front End

Facultatea de Inginerie Electrică - U.P.B.

I Sau poate fi folosită metoda @import ca mai jos:

I Selectorul reprezintă identificarea elementului (elementelor) HTML

I Există s, i proprietăt, i care nu se mos, tenesc, exemplu:

I Cuvântul propozit, ia” să fie verde s, i bold. Codul HTML:

I Codul CSS (selector de clasă):

I Codul CSS (se foloses, te simbolul # s, i nu punctul):

În fis, ierul HTML:

În fis, ierul HTML:

Valoare poate fi:

Valoare poate fi:

Valoare poate fi:

Valoare poate fi:

Valoare poate fi:

Valoare poate fi:

Valoare poate fi:

I Valorile posibile sunt:

I Valorile posibile sunt:

I Valorile posibile sunt:

I Valorile posibile sunt:

I Valorile posibile sunt:

I Valorile posibile sunt:

I Valorile posibile sunt:

I Valorile posibile sunt:

I Exemplu (cod CSS):

I Exemplu (cod CSS):

I Modelul dreptunghiular generează cele mai multe probleme pentru

Height : 192px = 20px + 6px + 20px + 100px + 20px + 6px + 20px

I content = cont, inut

I Proprietatea margin ı̂n varianta 3 sau 2 valori (valorile nedeclarate

I Proprietatea margin ı̂n varianta o valoare (aceeas, i valoare pentru

I Dacă nu este declarată, proprietatea margin ia valoarea 0.

I Nu poate fi folosită valoarea auto s, i nici valori negative.

Valoare poate fi:

Valoare poate fi:

Valoare poate fi:

este achivalent cu:

Tagul <script>este folosit pentru a defini un script pe partea de client ca

JavaScript poate modifica stilurile CSS:

JavaScript poate modifica atributele HTML:

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