info/learnxinyminutes-docs
1
0
Fork 0
mirror of https://github.com/adambard/learnxinyminutes-docs.git synced 2025-08-10 08:44:28 +02:00
Code Issues Releases Wiki Activity

Create css-id

Browse Source
This commit is contained in:
Eka Y Saputra
2014-03-03 07:00:33 +07:00
parent 0f0ab04b27
commit 2f86f48005
1 changed files with 131 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
id-id/css-id.html.markdown
View File

@@ -7,182 +7,191 @@ lang: id-id
filename: learncss-id.css filename: learncss-id.css
--- ---
Pada mulanya, web tidak memiliki elemen visual, murni teks saja. Tapi seiring Pada mulanya, web tidak memiliki elemen visual, murni teks saja.
perkembangan peramban, laman web dengan elemen visual menjadi umum. Tapi seiring perkembangan peramban, laman web dengan elemen visual menjadi umum.
CSS adalah bahasa standar yang ada untuk menjaga keterpisahan antara CSS adalah bahasa standar yang ada untuk menjaga keterpisahan antara
konten (HTML) serta tampilan-dan-kesan laman web. konten (HTML) serta tampilan-dan-kesan laman web.
Singkatnya, fungsi CSS ialah menyajikan sintaks yang memampukan kita untuk Singkatnya, fungsi CSS ialah menyajikan sintaks yang memampukan kita
menyasar elemen tertentu dalam sebuah laman HTML dan menerapkan untuk memilih elemen tertentu dalam sebuah laman HTML
berbagai properti visual bagi elemen tersebut. dan menerapkan berbagai properti visual bagi elemen tersebut.
Seperti bahasa lainnya, CSS memiliki banyak versi. Di artikel ini, kita fokus Seperti bahasa lainnya, CSS memiliki banyak versi.
pada CSS2.0 yang meskipun bukan versi termutakhir namun paling kompatibel Di artikel ini, kita fokus pada CSS2.0 - yang meskipun bukan versi termutakhir
dan didukung secara luas. namun paling kompatibel dan didukung secara luas.
**CATATAN:** Lantaran keluaran dari CSS berwujud efek-efek visual, maka untuk **CATATAN:** Lantaran keluaran dari CSS berwujud efek-efek visual,
mempelajarinya, kita perlu mencoba berbagai hal dalam dunia olah CSS semisal maka untuk mempelajarinya, kita perlu mencoba berbagai hal dalam dunia olah CSS
[dabblet](http://dabblet.com/). Fokus utama artikel ini ialah pada sintaks dan sejumlah tips umum. semisal [dabblet](http://dabblet.com/).
Fokus utama artikel ini ialah pada sintaks dan sejumlah tips umum.
```css ```css
/* comments appear inside slash-asterisk, just like this line! */ /* komentar terletak diantara sepasang tanda garis miring dan bintang,
persis seperti larik ini! */
/* #################### /* ####################
## SELECTORS ## SELEKTOR
####################*/ ####################*/
/* Generally, the primary statement in CSS is very simple */ /* Secara garis besar, statemen utama dalam CSS sangat sederhana */
selector { property: value; /* more properties...*/ } selektor { properti: nilai; /* properti lainnya */ }
/* the selector is used to target an element on page. /* selektor berfungsi untuk memilih suatu elemen dalam sebuah laman.
You can target all elments on the page! */ Kita juga bisa memilih semua elemen di sebuah halaman! */
* { color:red; } * { color:red; }
/* /*
Given an element like this on the page: Dengan menentukan sebuah elemen seperti ini pada sebuah laman:
<div class='some-class class2' id='someId' attr='value' /> <div class='suatu-class class2' id='suatuId' attr='nilai' />
*/ */
/* you can target it by it's class name */ /* kita bisa memilih elemen berdasarkan nama class-nya */
.some-class { } .suatu-class { }
/*or by both classes! */ /*atau dengan dua class sekaligus! */
.some-class.class2 { } .suatu-class.class2 { }
/* or by it's tag name */ /* atau dengan nama tag-nya */
div { } div { }
/* or it's id */ /* atau id-nya */
#someId { } #suatuId { }
/* or by the fact that it has an attribute! */ /* atau - jika ada - dengan attribute-nya! */
[attr] { font-size:smaller; } [attr] { font-size:smaller; }
/* or that the attribute has a specific value */ /* atau jika attribute tersebut memiliki nilai spesifik */
[attr='value'] { font-size:smaller; } [attr='nilai'] { font-size:smaller; }
/* start with a value*/ /* dibuka dengan sebuah nilai*/
[attr^='val'] { font-size:smaller; } [attr^='nil'] { font-size:smaller; }
/* or ends with */ /* atau ditutup dengan nilai */
[attr$='ue'] { font-size:smaller; } [attr$='ai'] { font-size:smaller; }
/* or even contains a value */ /* atau bahkan disisipi nilai */
[attr~='lu'] { font-size:smaller; } [attr~='la'] { font-size:smaller; }
/* and more importantly you can combine these together -- there shouldn't be /* dan yang lebih penting lagi, kita bisa mengombinasikannya sekaligus
any spaaace between different parts because that makes it to have another dengan syarat tidak ada spasi diantara selektor-selektor. sebab adanya spasi
meaning.*/ akan membuat selektor itu memiliki makna yang berbeda.*/
div.some-class[attr$='ue'] { } div.suatu-class[attr$='ai'] { }
/* you can also select an element based on how it's parent is.*/ /* kita juga bisa memilih sebuah elemen berdasarkan posisi elemen induknya.*/
/*an element which is direct child of an element (selected the same way) */ /*sebuah elemen yang merupakan anak langsung dari elemen induk (diseleksi dng
div.some-parent > .class-name {} cara yang sama) */
div.suatu-induk > .-suatu-class {}
/* or any of it's parents in the tree */ /* atau salah satu induk elemennya dalam hirarki elemen */
/* the following basically means any element that has class "class-name" /* berikut ini dimaksudkan pada elemen manapun dengan class "class-entah" dan
and is child of a div with class name "some-parent" IN ANY DEPTH */ merupakan anak elemen dari suatu div dengan class "induk-entah" PADA LEVEL
div.some-parent .class-name {} HIRARKI MANAPUN */
div.suatu-induk .suatu-class {}
/* warning: the same selector wihout spaaace has another meaning. /* peringatan: selektor yang sama jika tanpa ada spasi akan bermakna lain.
can you say what? */ misalnya? */
div.some-parent.class-name {} div.suatu-induk.suatu-class {}
/* you also might choose to select an element based on it's direct /* kita juga bisa memilih sebuah elemen berdasarkan saudara elemen yang muncul
previous sibling */ tepat sebelumnya */
.i-am-before + .this-element { } .aku-muncul-tepat-sebelum + .elemen-ini { }
/*or any sibling before this */ /*atau saudara elemen manapun yang pernah muncul selang beberapa elemen
.i-am-any-before ~ .this-element {} sebelumnya */
.aku-pernah-muncul-sebelum ~ .elemen-ini {}
/* There are some pseudo classes that allows you to select an element /* Ada beberapa pseudo-class yang memampukan kita memilih suatu elemen
based on it's page behaviour (rather than page structure) */ berdasarkan perilaku lamannya (bukan struktur lamannya) */
/* for example for when an element is hovered */ /* semisal ketika sebuah elemen ditimpa hover (pointer mouse) */
:hover {} :hover {}
/* or a visited link*/ /* atau link yang sudah pernah diklik*/
:visited {} :visited {}
/* or not visited link*/ /* atau link yang belum pernah diklik*/
:link {} :link {}
/* or an input element which is focused */ /* atau elemen input yang menjadi fokus */
:focus {} :focus {}
/* #################### /* ####################
## PROPERTIES ## PROPERTI
####################*/ ####################*/
selector { selektor {
/* Units */ /* Unit */
width: 50%; /* in percent */ width: 50%; /* dalam persen */
font-size: 2em; /* times current font-size */ font-size: 2em; /* angka kali jumlah font-size saat ini */
width: 200px; /* in pixels */ width: 200px; /* dalam pixel */
font-size: 20pt; /* in points */ font-size: 20pt; /* dalam point */
width: 5cm; /* in centimeters */ width: 5cm; /* dalam centimeter */
width: 50mm; /* in millimeters */ width: 50mm; /* dalam milimeter */
width: 5in; /* in inches */ width: 5in; /* dalam inci */
/* Colors */ /* Warna */
background-color: #F6E; /* in short hex */ background-color: #F6E; /* dalam short hex */
background-color: #F262E2; /* in long hex format */ background-color: #F262E2; /* dalam format long hex */
background-color: tomato; /* can be a named color */ background-color: tomato; /* warna yang sudah punya konvensi nama */
background-color: rgb(255, 255, 255); /* in rgb */ background-color: rgb(255, 255, 255); /* dalam rgb */
background-color: rgb(10%, 20%, 50%); /* in rgb percent */ background-color: rgb(10%, 20%, 50%); /* dalam persen rgb */
background-color: rgba(255, 0, 0, 0.3); /* in semi-transparent rgb */ background-color: rgba(255, 0, 0, 0.3); /* dalam rgb semi-transparan*/
/* Images */ /* Gambar */
background-image: url(/path-to-image/image.jpg); background-image: url(/folder-gambar/image.jpg);
/* Fonts */ /* Font */
font-family: Arial; font-family: Arial;
font-family: "Courier New"; /* if name has spaaace it appears in double-quote */ font-family: "Courier New"; /* jika nama font memiliki spasi,
font-family: "Courier New", Trebuchet, Arial; /* if first one was not found ia diketik dalam tanda petik ganda */
browser uses the second font, and so forth */ font-family: "Courier New", Trebuchet, Arial; /* jika font pertama tidak
ditemukan, peramban menggunakan font berikutnya,
demikian secara berturut-turut */
} }
``` ```
## Usage ## Penggunaan
Save any CSS you want in a file with extension `.css`. Simpan semua CSS yang hendak kita pakai dengan ekstensi `.css`.
```xml ```xml
<!-- you need to include the css file in your page's <head>: --> <!-- kita harus menautkan file css itu ke laman di bagian <head>: -->
<link rel='stylesheet' type='text/css' href='filepath/filename.css' /> <link rel='stylesheet' type='text/css' href='folder/namafile.css' />
<!-- you can also include some CSS inline in your markup. However it is highly <!-- kita juga bisa mengetik CSS secara inline di dalam markup.
recommended to avoid this. --> Namun, sebisa mungkin metode ini dihindari. -->
<style> <style>
selector { property:value; } selektor { properti:nilai; }
</style> </style>
<!-- or directly set CSS properties on the element. <!-- atau langsung mengetik properti CSS pada sebuah elemen.
This has to be avoided as much as you can. --> Metode ini harus dihindari sebisa mungkin. -->
<div style='property:value;'> <div style='properti:nilai;'>
</div> </div>
``` ```
## Precedence ## Prioritas
As you noticed an element may be targetted by more than one selector. Kita tahu bahwa sebuah elemen bisa dipilih dengan lebih dari satu selektor,
and may have a property set on it in more than one. serta bisa diberi lebih dari satu properti.
In these cases, one of the rules takes precedence over others. Dalam kasus seperti ini, hanya salah satu properti saja yang akan diterapkan
pada elemen dengan prioritas tertentu.
Given the following CSS: Dengan susunan CSS:
```css ```css
/*A*/ /*A*/
p.class1[attr='value'] p.class1[attr='nilai']
/*B*/ /*B*/
p.class1 {} p.class1 {}
@@ -194,40 +203,41 @@ p.class2 {}
p {} p {}
/*E*/ /*E*/
p { property: value !important; } p { properti: nilai !important; }
``` ```
and the following markup: dan susunan markup:
```xml ```xml
<p style='/*F*/ property:value;' class='class1 class2' attr='value'> <p style='/*F*/ properti:nilai;' class='class1 class2' attr='nilai'>
</p> </p>
``` ```
The precedence of style is as followed: Maka prioritas penerapan style-nya ialah sbb.:
Remember, the precedence is for each **property**, not for the entire block. Ingat, penerapan ini untuk masing-masing properti **property**,
bukan keseluruhan larik.
* `E` has the highest precedence because of the keyword `!important`. * `E` prioritas pertama sebab ada kata `!important`.
It is recommended to avoid this unless it is strictly necessary to use. Dianjurkan untuk menghindari kata ini jika tidak benar-benar perlu.
* `F` is next, because it is inline style. * `F` prioritas kedua sebab ia diketik secara inline.
* `A` is next, because it is more "specific" than anything else. * `A` prioritas ketiga sebab selektor ini lebih spesifik dibanding yang lain.
more specific = more specifiers. here 3 specifiers: 1 tagname `p` + lebih spesifik = lebih banyak unsur selektor. contoh ini punya 3 unsur:
class name `class1` + 1 attribute `attr='value'` 1 tagname `p` + 1 nama class `class1` + 1 attribute `attr='nilai'`
* `C` is next. although it has the same specificness as `B` * `C` prioritas berikutnya sebab meski sama spesifik dengan `B` namun
but it appears last. ia muncul lebih akhir.
* Then is `B` * Lalu `B`
* and lastly is `D`. * dan terakhir baru `D`.
## Compatibility ## Kompatibilitas
Most of the features in CSS2 (and gradually in CSS3) are compatible across Sebagian besar fitur dalam CSS2 (dan lambat laun juga CSS3) kompatibel dengan
all browsers and devices. But it's always vital to have in mind the compatiblity semua peramban dan perangkat. Namun selalu vital untuk memastikan kompatibilitas
of what you use in CSS with your target browsers. unsur dan nilai yang kita ketikkan dalam CSS dengan peramban yang ditargetkan.
[QuirksMode CSS](http://www.quirksmode.org/css/) is one of the best sources for this. [QuirksMode CSS](http://www.quirksmode.org/css/) ialah salah satu sumber terbaik untuk memeriksa kompatibilitas CSS dan peramban.
## Further Reading ## Referensi Lanjut
* [Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/) * [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/) * [QuirksMode CSS](http://www.quirksmode.org/css/)