Cascading Style Sheets (CSS) adalah dasar bagi Dynamic HTML pada baik Netscape Navigator 4.0 dan Internet Explorer 4.0. CSS memberikan cara untuk menciptakan seperangkat "gaya" yang mendefinisikan bagaimana elemen-elemen di halaman Anda tampil. Cascading Style Sheets Positioning (CSS-P) merupakan sebuah perluasan atas CSS yang memberikan pengembang kendali hingga piksel atas lokasi apa pun yang ada di layar. Karena sebenarnya sudah ada dokumentasi dan tutorial CSS dan CSS-P yang baik saya tidak akan menggandakannya melainkan saya akan membangun di atas mereka.
Inilah dua dokumen/tutorial yang menjelaskan sintaksis CSS dan CSS-P:
Situs-situs tersebut akan memberikan pandangan menyeluruh yang lengkap dari CSS dan bagaimana mengimplementasikannya. Tetapi saya hanya akan secara cepat mengulangi bagian-bagian CSS yang akan digunakan di sepanjang tutorial ini.
Menggunakan Tag DIV:
Ketika menggunakan CSS-Positioning, properti-properti biasanya diterapkan atas tag DIV (divisi) tag yang kosong, tak memberikan format, yang paling cocok bagi CSS. Ketika Anda meletakkan HTML atau teks ke dalam tag DIV, biasanya disebutkan sebagai salah satu dari "blok DIV", "elemen DIV", "lapisan CSS", atau saya menyebutnya hanya sebagai "lapisan". Ketika Anda membaca mengenai Dynamic HTML pada situs web atau newsgroup, jika seseorang berbicara tentang sesuatu dari istilah-istilah ini mereka semua berbicara tentang hal yang sama cuplikan HTML yang ada di dalam tag "DIV" yang diposisikan.
Untuk menandai tag DIV yang kosong tidak berbeda dengan tag lainnya:
<DIV> Ini tag DIV </DIV>
Menggunakan tag DIV sendiri saja mempunyai hasil yang sama dengan menggunakan <P></P>.
Tetapi dengan menerapkan CSS kepada tag DIV kita dapat mendefinisikan di mana di layar cuplikan HTML ini akan ditampilkan, menggambar persegi atau garis, atau bagaimana menampilkan tulisan di dalamnya. Anda melakukannya dengan pertama-tama memberikan ID (seperti nama) kepada DIV yang bersangkutan:
<DIV ID="truk"> Ini sebuah truk </DIV>
Terserah apa yang Anda gunakan untuk ID Anda. ID dapat merupakan rangkaian karakter-karakter (a-z, A-Z, 0-9, dan garis bawah), tetapi diawali dengan huruf.
Lalu Anda terapkan CSS Anda dengan salah satu dari dua cara berikut:
Inline CSS:
Inline adalah cara yang paling umum digunakan, dan merupakan cara yang saya gunakan untuk memulai menunjukkan bagaimana menulis DHTML dan JavaScript.
<DIV ID="truk" STYLE="gaya masuk di sini">
Ini sebuah truk
</DIV>
Tag STYLE eksternal:
Menggunakan metode eksternal akan bekerja juga, tetapi ada beberapa masalah yang mungkin timbul dengan menuliskan CSS seperti ini. Maka saya sarankan Anda tunggu sampai Anda tiba di pelajaran Lapisan Bersarang sebelum mencobanya sendiri. Untuk sekarang cukuplah untuk melihat bagaimana hal ini dilakukan....
<STYLE TYPE="text/css"> <!-- #truk {gaya masuk di sini} --> </STYLE> <DIV ID="truk"> Ini sebuah truk </DIV>
Perhatikan bagaimana ID digunakan di tag STYLE untuk menugaskan gaya-gaya CSS.
Properti-properti CSS Lintas Browser:
Karena tujuan situs ini adalah menghasilkan DHTML yang bekerja di baik Netscape dan Internet Explorer, kita agak terbatas dalam gaya/properti CSS yang dapat kita gunakan. Secara umum, properti-properti berikut adalah yang bekerja (sangat mirip) dengan standar yang didefinisikan oleh W3C.
Penting:
Ketika menggunakan lapisan untuk animasi Anda harus selalu mendefinisikan lebar. Ini karena di IE nilai defaultnya adalah seluruh lebar layar. Jika Anda memindahkan layar di sepanjang layar sebuah scroll bar akan muncul di bawah, yang sangat menjengkelkan dan membuat animasinya lambat.
Sintaksis CSS berbeda dari HTML. Anda dapat menggunakan titik dua untuk memisahkan properti dan nilainya, dan titik koma untuk memisahkan properti yang berbeda:
position: absolute; left: 50px; top: 100px; width: 200px; height: 100px; clip: rect(0px 200px 100px 0px); visiblity: visible; z-index: 1; background-color:#FF0000; layer-background-color:#FF0000; background-image:URL(namafile.gif); layer-background-image:URL(namafile.gif);
Anda mempunyai sedikit keluwesan dalam mengisikan properti CSS. Anda tidak perlu menyebutkan semuanya. Spasi putih diabaikan, jadi Anda dapat menuliskan semuanya pada baris yang sama atau pada baris yang berbeda, memberikan tab di antara nilai-nilai, dsb. Seperti biasanya, satuan defaultnya adalah piksel, sehingga Anda tidak benar-benar perlu menuliskan "px" setelah nilai-nilai left, top, width dan height, meskipun hal ini disarankan.
position:absolute; left:50px; top:100px; width:200px; height:100px; clip:rect(0px 200px 100px 0px); background-color:#FF0000; layer-background-color:#FF0000;
Contoh Inline:
<DIV ID="namadiv" STYLE="position: absolute; left:50px; top:100px; width:200px; height:100px; clip:rect(0px 200px 100px 0px); visiblity:visible; z-index:1;">
</DIV>
Contoh Eksternal:
<STYLE TYPE="text/css">
<!--
#namadiv {position: absolute; left:50px; top:100px; width:200px; height:100px; clip:rect(0px 200px 100px 0px); visiblity:visible; z-index:1;}
-->
</STYLE>
<DIV ID="namadiv">
</DIV>
Sebuah demo berharga sejuta kata:
Halaman Muka | Pelajaran Berikutnya: JavaScript Lintas Browser |