Dasar-dasar CSS #5

Dasar-dasar CSS #5
Di Posting Oleh : Admin
Kategori : Tutorial Blog Tutorial, Teknologi dan Kesehatan: Mangaip Blog
Ini adalah seri terakhir dari Seri Dasar-dasar CSS. Sebelumnya silakan baca edisi terdahulu:

Dasar-dasar CSS #1
Dasar-dasar CSS #2
Dasar-dasar CSS #3
Dasar-dasar CSS #4

Pada edisi terakhir ini akan dijelaskan tentang beberapa properti yang belum dibahas, penyingkatan CSS yang biasanya digunakan untuk kompresi, dan penggunaan keterangan !important.

1. Beberapa Properti

Pertama-tama kita akan membahas tentang beberapa properti yang belum dibahas. Yaitu:

1. cursor yaitu untuk kursor/penunjuk mouse. Valuenya yaitu:
  • crosshair: yaitu gambar pointer yang berbentuk seperti tanda plus.
  • text: yaitu gambar pointer yang kalau seperti pada microsoft word (berbentuk seperti pointer teks).
  • wait: yaitu gambar jam pasir seperti kalau loading program.
  • default: yaitu gambar pointer biasa (panah).
  • help: yaitu gambar pointer dengan tanda tanya (seperti pernah diaplikasikan untuk trik membuat help/keterangan).
  • n-resize: yt gambar kursor yang seperti untuk memperlebar/memperkecil suatu objek (seperti pada paint). Arahnya menghadap ke utara.
  • ne-resize: sama seperti n-resize tetapi arahnya menghadap ke timur laut.
  • e-resize: arahnya menghadap ke timur.
  • se-resize: arahnya menghadap ke tenggara.
  • s-resize: bentuknya sama seperti n-resize.
  • sw-resize: bentuknya sama seperti ne-resize.
  • w-resize: bentuknya sama seperti e-resize.
  • nw-resize: sama dengan se-resize.
  • none: tidak memakai kursor.
  • url('URLGAMBARCURSOR'): cursor memakai gambar (ganti URLGAMBARCURSOR dengan URL gambar cursor yang diinginkan). (Baca juga: Cara Membuat Custom Cursor)
2. list-style: Tampilan daftar. Ada 3 properti untuk tampilan daftar.
  • list-style-position: Posisi tampilan daftar. Nilainya inside untuk didalam dan outside: untuk diluar.
  • list-style-type: Bentuk bullet. Nilainya:
    • disc: tampilan bullet seperti bentuk bulat penuh.
    • square: tampilan bentuk kotak.
    • circle: bentuk bulat tetapi hanya outsidenya.
    • decimal: berbentuk angka (1, 2, 3, dst. seperti penggunaan tag <ol>).
    • upper-roman: berbentuk angka romawi dengan huruf besar (I, II, III, dst.)
    • lower-roman: berbentuk angka romawi dengan huruf kecil (i, ii, iii, dst.)
    • upper-alpha: berbentuk alfabet dengan huruf besar (A, B, C, dst.)
    • lower-alpha: berbentuk alfabet dengan huruf kecil (a, b, c, dst.)
    • none: tidak memakai bullet
  • list-style-image: url('URLGAMBARBULLET'): Gambar bullet. Ganti URLGAMBARBULLET dengan URL dari gambar bullet yang diinginkan.
3. overflow: kondisi jika isi konten melewati batas width/height yang telah ditentukan. Misalnya width ditentukan 100px dan height 100px tetapi ternyata melewati batas tersebut. Nah, nilai dari overflow ini adalah:
  • visible: yaitu isi konten yang melewati batas tetap ditampilkan.
  • hidden: yaitu isi konten yang melewati batas tidak ditampilkan sehingga yang ditampilkan hanya teks yang masih berada didalam batasnya.
  • auto: yaitu jika kelebihan maka akan ditampilkan scroll-nya. Jika tidak ya maka tidak.
  • scroll: yaitu baik kelebihan ataupun tidak maka akan tetap ditampilkan scrollnya, tetapi jika tidak kelebihan maka scrollnya nonaktif.
4. opacity: yaitu transparansi objek. Biasanya diikuti dengan properti filter: Alpha(Opacity=x, FinishOpacity=y); Dengan ketentuan x = nilai yang ditentukan properti opacity (1 = padat/tdk transparan, 0 = tidak kelihatan, antara 0 s/d 1 = transparan) dan y = 100x dari nilai x. Misal:
body{
opacity:0.5;
filter: Alpha(Opacity=0.5, FinishOpacity=50);
}
Berikut contoh penggunaan properti diatas.
<html>
<head>
<title>Belajar CSS - Part 5</title>
<style>
<!--
body{
cursor: crosshair;
}
.class1{
list-style-position: inside;
list-style-type: square;
}
.class2{
list-style-position: inside;
list-style-image: url('http://forum.plurk-id.org/Smileys/default/47d20905d017c396d67b4a30c9ac9b10.png');
}
#id1{
width:200;
height:200;
overflow:hidden;
}
#id2{
width:200;
height:200;
overflow:auto;
}
#id3{
opacity:0.5;
filter: Alpha(Opacity=0.5, FinishOpacity=50);
}
-->
</style>
</head>
<body>
<ul class="class1">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
<ul class="class2">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
<div id="id1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
<br/>
<div id="id2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
<br/>
<div id="id3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
</body>
</html>
Buat file seperti contoh diatas dengan notepad lalu save as dengan nama dasar dasar css 5 properti.html dan ganti dropdown Save As Type dengan All Files lalu save dan buka di browser. Kira-kira hasilnya seperti ini.
2. Penyingkatan CSS

