Cascading Style Sheets: Perbedaan antara revisi
Konten dihapus Konten ditambahkan
→Contoh Berkas CSS: →Contoh Berkas CSS: Edit komen sedikit Tag: Suntingan perangkat seluler Suntingan peramban seluler Suntingan seluler lanjutan |
→Penulisan: Merapihkan bagian Shorthand CSS |
||
Baris 26:
== Penulisan ==
Saat masuk pada bagian CSS, sering dijumpai [[kode]] sebagai berikut:
h1 {
Ada tiga metode penulisan CSS, yaitu :<ref name="css_html">Untung Rahardja, Augury El Rayeb, & Asep Saefullah (2009). ''Siapa saja bisa membuat website dengan CSS dan HTML'', halaman 37-41. Andi Yogyakarta.</ref>▼
color: #0789de;
}
Bagian pertama sebelum tanda '{}' dinamakan ''selector'', sedangkan yang diapit oleh '{}' disebut ''declaration'' yang terdiri dari ''dua'' unsur, yaitu ''property'' dan ''value''.''Selector'' dalam pernyataan di atas adalah h1, sedangkan ''color'' adalah ''property'', dan #0789de adalah ''value.''<ref>Untung Julianto, ''Modifikator Blogger + CD'', halaman 22. Elex Media Komputindo.</ref>
▲
==== Inline Style Sheet ====
CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut '''style="..."''' dalam tag HTML tersebut.<ref name="css_html">Untung Rahardja, Augury El Rayeb, & Asep Saefullah (2009). ''Siapa saja bisa membuat website dengan CSS dan HTML'', halaman 37-41. Andi Yogyakarta.</ref> Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan memengaruhi tag HTML yang lain.<ref name="css_html" />
Contoh penulisan CSS dengan metode '''Inline Style Sheet'''
Baris 74 ⟶ 80:
==== External CSS ====
CSS didefinisikan dengan disimpan di berkas yang berbeda. Ini dapat mempermudah dalam perawatan dan dapat digunakan di semua berkas HTML sehingga memudahkan seorang pengembang web untuk mengembangkan situs web miliknya. Untuk menautkan berkas CSS ke suatu berkas HTML kita hanya perlu menggunakan kode <source lang="html"><link href="lokasiberkas.css" rel="stylesheet"></source>
=== Shorthand CSS ===
Ada beberapa properti CSS yang dapat disingkat, biasanya dipanggil dengan Shorthand CSS. Teknik shorthand adalah cara mempersingkat penulisan kode CSS yang memungkinkan untuk menetapkan nilai beberapa property secara bersamaan. Teknik ini dapat menghemat karakter, menghemat energi, dan tentu saja menghemat waktu. Kode jadi terlihat lebih rapi, efisien, dan sering kali lebih mudah dibaca.
Baris 104 ⟶ 105:
<syntaxhighlight lang="css">
margin: 3px 5px 7px 10px;
</syntaxhighlight>Artinya:<syntaxhighlight lang="css">
margin-top: 3px;
margin-right: 3px;
margin-bottom: 3px;
margin-left: 3px;
</syntaxhighlight>
==== Padding ====
<syntaxhighlight lang="css">
padding: 3px 5px 7px 10px;
</syntaxhighlight>Artinya:<syntaxhighlight lang="css">
padding-top: 3px;
padding-right: 5px;
padding-bottom: 7px;
padding-left: 10px;
</syntaxhighlight>
==== Font ====
<syntaxhighlight lang="css">
font: italic bold 14px/30px Arial;
</syntaxhighlight>Artinya:<syntaxhighlight lang="css">
font-style: italic;
font-weight: bold;
font-size: 14px;
line-height: 30px;
font-family: Arial;
</syntaxhighlight>
==== Background ====
<syntaxhighlight lang="css">
background: #cc0000 url('igniel.jpg') no-repeat top center;
</syntaxhighlight>Artinya:<syntaxhighlight lang="css">
background-color: #cc0000;
background-image: url('igniel.jpg');
background-repeat: no-repeat;
background-position: top center;
</syntaxhighlight>
==== Border ====
<syntaxhighlight lang="css">
border: 3px solid #0000cc;
</syntaxhighlight>Artinya:<syntaxhighlight lang="css">
border-width: 5px;
border-style: solid;
border-color: #0000cc;
</syntaxhighlight>
==== List ====
<syntaxhighlight lang="css">
list-style: disc inside url('dot.gif');
</syntaxhighlight>Artinya:<syntaxhighlight lang="css">
list-style-type: disc;
list-style-position: inside;
list-style-image: url('dot.gif');
</syntaxhighlight>
== Dukungan dari peselancar web ==
Baris 138 ⟶ 168:
CSS dahulunya dibuat hanya untuk mempercantik halaman web. Namun, seiring perkembangan waktu CSS mulai diadopsi oleh perangkat lunak lain.
[[GTK]] adalah peralatan gawit lintas platform yang menggunakan CSS untuk memberi gaya pada setiap widget. GTK
[[Qt]] merupakan toolkit widget dan biasa dipakai untuk membuat aplikasi lintas platform. Qt juga menggunakan CSS untuk mengkonfigurasi tema.
| |||