Tehnici Web
CSS #2
Claudia Chiriță . 2023/2024
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
: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 */
selectează un element care este primul copil al unui alt element
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)
- 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 */
-
proprietăți CSS custom (nestandard, definite de utilizator)
- definite pentru a fi reutilizate în cadrul unui document
- 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
- 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
- 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!)
- 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
- 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
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
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
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
- 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
- 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
- layoutul flexibil presupune definirea a două tipuri de elemente:
- flex container - element părinte
- flex items - elemente copii
proprietăți pentru părinte:
display
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
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: 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: 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-direction flex-wrap;
- prescurtare pentru proprietățile flex-direction și flex-wrap
- implicit: flex-flow: row nowrap
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: stretch; /* start, end, center, baseline */
- specifică modul în care sunt aliniate itemurile pe axa secundară (axa perpendiculară pe axa principală)
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
proprietăți pentru copii:
order
flex-grow
flex-shrink
flex-basis
flex
align-self
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: <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: <număr>; /* implicit 1*/
- definește capacitatea itemurilor de a se micșora dacă este necesar
flex-basis: <length>; /* auto (implicit) */
- definește dimensiunea implicită a unui element înainte de distribuirea spațiului rămas
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: stretch; /* start, end, center, baseline, auto */
- permite alinierea individuală a itemurilor pe axa secundară
- înlocuiește alinierea
specificată cu align-items
- 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
- CSS grid presupune definirea a două tipuri de elemente:
- grid container - element părinte
- grid items - elemente copii
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; /* 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
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: 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
proprietăți pentru copii:
grid-column & grid-row
grid-area
justify-self & align-self
place-self
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: 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: nume-item
- poate denumi un item al gridului care este referit apoi folosind proprietatea grid-template-areas pentru container
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
(\ /)
( . .)
C(")(")
întrebări?