Ternyata nggak cuma SMS aja yang disingkat. (goodluck) CSS pun bisa disingkat. Penyingkatan dilakukan supaya lebih cepat diload. Ada beberapa macam penyingkatan.

1. Penyingkatan properti.

Beberapa properti yang bisa disingkat:
  • font
  • border
  • background (image)
  • margin
  • padding
Penyingkatan font

Sintaks penyingkatannya seperti ini.
font: font-weight font-size font-family;
Misal:
font: bold 24px Verdana,Helvetica;
Ket:

Yang perlu diperhatikan, untuk penulisan font-family terutama yang merupakan font generik, diantara font-font generik jangan ada spasi.

Penyingkatan border

Sintaks:
border: border-style border-width border-color;
Misal:
border: solid 1px #CCC;
Ket:

Untuk mendefinisikan border hanya untuk border atas, kanan, bawah, maupun kiri, maka gunakan ,code>border-top, border-right, border-bottom, border-left ketimbang hanya border saja (pada bagian properti).

Penyingkatan background

Sintaks:
border: url('URLGAMBAR') background-repeat position-x position-y;
Ket:

Ganti URLGAMBAR dengan URL background.

position-x adalah posisi horizontal, sedangkan position-y adalah posisi vertikal. Misal:
border: url('http://i49.tinypic.com/2qmqcmc.jpg') repeat-y left 100px;
Penyingkatan Margin/Padding

Untuk margin/padding ada beberapa kondisi.

1. Jika kondisinya nilai margin/padding semua sama, maka sintaksnya: margin/padding: nilai_seluruhnya; Misal: margin: 10px; (nilai margin atas/bawah/kanan/kiri = 10px)
2. Jika nilai beda semua, maka sintaksnya: margin/padding: nilai_atas nilai_kanan nilai_bawah nilai_kiri; Misal: padding: 3px 4px 5px 6px; (3px padding atas, 4px kanan, 5px bawah, 6px kiri)
3. Jika nilai margin/padding atas dan bawah sama, dan juga nilai kiri/kanan juga sama, maka sintaksnya: margin/padding: nilai_atas nilai_kanan; Misal: margin: 5px 10px; (margin atas/bawah 5px, kana/kiri 10px)

2. Penyingkatan tag/class/id.


Jika ada 2 ID yang mempunyai properti sama, maka disingkat saja.

Misal
#id1{
color:#CCC;
width:200px;
}
.class1{
color:#FFF;
width:200px;
}
Maka disingkat jadi:
#id1, .class1{
width:200px;
}
#id1{
color:#CCC;
}
.class1{
color:#FFF;
}
Contoh penggunaan penyingkatan:
<html>
<head>
<title>Belajar CSS - Part 4</title>
<style>
<!--
.class1{
background:url('http://forum.plurk-id.org/Smileys/default/idiot.gif') no-repeat 30px 10px;
border:solid 3px green;
font: lighter 16px Arial,Tahoma,Verdana;
}
#id1{
width:150;
}
#id2{
width:100;
}
#id1, #id2{
height:200;
overflow:auto;
}
-->
</style>
</head>
<body>
<div class="class1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
<div id="id1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
<br/>
<div id="id2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.

</div>
<br/>
<div id="id3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
</body>
</html>
Lalu hasil eksekusi di browser akan seperti ini.
3. Penggunaan !important

Keterangan !important digunakan untuk menerangkan pentingnya suatu properti, sehingga properti tersebut yang didahulukan. Sintaksnya seperti ini.
selector{
properti:value; !important
}
Saya jelaskan dulu. Begini. Jika ada selector yang sama dengan property sama tetapi value yang berbeda, maka value yang disebutkan terakhir akan diprioritaskan. Misal:
#id1{
color:blue;
}
#id1{
color:green;
}
Maka #id1 akan berwarna hijau, karena dituliskan terakhir. Lain cerita dengan yang ini.
#id1{
color:blue; !important
}
#id1{
color:green;
}
Maka #id1 akan berwarna biru. Nah, kalau yang ini?
#id1{
color:blue;
}
#id1{
color:green; !important
}
Ya pasti berwarna hijau lah, orang disebutinnya terakhir, pake !important lagee... (lmao) (haha)

Nah, kalo yang ini?
#id1{
color:blue; !important
}
#id1{
color:green; !important
}
Ya sama kayak yang tadi: ijo! (haha)

