Curs 3

Dezvoltare Web Frontend (partea a II-a)
Informatică Aplicată 1 - cursul 3
Victor BUCATĂ
Facultatea de Inginerie Electrică - U.P.B.
1 noiembrie 2023
Victor BUCATĂ (Facultatea de Inginerie Electrică - U.P.B.) Dezvoltare Web Frontend (partea a II-a) 1 noiembrie 2023 1 / 127
LIMBAJUL CSS
Cuprins
1 Introducere
2 Cum arată regulile CSS?
3 Tipuri de utilizare CSS
4 Selectarea elementelor
Tipuri de selectori
Selectorul de element
Selectorul de clasă
Selectorul ID
Selectorul de atribut
Combinarea selectorilor
Pseudoclasele
5 Tratarea conflictelor regulilor CSS

6 Unităt, i de măsură
7 Stilizarea textului
8 Fundaluri
9 Modelul cutie/Pozit, ionare
Introducere
Demonstrat, ie CSS: O singură pagină HTML - mai multe stiluri!
▶ Reluăm exemplul din cursul anterior - o pagină HTML afis, ată cu patru foi de stil diferite.
Apăsat, i pe ”Foaia de stil 1”, ”Foaia de stil 2”, ”Foaia de stil 3”, ”Foaia de stil 4” pentru a
vedea diferitele stiluri:
▶ http://itee.elth.pub.ro/˜vbucata/ia/cursuri/ex-html-css/
demo-css.html
▶ Un alt site interesant (pentru a vedea funct, ionalitatea CSS):
▶ https://www.csszengarden.com/
Ce este CSS?
▶ CSS este acronimul de la Cascading Style Sheets (Foi de Stil ı̂n Cascadă).
▶ CSS descrie modul ı̂n care sunt afis, ate elementele HTML pe ecran, hârtie sau alte
suporturi.
▶ CSS cres, te eficient, a. Poate controla aspectul mai multor pagini Web foarte us, or.
▶ Foile de stil externe sunt stocate ı̂n fis, iere CSS.
Avantajele folosirii CSS
▶ Aspect unitar pentru site
▶ Cu un fis, ier sau două CSS se ment, ine stilul pentru ı̂ntreg site-ul - nefiind nevoie de
implementarea lui ı̂n fiecare pagină
▶ Cu CSS se câs, tigă timp
▶ Des, i la ı̂nceput ia mai mult decât un editor de tip WYSIWYG, ulterior viteza cres, te
▶ Se poate schimba aspectul ı̂ntregului site prin modificarea unui singur fis, ier de stil
▶ La introducerea unui aspect, nu mai este nevoie de verificarea pagină cu pagină a
site-ului
Cum arată regulile CSS?
Sintaxa CSS - Cum arată o regulă CSS?
Sintaxa CSS - Cum arată o regulă CSS?
Sintaxa CSS
▶ Sintaxa CSS constă numai din 3 părt, i: selector, proprietate s, i valoare.
1 selector {proprietate: valoare}
▶ Selectorul reprezintă identificarea elementului (elementelor) HTML căruia dorim să-i

