Assalamu'alaikum wr.wb.
Kesempatan kali ini kita akan sharing tentang CSS lagi. Langsung saja masuk ke materinya.
A. Latar Belakang
CSS (Cascading Styles Sheet) dalam pembuatan table menggunakan atribut-atribut. Untuk menentukan batas tabel dalam CSS, menggunakan border properties. Menggunakan tag <table></table>, <th></th>, <tr></tr>, <tb></tb>.
Tag Display merupakan properti CSS yang paling penting untuk mengendalikan tata letak. Display properti menentukan jika/bagaimana elemen ditampilkan. Setiap elemen HTML memiliki nilai tampilan default tergantung pada jenis elemen itu. Tampilan nilai default untuk sebagian besar elemen adalah block atau inline.
Tag position properti menetapkan jenis metode penentuan posisi yang digunakan untuk elemen (statis, relatif, tetap atau absolut). Float properti dapat digunakan untuk membungkus teks di sekitar gambar.
Inline-block telah dimungkinkan untuk waktu yang lama untuk membuat kotak-kotak yang mengisi lebar peramban dan membungkus baik (ketika browser diubah ukurannya), dengan menggunakan float properti.
Align digunakan untuk horizontal pusat elemen blok (seperti <div>), serta menggunakan penggunaan margin: auto;. Mengatur lebar dari elemen akan mencegah dari peregangan keluar ke tepi wadah.
Sebuah pseudo-class digunakan untuk menentukan keadaan khusus dari suatu unsur. Sebagai contoh, dapat digunakan untuk:
- Gaya elemen ketika pengguna mouse di atasnya
- Gaya dikunjungi dan belum dikunjungi link berbeda
- Gaya elemen ketika mendapat fokus
Sebuah CSS pseudo-element digunakan untuk gaya tertentu bagian dari elemen. Sebagai contoh, dapat digunakan untuk:
- Gaya huruf pertama, atau jalur, dari unsur
- Sisipkan konten sebelum, atau setelah, isi elemen
Opacity properti menentukan opacity atau transparansi elemen. Opacity properti dapat mengambil nilai 0,0-1,0. Jika angka atau nilai yang diambil lebih rendah makan hasilnya akan transparan.
Menu dropdown digunakan untuk membuat menu tambahan dan memberi efek turun kebawah. Membuat kotak dropdown yang muncul saat pengguna bergerak mouse di atas elemen.
Menu navigasi adalah penting untuk setiap situs web. Dengan navigasi pada tampilan web yang kita buat akan lebih bagus dan interaktif.
CSS galeri digunakan untuk membuat sebuah galeri gambar pada tampilan web yang dibuat.
B. Alat dan Bahan
- W3Schools
- Laptop
- Sublime Text
C. Tujuan
Yaitu untuk memperdalam pemahaman tentang CSS dan memperindah tampilan dari web yang dibuat.
D. Tahap Pelaksanaan
- Buka sublime text pada menu.
- Masukkan coding dibawah ini untuk membuat tampilan yang seperti hasilnya.
 |
| Peletakkan css harus berada di bawah head. Didalam kita membuat tampilan seperti hasil css yang kita masukkan seperti efek untuk dropdown, table, gambar. |
 |
| Tampilan pada gambar diatas jika kita menggeser pinter ke ke dalam tabel maka akan muncul tampilan berwarna ungu bertuliskan Karaganyar Maju dan Cerdas. |
 |
| Tampilan diatas adalah dropdown dari gambar, jika kita menggeser pointer ke arah gambar akan muncul tampilan gambar lagi yang berada dibawahnya. |
E. Kesimpulan
Dari pengcodingan dan hasil yan diperoleh maka dapat disimpulkan bahwa penggunaan css dalam suau web sangat berpengaruh atas hasil tampilannya. Jika kita tidak menggunakan css web yang kita buat terlihat lebih sederhana dan kurang menarik.
F. Referensi
- http://www.w3schools.com/css
Sekian dan Terimakasih.
SMK Bisa!!
Wasalamu'alaikum wr.wb.
0 komentar:
Posting Komentar