Tehnici Web

CSS #2

Claudia Chiriță . 2023/2024

Pseudo-clase

selector:pseudo-class { 
  proprietate: valoare;
}

cuvânt-cheie adăugat unui selector ce specifică o stare specială a elementului selectat
ex. folosite pentru definirea stilului
- unui element la trecerea cu mouse-ul peste el
- diferit pentru legături vizitate și nevizitate

Pseudo-clase

:link /* legături care nu au fost vizitate */
:visited /* legături care au fost vizitate */
:hover  /* elemente peste care se trece cu mouse-ul */
:active /* legături active */
:not() /* elementele care nu apar în argumentul lui not */

Pseudo-clasa :link

Pseudo-clasa :hover

Pseudo-clasa :not

Pseudo-clasa :first-child

selectează un element care este primul copil al unui alt element

Pseudo-clasa :first-child

Pseudo-clase

:first-of-type
selectează elementul care este primul copil de tipul specificat al unui alt element

:nth-of-type(n)
selectează elementul care este al n-lea copil de tipul specificat al unui alt element

:nth-child(n)
selectează elementul de tipul specificat care este al n-lea copil al unui alt element

n poate fi număr natural, cuvânt cheie (odd, even), formulă (an+b, cu n pornind de la 0)

Pseudo-clase

pseudo-elemente

pseudo-elemente (::)

folosite pentru a defini stilul unei părți a unui element
elemente virtuale, create cu CSS, care nu apar în arborele HTML al paginii

::first-letter /* prima literă a unui text */
::first-line /* prima linie a unui element block */

::before, ::after /* folosite pentru a adăuga conținut*/
                  /* înainte/după un element HTML; */
                  /* folosite cu proprietatea content */

pseudo-elemente (::)

Variabile CSS

proprietăți CSS custom (nestandard, definite de utilizator)
definite pentru a fi reutilizate în cadrul unui document

Variabile CSS

globale: valabile în întreg documentul
```
:root {
--nume-proprietate: valoare;}
```
locale: valabile în interiorul (toți descendenții) elementului în care au fost definite
```
element {
--nume-proprietate: valoare;}
```
se folosesc cu funcția
```
var(--nume-proprietate)
```

CSS Layout

proprietatea position

tipul de poziționare a unui element în pagină

poate avea valorile:

position:static;
position:relative;
position:absolute;
position:fixed;
position:sticky;

pentru poziționare se folosesc proprietățile
left, right, top și bottom

position:static

poziția implicită a oricărui element HTML
cu poziția static elementul va avea un flux normal în pagină
elementele cu poziția static nu sunt afectate de proprietățile left, right, top, bottom

position:relative

un element cu position:relative este poziționat relativ față de poziția pe care ar fi avut-o în mod normal în pagină
pentru poziționare se folosesc proprietățile
left, right, top și bottom

position:absolute

elementul este poziționat relativ față de primul părinte care are position:absolute/relative/fixed
elementul este scos din fluxul documentului
se pot suprapune cu alte elemente (exit Flatland!)

position:fixed

elementul are o poziție fixă în fereastra de browser
elementul este scos din fluxul documentului și nu e afectat de scroll
pentru poziționare se folosesc proprietățile
left, right, top și bottom

position:sticky

elementul comută între poziționarea relativă și cea fixă în funcție de scroll
dacă poziția scrollului nu depășește elementul, acesta va fi poziționat relativ, altfel se comportă ca un element fix

suprapuneri: z-index

z-index: ...,-100 /* 0, 100,... */

prin poziționare, elementele se pot suprapune; pot apărea stive de elemente
ordinea elementelor în stivă este dată de z-index
elementele cele mai vizibile au z-index mai mare
z-index poate fi setată doar pentru elementele care sunt poziționate absolute, relative sau fixed

proprietatea float

float: left; /* right, none */

elementele cu proprietatea float sunt scoase din fluxul documentului și poziționate conform valorii, la stânga sau la dreapta
ele afectează celelalte elemente: se aranjează înconjurând ("wrapping") elementele float
elementele poziționate absolut ignoră prop. float

proprietatea clear

clear: left; /* right, none, both */

determină dacă un element trebuie poziționat sub elemente float care îl precedă
elementele cu proprietatea clear nu se aranjează în jurul elementelor float, ci se poziționează sub acestea

flexbox

metodă de layout unidimensională pentru aranjarea itemurilor în rânduri și coloane
itemurile se extind (flex) pentru a umple spațiul disponibil sau se micșorează pentru a încăpea în spații mai mici

flexbox

layoutul flexibil oferă o metodă eficienta de a așeza, alinia și a distribui spațiul între elementele din document chiar și atunci când dimensiunea viewportului și a elementelor este necunoscută sau dinamică

tutorial flexbox

flexbox

layoutul flexibil presupune definirea a două tipuri de elemente:
- flex container - element părinte
- flex items - elemente copii

flex container

proprietăți pentru părinte:

display
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

display flex

display: flex; /* inline-flex */

definește un container flexibil inline sau block, în funcție de valoarea dată
creează un context flexibil pentru toți copiii săi direcți

flex direction