aplicăm un stil.
▶ Proprietatea reprezintă un aspect al stilului pe care dorim să-l modificăm.
▶ Valoarea reprezintă ceea ce atribuim proprietăt, ii respective.
▶ CSS este case-insensitive cu except, ia numelor claselor s, i a ID-urilor.
Sintaxa CSS
▶ Există s, i proprietăt, i cu valori multiple separate prin virgule.
▶ 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 }
Sintaxa CSS - Cum arată o foaie de stil CSS?
Tipuri de utilizare 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
▶ Folosind această metodă, fiecare fis, ier HTML cont, ine codul CSS necesar pentru pagina
respectivă.
▶ Dacă se face o modificare, ea trebuie repetată ı̂n toate fis, ierele HTML.
▶ Această metodă este potrivită ı̂n cazul unei singure pagini web sau dacă fiecare pagină
are un stil separat.
CSS extern
▶ Un fis, ier CSS extern este un fis, ier text simplu.
▶ 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>
▶ 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
▶ Folosind un fis, ier CSS extern, toate fis, ierele HTML trimit către un singur fis, ier CSS pentru
modul de prezentare a paginilor.
▶ Dacă trebuie modificat stilul pentru toate paginile din site, este suficientă editarea unui
singur fis, ier .css.
▶ Întret, inere mai us, oară
▶ Dimensiunea mai mică a fis, ierelor
▶ În consecint, ă consum de trafic mai mic
▶ Flexibilitate
▶ 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̂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
▶ CSS extern poate necesita put, in mai mult timp pentru afis, are.
▶ Browserele nu afis, ează ı̂ntotdeauna ı̂n acelas, i fel stilurile.
▶ Pentru anumite clase de utilizatori, eliminarea stilurilor de pe pagină este preferată.
Selectarea elementelor
Tipuri de selectori
▶ de element (orice element de un acel tip) Exemplu:
h1 {text-decoration: underline;}
▶ 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;}
▶ ID (un singur element atunci când nu se dores, te afectarea tuturor instant, elor anui anumit
tip) Exemplu:
#numeid{text-decoration: underline;}
▶ de grup (elemente de mai multe tipuri) Exemplu:
h1, h2, h3 {font-family: Verdana;}
Tipuri de selectori
▶ universal (orice element) Exemplu:
* {font: 10px Arial;}
▶ descendent (un element cuprins ı̂n altul pe un anumit nivel) Exemplu:
#continut h1 {text-decoration: underline;}
▶ copil (un element cuprins imediat ı̂n altul) Exemplu:
#continut > p {font-weight: bold;}
▶ frat, i alăturat, i (elemente alăturate ce au acelas, i părinte) Exemplu:
h1 + p {font: 10px Arial;}
▶ frat, i general (elemente ce au acelas, i părinte) Exemplu:
h1 ˜ p {font: 10px Arial;}
Selectori CSS - Selectorul de element
Selectori CSS - Selectorul de element
Selectori CSS - Selectorul de clasă
▶ Selectorul de clasă permite asocierea stilurilor diferit pentru diverse elemente.
▶ Se comportă asemănător cu CSS inline.
▶ Un selector de clasă se poate folosi de oricâte ori dorim.
▶ Un selector de clasă ı̂ncepe cu caracterul punct (.)
▶ Este bine să se folosească nume de clase descriptive s, i nu denumiri legate de aspect, de
exemplu: buton, textimportant etc.
▶ 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>
▶ Codul CSS (selector de clasă):

