Tutorial CSS / Warna dan Satuan CSS: px, em, rem, dan Persentase

Warna CSS dapat ditulis menggunakan nama, nilai heksadesimal, dan fungsi seperti rgb(). Unit panjang menggunakan titik acuan yang berbeda: px adalah panjang CSS absolut, em tergantung pada ukuran font, rem menggunakan ukuran font root, dan persentase tergantung pada properti yang diatur.

Bandingkan nama warna, notasi heksadesimal, dan RGB

teal, #008080, dan rgb(0, 128, 128) mengekspresikan warna yang sama. Nama warna mudah dibaca, tetapi hanya nama warna yang telah ditentukan yang dapat digunakan, dan hexadecimal serta RGB baik untuk mengontrol jumlah merah, hijau, dan biru secara numerik. RGB adalah singkatan dari Red, Green, Blue (Merah, Hijau, Biru).

Alpha menggambarkan opasitas warna: 20% memungkinkan sebagian besar warna yang ada di bawahnya terlihat, sedangkan 100% bersifat opak. Hasil yang ditampilkan bergantung pada warna yang ada di bawahnya. Menambahkan alpha hanya pada latar belakang berbeda dengan menetapkan opacity pada seluruh elemen, yang juga membuat teks dan turunannya tembus pandang. Lihat MDN: color.

Pahami titik referensi px, em, dan rem

px adalah piksel CSS. Ini tidak selalu sama dengan satu piksel fisik di layar, dan mungkin terlihat berbeda tergantung pada skala layar dan kepadatan piksel perangkat. Menggunakan 16px tidak berarti fungsi pembesaran layar tidak berfungsi.

Dalam font-size, em menggunakan ukuran font yang diwarisi. Dalam deklarasi seperti padding: 1em, ia menggunakan ukuran font elemen itu sendiri. rem menggunakan ukuran font elemen root. Perhitungan berikut mengasumsikan ukuran font root dan induk keduanya adalah 16px. Untuk detail lebih lanjut, lihat Font, Ukuran Font, dan Tinggi Baris CSS.

Jika Anda mengulangi font-size: 1.25em pada setiap langkah di mana ukuran induk meningkat, ukurannya meningkat dari 16 → 20 → 25px. Ulangi 1.25rem di atas struktur yang sama, kedua langkahnya adalah 20px. em nyaman untuk komponen kecil yang perlu proporsional dengan huruf di sekitarnya, dan rem nyaman untuk berbagi referensi konstan di seluruh halaman. Pilih kriteria yang akan diikuti daripada jawaban absolut yang benar. Untuk definisi unit, lihat nilai CSS dari panduan nilai dan satuan CSS di MDN .

Temukan referensi untuk lebar persentase

width: 50% biasanya dihitung berdasarkan lebar konten dari blok yang memuatnya. Tidak semua persentase properti didasarkan pada target yang sama. Misalnya, font-size: 125% didasarkan pada ukuran font yang diwarisi dari elemen induk, jadi harus dipisahkan dari % lebar.

.wrapper { width: 100%; max-width: 640px; padding: 1rem; }

.inner { width: 50%; font-size: 1.25rem; padding: 1em; }

Contoh ini menggunakan border-box, sehingga padding sesuai dengan lebar yang dideklarasikan. Dengan font root 16px, ruang yang cukup, dan tanpa border, kotak luar memiliki lebar 640px. Padding 16px di setiap sisi menyisakan 608px untuk lebar konten. Lebar kotak dalam sebesar 50% adalah 304px; padding 20px di setiap sisi menyisakan 264px untuk konten. Untuk rincian lebih lanjut, lihat Lebar, Tinggi, Batas min/max, dan box-sizing CSS.

Jika layarnya sempit, lebar kotak luar juga akan berkurang. Pada saat ini, lebar bagian dalam tidak tetap pada 304px tetapi dihitung ulang berdasarkan lebar konten baru dari kotak luar. max-width dalam contoh adalah pengaturan sekunder yang membatasi kotak agar tidak lebih lebar dari 640px.

Jalankan contoh lengkap

Masukkan kode di bawah ini ke dalam units.html yang disimpan sebagai UTF-8 dan buka di peramban Anda. Kode tersebut mencakup perbandingan warna, penempatan unit bersarang, dan perhitungan lebar. 100% root mengikuti ukuran font default peramban, jadi kondisi 16px dalam latihan di bawah diperiksa terlebih dahulu di alat pengembang.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing colors and units</title>
  <style>
    html { font-size: 100%; }
    * { box-sizing: border-box; }
    body { margin: 16px; font-family: sans-serif; line-height: 1.7; }
    .wrapper { width: 100%; max-width: 640px; padding: 1rem; background: #e9f7ef; }
    .inner { width: 50%; padding: 1em; font-size: 1.25rem; background: white; }
    .color-name { color: teal; }
    .color-hex { color: #008080; }
    .color-rgb { color: rgb(0, 128, 128); }
    .alpha { padding: 1rem; background: rgb(0 128 128 / 20%); }
    .nest { font-size: 16px; }
    .em-step { font-size: 1.25em; }
    .rem-step { font-size: 1.25rem; }
  </style>
</head>
<body>
  <h1>Colors and units</h1>
  <h2>Three notations of the same color</h2>
  <p class="color-name">Character specified by teal</p>
  <p class="color-hex">Characters specified as #008080</p>
  <p class="color-rgb">Character specified by rgb(0, 128, 128)</p>
  <p class="alpha">Only this box's background color has 20% opacity.</p>
  <h2>Width and spacing</h2>
  <div class="wrapper"><div class="inner">Text and padding in the inner box</div></div>
  <h2>Nested em</h2>
  <div class="nest"><div class="em-step">First step<div class="em-step">Second step</div></div></div>
  <h2>Nested rem</h2>
  <div class="nest"><div class="rem-step">First step<div class="rem-step">Second step</div></div></div>
</body>
</html>

Ubah satu nilai pada satu waktu

1. Periksa ukuran font html yang dihitung di alat pengembang. Jika 16px, pastikan em yang bersarang adalah 20px·25px dan rem yang bersarang adalah 20px·20px. Jika ukuran root berbeda, hitung rem berdasarkan ukuran root tersebut. Pada contoh lengkap, .nest tetap 16px, sehingga dua tingkat em tetap 20px dan 25px.
2. Mari ubah html secara singkat menjadi font-size: 20px. Teks pada .inner dan kedua tingkat .rem-step menjadi 25px, dan .nest mempertahankan 16px yang ditentukan, sehingga tingkat em adalah 20px·25px. Padding .inner adalah 25px. Setelah perbandingan, kembalikan ke 100% semula.
3. Perlebar jendela dan periksa ukuran kotak dari .wrapper dan .inner. Dalam kondisi 16px asli, ukurannya 640px·304px. Saat jendela dipersempit, pastikan kedua sisi menyusut bersamaan.
4. Periksa warna yang dihitung dari ketiga paragraf warna. Mereka semua harus memiliki nilai RGB yang sama. Pastikan bahwa mengubah latar belakang .alpha tidak membuat teks itu sendiri menjadi buram.

Jika itu bukan yang Anda harapkan, periksa kriteria perhitungan sebelum hanya mengubah unit. Ukuran font induk dan root, padding, box-sizing, dan aturan CSS yang menimpa dapat berpengaruh. Perubahan yang dilakukan di alat pengembang biasanya hilang saat Anda menyegarkan, dan perubahan yang disimpan ke file harus dikembalikan secara manual ke nilai asalnya.