Satuan ukuran % (persentase) pada CSS merupakan satuan relative yang didasarkan pada persentase elemen induk terhadap elemen anak. Satuan % (persentase) tidak memiliki nilai yang baku, namun sangat bergantung pada besaran nilai yang berada pada elemen induk sebagai acuan nilai besarannya. Satuan % (persentase) biasanya digunakan untuk menetapkan ukuran panjang dan lebar elemen HTML yang relative terhadap ukuran layar (screen). Satuan % (persentase) juga sering digunakan untuk menata ukuran kolom-kolom yang berada di dalam suatu tabel. Dan tidak sedikit pula menggunakan satuan ini untuk menaikkan ataupun menurunkan nilai besaran huruf yang relative terhadap ukuran besar huruf acuan yang sudah ditetapkan.
Pada satuan % (persentase), jika suatu elemen induk memiliki panjang sebesar 200px maka satuan 80% artinya 80% dari nilai 200px, atau sama dengan nilai sebesar 160px. Jika suatu elemen induk memiliki ukuran font-size sebesar 40px. Dan terdapat elemen anakkan yang berada di dalamnya akan diturunkan sebesar 75%. Maka nilai font-size yang akan didapatkan setara dengan ukuran 30px.
Sintaks ukuran % (persentase) :
tipe_property: x%;
Nilai x adalah nilai dalam bentuk numeric (angka). Nilai x bisa dalam bentuk nilai desimal ataupun non-desimal.
Sebagai contoh :
font-size: 0.80%;
width: 150%;
Ukuran huruf atau font size dapat diatur dengan menggunakan satuan % (persentase). Namun pada elemen induk, ukuran huruf harus diatur terlebih dahulu untuk digunakan sebagai nilai acuan. Jika elemen yang akan diberi ukuran dalam satuan % merupakan elemen tunggal dan tidak memiliki indukan, maka secara default nilai ukuran besar hurufnya adalah 16px.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<title>Belajar Style Sheet Pada CSS</title>
</head>
<body>
<div style="font-size: 40px;">Div acuan ukuran huruf 40px
<p style="font-size: 10%;">P ukuran huruf 10% dari 40px</p>
<p style="font-size: 20%;">P ukuran huruf 20% dari 40px</p>
<p style="font-size: 30%;">P ukuran huruf 30% dari 40px</p>
<p style="font-size: 40%;">P ukuran huruf 40% dari 40px</p>
<p style="font-size: 50%;">P ukuran huruf 50% dari 40px</p>
<p style="font-size: 60%;">P ukuran huruf 60% dari 40px</p>
<p style="font-size: 70%;">P ukuran huruf 70% dari 40px</p>
<p style="font-size: 80%;">P ukuran huruf 80% dari 40px</p>
<p style="font-size: 90%;">P ukuran huruf 90% dari 40px</p>
<p style="font-size: 100%;">P ukuran huruf 100% dari 40px</p>
<p style="font-size: 150%;">P ukuran huruf 150% dari 40px</p>
<p style="font-size: 200%;">P ukuran huruf 200% dari 40px</p>
</div>
</body>
</html>
Hasil Script :
P ukuran huruf 10% dari 40px
P ukuran huruf 20% dari 40px
P ukuran huruf 30% dari 40px
P ukuran huruf 40% dari 40px
P ukuran huruf 50% dari 40px
P ukuran huruf 60% dari 40px
P ukuran huruf 70% dari 40px
P ukuran huruf 80% dari 40px
P ukuran huruf 90% dari 40px
P ukuran huruf 100% dari 40px
P ukuran huruf 150% dari 40px
P ukuran huruf 200% dari 40px
Lebar (width) suatu elemen dapat diatur dalam satuan persentase. Contoh dibawah ini menggunakan lebar elemen HTML yang relative terhadap lebar piranti layar. Pada piranti komputer atau laptop, ukuran lebar elemen akan menyesuaikan berdasarkan lebar layar saat proses perbesar dan perkecil.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<title>Belajar Style Sheet Pada CSS</title>
</head>
<body>
<p style="border:solid 2px #e83a14;height:20px;width:10%;">10%</p>
<p style="border:solid 2px #e83a14;height:20px;width:20%;">20%</p>
<p style="border:solid 2px #e83a14;height:20px;width:30%;">30%</p>
<p style="border:solid 2px #e83a14;height:20px;width:40%;">40%</p>
<p style="border:solid 2px #e83a14;height:20px;width:50%;">50%</p>
<p style="border:solid 2px #e83a14;height:20px;width:60%;">60%</p>
<p style="border:solid 2px #e83a14;height:20px;width:70%;">70%</p>
<p style="border:solid 2px #e83a14;height:20px;width:80%;">80%</p>
<p style="border:solid 2px #e83a14;height:20px;width:90%;">90%</p>
<p style="border:solid 2px #e83a14;height:20px;width:100%;">100%</p>
</body>
</html>
Hasil Script :
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
Ukuran lebar kolom-kolom pada tabel biasanya secara otomatis akan menyesuaikan dengan isi yang terkandung di dalam kolom tersebut. Jika isi kontennya lebih sedikit dibandingkan dengan kolom di sebelahnya, maka ukuran lebarnya akan lebih kecil.
Untuk menata ukuran lebar kolom-kolom pada tabel sesuai dengan keinginan dan fleksible saat browser diperbesar dan diperkecil, dapat menggunakan satuan %. Namun lebar tabel harus diatur dalam posisi 100% terhadap ukuran layar. Kemudian lebar kolom-kolomnya dapat diatur relative terhadap lebar tabel.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<title>Belajar Style Sheet Pada CSS</title>
<style>
table tr th,table tr td{border:solid 1px #ccc;padding:10px;}
table{width:100%;}
table tr th:nth-child(1){width:33%;}
table tr th:nth-child(2){width:33%;}
table tr th:nth-child(3){width:33%;}
</style>
</head>
<body>
<table>
<tr><th>No.</th><th>Nama Kota</th><th>Provinsi</th></tr>
<tr><td>1.</td><td>Tanjung Pinang</td><td>Kepulauan Riau</td></tr>
<tr><td>2.</td><td>Batam</td><td>Kepulauan Riau</td></tr>
<tr><td>3.</td><td>Bandung</td><td>Jawa Barat</td></tr>
<tr><td>4.</td><td>Semarang</td><td>Jawa Tengah</td></tr>
<tr><td>5.</td><td>Medan</td><td>Sumatera Utara</td></tr>
</table>
</body>
</html>
Hasil Script :
| No. | Nama Kota | Provinsi |
|---|---|---|
| 1. | Tanjung Pinang | Kepulauan Riau |
| 2. | Batam | Kepulauan Riau |
| 3. | Bandung | Jawa Barat |
| 4. | Semarang | Jawa Tengah |
| 5. | Medan | Sumatera Utara |
Tutorial CSS
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Previous Page