1 .textimportant {
2 font-size: small;
3 color: #008080;
4 font-weight: bold;}
Selectori CSS - Selectorul ID
▶ 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.
▶ Un selector ID se foloses, te pentru a stabili stilul unui element unic iar selectorii clasă se
folosesc pentru mai multe elemente.
▶ 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>
▶ 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;}
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.)
▶ un atribut având orice valoare
Element[atribut]
▶ un atribut cu o anumită valoare
Element[atribut="val"]
▶ 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)
▶ valoarea atributului este ”val” sau ı̂ncepe cu ”val” urmat imediat de ”-”
*[lang|="val"]
▶ un atribut cu valoarea ı̂ncepând cu prefixul ”val”
Element[atributˆ="val"]
▶ un atribut cu valoarea terminată cu sufixul ”val”
Element[atribut$="val"]
▶ un atribut ce cont, ine cel put, in o instant, ă a substringului ”val”
Element[atribut*="val"]
Combinarea selectorilor - element combinat cu selector de clasă
Combinarea selectorilor - element combinat cu selector de clasă
Combinarea selectorilor - selector descendent direct
Combinarea selectorilor - selector descendent direct
Combinarea selectorilor - selector descendent
Combinarea selectorilor - selector descendent
Combinarea selectorilor - se aplică nu numai selectorilor de element
Selectori CSS - Gruparea selectorilor
Pseudoclasele
Exemple de pseudoclase
▶ 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>
Tratarea conflictelor regulilor CSS
Câteva concepte legate de tratarea conflictelor regulilor CSS:
▶ originea
▶ combinarea
▶ mos, tenirea
▶ specificitatea
Precedent, a originii
▶ Atunci când apare un conflict:
▶ Regulă: Ultima declarat, ie câs, tigă
▶ HTML este procesat secvent, ial, de sus ı̂n jos
▶ CSS extern este declarat ı̂n locul ı̂n care este legat
▶ Atunci când nu este niciun conflict:
▶ O regulă s, i mai simplă: Declarat, iile se combină
Mos, tenirea
Mos, tenirea
▶ Atunci când un element este cuprins ı̂n altul, elementul cuprins va mos, teni ı̂n general
proprietăt, ile elementului părinte.
▶ Exemplu:
1 body {font-family: Verdana, serif;}
▶ 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;}
▶ 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̆.
Specificitatea
▶ regulă: combinat, ia de selectori cea mai specifică câs, tigă.
▶ Exemplu de calcul de specificitate:
Specificitatea
▶ Alt exemplu de calcul de specificitate:
Specificitatea
Unităt, i de măsură CSS
Unităt, i de măsură absolute
▶ cm - centimetri
▶ in - inci
▶ mm - milimetri
▶ pc - pica (1pc = 12 puncte)
▶ pt - punct (1pt = 1/72 inci)
Unităt, i de măsură relative
▶ % - procent
▶ ch - lăt, imea caracterului 0” pentru fontul utilizat
”
▶ em - (1em = mărimea fontului pentru elementul curent)
▶ ex - dimensiunea x a fontului elementului
▶ gd - dimensiunea celulei definite prin grila layout-grid”
”
▶ px - dimensiunea pixelului pentru dispozitivul curent
▶ rem - mărimea fontului elementului rădăcină
▶ vh - ı̂nălt, imea ecranului dispozitivului curent
▶ vw - lăt, imea ecranului dispozitivului curent
▶ vm - minimul dintre vh s, i vw
Unităt, i de măsură pentru unghiuri
▶ deg - grade
▶ grad - 100grad = 90deg
▶ rad - radiani
▶ turn - rotiri (1turn = 360deg)
Unităt, i de măsură pentru timp s, i frecvent, ă
Timp:
▶ ms - milisecunde
▶ s - secunde
Frecvent, ă:
▶ Hz
▶ kHz
Unităt, i de măsură - culori
▶ numele culorii - red, blue, green, dark green
▶ rgb(x,y,z) - red = rgb(255,0,0)
▶ rgb(x%,y%,z%) - red = rgb(100%,0,0)
▶ rgba(x,y,z,alpha) - red = rgba(255,0,0,1)
▶ #rrggbb - ı̂n hexazecimal - red = #ff0000 (sau prescurtat #f00)
▶ hsl(hue, saturation, lightness) - red = hsl(0,100%,50%)
▶ hsla(hue, saturation, lightness, alpha) - red = hsl(0,100%,50%,1)
▶ flavor - o culoare de accentuare (de obicei aleasă de utilizator).
▶ currentColor - valoarea calculată a proprietăt, ii color.
▶ Resursă utilă: https://htmlcolorcodes.com/
Stilizarea textului
Proprietatea font
▶ Se pot stabili valorile pentru stil, pondere, variantă, mărime, mărimea rândului s, i familia
fontului:
▶ font-family
▶ font-size
▶ font-style
▶ font-variant
▶ font-weight
Proprietatea font-family
▶ Se pot adăuga două valori: numele familiei fontului s, i numele generic al familiei de fonturi.
▶ Exemplu:
1 font-family: Verdana, sans-serif;
Proprietatea font-size
▶ Exemplu:
1 font-size: valoare;
▶ xx-large
▶ x-large
▶ larger
▶ large
▶ medium
▶ small
▶ smaller
▶ x-small
▶ xx-small
▶ mărime
▶ % (procent)
Proprietatea font-style
▶ Exemplu:
1 font-style: valoare;
▶ Valoare poate fi:

▶ normal
▶ italic
▶ oblic
Proprietatea font-variant
▶ Exemplu:
1 font-variant: valoare;

▶ normal
▶ small-caps
Proprietatea font-weight
▶ Exemplu:
1 font-weight: valoare;

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

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

▶ normal
▶ lungime
Stilizarea textului - alinierea textului
1 text-align: valoare;

▶ left
▶ right
▶ center
▶ justify
Stilizarea textului - decorarea textului
1 text-decoration: valoare;

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

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

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

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

