Komponen CSS Nilai Properti

Ukuran: px

Mulai penontonan dengan halaman:

Download "Komponen CSS Nilai Properti"

Benny Chandra
8 tahun lalu
Tontonan:

2 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

3 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 Singkatan Penjelasan Relatif Em Em Tinggi sebuah huruf Ya Ex Ex Tinggi huruf x pada font Ya pica Pc 1 pica is 12 points Tidak point Pt 1/72 of an inch Tidak pixel Px Sebuah titik dalam layar Tidak milimeter mm Unit dalam printing Tidak centimeter Cm Unit dalam printing Tidak inch In Unit dalam printing 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 <body>). 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

maupun ukran pixel dari outputnya berbeda-beda.

4 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 Nama Warna Ada 17 jenis nama warna yang diterima CSS, diantaranya: = aqua (00ffff) = black (000000) = blue (0000ff) = fuchsia (ff00ff) = gray (808080) = green (008000) = lime (00ff00) = maroon (800000) = navy (000080) 128 Panduan Lengkap Menguasai Pemrograman CSS

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

5 = 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

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

6 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) 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: 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 #f0c Panduan Lengkap Menguasai Pemrograman CSS

dimensi) threedlightshadow (warna cerah untuk elemen 3

7 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 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 ( Sedangkan bentuk dari relatif URL-nya adalah: URL ( /gif/background.gif) BAB 5. Komponen CSS Nilai Properti 131

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%.

8 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

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.

dokumen-dokumen yang mirip

MODUL I PENGENALAN HTML. a. Mengenalkan kepada mahasiswa mengenai pemrograman WEB dengan menggunakan HTML b. Mengenalkan kode-kode HTML 2.

MODUL I PENGENALAN HTML. a. Mengenalkan kepada mahasiswa mengenai pemrograman WEB dengan menggunakan HTML b. Mengenalkan kode-kode HTML 2. MODUL I PENGENALAN HTML A. MAKSUD DAN TUJUAN 1. Maksud a. Mengenalkan kepada mahasiswa mengenai pemrograman WEB dengan menggunakan HTML b. Mengenalkan kode-kode HTML 2. Tujuan a. Mahasiswa dapat membuat