Cheat Sheet pentru stiluri CSS

CSS (Cascading Style Sheets) este utilizat pentru a controla aspectul și formatarea paginilor web. Acest cheat sheet acoperă cele mai frecvent utilizate proprietăți și selectori.

Selectori

Tip	Exemplu	Descriere
All	`* { }`	Se potrivește cu toate elementele
Type	`h1 { }`	Se potrivește cu tag-ul HTML specificat
Class	`.header { }`	Elemente cu class=“header”
ID	`#main { }`	Element cu id=“main”
Descendant	`div p { }`	Toate p din interiorul div
Pseudo	`a:hover { }`	Starea la trecerea mouse-ului

Model de Cutie

.box {
  width: 300px;
  height: 200px;
  padding: 10px;    /* Margine interioară */
  border: 1px solid #ccc; /* Contur */
  margin: 20px;     /* Margine exterioară */
  box-sizing: border-box; /* Include bordura și padding-ul */
}

Tipografie

Property	Descriere	Exemplu
`font-family`	Familia de fonturi	`font-family: Arial, sans-serif;`
`font-size`	Mărimea fontului	`font-size: 16px;`
`font-weight`	Grosimea fontului	`font-weight: bold;`
`text-align`	Alinierea textului	`text-align: center;`
`line-height`	Înălțimea liniei	`line-height: 1.5;`
`color`	Culoarea fontului	`color: #333;`

Culori și Fundaluri

Property	Descriere	Exemplu
`background-color`	Culoarea de fundal	`background-color: #f0f0f0;`
`background-image`	Imaginea de fundal	`background-image: url('bg.jpg');`
`background-size`	Mărimea fundalului	`background-size: cover;`
`opacity`	Opacitate	`opacity: 0.8;`

Poziționare

position: static; : Layout de flux implicit
position: relative; : Deplasare față de poziția proprie
position: absolute; : Poziționare față de cel mai apropiat strămoș non-static
position: fixed; : Poziționare față de fereastra browserului
position: sticky; : Fixat la scroll într-o anumită poziție
z-index: 10; : Controlul ordinii de suprapunere

Afișare și Layout

display: block; : Element de tip bloc
display: inline; : Element în linie
display: inline-block; : Element de tip inline-block
display: flex; : Activează layout flex
display: grid; : Activează layout grid
display: none; : Ascunde elementul fără a ocupa spațiu

Scurtături pentru proprietăți

margin: 10px 5px 15px 20px; (Sus Dreapta Jos Stânga)
padding: 10px 5px; (Sus-Jos Stânga-Dreapta)
border: 1px dashed red; (Lățime Stil Culoare)