CSS - Data Types

Pengenalan

Hai sana, para ahli CSS masa depan! Saya sangat gembira untuk menjadi panduanmu dalam perjalanan yang menarik melalui dunia tipe data CSS. Sebagai seseorang yang telah mengajar ilmu komputer selama lebih dari satu dekade, saya dapat katakan bahwa memahami tipe data adalah seperti belajar alfabet sebelum menulis novel. Itu dasar, dan saya berani katakan, menyenangkan! Jadi, mari kita masuk dan membongkar misteri tipe data CSS bersama-sama.

Sintaks

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

selector {
property: value;
}

Contohnya:

p {
color: red;
font-size: 16px;
}

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

Tipe Data Teks

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

String

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

.greeting::before {
content: "Hello, World!";
}

Dalam contoh ini, "Hello, World!" 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 perlu tanda petik dan digunakan untuk properti, kelas, ID, dan lainnya.

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

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

URL

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

body {
background-image: 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 hitung saja!

Integer

Integer adalah bilangan bulat, tanpa pecahan diperbolehkan!

.container {
z-index: 5;
}

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

Number

Number di CSS dapat mencakup desimal.

.opacity-example {
opacity: 0.5;
}

Ini menyetel kelegaman ke 50%, membuat elemen setengah-transparan.

Dimensi

Dimensi adalah angka dengan unit yang dilampirkan.

.box {
width: 100px;
height: 50%;
margin: 10em;
}

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

Kuantitas

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

Panjang

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

.container {
width: 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: rotate(45deg);
}

Ini memutar elemen 45 derajat.

Waktu

Nilai waktu digunakan untuk animasi dan transisi.

.animated {
transition: all 0.5s ease;
}

Ini menyetel transisi setengah detik untuk semua properti.

Kombinasi Tipe

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

Fungsi Value

Fungsi di CSS mengambil argumen dan mengembalikan nilai.

.gradient {
background: linear-gradient(to right, red, blue);
}

Ini menciptakan gradien dari merah ke biru.

Warna

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

.colorful {
color: #ff0000;  /* Hexadecimal */
background-color: rgb(0, 255, 0);  /* RGB */
border-color: hsl(240, 100%, 50%);  /* HSL */
}

Setiap dari ini mendefinisikan warna berbeda menggunakan notasi yang berbeda.

Gambar

Gambar di CSS dapat lebih dari sekedar gambar dari file.

.image-types {
background-image: url('cat.jpg');
list-style-image: linear-gradient(to right, red, blue);
}

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

Penempatan 2D

Penempatan di CSS adalah seperti bermain catur di halaman web.

.positioned {
position: absolute;
top: 50px;
left: 100px;
}

Ini menempatkan elemen 50 pixel dari atas dan 100 pixel dari kiri elemen yang mengandungnya.

Tipe Data Perhitungan

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

.calculated {
width: calc(100% - 20px);
}

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

Tampilan

Tampilan menentukan bagaimana elemen dirender.

.flex-container {
display: flex;
}

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

Tipe Data Lainnya

CSS masih memiliki beberapa trik di tangannya.

Nilai Global

Nilai global dapat digunakan pada properti apa pun.

.inherited {
color: inherit;
}

Ini mengatakan ke elemen untuk menggunakan warna yang sama seperti induknya.

Berikut adalah tabel yang menggabungkan tipe data CSS utama yang kitaulas:

Tipe Data	Contoh	Deskripsi
String	"Hello, World!"	Teks yang dibungkus dalam tanda petik
Identifier	Arial	Nama tanpa tanda petik untuk font, properti, dll.
URL	url('image.jpg')	Alamat sumber daya
Integer	5	Bilangan bulat
Number	0.5	Bilangan 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 peralatan, dan tipe data adalah alatmu. Semakin familiar kamu dengan mereka, semakin kreatif dan presisi desainmu akan menjadi. Terus latihan, dan segera kamu akan dapat menggaya halaman web seperti seorang pro!

Credits: Image by storyset