Cheat Sheet CSS rapid și practic de la Toptal

Publicat: 2022-03-11

Cascading Style Sheets, sau pe scurt CSS, este un limbaj pentru foi de stil scris într-un limbaj de marcare. CSS definește elementele de prezentare, aspect și formatare ale documentelor Web, cum ar fi aspectul, culorile și fonturile.

Sintaxa CSS este cuprinzătoare și nu este ușor să cunoașteți întotdeauna sintaxa exactă sau să cunoașteți toate proprietățile CSS disponibile și valorile corespunzătoare. Pentru a ajuta dezvoltatorii și designerii CSS, Toptal a creat un ghid de referință rapid și l-a oferit comunității ca descărcare gratuită. Ghidul de referință CSS include sintaxa CSS, cei mai importanți selectori, proprietăți, dimensiuni și unități, precum și alte informații utile CSS într-un format scurt și informativ. Sperăm că veți găsi cheat sheet-ul CSS o resursă valoroasă.

De asemenea, puteți verifica paginile de resurse Toptal pentru informații suplimentare despre greșelile CSS obișnuite, un ghid de angajare CSS, întrebări de interviu CSS și sfaturi și bune practici CSS.

Faceți clic aici pentru a descărca CSS Cheat Sheet

Cheat Sheet CSS

Sintaxă		Model cutie
/* Comentarii */ @tipul media { selector { Valoarea proprietății; } } Notă: tipul media este opțional
Stil în linie <etichetă>
Stil încorporat <cap> <style type="text/css"> selector { proprietate: valoare; } </stil> </cap>
Foaie de stil externă <cap> <link rel="stylesheet" type="text/css" href="style.css" /> </cap>		Cutii
		marginea	margine-top margine-dreapta margine-fond margine-stânga

Selectoare		căptușeală	padding-top umplutura-dreapta umplutură de fund padding-stânga
*	Toate elementele
etichetă	Toate elementele etichetei	frontieră	chenar-top granita-dreapta marginea-de jos granița-stânga
etichetă *	Toate elementele din etichetă
tag tag 2	tag2 elemente din etichetă	chenar-culoare	chenar-top-culoare chenar-dreapta-culoare culoarea-fond-chenar chenar-stânga-culoare
etichetă, etichetă2	Toate elementele tag și tag2
tag > tag2	tag2 este un copil al tag-ului	stil de chenar	stil bordur-top chenar-dreapta-stil chenar-de jos-stil border-stânga-stil
etichetă + etichetă2	tag2 precedat de tag
.clasă	Elemente cu clasa „clasa”	lățimea graniței	margine-sus-latime bordura-dreapta-latime chenar-latime-jos chenar-stânga-lățime
eticheta.clasa	Toate etichetele cu clasa „class”
#id	Element cu id „id”	Dimensiune si culori
tag#id	Etichetă cu id-ul „id”	Dimensiuni relative	em \| rem \| ex \| cap vw \| vh \| vmin \| vmax \| %
Pseudo-selectori
:activ	Adaugă stil elementului activ	Dimensiuni absolute	cm \| mm \| în px \| pt \| pc
:după	Adaugă conținut după element
:inainte de	Conținutul anunțurilor înainte de element	Culori	Hex #ff00ff
:primul copil	Adaugă stil primului copil		RGB rgb(255,0,255)
:prima literă	Adaugă stil primului caracter	Poziționare
:prima linie	Adaugă stil primei rânduri	poziţie	absolut \| fix \| relativ \| static \| moşteni
:concentrare	Adaugă stil elementului concentrat
:planare	Adaugă stil când mouse-ul este peste	pluti	stânga \| dreapta \| niciunul \| moşteni
:legătură	Adaugă stil link-ului nevizitat
:vizitat	Adaugă stil link-ului vizitat	sus în dreapta, stânga jos	Setează decalajul față de margine
Text
familie de fonturi	Specifică familia de fonturi	clar	stânga \| dreapta \| ambele \| niciunul \| moşteni
marimea fontului	Specifică dimensiunea fontului
stilul fontului	normal \| cursiv \| oblic \| moşteni	afişa	Specifică plasarea elementului în fluxul de documente

varianta de font	normal \| cu majuscule mici \| moşteni	revărsare	vizibil \| ascuns \| parcurge \| auto \| moşteni
font -greutate	normal \| bold \| mai îndrăzneț \| bricheta \| int (100- 900) \| moşteni
		vizibilitate	vizibil \| ascuns \| colaps \| moşteni
culoare	Setează culoarea textului
inaltimea liniei	normal \| int \| % \| moşteni	z-index	auto \| int \| moşteni
aliniere text	stânga \| dreapta \| centru \| justifica \| moşteni	Dimensiuni
		înălţime	auto \| int \| % \| moşteni
text- decor	niciunul \| subliniază \| overline \| line-through \| clipi \| moşteni	inaltime maxima	niciunul \| int \| % \| moşteni
		lățimea maximă	niciunul \| int \| % \| moşteni
text-indentare	int \| % \| moşteni	înălțime minimă	int \| % \| moşteni
text- transforma	niciunul \| majuscule \| majuscule \| litere mici \| moşteni	lățime minimă	int \| % \| moşteni
		lăţime	auto \| int \| % \| moşteni
vertical -alinia	int \| % \| linie de bază \| sub \| super \| sus \| text-sus mijloc \| jos \| text-jos \| moşteni	Alte
		fundal	Format: fundal (culoare) (imagine) (repetare) (poziție)
alb -spaţiu	normal \| nowrap \| pre \| pre-linie \| pre-împachetare\| moşteni
		cursor	Setați tipul de cursor
spațierea cuvintelor	normal \| lungime \| moşteni	citate	Setați tipul de ghilimele