diff options
Diffstat (limited to 'id-id')
| -rw-r--r-- | id-id/css-id.html.markdown | 246 |
1 files changed, 246 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..456dfafe --- /dev/null +++ b/id-id/css-id.html.markdown @@ -0,0 +1,246 @@ +--- +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**, +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) + |