BAB 5
Komponen CSS | Nilai Properti Secara sekilas, setiap properti yang telah kita pelajari diatas akan memberikan nilai yang berbeda-beda pada setiap properti yang ada. Nilai-nilai yang sering muncul pada properti-properti diatas adalah: •
length
•
percentage
•
color
•
URL
•
keyword
•
shape
Setiap properti yang diberikan akan mampu mengambil nilai-nilai diatas sesuai dengan jenis properti-nya. Kadang, properti-properti tersebut tidak selalu dapat mengambil setiap jenis nilai yang diberikan nilai-nilai diatas, contohnya tidak semua properti dapat mengambil nilai yang negatif sama seperti properti tersebut mengambil nilai positif. Catat bahwa semua properti juga bisa mengambil nilai inherit (dapat mewariskan nilai kepada elemen turunannya). Ada beberapa nilai yang ‘memaksa’ sebuah elemen yang terpilih untuk mewariskan nilai dari elemen induknya, meskipun biasanya properti tersebut tidak melakukan pewarisan atau mewarisi sebuyah nilai kepada elemen lain.
5.1 Nilai Panjang Nilai panjang ini dapat berupa nilai positif atau negatif, mempunyai nilai bilangan dan harus diikuti dengan unit ukuran panjang. Catat bahwa nilai panjang ini dapat berupa nilai positif atau negatif, sedangkan beberapa properti yang telah kita pelajari diatas tidak dapat menerima ukuran nilai panjang yang negatif. Terdapat dua buah jenis dasar dari sebuah nilai panjang yaitu relatif dan absolut. Nilai panjang absolut sebaiknya hanya digunakan ketika kita telah mengetahui
126
Panduan Lengkap Menguasai Pemrograman CSS
ukuran dari sebuah output halaman web tersebut. Karena disini absolut lebih bersifat statik sehingga jika ada perubahan pada resolusi atau pixel, maka dapat merusak keseluruhan halaman web. Sebaiknya anda menggunakan nilai panjang relatif, sehingga halaman web dapat ditampilkan dalam berbagai medium perantara output tempat halaman web tersebut nanti akan ditampilkan meskipun resolusi maupun ukran pixel dari outputnya berbeda-beda. Beberapa unit pengukuran panjang dapat dilihat pada tabel berikut: Nama Em Ex pica point pixel milimeter centimeter inch
Singkatan Em Ex Pc Pt Px mm Cm In
Penjelasan Tinggi sebuah huruf Tinggi huruf x pada font 1 pica is 12 points 1/72 of an inch Sebuah titik dalam layar Unit dalam printing Unit dalam printing Unit dalam printing
Relatif Ya Ya Tidak Tidak Tidak Tidak Tidak Tidak
Tabel 5.1 Beberapa unit pengukuran panjang
Dengan mempelajari setiap ukuran panjang ini, kita akan mengetahui apa kekurangan dan kelebihan dari masing-masing ukuran panjang ini.
5.2 Nilai Persentase Selain menggunakan pengukuran banyak properti bisa juga mengambil nilai persentase. Anda dapat mengingat bahwa sebuah elemen berada di dalam sebuah elemen induk (sebagai contoh sebuah <paragraf> akan berada di dalam ). Biasanya nilai persentase menentukan nilai persentase dari elemen induknya. Sebagai contohnya, menentukan lebar properti dengan menggunakan nilai persentase berarti lebar sebuah elemen akan tergantung dengan persentase yang diberikan kepada elemen itu yang akan mempengaruhi elemen induk dari elemen itu. Singkatnya seperti berikut p {width:75%)
Kode diatas berarti elemen paragraf akan berukuran 75% lebar dari elemen induknya, biasanya elemen body.
BAB 5. Komponen CSS | Nilai Properti
127
Nilai persentase sangat penting dalam memposisikan sebuah elemen, jika seorang user memperbesar atau memperkecil browser window mereka, maka ukuran lama tetap akan bertahan tanpa perubahan pada tampilan designnya. Bentuk dari nilai persentase ini adalah positif dan tanda negatif (tidak ada tanda berarti positif) diikuti dengan bilangan di belakangnya, selanjutnya diikuti dengan simbol persen (%) Sebagai contohnya, -25%, +15% atau 15%.
5.3 Nilai Warna (Properti Color) Nilai properti color ada tiga jenis diantaranya; •
Nama warna
•
Warna dengan kode hexadecimal
•
Warna RGB
5.3.1 Nama Warna Ada 17 jenis nama warna yang diterima CSS, diantaranya:
128
•
= aqua (00ffff)
•
= black (000000)
•
= blue (0000ff)
•
= fuchsia (ff00ff)
•
= gray (808080)
•
= green (008000)
•
= lime (00ff00)
•
= maroon (800000)
•
= navy (000080)
Panduan Lengkap Menguasai Pemrograman CSS
•
= olive (808000)
•
= orange (ffa500)
•
= purple (800080)
•
= red (ff0000)
•
= silver (c0c0c0)
•
= teal (008080)
•
= white (ffffff)
•
= yellow (ffff00)
CSS 2 memperkenalkan 26 properti warna baru yang digunakan untuk memformat tampilan objek yang tergambar pada browser diantaranya: •
activeborder (digunakan untuk memformat garis window yang aktif)
•
activecaption (digunakan untuk memformat judul window yang aktif)
•
appworkspace (warna background dari tampilan beberapa dokumen)
•
background (background dari desktop)
•
buttonface (warna muka dari elemen 3 dimensi)
•
buttonhighlight (warna bayangan untuk elemen 3 dimensi )
•
buttontext (tulisan pada tombol yang ditekan)
•
captiontext (tulisan pada judul box)
•
graytext (format khusus untuk teks berwarna abu-abu, jika driver yang dipakai tidak men-support maka yang ditampilkan adalah warna hitam)
•
highlight (mengontrol item yang terpilih)
•
highlighttext (mengontrol text dari item yang terpilih)
•
inactiveborder (garis window yang tidak aktif)
•
inactivecaption (judul window yang tidak aktif)
BAB 5. Komponen CSS | Nilai Properti
129
•
inactivecaptiontext (warna dari text pada judul yang tidak aktif)
•
infobackground (warna background dari tooltips)
•
infotext (warna text dari tooltips)
•
menu (background menu)
•
menutext (tulisan pada menu)
•
scrollbar (scroll bara pada area abu-abu)
•
threeddarkshadow (bayangan gelap untuk elemen 3 dimensi)
•
threedface (warna muka dari elemen 3 dimensi)
•
threedhighlight (warna highlight dari elemen 3 dimensi)
•
threedlightshadow (warna cerah untuk elemen 3 dimensi)
•
threedshadow (bayangan untuk elemen 3 dimensi)
•
window (background window)
•
windowframe (frame window)
•
windowtext (text pada window)
5.3.2 Warna Hexadecimal RGB Untuk suatu alasan tertentu, web palette yang original (sekarang sRGB) menggunakan angka hexadecimal (basis 16, bukan basis 10)untuk menentukan warna. Secara singkatnya, warna RGB adaah singkatan dari Red, Green dan Blue (Merah, Hijau dan Hijau). Terdapat 256 corak warna untuk setiap warna (dari 00 sampai ff, itu sama dengan angka dari 0 sampai 255). CSS menentukan warna dengan metode ini dengan beberapa cara yaitu:
130
•
Menggunakan simbol # diikuti dengan tiga bilangan hexadecimal dalam jangkauan 00 sampai ff. Sebagai contohnya #ffcc11. Ini adalah cara HTML mengetahui bagaimana cara untuk menentukan warna. Pada contoh ini, nilai dari ff adalah merah, nilai dari cc adalah hijau dan nilai dari 11 adalah biru.
•
Menggunakan simbol # diikuti dengan tiga bilangan hexadecimal, kali ini menggunakan bilangan. Sebagai contohnya, #fc1. Ini sama dengan # ffcc11, bukan #f0c010.
Panduan Lengkap Menguasai Pemrograman CSS
5.3.3 Warna Decimal RGB Karena manusia pada umumnya lebih nyaman jika menghitung pada basis 10 daripada basis 16, CSS memperbolehkan kita untuk menggunakan warna decimal RGB. Jumlah total semua warna sama, hanya cara penentuannya yang berbeda. Ada dua bentuk warna decimal RGB, yaitu: 1. Bentuk bilangan dari RGB yaitu (255,255,0). Ada tiga buah nilai bilangan didalam jangkauan dari 0 sampai 255, dan masing-masing bilangan itu menyatakan warna merah, hijau dan biru. 2. Bentuk persen dari warna RGB menggantikan nilai dari jangkauan 0 sampai 255 dengan nilai persen dari 0 sampai 100%. Sebagai contohnya warna RGB diatas akan tertulis (100%, 100%, 0%). Untuk menyimpulkan semua penentuan warna diatas, berikut ini adalah nilai warna yang sama (semuanya hijau), yaitu: •
green
•
#00ff00
•
#0f0
•
rgb(0, 255, 0)
•
rgb(0%, 100%, 0%)
5.4 Nilai URL Gambar background dan list item ditentukan menggunakan URL. URL ini dapat berupa absolut URL (contoh URL penuh adalah http://wiswakarma.com/bg.gif) atau relatif URL. Tetapi relatif terhadap apa? Relatif ini berarti letak sebuah gambar pada server lokal terhadap letak file CSS kita. Misalnya bentuk biasa dari URL adalah: URL(alamat URL)
Maka bentuk dari absolut URL tersebut adalah: URL (http://wiswakarma.com/bg.gif)
Sedangkan bentuk dari relatif URL-nya adalah: URL (…/gif/background.gif)
BAB 5. Komponen CSS | Nilai Properti
131
5.5 Nilai Kata Kunci Banyak properti berbeda bisa menerima nilai kata kunci. Nilai kata kunci secara sederhana hanya berisi sebuah kata yang akan diterjemahkan ke nilai bilangan oleh browser. Nilai kata kunci tergantung pada setiap properti. Beberapa nilai kata kunci adalah relatif (terhadap elemen induk), contohnya: •
Bold dan bolder untuk properti font-weight
•
Small dan smaller untuk properti font-size.
5.6 Nilai Bentuk (Shape) Salah satu nilai yang tidak biasa yaitu nilai bentuk. Ini biasanya hanya digunakan pada properti clip, diperkenalkan sebagai bagian dari CSS2 yang mendefinisikan sebuah bentuk. Sekarang terdapat bentuk persegi (rectangular) yang sederhana Bentuk dari persegi ini adalah: rect(top left bottom right)
Setiap bagian atas, bawah, kiri dan kanan bisa berupa nilai panjang atau mengunakan kata kunci auto. Auto berarti setidaknya pada clipping context, nilai dari posisi properti ini sama dengan elemen itu sendiri. Nilai ini akan didefinisikan ulang karena ini tidak mengikuti model CSS yang sama dengan CSS1, dimana posisi didefinisikan dengan menmasukkan nilai sudut atas dan kiri halman dengan lebar dan tinggi. Sebagai tambahan, bentuk-bentuk yang lain untuk CSS ini sekarang sudah direncanakan oleh rekomendasi CSS yang baru.
132
Panduan Lengkap Menguasai Pemrograman CSS
