Szybka i praktyczna ściągawka CSS firmy Toptal

Opublikowany: 2022-03-11

Kaskadowe arkusze stylów, w skrócie CSS, to język arkuszy stylów napisany w języku znaczników. CSS definiuje prezentację, wygląd i elementy formatowania dokumentów internetowych, takie jak układ, kolory i czcionki.

Składnia CSS jest obszerna i nie zawsze jest łatwo znać dokładną składnię lub znać wszystkie dostępne właściwości CSS i odpowiadające im wartości. Aby pomóc programistom i projektantom CSS, Toptal stworzył krótki przewodnik referencyjny i zaoferował go społeczności do bezpłatnego pobrania. Przewodnik po CSS zawiera składnię CSS, najważniejsze selektory, właściwości, rozmiary i jednostki oraz inne przydatne informacje CSS w krótkim i informacyjnym formacie. Mamy nadzieję, że ściągawka CSS będzie dla Ciebie cennym źródłem informacji.

Możesz również sprawdzić strony zasobów Toptal, aby uzyskać dodatkowe informacje na temat typowych błędów CSS, przewodnik zatrudniania CSS, pytania do wywiadu CSS oraz wskazówki i najlepsze praktyki CSS.

Kliknij tutaj, aby pobrać ściągawkę CSS

Ściągawka CSS

Składnia		Model pudełkowy
/* Uwagi */ @typ mediów { selektor { wartość nieruchomości; } } Uwaga: rodzaj nośnika jest opcjonalny
Styl wbudowany <tag>
Styl osadzony <głowa> <style type="text/css"> selektor { właściwość: wartość; } </style> </head>
Zewnętrzny arkusz stylów <głowa> <link rel="arkusz stylów" type="text/css" href="style.css" /> </head>		Pudła
		margines	margines-góra margines w prawo marża-dolna margines-lewy

Selektory		wyściółka	wyściółka-góra dopełnienie-prawo wyściółka-dół dopełnienie-lewo
*	Wszystkie elementy
etykietka	Wszystkie elementy tagów	granica	obramowanie-góra granica-prawo obramowanie-dół obramowanie lewe
tag *	Wszystkie elementy w tagu
tag tag2	tag2 elementy w tagu	kolor ramki	kolor górnego obramowania obramowanie-prawo-kolor kolor-dolny-obramowania kolor-lewy-obramowania
tag, tag2	Wszystkie elementy tag i tag2
tag > tag2	tag2 jest dzieckiem tagu	styl obramowania	w stylu obramowania-góra obramowanie-prawo-styl styl obramowania na dole styl obramowania po lewej stronie
tag + tag2	tag2 poprzedzony tagiem
.klasa	Elementy z klasą „klasa”	szerokość granicy	granica-górna-szerokość obramowanie-prawo-szerokość obramowanie-dolna-szerokość granica-lewa-szerokość
tag.klasa	Wszystkie tagi z klasą „class”
#ID	Element o identyfikatorze „id”	Rozmiar i kolory
tag#id	Tag z identyfikatorem „id”	Względne rozmiary	em \| rem \| ex \| ch vw \| vh \| vmin \| vmax \| %
Pseudoselektory
:aktywny	Dodaje styl do aktywnego elementu	Rozmiary bezwzględne	cm \| mm \| w piksel \| pkt \| szt
:po	Dodaje zawartość po elemencie
:zanim	Treść reklam przed elementem	Zabarwienie	Szesnastkowy #ff00ff
:pierworodny	Dodaje stylu pierwszemu dziecku		RGB RGB(255,0,255)
:pierwsza litera	Dodaje styl do pierwszego znaku	Pozycjonowanie
:Pierwsza linia	Dodaje styl do pierwszej linii	pozycja	bezwzględny \| naprawiono \| względny \| statyczny \| dziedziczyć
:Centrum	Dodaje styl do skupionego elementu
:unosić się	Dodaje styl po najechaniu myszką	pływak	lewo \| prawo \| brak \| dziedziczyć
:połączyć	Dodaje styl do nieodwiedzonego linku
:odwiedzony	Dodaje styl do odwiedzanego linku	w prawym górnym rogu, na dole po lewej	Ustawia odsunięcie od krawędzi
Tekst
rodzina czcionek	Określa rodzinę czcionek	jasny	lewo \| prawo \| oba \| brak \| dziedziczyć
rozmiar czcionki	Określa rozmiar czcionki
styl czcionki	normalny \| kursywa \| ukośny \| dziedziczyć	wyświetlacz	Określa umieszczanie elementów w obiegu dokumentów

wariant-czcionki	normalny \| kapitaliki \| dziedziczyć	przelewowy	widoczne \| ukryty \| przewiń \| auto \| dziedziczyć
czcionka -waga	normalny \| pogrubiony \| pogrubienie \| lżejsze \| int (100-900) \| dziedziczyć
		widoczność	widoczne \| ukryty \| zwiń \| dziedziczyć
kolor	Ustawia kolor tekstu
Wysokość linii	normalny \| int \| % \| dziedziczyć	indeks z	auto \| int \| dziedziczyć
wyrównanie tekstu	lewo \| prawo \| centrum \| uzasadnić \| dziedziczyć	Wymiary
		Wysokość	auto \| int \| % \| dziedziczyć
tekst- dekoracja	brak \| podkreśl \| nadkreślenie \| przechodzenie przez linię \| migać \| dziedziczyć	maksymalna wysokość	brak \| int \| % \| dziedziczyć
		maksymalna szerokość	brak \| int \| % \| dziedziczyć
wcięcie tekstu	int \| % \| dziedziczyć	minimalna wysokość	int \| % \| dziedziczyć
tekst- przekształcać	brak \| wielkie litery \| wielkie litery \| małe litery \| dziedziczyć	minimalna szerokość	int \| % \| dziedziczyć
		szerokość	auto \| int \| % \| dziedziczyć
pionowy -wyrównywać	int \| % \| linia bazowa \| sub \| super \| góra \| tekst w środku \| dół \| tekst-dolny \| dziedziczyć	Inny
		tło	Format: tło (kolor) (obraz) (powtórz) (pozycja)
biały -przestrzeń	normalny \| nowrap \| przed \| pre-linia \| owijanie wstępne\| dziedziczyć
		kursor	Ustaw typ kursora
odstępy między wyrazami	normalny \| długość \| dziedziczyć	cytaty	Ustaw typ cudzysłowów