summaryrefslogtreecommitdiffhomepage
path: root/id-id
diff options
context:
space:
mode:
authorNami-Doc <vendethiel@hotmail.fr>2014-03-03 12:17:41 +0100
committerNami-Doc <vendethiel@hotmail.fr>2014-03-03 12:17:41 +0100
commit8985d57e3f55c89757bb2db41b61af244528119c (patch)
tree2c6f17817ac77e52d042234125ae9f8afddff610 /id-id
parentff5e64f4043fa06461ef422885444e837bfab6c9 (diff)
parent2f86f48005cf4d2168529235c5747448ef3f0932 (diff)
Merge pull request #554 from ekajogja/master
[css/id] created css-id
Diffstat (limited to 'id-id')
-rw-r--r--id-id/css-id.html.markdown245
1 files changed, 245 insertions, 0 deletions
diff --git a/id-id/css-id.html.markdown b/id-id/css-id.html.markdown
new file mode 100644
index 00000000..1013a623
--- /dev/null
+++ b/id-id/css-id.html.markdown
@@ -0,0 +1,245 @@
+language: css
+contributors:
+ - ["Mohammad Valipour", "https://github.com/mvalipour"]
+translators:
+ - ["Eka Y Saputra", "http://github.com/ekajogja"]
+lang: id-id
+filename: learncss-id.css
+---
+
+Pada mulanya, web tidak memiliki elemen visual, murni teks saja.
+Tapi seiring perkembangan peramban, laman web dengan elemen visual menjadi umum.
+CSS adalah bahasa standar yang ada untuk menjaga keterpisahan antara
+konten (HTML) serta tampilan-dan-kesan laman web.
+
+Singkatnya, fungsi CSS ialah menyajikan sintaks yang memampukan kita
+untuk memilih elemen tertentu dalam sebuah laman HTML
+dan menerapkan berbagai properti visual bagi elemen tersebut.
+
+Seperti bahasa lainnya, CSS memiliki banyak versi.
+Di artikel ini, kita fokus pada CSS2.0 - yang meskipun bukan versi termutakhir
+namun paling kompatibel dan didukung secara luas.
+
+**CATATAN:** Lantaran keluaran dari CSS berwujud efek-efek visual,
+maka untuk mempelajarinya, kita perlu mencoba berbagai hal dalam dunia olah CSS
+semisal [dabblet](http://dabblet.com/).
+Fokus utama artikel ini ialah pada sintaks dan sejumlah tips umum.
+
+
+```css
+/* komentar terletak diantara sepasang tanda garis miring dan bintang,
+persis seperti larik ini! */
+
+/* ####################
+ ## SELEKTOR
+ ####################*/
+
+/* Secara garis besar, statemen utama dalam CSS sangat sederhana */
+selektor { properti: nilai; /* properti lainnya */ }
+
+/* selektor berfungsi untuk memilih suatu elemen dalam sebuah laman.
+
+Kita juga bisa memilih semua elemen di sebuah halaman! */
+* { color:red; }
+
+/*
+Dengan menentukan sebuah elemen seperti ini pada sebuah laman:
+
+<div class='suatu-class class2' id='suatuId' attr='nilai' />
+*/
+
+/* kita bisa memilih elemen berdasarkan nama class-nya */
+.suatu-class { }
+
+/*atau dengan dua class sekaligus! */
+.suatu-class.class2 { }
+
+/* atau dengan nama tag-nya */
+div { }
+
+/* atau id-nya */
+#suatuId { }
+
+/* atau - jika ada - dengan attribute-nya! */
+[attr] { font-size:smaller; }
+
+/* atau jika attribute tersebut memiliki nilai spesifik */
+[attr='nilai'] { font-size:smaller; }
+
+/* dibuka dengan sebuah nilai*/
+[attr^='nil'] { font-size:smaller; }
+
+/* atau ditutup dengan nilai */
+[attr$='ai'] { font-size:smaller; }
+
+/* atau bahkan disisipi nilai */
+[attr~='la'] { font-size:smaller; }
+
+
+/* dan yang lebih penting lagi, kita bisa mengombinasikannya sekaligus
+dengan syarat tidak ada spasi diantara selektor-selektor. sebab adanya spasi
+akan membuat selektor itu memiliki makna yang berbeda.*/
+div.suatu-class[attr$='ai'] { }
+
+/* kita juga bisa memilih sebuah elemen berdasarkan posisi elemen induknya.*/
+
+/*sebuah elemen yang merupakan anak langsung dari elemen induk (diseleksi dng
+cara yang sama) */
+div.suatu-induk > .-suatu-class {}
+
+/* atau salah satu induk elemennya dalam hirarki elemen */
+/* berikut ini dimaksudkan pada elemen manapun dengan class "class-entah" dan
+merupakan anak elemen dari suatu div dengan class "induk-entah" PADA LEVEL
+HIRARKI MANAPUN */
+div.suatu-induk .suatu-class {}
+
+/* peringatan: selektor yang sama jika tanpa ada spasi akan bermakna lain.
+misalnya? */
+div.suatu-induk.suatu-class {}
+
+/* kita juga bisa memilih sebuah elemen berdasarkan saudara elemen yang muncul
+tepat sebelumnya */
+.aku-muncul-tepat-sebelum + .elemen-ini { }
+
+/*atau saudara elemen manapun yang pernah muncul selang beberapa elemen
+sebelumnya */
+.aku-pernah-muncul-sebelum ~ .elemen-ini {}
+
+/* Ada beberapa pseudo-class yang memampukan kita memilih suatu elemen
+berdasarkan perilaku lamannya (bukan struktur lamannya) */
+
+/* semisal ketika sebuah elemen ditimpa hover (pointer mouse) */
+:hover {}
+
+/* atau link yang sudah pernah diklik*/
+:visited {}
+
+/* atau link yang belum pernah diklik*/
+:link {}
+
+/* atau elemen input yang menjadi fokus */
+:focus {}
+
+
+/* ####################
+ ## PROPERTI
+ ####################*/
+
+selektor {
+
+ /* Unit */
+ width: 50%; /* dalam persen */
+ font-size: 2em; /* angka kali jumlah font-size saat ini */
+ width: 200px; /* dalam pixel */
+ font-size: 20pt; /* dalam point */
+ width: 5cm; /* dalam centimeter */
+ width: 50mm; /* dalam milimeter */
+ width: 5in; /* dalam inci */
+
+ /* Warna */
+ background-color: #F6E; /* dalam short hex */
+ background-color: #F262E2; /* dalam format long hex */
+ background-color: tomato; /* warna yang sudah punya konvensi nama */
+ background-color: rgb(255, 255, 255); /* dalam rgb */
+ background-color: rgb(10%, 20%, 50%); /* dalam persen rgb */
+ background-color: rgba(255, 0, 0, 0.3); /* dalam rgb semi-transparan*/
+
+ /* Gambar */
+ background-image: url(/folder-gambar/image.jpg);
+
+ /* Font */
+ font-family: Arial;
+ font-family: "Courier New"; /* jika nama font memiliki spasi,
+ ia diketik dalam tanda petik ganda */
+ font-family: "Courier New", Trebuchet, Arial; /* jika font pertama tidak
+ ditemukan, peramban menggunakan font berikutnya,
+ demikian secara berturut-turut */
+}
+
+```
+
+## Penggunaan
+
+Simpan semua CSS yang hendak kita pakai dengan ekstensi `.css`.
+
+```xml
+<!-- kita harus menautkan file css itu ke laman di bagian <head>: -->
+<link rel='stylesheet' type='text/css' href='folder/namafile.css' />
+
+<!-- kita juga bisa mengetik CSS secara inline di dalam markup.
+Namun, sebisa mungkin metode ini dihindari. -->
+<style>
+ selektor { properti:nilai; }
+</style>
+
+<!-- atau langsung mengetik properti CSS pada sebuah elemen.
+Metode ini harus dihindari sebisa mungkin. -->
+<div style='properti:nilai;'>
+</div>
+
+```
+
+## Prioritas
+
+Kita tahu bahwa sebuah elemen bisa dipilih dengan lebih dari satu selektor,
+serta bisa diberi lebih dari satu properti.
+Dalam kasus seperti ini, hanya salah satu properti saja yang akan diterapkan
+pada elemen dengan prioritas tertentu.
+
+Dengan susunan CSS:
+
+```css
+
+/*A*/
+p.class1[attr='nilai']
+
+/*B*/
+p.class1 {}
+
+/*C*/
+p.class2 {}
+
+/*D*/
+p {}
+
+/*E*/
+p { properti: nilai !important; }
+
+```
+
+dan susunan markup:
+
+```xml
+<p style='/*F*/ properti:nilai;' class='class1 class2' attr='nilai'>
+</p>
+```
+
+Maka prioritas penerapan style-nya ialah sbb.:
+Ingat, penerapan ini untuk masing-masing properti **property**,
+bukan keseluruhan larik.
+
+* `E` prioritas pertama sebab ada kata `!important`.
+ Dianjurkan untuk menghindari kata ini jika tidak benar-benar perlu.
+* `F` prioritas kedua sebab ia diketik secara inline.
+* `A` prioritas ketiga sebab selektor ini lebih spesifik dibanding yang lain.
+ lebih spesifik = lebih banyak unsur selektor. contoh ini punya 3 unsur:
+ 1 tagname `p` + 1 nama class `class1` + 1 attribute `attr='nilai'`
+* `C` prioritas berikutnya sebab meski sama spesifik dengan `B` namun
+ ia muncul lebih akhir.
+* Lalu `B`
+* dan terakhir baru `D`.
+
+## Kompatibilitas
+
+Sebagian besar fitur dalam CSS2 (dan lambat laun juga CSS3) kompatibel dengan
+semua peramban dan perangkat. Namun selalu vital untuk memastikan kompatibilitas
+unsur dan nilai yang kita ketikkan dalam CSS dengan peramban yang ditargetkan.
+
+[QuirksMode CSS](http://www.quirksmode.org/css/) ialah salah satu sumber terbaik untuk memeriksa kompatibilitas CSS dan peramban.
+
+## Referensi Lanjut
+
+* [Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/)
+* [QuirksMode CSS](http://www.quirksmode.org/css/)
+* [Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context)
+