CSS - Tipe Data

Pengenalan

Halo sana, para ahli CSS masa depan! Saya sangat senang menjadi panduan Anda dalam perjalanan yang menarik melalui dunia tipe data CSS. Sebagai seseorang yang telah mengajar ilmu komputer selama lebih dari satu dekade, saya bisa katakan bahwa memahami tipe data adalah seperti belajar alfabet sebelum menulis novel. Itu fundamental, dan keberanian saya katakan, menyenangkan! Jadi, mari kita masuk dan membongkar misteri tipe data CSS bersama-sama.

Sintaks

Sebelum kita masuk ke detail tipe data, mari bicarakan bagaimana CSS menyukai cara pelayanan data. CSS memiliki cara khusus untuk mengekspresikan nilai, dan penting untuk merasakan nyaman dengan sintaks ini.

pengenal {
properti: nilai;
}

Misalnya:

p {
warna: merah;
ukuran-font: 16px;
}

Di sini, 'merah' dan '16px' adalah nilai dari tipe data yang berbeda. 'Merah' adalah kata kunci warna, sedangkan '16px' adalah nilai panjang. Lihat betapa mudah itu? Anda sudah mulai menguasainya!

Tipe Data Teks

Sekarang, mari bicarakan tentang teks. CSS mencintai teks, dan ia memiliki beberapa cara untuk menangani itu.

String

String di CSS adalah seperti pewrap hadiah untuk kata. Mereka dapat dibungkus dalam tanda kutip tunggal atau ganda.

.greeting::before {
isi: "Halo, Dunia!";
}

Dalam contoh ini, "Halo, Dunia!" adalah string. Itu seperti mengatakan ke CSS, "Hey, treat this exactly as I've written it!"

Identifier

Identifier adalah seperti nama untuk hal-hal di CSS. Mereka tidak memerlukan tanda kutip dan digunakan untuk properti, kelas, ID, dan lainnya.

#main-header {
keluarga-font: Arial, sans-serif;
}

Di sini, 'Arial' dan 'sans-serif' adalah identifier. Mereka mengatakan ke CSS tentang font mana yang harus digunakan.

URL

URL di CSS adalah seperti alamat untuk sumber daya. Mereka biasanya digunakan dengan fungsi url().

body {
gambar-latar: url('background.jpg');
}

Ini mengatakan ke CSS di mana mencari gambar untuk latar belakang.

Tipe Data Numerik

Angka adalah tulang punggung dari banyak properti CSS. mari kita hitung saja!

Integer

Integer adalah bilangan bulat, tidak ada pecahan diperbolehkan!

.container {
z-index: 5;
}

Di sini, 5 adalah integer, menentukan urutan stacking elemen.

Number

Number di CSS dapat mencakup desimal.

.opacity-example {
opacity: 0.5;
}

Ini mengatur keburaman ke 50%, membuat elemen semi-transparan.

Dimensi

Dimensi adalah angka dengan unit yang dilampirkan.

.box {
lebar: 100px;
tinggi: 50%;
margin: 10em;
}

Di sini kita melihat pixel (px), persen (%), dan em dalam aksi.

Kuantitas

Kuantitas di CSS adalah seperti ukuran dalam memasak. Mereka membantu kita mendefinisikan berapa banyak sesuatu yang kita inginkan.

Panjang

Panjang dapat absolut (seperti pixel) atau relatif (seperti em atau %).

.container {
lebar: 80vw;
padding: 2rem;
}

'vw' berarti lebar viewport, dan 'rem' adalah relatif ke ukuran font elemen root.

Sudut

Sudut digunakan untuk rotasi dan gradien.

.rotated {
transform: putar(45deg);
}

Ini merotasi elemen 45 derajat.

Waktu

Nilai waktu digunakan untuk animasi dan transisi.

.animated {
transisi: semua 0.5s mudah;
}

Ini mengatur transisi setengah detik untuk semua properti.

Kombinasi Tipe

kadang-kadang, CSS menyukai untuk mencampur dan mencocokkan tipe data.

Nilai Fungsi

Fungsi di CSS mengambil argumen dan mengembalikan nilai.

.gradient {
latar: linear-gradient(ke kanan, merah, biru);
}

Ini menciptakan gradien dari merah ke biru.

Warna

Warna di CSS adalah seperti palet pelukis. Ada beberapa cara untuk mendefinisikan mereka.

.colorful {
warna: #ff0000;  /* Hexadesimal */
warna-latar: rgb(0, 255, 0);  /* RGB */
warna-batas: hsl(240, 100%, 50%);  /* HSL */
}

Setiap dari ini mendefinisikan warna yang berbeda menggunakan notasi yang berbeda.

Gambar

Gambar di CSS dapat lebih dari sekedar gambar dari file.

.image-types {
gambar-latar: url('cat.jpg');
gaya-list: gambar linear-gradient(ke kanan, merah, biru);
}

Di sini, kita menggunakan baik gambar eksternal dan gradien sebagai gambar.

Penempatan 2D

Penempatan di CSS adalah seperti bermain catur di halaman web.

.positioned {
posisi: mutlak;
atas: 50px;
kiri: 100px;
}

Ini menempatkan elemen 50 pixel dari atas dan 100 pixel dari kiri elemen pengenalannya.

Tipe Data Perhitungan

kadang-kadang, kita memerlukan CSS untuk melakukan matematika bagi kita.

.calculated {
lebar: hitung(100% - 20px);
}

Ini menghitung lebar menjadi 100% dari induk kurang 20 pixel.

Tampilan

Tampilan menentukan bagaimana elemen diperender.

.flex-container {
tampilan: fleks;
}

Ini mengubah elemen menjadi wadah fleksibel, mengaktifkan tata letak kotak fleksibel.

Tipe Data Lain

CSS masih memiliki beberapa trik di dadanya.

Nilai Global

Nilai global dapat digunakan pada properti apa pun.

.inherited {
warna: warisan;
}

Ini mengatakan ke elemen untuk menggunakan warna sama seperti induknya.

Berikut adalah tabel yang menggabungkan tipe data CSS utama yang kita bahas:

Tipe Data	Contoh	Deskripsi
String	"Halo, Dunia!"	Teks yang ditutup dalam tanda kutip
Identifier	Arial	Nama tanpa tanda kutip untuk font, properti, dll.
URL	url('image.jpg')	Alamat sumber daya
Integer	5	Bilangan bulat
Number	0.5	Number yang dapat mencakup desimal
Length	10px, 2em, 50%	Pengukuran dengan unit
Angle	45deg	Nilai rotasi
Time	0.5s	Durasi untuk animasi
Color	#ff0000, rgb(255,0,0)	Nilai warna
Function	calc(), linear-gradient()	Melakukan perhitungan atau menciptakan efek

Ingat, CSS adalah seperti kotak alat, dan tipe data adalah alat Anda. Semakin familiar Anda dengan mereka, desain Anda dapat menjadi semakin kreatif dan presisi. Terus berlatih, dan segera Anda akan dapat menata halaman web seperti seorang ahli!

Credits: Image by storyset