T IPE - TIPE M EDIA - Diktat CSS - UDiNus Repository modul5teori CSS

T

IPE

M

E DIA

Output CSS dapat diarahkan ke media layar, printer, atau perangkat genggam. Dengan pengaturan tipe media ini, sebuah halaman dapat mempunyai sebuah layout untuk screen (layar), sebuah untuk printer (cetak), dan sebuah untuk perangkat genggam, dan lain-lain.

Beberapa properti CSS dirancang hanya untuk media tertentu. Contohnya, properti voice-family dirancang untuk user agen aural. Beberapa yang lain dirancang untuk berbagai tipe media. Contohnya, properti font-size dapat digunakan untuk media layar dan cetak yang mungkin dengan nilai yang berbeda. Biasanya sebuah dokumen pada layar memerlukan ukuran huruf yang lebih besar daripada ukuran di media kertas. Selain itu, jenis huruf sans-serif lebih mudah dibaca pada media layar, sementara untuk media kertas lebih mudah dibaca jika menggunakan jenis huruf serif.

P

ENG ATU RAN D ENG AN

@

ME DIA

R

U LE

Untuk membuat kode pengaturan yang berbeda untuk setiap media dalam satu style sheet yang sama dapat menggunakan @media rule. Berikut ini conton pengaturan gaya yang berbeda untuk media layar yang akan menampilkan teks dengan jenis huruf Verdana dan ukuran huruf 14px, sedangkan untuk media cetak menggunakan ukuran 10px dengan jenis huruf Times. Semua media diatur mencetak teks dengan huruf tebal.

@media screen {

p.test {font-family:verdana,sans-serif; font-size:14px;} }

@media print {

p.test {font-family:times,serif; font-size:10px;} } @media screen,print { p.test {font-weight:bold;} } </style> </head>

Diktat Pemrograman Web ^{Tipe-tipe Media}

<body> .... </body> </html> Beberapa Tipe Media

M e dia Ty pe D escr ip t ion

all Used for all m edia t ype devices

aural Used for speech and sound synt hesizers

braille Used for braille t act ile feedback devices

em bossed Used for paged braille printers

handheld Used for sm all or handheld devices

print Used for printers

proj ect ion Used for proj ected presentat ions, like slides

screen Used for com puter screens

t t y Used for m edia using a fixed-pit ch character grid, like

t elet ypes and term inals

Diktat Pemrograman Web ^{Selektor Attribute}

SELEKTOR ATTRIBUTE

Selain elemen HTML, class, dan ID, sebuah selektor dalam CSS dapat berupa atribut dari suatu elemen HTML. Artinya, atribut-atribut elemen HTML dapat juga diatur penampilannya menggunakan kode CSS. Dalam hal ini perlu diketahui bahwa untuk IE 7 dan IE 8 hanya akan mendukung apabila deklarasi DOCTYPE! digunakan. Fitur ini tidak didukung oleh IE versi 6 kebawah.

Contoh berikut ini mengatur tampilan dari atribut title: <!DOCTYPE html> <html> <head> <style> [title] { color:blue; } </style> </head> <body>

<h2>Will apply to:</h2>

<h1 title="Hello world">Hello world</h1>

<a title="W3Schools" href="http://w3schools.com">W3Schools</a> <hr>

<h2>Will not apply to:</h2> <p>Hello!</p>

</body> </html> Hasilnya pada browser:

Diktat Pemrograman Web ^{Selektor Attribute}

N

ILA I

S

ELE KTO R

A

TTR IB UTE

Selektor attribute dapat diatur nilainya seperti contoh dibawah ini: <!DOCTYPE html> <html> <head> <style> [title=W3Schools] {

border:5px solid green; }

</style> </head> <body>

<h2>Will apply to:</h2>

<a title="W3Schools" href="http://w3schools.com">W3Schools</a> <hr>

<h2>Will not apply to:</h2> <p title="greeting">Hi!</p>

<a class="W3Schools" href="http://w3schools.com">W3Schools</a> </body>

</html> Hasilnya di browser:

S

ELE KTO R

A

TTR IB UTE YA NG

B

ER NIL AI

B

ANY AK

Contoh berikutnya mengatur tampilan elemen HTML yang memiliki atribut dengan nilai yang mengandung nilai tertentu:

<!DOCTYPE html> <html>

Diktat Pemrograman Web ^{Selektor Attribute} <head> <style> [title~=hello] { color:blue; } </style> </head> <body>

<h2>Will apply to:</h2>

<h1 title="hello world">Hello world</h1>

<p title="student hello">Hello CSS students!</p> <hr>

<h2>Will not apply to:</h2>

<p title="student">Hi CSS students!</p> </body>

</html>

Hasilnya pada layar browser:

Contoh berikutnya akan mengatur tampilan semua elemen dengan atribut lang yang mengandung nilai tertentu:

<!DOCTYPE html> <html> <head> <style> [lang|=en] { color:blue; } </style> </head>

Diktat Pemrograman Web ^{Selektor Attribute}

<body>

<h2>Will apply to:</h2> <p lang="en">Hello!</p> <p lang="en-us">Hi!</p> <p lang="en-gb">Ello!</p> <hr>

<h2>Will not apply to:</h2> <p lang="us">Hi!</p> <p lang="no">Hei!</p> </body>

</html> Hasilnya pada browser:

M

ENG ATU R

P

ENA MP ILA N

F

ORM

Selektor attribute ini terutama bermanfaat untuk mengatur tampilan suatu form tanpa class atau ID. Contoh:

<!DOCTYPE html> <html> <head> <style> input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; } input[type="button"] { width:120px; margin-left:35px; display:block; }

Diktat Pemrograman Web ^{Selektor Attribute}

</style> </head> <body>

Firstname:<input type="text" name="Name" value="Peter" size="20"> Lastname:<input type="text" name="Name" value="Griffin" size="20"> <input type="button" value="Example Button">

</form> </body> </html>

Diktat Pemrograman Web ^{Pengecualian CSS}

PENGECUALIAN CSS

Meskipun CSS dapat berkolaborasi secara baik dengan HTML serta tampil di berbagai jenis browser, disini terdapat beberapa teknologi yang sebaiknya tidak digunakan bersama CSS. Dibawah ini adalah beberapa teknologi tersebut beserta alasan menghindari pemakaiannya bersama-sama CSS

A

TRI BUT

B

E HAV IO R

I

N TE RNE T

E

XPL ORE R

Browser Internet Explorer versi 5 memperkenalkan sebuah atribut behavior. Atribut ini untuk menambahkan beberapa perilaku pada suatu elemen HTML dengan menggunakan perintah CSS. Atribut ini hanya didukung oleh Internet Explorer, jadi jika ditampilkan menggunakan browser lain tidak akan bekerja. Berikut ini contoh dokumen HTML yang menggunakan atribut behavior pada elemen <h1>:

<html> <head> <title></title> <style type=”text/css”> h1 {behavior:url(behave.htc);} </style> </head> <body>

<h1>Lewatkan mouse diatas teks ini</h1> </body>

</html>

File dokumen HTML diatas menggunakan dokumen XML ‘behave.htc’ yang berisi: <attach for=”element” event=”onmouseover” handler=”hig_lite” />

<attach for=”element” event=”onmouseout” handler=”low_lite” /> <script type=”text/javascript”> function hig_lite(){ element.style.color=’red’; } function low_lite(){ element.style.color=’blue’; } </script>

Diktat Pemrograman Web ^Referensi

REFERENSI

Dalam dokumen Diktat CSS - UDiNus Repository modul5teori CSS (Halaman 71-79)