▶ normal
▶ length - se dă dimensiunea cu care să fie spat, iate cuvintele.
Stilizarea textului - ı̂nălt, imea rândurilor
▶ Exemplu pentru ı̂nălt, imea rândurilor:
1 line-height: valoare;
▶ Valori:
▶ normal
▶ număr
▶ mărime
▶ procentaj
Liste ordonate s, i neordonate
▶ Exemplu cu o singură declarat, ie pentru listele ordonate s, i cele neordonate:
1 list-style: valoare valoare valoare;
▶ Subproprietăt, i:
▶ type
▶ position
▶ image
Liste ordonate s, i neordonate - image
▶ Exemplu:
1 list-style-image: url(cale_catre_imagine.gif, jpg sau png);
▶ 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
▶ Exemplu:
1 list-style-position: valoare;
▶ Valori:
▶ inside
▶ outside
Liste ordonate s, i neordonate - type
▶ Exemplu:
1 list-style-type: valoare;
▶ Valori:
▶ disc
▶ circle
▶ square
▶ decimal
▶ lower-roman
▶ upper-roman
▶ lower-alpha
▶ upper-alpha
▶ none
Linkuri formatate CSS
▶ Culoarea linkului fără nicio act, iune produsă:
a:link {color: #009900;}
▶ Culoarea unui link deja vizitat:
a:visited {color: #999999;}
▶ Culoarea când pointerul este plasat pe link:
a:hover {color: #333333;}
▶ Asemănător cu hover dar atunci când linkul a fost accesat prin tastatură:
a:focus {color: #333333;}
▶ Culoarea când linkul este apăsat:
a:active {color: #009900;}
▶ Obs: a:link s, i a:visited trebuie declarate ı̂nainte de a:hover iar acesta ı̂nainte de a:active.
Fundaluri CSS
Fundaluri CSS
▶ Nu se mos, tenesc.
▶ Exemplu:
1 background: #ffffff url(path_to_image) top left no-repeat
fixed;
▶ Subproprietăt, i:
▶ attachment
▶ color
▶ image
▶ position
▶ repeat
▶ size
Fundaluri CSS - Attachment
▶ Exemplu:
1 background-attachment: valoare;

▶ fixed
▶ scroll
Fundaluri CSS - Color
▶ Exemplu:
1 background-color: valoare;

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

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

▶ auto = valoarea implicită
▶ length = lăt, imea/ı̂nălt, imea imaginii (se pot folosi s, i procente)
▶ cover = acoperă ı̂ntreg containerul
▶ contain = redimensionare ca imaginea să fie mereu vizibilă
Modelul cutie
Modelul cutie
RET, INET, I: ORICE ELEMENT BLOC DE PE O PAGINĂ CORESPUNDE UNEI CUTII

DREPTUNGHIULARE!
Modelul cutie ( Box Model”)
”
▶ Modelul cutie generează cele mai multe probleme pentru ı̂ncepători, dar o dată ı̂nt, eles,
este foarte puternic.
▶ RET, INET, I: ORICE ELEMENT BLOC DE PE O PAGINĂ CORESPUNDE UNEI CUTII
DREPTUNGHIULARE!
Width : 452px = 6px + 20px + 400px + 20px + 6px
Height : 152px = 6px + 20px + 100px + 20px + 6px
Modelul cutie ( Box Model”)
”
▶ content = cont, inut

▶ padding = Umplutură
▶ border = chenar
▶ margin = Margine
Obs: Pentru elementele de linie nu se iau ı̂n considerat, ie dimensiunile.
Proprietatea box-sizing
▶ Proprietatea box-sizing (CSS3) modifică modul de calcul al dimensiunilor reale ale
cadrului unui element.
▶ Exemplu:
1 box-sizing: border-box;
▶ content-box (implicită)
▶ padding-box
▶ border-box (cea mai utilă)
▶ inherit
▶ initial
Elementele HTML de bloc s, i de linie
▶ Elementele bloc:
▶ Au valori definite pentru dimensiunile spat, iului ocupat.
▶ De obicei ı̂ncep pe o linie nouă cu except, ia cazului când sunt flotante s, i sunt alăturate altor
elemente bloc flotante.
▶ Pot cont, ine la rândul lor alte elemente bloc sau de linie.
▶ Sunt folosite de obicei pentru port, iuni mai mari de cont, inut (imagini, paragrafe etc.).
▶ Se foloses, te proprietatea display:
1 display: block;
Elementele HTML de bloc s, i de linie
▶ Elementele de linie:
▶ Nu au valori definite pentru dimensiunile spat, iului ocupat.
▶ Ocupă lăt, imea necesară afis, ării cont, inutului.
▶ Nu este obligatoriu să ı̂nceapă pe o linie nouă.
▶ Nu pot cont, ine elemente bloc.
▶ Pot cont, ine alte elemente de linie.
▶ Sunt folosite de obicei pentru port, iuni mai mici de cont, inut (câteva cuvinte).
▶ Se foloses, te proprietatea display:
1 display: inline;
Elementele HTML linie-bloc (inline-block)
▶ Elementele inline-block:
▶ Au valori definite pentru dimensiunile spat, iului ocupat.
▶ Nu este obligatoriu să ı̂nceapă pe o linie nouă.
▶ Pot cont, ine alte elemente bloc.
▶ Pot cont, ine alte elemente de linie.
▶ Exemplu proprietatea display:
1 display: inline-block;
Elementele Div
▶ Elementele Div sunt elemente bloc HTML. Un element Div poate cont, ine orice element.
▶ Exemplu (cod HTML):
1 <div id="container">
2 Aici se afla continutul site-ului
3 </div>
▶ Exemplu (cod CSS):

1 #container{
2 width: 70%;
3 margin: auto;
4 padding: 20px;
6 background: #ffffff;
7 }
Elementele Span
▶ 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.
▶ Exemplu (cod HTML):
1 <span class="italic">Acest text este italic</span>
▶ Exemplu (cod CSS):

1 .italic{
2 font-style: italic;
3 }
Proprietăt, ile CSS Width s, i Height
▶ Exemplu pentru ı̂nălt, ime (height):
1 height: valoare;
▶ Valori:
▶ auto
▶ lungime
▶ procentaj
▶ Similar pentru proprietatea lăt, ime (width)
Proprietăt, ile CSS Width s, i Height - ı̂nălt, imea maximă
▶ Exemplu pentru ı̂nălt, imea maximă:
1 max-height: valoare;
▶ Valori:
▶ none
▶ lungime
▶ procentaj
▶ Similar pentru proprietatea lăt, ime maximă (max-width)
Proprietăt, ile CSS Width s, i Height - ı̂nălt, imea minimă
▶ Exemplu pentru ı̂nălt, imea minimă:
1 min-height: valoare;
▶ Valori:
▶ lungime
▶ procentaj
▶ Similar pentru proprietatea lăt, ime minimă (min-width)
Proprietatea Margin
▶ Proprietatea margin nu se mos, tenes, te.
▶ Proprietatea margin declară spat, iul dintre un element HTML s, i elementele din jurul său.
▶ 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;
▶ 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
▶ Există posibilitatea de a declara proprietatea margin ı̂n varianta 4 valori (ı̂n ordinea sus,
dreapta, jos, stânga):
1 margin: 10px 10px 10px 10px;
▶ Proprietatea margin ı̂n varianta 3 sau 2 valori (valorile nedeclarate rezultă din partea
opusă existentă):
1 margin: 10px 10px 10px;
▶ Proprietatea margin ı̂n varianta o valoare (aceeas, i valoare pentru toate părt, ile):
1 margin: 10px;
▶ Dacă nu este declarată, proprietatea margin ia valoarea 0.

▶ Proprietatea margin poate avea valori negative
Proprietatea Padding
▶ Proprietatea padding nu se mos, tenes, te.
▶ Proprietatea padding (Umplutură) declară spat, iul dintre chenarul (border) unui element s, i
cont, inutul din el.
▶ 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;
▶ Nu poate fi folosită valoarea auto s, i nici valori negative.

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

▶ numele culorii
▶ număr hexazecimal
▶ cod de culoare RGB
▶ transparent
Chenare (border) CSS - stil
▶ Exemplu:
1 border-style: valoare;

▶ dashed
▶ dotted
▶ double
▶ groove
▶ hidden
▶ inset
▶ none
▶ outset
▶ ridge
▶ solid
Chenare (border) CSS - grosime
▶ Exemplu:
1 border-width: valoare;

▶ grosime
▶ Thin
▶ Medium
▶ Thick
Chenare CSS (border) - pentru o singură parte
▶ Exemplu:
1 border-bottom: 1px solid #333333;
▶ Valori:
▶ culoare
▶ stil
▶ grosime
▶ Alte exemple:
1 border-bottom-color: valoare;
2 border-bottom-style: valoare;
3 border-bottom-width: valoare;
Chenare CSS (border) - raza chenarului
▶ 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;
▶ 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;
Proprietatea display
▶ Proprietatea display modifică modul ı̂n care este afis, at un element (opt, iunile principale:
bloc sau de linie).
1 display: valoare;
▶ Valori:
▶ block - elementul este de tip bloc
▶ inline - elementul este de tip linie
▶ inline-block - elementul este de tip linie-bloc
▶ list-item - elementul este afis, at ca un item de listă
▶ none - elementul nu este afis, at deloc.
Elemente flotante - proprietatea float
▶ Proprietatea float modifică modul ı̂n care este afis, at un element.
1 float: valoare;
▶ Valori:
▶ left - elementul este afis, at ı̂n partea stângă a elementului părinte
▶ right - elementul este afis, at ı̂n partea dreaptă a elementului părinte
▶ none - nu se face nicio modificare a afis, ării
Elemente flotante - proprietatea clear
▶ Proprietatea clear specifică dacă se permite pozit, ionarea altor elemente flotante lateral.
1 clear: valoare;
▶ Valori:
▶ none - pot fi elemente flotante pe orice parte
▶ both - nu permite niciun element flotant
▶ left - nu pot fi elemente flotante ı̂n stânga
▶ right - nu pot fi elemente flotante ı̂n dreapta
Proprietatea clip
▶ Proprietatea clip specifică cât din element este vizibil.
1 clip: valoare;
▶ Valori:
▶ auto
▶ shape
▶ Exemplu:
1 clip: rect(10px, 10px, 10px, 10px);
Proprietatea overflow
▶ Proprietatea overflow controlează ceea ce se face atunci când cont, inutul depăs, es, te
cadrul.
1 overflow: valoare;
▶ Valori:
▶ auto
▶ hidden
▶ visible
▶ scroll
▶ 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
▶ Proprietatea visibility permite ascunderea unui element. Spre deosebire de display:none,
visibility:hidden ocupă spat, iul elementului pe pagină.
1 visibility: valoare;
▶ Valori:
▶ hidden
▶ visible
Proprietatea z-index
▶ Proprietatea z-index defines, te ordinea de suprapunere a elementelor.
1 z-index: valoare;
▶ Valori:
▶ auto
▶ number
Proprietatea position
▶ Proprietatea position determină modul ı̂n care sunt pozit, ionate elementele.
1 position: valoare;
▶ Valori:
▶ static - implicit
▶ relativ - ı̂l pozit, ionează relativ la pozit, ia normală
▶ absolute - la marginea din stânga sus a elementului ascendent care nu are valoarea static
(body nu este static)
▶ fixed -fixat la scroll
Proprietatea position
▶ Proprietatea position lucrează cu următoarele proprietăt, i:
▶ top
▶ left
▶ right
▶ bottom
▶ Exemplu:
1 position: absolute; top: 10px; right: 10px;
Concluzii s, i resurse suplimentare
▶ Acest curs a avut drept scop numai prezentarea generală a CSS.
▶ Multe lucruri nu le-am acoperit (transformările, tranzit, iile, limbaje de preprocesare a CSS)
dar sper ca v-am oferit o privire de ansamblu.
▶ http://www.smashingmagazine.com/
▶ http://www.cssbasics.com/full.pdf
▶ https://css-tricks.com/
▶ https://www.freecodecamp.org/
Recapitulare prin exemple HTML s, i CSS
Putet, i urmări exemplele de mai jos:
http:
//itee.elth.pub.ro/˜vbucata/ia/cursuri/ex-html-css/index.html
Întrebări ?
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

Dezvoltare Web Frontend (partea a II-a)

Informatică Aplicată 1 - cursul 3

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

5 Tratarea conflictelor regulilor CSS

▶ Selectorul reprezintă identificarea elementului (elementelor) HTML căruia dorim să-i

▶ Există mai multe tipuri de utilizare CSS:

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

▶ Codul CSS (selector de clasă):

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

▶ În fis, ierul HTML:

▶ În fis, ierul HTML:

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

▶ Valoare poate fi:

▶ Valoare poate fi:

▶ Valoare poate fi:

▶ Valorile posibile sunt:

▶ Valorile posibile sunt:

▶ Valorile posibile sunt:

▶ Valorile posibile sunt:

▶ Valorile posibile sunt:

▶ Valorile posibile sunt:

▶ Valorile posibile sunt:

▶ Valorile posibile sunt:

▶ Valoare poate fi:

▶ Valoare poate fi:

▶ Valoare poate fi:

▶ Valoare poate fi:

RET, INET, I: ORICE ELEMENT BLOC DE PE O PAGINĂ CORESPUNDE UNEI CUTII

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

▶ content = cont, inut

▶ Exemplu (cod CSS):

▶ Exemplu (cod CSS):

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

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

▶ Valoare poate fi:

▶ Valoare poate fi:

▶ Valoare poate fi:

este achivalent cu:

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