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

Ini baris pertama

Ini baris kedua

Ini baris ketiga

4

Contoh penggunaan - after

HTML + CSS

Ini baris pertama

Ini baris kedua

Ini baris ketiga

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



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">

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;} 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:

…

Generic selector – untuk menetapkan style yang sama pada tag yang berbeda  Contoh style: .really-big { … }  Contoh penggunaan:

…

…

15

Jenis-jenis selector (lanjutan) Id selector – untuk menetapkan style pada suatu elemen dalam dokumen  Contoh style: #section14 { … }  Contoh penggunaan:

…

Pseudo classes – style untuk behavior  Contoh: hover, focus, dll.

16

<span> dan