Lembar Cheat CSS Cepat dan Praktis Toptal

Diterbitkan: 2022-03-11

Cascading Style Sheets, atau disingkat CSS, adalah bahasa style sheet yang ditulis dalam bahasa markup. CSS mendefinisikan presentasi, tampilan, dan elemen pemformatan dokumen Web, seperti tata letak, warna, dan font.

Sintaks CSS bersifat komprehensif, dan tidak mudah untuk selalu mengetahui sintaks yang tepat, atau mengetahui semua properti CSS yang tersedia dan nilai terkait. Untuk membantu pengembang dan perancang CSS, Toptal membuat panduan referensi cepat dan menawarkannya kepada komunitas sebagai unduhan gratis. Panduan referensi CSS mencakup sintaks CSS, pemilih terpenting, properti, ukuran dan unit, dan informasi CSS berguna lainnya dalam format singkat dan informatif. Kami harap Anda akan menemukan lembar contekan CSS sebagai sumber yang berharga.

Anda juga dapat memeriksa halaman sumber daya Toptal untuk informasi tambahan tentang kesalahan umum CSS, panduan perekrutan CSS, pertanyaan wawancara CSS, dan kiat serta praktik terbaik CSS.

Klik Di Sini Untuk Mengunduh Lembar Cheat CSS

Lembar Cheat CSS

Sintaksis		Model Kotak
/* Komentar */ @tipe media { pemilih { nilai properti; } } Catatan: jenis media adalah opsional
Gaya Sebaris <tag>
Gaya Tertanam <kepala> <style type="text/css"> pemilih { properti: nilai; } </ gaya> </head>
Lembar Gaya Eksternal <kepala> <link rel="stylesheet" type="text/css" href="style.css" /> </head>		kotak
		batas	margin-atas margin-kanan margin-bawah margin-kiri

pemilih		lapisan	padding-top padding-kanan padding-bottom padding-kiri
*	Semua elemen
menandai	Semua elemen tag	berbatasan	perbatasan-atas batas-kanan perbatasan-bawah perbatasan-kiri
tanda *	Semua elemen dalam tag
tag tag2	elemen tag2 di dalam tag	perbatasan-warna	perbatasan-atas-warna batas-kanan-warna batas-bawah-warna batas-kiri-warna
tag, tag2	Semua elemen tag dan tag2
tag > tag2	tag2 adalah anak dari tag	gaya perbatasan	gaya perbatasan-atas gaya perbatasan-kanan gaya perbatasan-bawah gaya perbatasan-kiri
tag + tag2	tag2 didahului oleh tag
.kelas	Elemen dengan kelas 'kelas'	lebar batas	batas-atas-lebar batas-kanan-lebar batas-bawah-lebar batas-kiri-lebar
tag.kelas	Semua tag dengan kelas 'kelas'
#pengenal	Elemen dengan id 'id'	Ukuran dan warna
tag#id	Tandai dengan id 'id'	Ukuran relatif	em \| rem \| mantan \| ch vw \| vh \| vmin \| vmax \| %
Pseudo-selektor
:aktif	Menambahkan gaya ke elemen aktif	Ukuran mutlak	cm \| mm \| di dalam px \| poin \| komputer
:setelah	Menambahkan konten setelah elemen
:sebelum	Konten iklan sebelum elemen	warna	Hex #ff00ff
:anak pertama	Menambahkan gaya untuk anak pertama		RGB rgb (255,0,255)
:surat pertama	Menambahkan gaya ke karakter pertama	Pemosisian
:garis pertama	Menambahkan gaya ke baris pertama	posisi	mutlak \| tetap \| relatif \| statis \| mewarisi
:fokus	Menambahkan gaya ke elemen fokus
: arahkan	Menambahkan gaya saat mouse berakhir	mengambang	kiri \| benar \| tidak ada \| mewarisi
:tautan	Menambahkan gaya ke tautan yang belum dikunjungi
:dikunjungi	Menambahkan gaya ke tautan yang dikunjungi	kanan atas, kiri bawah	Atur offset dari tepi
Teks
font-family	Menentukan keluarga font	jernih	kiri \| benar \| keduanya \| tidak ada \| mewarisi
ukuran huruf	Menentukan ukuran font
gaya tulisan	biasa \| miring \| miring \| mewarisi	menampilkan	Menentukan penempatan elemen dalam aliran dokumen

font-varian	biasa \| topi kecil \| mewarisi	meluap	terlihat \| tersembunyi \| gulir \| otomatis \| mewarisi
fon -bobot	biasa \| tebal \| lebih berani \| lebih ringan \| int (100- 900) \| mewarisi
		visibilitas	terlihat \| tersembunyi \| runtuh \| mewarisi
warna	Mengatur warna teks
tinggi garis	biasa \| int \| % \| mewarisi	indeks-z	otomatis \| int \| mewarisi
perataan teks	kiri \| benar \| tengah \| membenarkan \| mewarisi	Ukuran
		tinggi	otomatis \| int \| % \| mewarisi
teks- dekorasi	tidak ada \| garis bawahi \| garis atas \| garis-melalui \| berkedip \| mewarisi	tinggi maksimal	tidak ada \| int \| % \| mewarisi
		lebar maksimum	tidak ada \| int \| % \| mewarisi
indentasi teks	int \| % \| mewarisi	min-tinggi	int \| % \| mewarisi
teks- mengubah	tidak ada \| huruf besar \| huruf besar \| huruf kecil \| mewarisi	min-lebar	int \| % \| mewarisi
		lebar	otomatis \| int \| % \| mewarisi
vertikal -meluruskan	int \| % \| dasar \| sub \| super \| atas \| tengah atas teks \| bawah \| teks-bawah \| mewarisi	Lainnya
		Latar Belakang	Format: latar belakang (warna) (gambar) (ulangi) (posisi)
putih -ruang angkasa	biasa \| sekarang \| pra \| pra-baris \| pra-bungkus\| mewarisi
		kursor	Setel jenis kursor
spasi kata	biasa \| panjang \| mewarisi	kutipan	Tetapkan jenis tanda kutip