Your SlideShare is downloading. ×
Desain Web 2: Pertemuan Keempat Selective Styling
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Desain Web 2: Pertemuan Keempat Selective Styling

1,062
views

Published on

Selective Styling

Selective Styling

Published in: Education, Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,062
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
129
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Desain Web II Selective Styling Pertemuan ke-4 Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 2. Agenda  Pohon Silsilah  Mendefinisikan Elemen style berdasarkan  Mendefinisikan atribut tag Style berdasarkan  CSS3: Kueri media konteksnya  Properti turunan  Pseudo-class  Deklarasi !  Pseudo-elemen important  Menentukan urutan cascading Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 3. Pohon Silsilah Elemen  Tag yang berada di dalam tag lain disebut sebagai tag bersarang (nested tag) <h1><strong>BBM</strong> untuk <em>Android</em> Segera  Hadir?</h1>  Elemen luar <h1> disebut parent dan elemen <strong> disebut child  Tag child disebut juga sebagai tag turunan (descendant) dari tag parent  Dua tag yang berada di dalam parent yang sama disebut siblings  <strong> adalah preciding sibling dari <em>  <em> adalah adjacent sibling dari <strong> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 4. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 5. Mendefinisikan Style berdasarkan konteksnya  Dengan adanya style kontekstual suatu elemen dapat ditampilkan secara khusus berdasarkan parent dan sibling-nya  Sebagai contoh: suatu elemen tag memiliki suatu style tertentu ketika berada di dalam header dan memiliki style yang berbeda ketika berada di dalam sub header Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 6. Combinator Selectors Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 7. <!DOCTYPE html><html lang="id"> Contoh1: a b c<head>   <meta charset="utf­8">   <title>BBM untuk Android segera Hadir?</title>   <style type="text/css" media="all">      article.copy h1 em {         color: red;         font­weight: bold;      }   </style></head><body>   <article class="copy">      <h1><em>BBM</em> untuk Android Segera Hadir?</h1>      <h2>by <em>Deliusno</em></h2>      <p>Beberapa waktu lalu, tersiar sebuah kabar yang menyatakan kalau RIM akan membagikan aplikasi BlackBerry Messenger (<em>BBM</em>) untuk perangkat lain selain BlackBerry. Kini, kabar tersebut tampaknya akan segera menjadi kenyataan. Melalui websitenya, TechRadar menghadirkan screenshot pertama <em>BBM</em> untuk Android!      </p>   </article></body></html> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 8. Contoh1: a b c Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 9. <!DOCTYPE html><html lang="id"> Contoh2: a * b<head>   <meta charset="utf­8">   <title>BBM untuk Android segera Hadir?</title>   <style type="text/css" media="all">      article.copy * em {         color: red;         font­weight: bold;      }   </style></head><body>   <article class="copy">      <h1><em>BBM</em> untuk Android Segera Hadir?</h1>      <h2>by <em>Deliusno</em></h2>      <p>Beberapa waktu lalu, tersiar sebuah kabar yang menyatakan kalau RIM akan membagikan aplikasi BlackBerry Messenger (<em>BBM</em>) untuk perangkat lain selain BlackBerry. Kini, kabar tersebut tampaknya akan segera menjadi kenyataan. Melalui websitenya, TechRadar menghadirkan screenshot pertama <em>BBM</em> untuk Android!      </p>   </article></body></html> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 10. Contoh2: a * b Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 11. <!DOCTYPE html><html lang="id"> Contoh3: a > b<head>   <meta charset="utf­8">   <title>BBM untuk Android segera Hadir?</title>   <style type="text/css" media="all">      article.copy > p > em {         color: red;         font­weight: bold;      }   </style></head><body>   <article class="copy">      <h1><em>BBM</em> untuk Android Segera Hadir?</h1>      <h2>by <em>Deliusno</em></h2>      <p>Beberapa waktu lalu, tersiar sebuah kabar yang menyatakan kalau RIM akan membagikan aplikasi BlackBerry Messenger (<em>BBM</em>) untuk perangkat lain selain BlackBerry. Kini, kabar tersebut tampaknya akan segera menjadi kenyataan. Melalui websitenya, TechRadar menghadirkan screenshot pertama <em>BBM</em> untuk Android!      </p>   </article></body></html> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 12. Contoh3: a > b Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 13. <!DOCTYPE html><html lang="id"><head>   <meta charset="utf­8"> Contoh4: a + b   <title>BBM untuk Android segera Hadir?</title>   <style type="text/css" media="all">      article.copy p + p em {         color: red;         font­weight: bold;      }   </style></head><body>   <article class="copy">      <h1><em>BBM</em> untuk Android Segera Hadir?</h1>      <h2>by <em>Deliusno</em></h2>      <p>Beberapa waktu lalu, tersiar sebuah kabar yang menyatakan kalau RIM akan membagikan aplikasi BlackBerry Messenger (<em>BBM</em>) untuk perangkat lain selain BlackBerry.</p>      <p>Kini, kabar tersebut tampaknya akan segera menjadi kenyataan. Melalui websitenya, TechRadar menghadirkan screenshot pertama <em>BBM</em> untuk Android!</p>      <blockquote>Indonesia adalah konsumen <em>BBM</em> terbesar di Asia Tenggara</blockquote>      <p>Peluang bagi developer untuk membuat aplikasi <em>BBM</em> sebanyak­banyak karena pasar yang besar.</p>   </article></body></html> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 14. Contoh4: a + b Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 15. <!DOCTYPE html><html lang="id"><head>   <meta charset="utf­8"> Contoh5: a ~ b   <title>BBM untuk Android segera Hadir?</title>   <style type="text/css" media="all">      article.copy p ~ p em {         color: red;         font­weight: bold;      }   </style></head><body>   <article class="copy">      <h1><em>BBM</em> untuk Android Segera Hadir?</h1>      <h2>by <em>Deliusno</em></h2>      <p>Beberapa waktu lalu, tersiar sebuah kabar yang menyatakan kalau RIM akan membagikan aplikasi BlackBerry Messenger (<em>BBM</em>) untuk perangkat lain selain BlackBerry.</p>      <p>Kini, kabar tersebut tampaknya akan segera menjadi kenyataan. Melalui websitenya, TechRadar menghadirkan screenshot pertama <em>BBM</em> untuk Android!</p>      <blockquote>Indonesia adalah konsumen <em>BBM</em> terbesar di Asia Tenggara</blockquote>      <p>Peluang bagi developer untuk membuat aplikasi <em>BBM</em> sebanyak­banyak karena pasar yang besar.</p>   </article></body></html> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 16. Contoh5: a ~ b Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 17. Pseudo-Classes  Banyak elemen HTML memiliki state khusus yang dapat diberikan style secara bebas.  Contohnya elemen tag <a> yang memiliki state:  link (normal)  visited (link sudah dikunjungi)  hover, dan (ketika mouse pengunjung berada di atas link)  active (ketika mouse pengunjung mengklik link) Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 18. Sintaks Pseudo-Classes a:link { color: red; }  Selector Colon → a:link  : titik dua diikuti oleh link yang merupakan pseudo-classes Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 19. Styling Links  :link → menetapkan tampilan link hypertext yang belum dipilih  :visited → menetapkan tampilan link hypertext yag sudah dikunjungi pengunjung  :hover → menetapkan tampilan link hypertext ketika tetikus tepat berada di atas link hypertext  :active → menetapkan tampilan link hypertext ketika tetikus aktif mengklik/memilih link tersebut Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 20. style-link.html<!DOCTYPE html><html lang="id"><head>   <meta charset="utf­8">      <title>Styling Links?</title>   <style type="text/css" media="all"> @import url(style­link.css);         </style></head><body>   <navigation>      <a href="combinator­selector1.html"><strong>Selector 1</strong></a>      <a href="combinator­selector2.html"><strong>Selector 2</strong></a>      <a href="combinator­selector3.html"><strong>Selector 3</strong></a>      <a href="combinator­selector4.html"><strong>Selector 4</strong></a>      <a href="combinator­selector5.html"><strong>Selector 5</strong></a>   </navigation></body></html> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 21. style-link.cssa {   display: block;   text­decoration: none;   padding: 5px;   width: 200px; }a:link {   color: rgb(255, 102, 102);   border­bottom: 1px dotted rgb(255, 51, 5, 51);}a:visited {   color: rgb(255, 153, 153);   border­bottom: 1px dotted rgb(255, 235, 235); }a:hover {   color: rgb(255, 0, 0);   border­bottom: 1px solid rgb(255, 0, 0); }a:active {   color: rgb(0, 0, 255);   border­bottom: 1px solid rgb(0, 0, 255); } Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 22. Hasil Style-Link ( Hover ) Link yang sudah dikunjungi Link yang sudah dikunjungi Link yang belum dikunjungi Link yang belum dikunjungi   Mouse berada di atas link Mouse berada di atas link hover) ((hover) Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 23. Hasil Style-Link ( Active ) Link yang sudah dikunjungi Link yang sudah dikunjungi Link yang belum dikunjungi Link yang belum dikunjungi   Mouse berada di atas link Mouse berada di atas link active) ((active) Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 24. Styling untuk Interaksi  :hover → menetapkan tampilan ketika tetikus berada di atas elemen; bukan hanya di elemen <link> saja  :focus → dapat diterapkan pada elemen yang bisa menerima fokus seperti elemen field text pada formulir  :active → sama seperti link, tetapi diset ketika elemen diklik atau dipilih Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 25. style-interaction.html<!DOCTYPE html><html lang="id"><head>   <meta charset="utf­8">      <title>Isi Formulir</title>   <style type="text/css" media="all"> @import url(style­interaction.css);   </style></head><body>   <form>      <input type="text" value="First Name">      <input type="text" value="Last Name">      <input type="text" value="eMail">      <input type="button" value="Search">   </form></body></html> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 26. style-interaction.cssinput {   border: 3px solid rgb(153,153,153);   background­color: rgb(204,204,204);   color: rgb(153,153,153);   font­size: 1.5em;   margin: 3px 0;   padding: 0 3px; }input:hover {   border­color: rgb(204,153,153);   color: rgb(102,102,102); }input:focus {   border­color: rgb(255,0,0);   background­color: rgb(255,255,255);   color: rgb(0,0,0);   outline: none; }input:active {   color: rgb(255,0,0);   border­color: rgb(255,0,0);   background­color: rgb(0,0,0); } Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 27. Hasil Style-Interaction Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 28. Memberi style elemen child dengan Pseudo-Classes  :first­child → mengatur tampilan elemen selector jika elemen selector tersebut adalah anak pertama dari ortunya  :first­of­type → mengatur tampilan elemen selector jika elemen selector tersebut adalah elemen pertama dari ortunya  :nth­child(#) → mengatur tampilan elemen selector jika elemen selector tersebut anak ke-n dari ortunya Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 29. Memberi style elemen child dengan Pseudo-Classes  :nth­of­type(#) → mengatur tampilan elemen selector jika elemen selector tersebut adalah elemen ke-n dari ortunya  :nth­last­of­type(#) → mengatur tampilan elemen selector jika elemen selector tersebut adalah elemen ke-n dari ortunya tetapi diambil dari belakang Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 30. Memberi style elemen child dengan Pseudo-Classes  :last­child → mengatur tampilan elemen selector jika elemen selector tersebut adalah anak terakhir dari ortunya  :last­of­type → mengatur tampilan elemen selector jika elemen selector tersebut adalah elemen terakhir dari ortunya Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 31. child-pseudo-classes.html<!DOCTYPE html><html lang="id"><head>   <meta charset="utf­8">      <title>Styling specific child with Pseudo­Classes</title>   <style type="text/css" media="all">      @import url(child­pseudo­classes.css);   </style></head><body>   <ol>      <li>BlackBerry</li>      <li>Nokia S60</li>      <li>Android Froyo</li>      <li>iOS5</li>      <li>MeeGo</li>   </ol></body></html> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 32. child-pseudo-classes.cssbody {   margin: 0 50px;}li:first­child { font­size: .875em; }li:first­of­type { color: red; }li:nth­of­type(3) { font­size: 1.5em }li:nth­last­of­type(2) { font­size: 2em; }li:last­of­type { color: red; }li:last­child { font­size: 2.5em; } Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 33. Tampilan Web Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 34. Keterangan/*  * mengatur tampilan li jika li adalah anak pertama dari ortunya */li:first­child {    font­size: .875em;}/* * mengatur tampilan li jika li adalah elemen pertama dari ortunya */li:first­of­type {    color: red; }/* * mengatur tampilan li jika li adalah elemen ke­n dari ortunya * pada contoh ini li adalah elemen ke­3 */li:nth­of­type(3) {    font­size: 1.5em } Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 35. Keterangan/* * mengatur tampilan li jika li adalah elemen ke­n ortunga  * tetapi diurut dari elemen paling belakang */li:nth­last­of­type(2) {    font­size: 2em; }/* * mengatur tampilan li jika li adalah elemen terakhir dari ortunya */li:last­of­type {    color: red; }/* * mengatur tampilan li jika li adalah anak terakhir dari ortunya */li:last­child {    font­size: 2.5em; } Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 36. Pseudo-Elements  Pseudo-element adalah bagian unik atau spesifik dari sebuah elemen – misalkan huruf pertama dari alinea atau baris pertama dari alinea – yang dapat ditentukan tampilannya Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 37. pseudo-elemen.html<article>   <h1>Review Samsung PL210: 10x Zoom, Ramping, Murah</h1>   <h2>Oleh: Pramanajaya Tjokronegoro</h2>   <p>      Zoom 10x? Ya, memang sulit dipercaya bahwa kamera ramping dari Samsung ini memiliki lensa berkekuatan zoom 10x. Lebih sulit dipercaya lagi adalah harganya yang hanya Rp2,1juta!   </p>   <p>      Kekuatan zoom tinggi memang tidak jarang ditemui pada kaemra saku saat ini, tetapi biasanya bodi kameranya besar. Kalaupun ada kamera ramping yang berkekuatan zoom tinggi, biasanya harganya mahal. Oleh karena itu, Samsung PL210 sudah cukup menonjol di antara pesaing dalam kelasnya. Coba kita lihat feature apa lagi yang dimilikinya.   </p></article> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 38. pseudo-elemen.cssarticle p {   font­size: 16px;   line­height: 24px;   color: rgb(102,102,102)}article p:first­of­type:first­letter {   color: red;   font­size: 3em;   float: left;   margin­right: 5px; }article p:first­of­type:first­line {   font­size: 1.25em;   font­weight: bold;   color: rgb(0,0,0); } Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 39. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 40. pseudo-elemen :before dan :after  Pseudo elemen :before dan :after dapat digunakan untuk membuat content yang muncul di atas atau di bawah selector Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 41. before-after.html<article>   <h1>Review Samsung PL210: 10x Zoom, Ramping, Murah</h1>   <h2>Oleh: Pramanajaya Tjokronegoro</h2>   <p>      Zoom 10x? Ya, memang sulit dipercaya bahwa kamera ramping dari Samsung ini memiliki lensa berkekuatan zoom 10x. Lebih sulit dipercaya lagi adalah harganya yang hanya Rp2,1juta!   </p>   <p>      Kekuatan zoom tinggi memang tidak jarang ditemui pada kaemra saku saat ini, tetapi biasanya bodi kameranya besar. Kalaupun ada kamera ramping yang berkekuatan zoom tinggi, biasanya harganya mahal. Oleh karena itu, Samsung PL210 sudah cukup menonjol di antara pesaing dalam kelasnya. Coba kita lihat feature apa lagi yang dimilikinya.   </p></article> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 42. before-after.cssh1 {   color: blue;}h1:before {   content: url(icon_apple.jpg);}h1:after {   content: url(android_icon.png);} Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 43. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 44. Mendefinisikan Tampilan dengan Atribut Tag  Sebuah selector dapat memiliki atribut. Atribut tersebut pun dapat didefinisikan style-nya atau tampilannya  Contohnya elemen img memiliki atribut src dan title Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 45. atribut.html<body>   <navigation>   <h2>About the Author</h2>      <a href="" title="Portfolio">Portfolio</a>      <a href="index.html" title="Home">Home Page</a>      <a href="" title="contact email link">Email</a>      <a href="" title="resume­link">Resume</a>      <a href="http://www.jasonspeaking.com" title="blog">JasonSpeaking</a>      <a href="http://www.fluidwebtype.info" title="book">Fluid Web Typography</a>      <a href="http://www.speakinginstyles.com" title="book">Speaking In Styles</a>   </navigation></body> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 46. atribut.css/* mendefinisikan tampilan pada elemen a * dengan atribut title */a[title] {    display: block; color: rgb(0,0,0);   font­size: .8em;}/* mendefinisikan tampilan pada elemen a * dengan atribut title yang * memiliki value home*/a[title="Home"] {   color: rgb(51,0,0);   font­size: 1em;}/* mendefinisikan tampilan pada elemen a * dengan atribut title yang valuenya  * terdapat kata email */a[title~="email"] {    color:rgb(102,0,0);   font­size: 1.2em;} Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 47. atribut.css (lanjutan)/* mendefinisikan tampilan pada elemen a * dengan atribut title yang valuenya * memiliki serangkaian kata dan kata  * resume terletak pertama kali */a[title|="resume"] {    color: rgb(153,0,0);   font­size: 1.4em;}   /* mendefinisikan tampilan pada elemen a * dengan atribut href memiliki string * awal sama mutlak dengan http:// */a[href^="http://"] {   color: rgb(204,0,0);   font­size: 1.6em;} Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 48. atribut.css (akhir)/* mendefinisikan tampilan pada elemen a * dengan atribut href memiliki string * akhir sama mutlak dengan info */  a[href$=".info"] {   color: rgb(235,0,0);   font­size: 1.8em;}/* mendefinisikan tampilan pada elemen a * dengan atribut href memiliki string * speakinginstyles di mana saja pada * atribut value */a[href*="speakinginstyles"] {   color: rgb(255,0,0);    font­size: 2em;} Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 49. ? Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi