Candale Silviu (silviu) Culori și fundaluri
1. color
Setează culoarea textului.
p {
color: #333333;
}
2. background-color
Setează culoarea de fundal a unui element.
div {
background-color: #f0f0f0;
}
3. background-image
Adaugă o imagine de fundal.
body {
background-image: url('imagine.jpg');
}
4. background-size
Controlează dimensiunea imaginii de fundal.
header {
background-image: url('header.jpg');
background-size: cover; /* Poate fi 'contain', 'auto', '100px 50px', etc. */
}
5. background-repeat
Determină dacă imaginea de fundal se repetă.
section {
background-image: url('pattern.png');
background-repeat: no-repeat; /* Poate fi 'repeat-x', 'repeat-y', sau 'repeat' */
}
Text și fonturi
1. font-family
Setează familia de font (tipul de font).
h1 {
font-family: 'Arial', 'Helvetica', sans-serif;
}
2. font-size
Setează dimensiunea textului.
p {
font-size: 16px; /* poți folosi și '1.2em', '1rem', etc. */
}
3. font-weight
Setează grosimea fontului.
strong {
font-weight: bold; /* sau numeric, ex: 700 */
}
4. line-height
Controlul distanței între liniile de text.
p {
line-height: 1.5; /* proporțional sau în px: 24px */
}
5. text-align
Alinierea textului.
h2 {
text-align: center; /* sau left, right, justify */
}
6. text-decoration
Decorarea textului (sublinieri, linii peste etc.).
a {
text-decoration: none; /* sau underline, line-through, overline */
}
Spațiere și dimensiuni
1. margin
Spațiu în exteriorul elementului (distanța față de elementele înconjurătoare).
div {
margin: 20px; /* spațiu peste tot în jur */
}
2. padding
Spațiu în interiorul elementului (distanța față de conținut).
p {
padding: 10px; /* spațiu în jurul textului/paginilor */
}
3. width
Lățimea exactă a unui element.
img {
width: 300px;
}
4. height
Înălțimea exactă a unui element.
div {
height: 200px;
}
5. max-width
Limitează lățimea maximă a elementului.
img {
max-width: 100%; /* se ajustează la și mai mic dacă e mai mare */
}
6. max-height
Limitează înălțimea maximă.
img {
max-height: 150px;
}
7. min-width
Limitează lățimea minimă.
div {
min-width: 200px;
}
8. min-height
Limitează înălțimea minimă.
div {
min-height: 100px;
}
Border și contur
1. border
Setează grosimea, stilul și culoarea border-ului.
div {
border: 2px solid #000; /* 2px grosime, stil solid, culoare neagră */
}
2. border-radius
Rotunjeste colțurile border-ului.
button {
border-radius: 8px; /* colțuri rotunjite cu radius 8px */
}
3. border-color
Setează doar culoarea border-ului.
h1 {
border: 2px dashed;
border-color: red; /* culoare roșie border */
}
4. outline
Setează un contur în jurul elementului (similar cu border, dar nu ocupă spațiu în layout).
input {
outline: 3px dashed blue; /* contur dashed albastru, 3px grosime */
}
5. outline-color
Setează doar culoarea conturului.
a {
outline: 2px dotted;
outline-color: green; /* culoare verde a conturului */
}
Aspect și poziționare
1. display
Controlază modul în care este afișat un element.
div {
display: block; /* element de tip block (default) */
display: inline; /* de tip inline */
display: flex; /* folosit pentru layout flexbox */
display: grid; /* grid layout */
display: none; /* ascunde elementul */
}
| Valori posibile | Explicație |
| block | Element de tip bloc, ocupă întreaga lățime, începe pe linie nouă. Exemplu: |
| inline | Element inline, ocupă doar cât are nevoie, nu începe pe linie nouă. Exemplu: |
| inline-block | Ca inline, dar poți seta lățime/înălțime. |
| none | Elementul nu apare, nu ocupă spațiu. |
| flex | Activează layout flexbox, pentru poziționare flexibilă. |
| grid | Activează layout grid, pentru design cu grilă. |
| inline-flex | Ca flex, dar inline. |
| inline-grid | Ca grid, dar inline. |
| list-item | Aparține elementelor de listă (<li>). |
| table, table-row, table-cell, … | Modelează elemente de tabel. |
2. position și top, right, bottom, left
Controlul poziției unui element pe pagină.
.box {
position: absolute; /* poziționare absolută față de cel mai apropiat părinte cu position: relative */
top: 20px; /* distanța de sus de 20px */
right: 10px; /* distanța de dreapta de 10px */
bottom: 0; /* distanța de jos 0 */
left: 50px; /* distanța de stânga 50px */
}
| Valori posibile | Explicație |
| static | Valoarea implicită, elementul nu este poziționat special. |
| relative | Poziționează elementul față de poziția sa normală, top/right/bottom/left mutându-l față de poziția inițială. |
| absolute | Poziționează față de cel mai apropiat părinte cu position diferit de static. |
| fixed | Fixează elementul în poziție față de viewport (ecran, nu se deplasează la scroll). |
| sticky | Îmbină relative și fixed, devine fix în momentul în care atinge o poziție de scroll specificată. |
Observație: top, right, bottom, left funcționează doar dacă position este setat la relative, absolute, fixed, sau sticky.
| Valori posibile | Explicație |
| auto | Valoarea implicită, poziționarea se face automat. |
| px, em, %, vh, vw etc. | Distanța față de marginea corespunzătoare, depinde de poziționare și context. |
3. z-index
Controlul supra-afișării elementelor (care element apare deasupra).
.header {
position: absolute;
z-index: 10; /* elementul va fi deasupra celor cu z-index mai mic sau fără z-index */
}
.popup {
position: absolute;
z-index: 20; /* supra-afișează header-ul dacă se suprapun */
}
Se folosește doar dacă position e relative, absolute, fixed, sau sticky.
4. overflow
Gestionează ce se întâmplă când conținutul depășește dimensiunile elementului.
div {
width: 200px;
height: 150px;
overflow: auto; /* apar bare de scroll dacă e nevoie */
overflow: hidden; /* taie ce depășește */
overflow: visible; /* permit conținutului să depășească (implicit) */
overflow: scroll; /* întotdeauna arată bara de scroll */
}
| Valori posibile | Explicație |
| visible | Conținutul depășit este vizibil, nu se taie. |
| hidden | Se taie tot ce depășește dimensiunile elementului. |
| scroll | Bară de scroll mereu prezentată, chiar dacă nu e nevoie. |
| auto | Bara de scroll apare doar dacă e nevoie (dacă există conținut în plus). |
Flexbox
1. display: flex;
Transformă elementul într-un container flex, activând layout-ul flexibil pentru elementele sale copil.
.container {
display: flex; /*sau inline-flex*/
}
2. justify-content
Aliniaza elementele flex pe axa principală (orizontală în mod implicit).
| Valori posibile | Explicație | Exemplu |
| flex-start | Aliniament la început (stânga) | justify-content: flex-start; (default) |
| center | Centrare | justify-content: center; |
| flex-end | Aliniament la sfârșit (dreapta) | justify-content: flex-end; |
| space-between | Spațiere uniformă între elemente | justify-content: space-between; |
| space-around | Spațiere egală în jurul fiecărui element | justify-content: space-around; |
| space-evenly | Spațiere egală între și în jurul elementelor | justify-content: space-evenly; |
3. align-items
Aliniaza elementele pe axa secundară (verticală dacă flex-direction este row).
| Valori posibile | Explicație | Exemplu |
| stretch (implicit) | Se întind pentru a umple containerul | align-items: stretch; |
| flex-start | Aliniere la început (sus) | align-items: flex-start; |
| center | Centrare verticală | align-items: center; |
| flex-end | Aliniere la sfârșit (jos) | align-items: flex-end; |
| baseline | Se aliniază după linia de bază a textului | align-items: baseline; |
4. flex-direction
Definește direcția principală a flexului (axele principale).
| Valori posibile | Explicație | Exemplu |
| row (default) | Orizontal, de la stânga la dreapta | flex-direction: row; |
| row-reverse | Orizontal, de la dreapta la stânga | flex-direction: row-reverse; |
| column | Vertical, de sus în jos | flex-direction: column; |
| column-reverse | Vertical, de jos în sus | flex-direction: column-reverse; |
Exemplu complet:
.container {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row; /* sau column, după nevoie */
}
Transformări și tranziții
1. transform
Permite modificarea vizuală a elementului, cum ar fi rotirea, scalarea sau translatarea (migrarea).
| Valori comune și exemplu | Explicație | Exemplu CSS |
| rotate(45deg) | Rotirea elementului cu 45 grade | transform: rotate(45deg); |
| scale(1.5) | Mărirea elementului cu 1.5 ori | transform: scale(1.5); |
| translateX(50px) | Mutarea elementului pe axa X cu 50px | transform: translateX(50px); |
| skewX(20deg) | Pendurare (înclinare) pe axa X | transform: skewX(20deg); |
2. transition
Permite ca schimbările proprietăților CSS să fie animate lin, pe durata specificată.
| Valori | Explicații |
| transition: all 0.3s ease; | Toate proprietățile se vor schimba în 0.3 secunde cu efect easing. |
| transition: background-color 0.5s; | Doar culoarea de fundal se va schimba în 0.5 secunde. |
| transition: transform 0.2s ease-in-out; | Transformările se vor anima în 0.2 secunde. |
3. animation
Permite crearea de animații complexe și repetabile, definite in CSS.
| Proprietăți importante | Explicație | Exemplu CSS |
keyframes | Definirea pașilor animației | keyframes pulse { … } |
||
| animation-name | Se specifică numele animației definit în @keyframes | animation-name: pulse; |
| animation-duration | Durata completă a animației | animation-duration: 2s; |
| animation-iteration-count | Cât de multe ori se repetă animația (infinite, de ex.) | animation-iteration-count: infinite; |
| animation-timing-function | Efectul de temporizare (ease, linear, ease-in, ease-out) | animation-timing-function: ease-in-out; |
Exemplu complet:
.box {
width: 100px;
height: 100px;
background-color: red;
/* Transformare la hover cu animație */
transition: transform 0.3s ease;
}
.box:hover {
transform: scale(1.5) rotate(20deg);
}
/* Animație */
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.animated-box {
width: 100px;
height: 100px;
background-color: blue;
animation: pulse 2s infinite;
}
Alte proprietăți comune
1. opacity
Controlează transparența elementului.
| Valori posibile | Explicație | Exemplu CSS |
| 1 (implicit) | Opacitate totală, element complet vizibilă | opacity: 1; |
| 0 | Total transparent, element invizibil | opacity: 0; |
| 0.5 | Semitransparent | opacity: 0.5; |
| 0.1 | Aproape invizibil | opacity: 0.1; |
2. visibility
Controlează dacă elementul este vizibil sau invizibil, dar păstrează spațiul.
| Valori posibile | Explicație | Exemplu CSS |
| visible | Elementul se afișează normal | visibility: visible; |
| hidden | Elementul devine invizibil, dar ocupă spațiu | visibility: hidden; |
| collapse | Folosit în tabele pentru a ascunde rânduri/coloane | visibility: collapse; |
3. cursor
Schimbă forma cursorului atunci când treci peste element.
| Valori posibile | Explicație | Exemplu CSS |
| default | Cursorul implicit (mână normală) | cursor: default; |
| pointer | Mâna, indicând link sau element clicabil | cursor: pointer; |
| wait | Cursor în așteptare (mână în cerc) | cursor: wait; |
| crosshair | Cruce | cursor: crosshair; |
| text | Se afișează cursor pentru text | cursor: text; |
4. box-shadow
Adaugă o umbră în jurul elementului.
| Valori | Explicație | Exemplu CSS |
| none | Fără umbră | box-shadow: none; |
| [x-offset] [y-offset] [blur-radius] [color] | Umbră simplă | box-shadow: 2px 4px 8px rgba(0,0,0,0.3); |
Exemplu de box-shadow:
.box {
width: 200px;
height: 100px;
background-color: #eee;
box-shadow: 4px 4px 10px rgba(0,0,0,0.3);
}