Pemrograman berbasis Web dan Multimedia Web and Multimedia based Programming K2133 1
CASCADING STYLE SHEET 2
Pendahuluan Spesifikasi CSS1 dibuat tahun 1996 CSS2 di-release tahun 1998 CSS3 dalam pengembangan CSS menyediakan sarana untuk mengatur (control) dan mengubah (change) tampilan (presentation) dari dokumen HTML CSS secara teknis bukan HTML, tapi bisa dimasukkan (embedded) ke dalam dokumen HTML Style sheet memungkinkan untuk memaksakan (impose) gaya standar (standard style) untuk dokumen secara menyeluruh, atau bahkan beberapa sekaligus Style ditetapkan pada suatu tag dengan nilai property-nya 3
Contoh penggunaan - before Murni HTML <table> <tr><td bgcolor="#ffcc00" align="left"><font face="arial" size="2" color="red"><b>ini baris pertama</b></font> </td></tr> <tr><td bgcolor="#ffcc00" align="left"><font face="arial" size="2" color="red"><b>ini baris kedua</b></font> </td></tr> <tr><td bgcolor="#ffcc00" align="left"><font face="arial" size="2" color="red"><b>ini baris ketiga</b></font> </td></tr> </table> 4
Contoh penggunaan - after HTML + CSS <table> <tr><td class="subtext">ini baris pertama</td></tr> <tr><td class="subtext">ini baris kedua</td></tr> <tr><td class="subtext">ini baris ketiga</td></tr> </table> 5
Kemampuan CSS Dapat mendefinisikan tampilan di satu tempat saja daripada secara berulangulang Kemudahan mengubah tampilan setelah halaman selesai dibuat Dapat mendefinisikan tampilan seperti ukuran huruf, layout, dan atribut serupa, dengan akurasi setingkat word processor Dapat mendefinisikan layer yang diletakkan di atas elemen lain 6
Tingkatan style sheets Ada tiga tingkatan style sheets Inline ditetapkan pada tag secara khusus dan hanya berlaku untuk tag itu ini adalah gaya yang lebih rinci (fine grain style), yang bertentangan dengan tujuan dari style sheets, yaitu gaya yang seragam Document-level berlaku untuk dokumen secara menyeluruh External bisa diberlakukan pada beberapa dokumen Kalau ada lebih dari satu tingkatan tingkatan yang lebih rendah yang didahulukan 7
Tingkatan style sheets (lanjutan) Tempat deklarasi Inline style sheets muncul di dalam tag Document-level style sheets muncul di bagian head dari dokumen External style sheets ada di dalam file terpisah, bisa ada di mana saja di internet Dalam bentuk file teks dengan tipe MIME text/css 8
Melink external stylesheet Desain filosopinya mudah kita ingin memisahkan antara isi (content) dan gaya (style) Aturan file Harus memiliki ekstensi.css File teks berisi aturan style dan comment Cara melink Tuliskan sebuah link di bagian head <link rel="stylesheet" type="text/css" href="./style.css" media="all" /> Bisa divalidasi http://jigsaw.w3.org/css-validator/ 9
Format spesifikasi style Inline Ditulis pada tag dalam nilai dari attribut style Contoh style="property1: value1; property2: value2; " Document-level Ditulis di dalam tag <style> dengan attribut style diisi nilai "text/css" dan menggunakan HTML comment Contoh <style type="text/css"> <! - rule list --> </style> 10
Format spesifikasi style (lanjutan) External stylesheet Berisi daftar aturan yang ditulis di dalam tag <style> seperti halnya document-level hanya tanpa atribut type Contoh <style type = "text/css" > @import url("./style.css"); h1 {color: gray;} </style> Di dalam <style> bisa diperintahkan untuk mengimpor external stylesheet (contoh lihat atas) Bentuk aturan: selector {list of property/values} 11
Mengapa disebut cascading? One can include (import) several style sheets within an xhtml document. The rules are combined. Conflicting rules are resolved. Combining and resolving conflicting rules is the process that is called cascading. The conditions by each conflicting rules are resolved are not in themselves very complicated but are beyond the scope of our discussion. 12
Aturan-aturan dalam CSS Struktur dokumen Dokumen HTML memiliki struktur dokumen berbentuk tree/hierarchical CSS memungkinkan untuk menentukan style terhadap struktur tersebut secara bersamaan Nilai dan satuan Warna bisa ditulis dengan nama atau nilai rgb Panjang bisa menggunakan satuan in, cm, mm, pt, pc (absolute) atau em, ex, px (relative) 13
Aturan-aturan dalam CSS Font Ada lima generic font families: serif, sans-serif, monospace, cursive, fantasy akhiri dengan generic Contoh: h1 { font-family: Times, 'Times New Roman', Georgia, serif; } Basic visual formatting Element box Colors Background images Positioning 14
Jenis-jenis selector Simple nama tag dalam dokumen HTML Class selector untuk menetapkan style yang berbeda pada tag yang sama Contoh style: p.narrow { } Contoh penggunaan: <p class="narrow"> </p> Generic selector untuk menetapkan style yang sama pada tag yang berbeda Contoh style:.really-big { } Contoh penggunaan: <h1 class="really-big"> </h1> <p class="really-big"> </p> 15
Jenis-jenis selector (lanjutan) Id selector untuk menetapkan style pada suatu elemen dalam dokumen Contoh style: #section14 { } Contoh penggunaan: <h2 id="section14"> </h2> Pseudo classes style untuk behavior Contoh: hover, focus, dll. 16
<span> dan <div> Contoh <span> <p> Now is the <span class="bigred"> best time </span> ever!</p> Penggunaan <div> Untuk membuat suatu sesi atau divisi dalam dokumen HTML di mana style akan ditetapkan <div> berbentuk kotak, di mana posisinya bisa relatif atau absolut 17
Konflik dalam resolusi style Menurut tingkatan style Inline-style didahulukan daripada document-level Document-level didahulukan daripada external-level Dalam satu tingkatan style Style sheets bisa mempunyai sumber berbeda Pembuat dokumen bisa menentukan style Pengguna, via setting browser, bisa menentukan style 18