flex-direction: row; /* row-reverse, column, column-reverse*/

stabilește direcția în care sunt plasate itemurile în container: pe orizontală (stânga-dreapta sau dreapta-stânga) sau pe verticală (sus-jos sau jos-sus)

flex wrap

flex-wrap: wrap; /* nowrap, wrap-reverse*/

stabilește dacă itemurile vor fi aranjate pe o singură linie (coloană) sau pe mai multe
implicit, itemurile se vor aranja toate pe o linie (coloană)

flex flow

flex-flow: flex-direction flex-wrap;

prescurtare pentru proprietățile flex-direction și flex-wrap
implicit: flex-flow: row nowrap

justify content

justify-content: start; /* end, center, space-between, 
	                      space-around, space-evenly */

specifică modul în care sunt aliniate itemurile de-a lungul axei principale

align items

align-items: stretch; /* start, end, center, baseline */

specifică modul în care sunt aliniate itemurile pe axa secundară (axa perpendiculară pe axa principală)

align content

align-content: stretch; /*  start, end, center,
	                      space-between, space-around */

distribuie spațiul dintre și în jurul itemurilor pe axa transversală
nu are efect dacă există o singură linie în container

flex items

proprietăți pentru copii:

order
flex-grow
flex-shrink
flex-basis
flex
align-self

order

order: <întreg>; /* implicit 0*/

stabilește ordinea în care apar itemurile în containerul flexibil
implicit, itemurile apar în ordinea în care sunt scrise în documentul HTML

flex grow

flex-grow: <număr>; /* implicit 0*/

stabilește capacitatea itemurilor de a-și mări dimensiunea dacă este spațiu disponibil în interiorul containerului
dacă toate itemurile au flex-grow egal cu 1, ele vor împarți spațiul disponibil în mod egal

flex shrink

flex-shrink: <număr>; /* implicit 1*/

definește capacitatea itemurilor de a se micșora dacă este necesar

flex basis

flex-basis: <length>; /* auto (implicit) */

definește dimensiunea implicită a unui element înainte de distribuirea spațiului rămas

flex

flex: flex-grow flex-shrink flex-basis;

prescurtare pentru proprietățile flex-grow, flex-shrink și flex- basis
implicit flex: 0 1 auto

align self

align-self: stretch; /* start, end, center, baseline, auto */

permite alinierea individuală a itemurilor pe axa secundară
înlocuiește alinierea specificată cu align-items

why flex?

situații tipice în care folosim flexbox

grid layout

sistem de layout bidimensional, bazat pe rețea, cu rânduri și coloane, ce ușurează modul de a așeza, alinia și a distribui spațiul între elementele din document

tutorial grid

grid layout

CSS grid presupune definirea a două tipuri de elemente:
- grid container - element părinte
- grid items - elemente copii

grid container

proprietăți pentru părinte:

display
grid-template-columns & grid-template-rows
grid-template-areas
column-gap & row-gap
justify-content
align-content
justify-items & align-items

display grid

display: grid; /* inline-grid */

definește elementul ca un grid container inline sau block, în funcție de valoarea dată
stabilește un context de formatare a grilei pentru toți copiii săi direcți

grid template

grid-template-columns grid-template-rows

definește numărul de coloane și rânduri în care este împărțit gridul și lățimea/înălțimea acestora (unități de măsură: %, px, auto, fr)

grid-template-areas

gaps

column-gap row-gap

definește spațiul dintre coloane și dintre rânduri

mind the gap?

justify content

justify-content: start; /* end, center, space-between, 
	                      space-around, space-evenly */

specifică modul în care este aliniată grila în interiorul containerului
alinierea se face pe orizontală

align content

align-content: stretch; /*  start, end, center,
	                      space-between, space-around, space-evenly */

specifică modul în care este aliniată grila în interiorul containerului, pe verticală

place-content: align-content justify-content

justify & align items

justify-items: stretch; /* start, end, center */

specifică modul în care sunt aliniate itemurile pe axa principală

align-items: stretch; /* start, end, center, baseline */

specifică modul în care sunt aliniate itemurile pe axa secundară

place-items: align-items justify-items

grid items

proprietăți pentru copii:

grid-column & grid-row
grid-area
justify-self & align-self
place-self

grid column & row

grid-column: start-coloană / end-coloană

definește coloanele în care se plasează un element
prescurtare pentru proprietățile grid-column-start și grid-column-end

grid-row: start-linie / end-linie

definește rândurile în care se plasează un element
prescurtare pentru proprietățile grid-row-start și grid-row-end

grid area

grid-area: start-linie / start-coloană
           / end-linie / end-coloană

prescurtare pentru proprietățile
grid-row-start, grid-column-start, grid-row-end, grid-column-end

grid area

grid-area: nume-item

poate denumi un item al gridului care este referit apoi folosind proprietatea grid-template-areas pentru container

justify & align self

justify-self: stretch /* start, end, center */

aliniază un item al gridului în interiorul celulei, pe axa principală

align-self: stretch /* start, end, center */

aliniază un item al gridului în interiorul celulei, pe axa secundară

place-self: align-self justify-self

flexbox vs. grid