!important ini sangat berguna untuk anda yang suka mengoprek CSS, misalnya dalam penggunaan layout Plurk atau Multiply. Dimana mungkin sudah disetting duluan CSS-nya oleh pembuat situs. Jadi jika gagal berubah layoutnya padahal sintaks kodenya sudah bener, maka bisa gunakan !important ini.

Berikut contoh penggunaannya.
<html>
<head>
<title>Belajar CSS - Part 4</title>
<style>
<!--
#id1{
color:blue;
}
#id1{
color:green;
}
#id2{
border: solid 5px grey; !important
}
#id2{
border: solid 1px grey;
}
#id3{
background-color:#CCCCCC;
}
#id3{
background-color:yellow; !important
}
#id4{
width:300px; !important
}
#id4{
width:350px; !important
}
-->
</style>
</head>
<body>
<div id="id1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
<div id="id2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
<div id="id3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
<div id="id4">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
</body>
</html>
Berikut hasil eksekusinya di browser.
Akhirnya serial Dasar-dasar CSS habis juga. Memang lumayan panjang yang edisi #5 tetapi semoga bermanfaat. Dan tetap stay tune di Gudang Ilmu... (goodluck)

Komentar

Posting Komentar

Postingan populer dari blog ini

Peluang Mendapatkan Piting, Straight Flush, dan Dragon dalam Capsa Banting

Sudah lama saya tidak ngepost, dan akhirnya sekarang ada ide, jadi Selamat Datang... eh? Anda tahu permainan Capsa banting? atau di Indonesia dikenal dengan nama permainan Capsa atau "gabruk"? Permainan yang dilakukan dengan 52 biah kartu remi tanpa joker ini sangat seru, memacu adrenalin , cocok diwaktu senggang, dan membutuhkan strategi dan kepandaian dalam mengeluarkan kartu. Cara bermainnya saya tidak akan jelaskan disini (bisa dicari di Google). Tetapi saya ingin menjelaskan sesuatu yang lebih menarik, yaitu peluang... Mendapatkan Piting (four of a kind/empat kartu bernomor sama) atau Straight Flush (seri kembang atau di indonesia lebih dikenal dengan nama "Plessi", misalnya urut dari 9 sekop-10 sekop-J sekop-Q sekop-K sekop) tentu menyenangkan, karena dengan mendapatkan kartu seperti itu anda dimungkinkan untuk mengebom yang mengeluarkan kartu tertinggi (2). Apalagi kalau mendapatkan seri dragon (seri panjang yaitu dari 3 sampai 2, tidak perduli kembang) akan ...
Baca selengkapnya

0,999... = 1

Gambar
Sudah kangen untuk menulis lagi di blog tercinta ini. Sekarang saya akan membahas permasalahan di dunia matematika yanag lumayan seru, apakah 0,999... dengan panjang angka 9 hingga ke arab (baca: tak terhingga) (haha) sama dengan satu. Sudah banyak pakar analis dan aljabar yang menyimpulkan bahwa 0,999... sama dengan satu, dengan berbagai macam metode. Ada yang menggunakan cara aljabar, analis, kalkulus, dan lainnya, bahkan secara pembulatan (ya iya lah). Tetapi kita akan mulai dengan cara yang sederhana. Pembuktian 1: Pecahan Intinya adalah mengalikan 0,333... dengan 3 sama saja dengan 0,999... dan 1/3 x 3 = 1 Pembuktian 2: Manipulasi Digit Ini cara yang diajarkan waktu SMP. Mengalikan 0,999... dengan sepuluh hanya akan menggeser satu nilai 9 ke sebelah kiri tanda koma, dan mengurangkan 9,999... dengan x (=0,999...) akan membuat nilainya menjadi 9. Dari situ didapat 0,999... = 1 Pembuktian 3: Deret Tak Hingga Diatas, 0,999... sama saja dengan 0,9 + 0,09 + 0,009... dst dan setelah dija...
Baca selengkapnya

Mempopulerkan postingan via Puncak Plurk

Gambar
Entah kenapa materi dalam postingan ini tidak bisa dilaksanakan, karena Plurk top mendisable promosi utk postingan diri sendiri. Jadi dengan sangat terpaksa, postinan ini saya nyatakan TIDAK RELEVAN. Akhirnya dapat inspirasi juga untuk ngeblog dan postang-posting, setelah kemarin berputus asa... Ada fitur baru dari Plurk yang bernama Puncak plurk . Jadi, anda bisa mempromosikan status anda di plurk ke Top plurk, yang nantinya akan dilihat orang-orang dan diberi rating. Ini sangat bagus untuk promosi blog karena akan dilihat oleh orang banyak. Cara memanfaatkannya begini... 1. Login ke Plurk terlebih dahulu. (Jika belum punya akun plurk, lihat langkah-langkah untuk mendaftarnya di: Cara daftar Plurk ) 2. Posting link yang akan dipopulerkan. Formatnya begini: http://blablabla.com/2011/01/postingan.html (Judul posting) Ket: sebelum tanda kurung harus diawali dengan SPASI terlebih dahulu. http://blablabla.com/2011/01/postingan.html adalah URL postingan yang akan dipromosikan. Atau anda ...
Baca selengkapnya