Desain Web II             Selective Styling                                 Pertemuan ke-4   Materi kuliah Desain Web,   T...
Agenda          Pohon Silsilah                                                       Mendefinisikan        Elemen       ...
Pohon Silsilah Elemen          Tag yang berada di dalam tag lain disebut         sebagai tag bersarang (nested tag)      ...
Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
Mendefinisikan Style         berdasarkan konteksnya          Dengan adanya style kontekstual suatu        elemen dapat di...
Combinator Selectors   Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
<!DOCTYPE html><html lang="id">                                      Contoh1: a b c<head>   <meta charset="utf­8">   <titl...
Contoh1: a b c   Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
<!DOCTYPE html><html lang="id">                                      Contoh2: a * b<head>   <meta charset="utf­8">   <titl...
Contoh2: a * b   Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
<!DOCTYPE html><html lang="id">                                      Contoh3: a > b<head>   <meta charset="utf­8">   <titl...
Contoh3: a > b   Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
<!DOCTYPE html><html lang="id"><head>   <meta charset="utf­8">                                      Contoh4: a + b   <titl...
Contoh4: a + b   Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
<!DOCTYPE html><html lang="id"><head>   <meta charset="utf­8">                                      Contoh5: a ~ b   <titl...
Contoh5: a ~ b   Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
Pseudo-Classes          Banyak elemen HTML memiliki state khusus        yang dapat diberikan style secara bebas.        ...
Sintaks Pseudo-Classes             a:link { color: red; }      Selector Colon → a:link      : titik dua diikuti oleh lin...
Styling Links      :link → menetapkan tampilan link hypertext         yang belum dipilih      :visited → menetapkan tamp...
style-link.html<!DOCTYPE html><html lang="id"><head>   <meta charset="utf­8">      <title>Styling Links?</title>   <style ...
style-link.cssa {   display: block;   text­decoration: none;   padding: 5px;   width: 200px; }a:link {   color: rgb(255, 1...
Hasil Style-Link ( Hover )                                     Link yang sudah dikunjungi                                 ...
Hasil Style-Link ( Active )                                     Link yang sudah dikunjungi                                ...
Styling untuk Interaksi      :hover → menetapkan tampilan ketika        tetikus berada di atas elemen; bukan        hanya...
style-interaction.html<!DOCTYPE html><html lang="id"><head>   <meta charset="utf­8">      <title>Isi Formulir</title>   <s...
style-interaction.cssinput {   border: 3px solid rgb(153,153,153);   background­color: rgb(204,204,204);   color: rgb(153,...
Hasil Style-Interaction   Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
Memberi style elemen child   dengan Pseudo-Classes          :first­child → mengatur tampilan elemen           selector ji...
Memberi style elemen child   dengan Pseudo-Classes          :nth­of­type(#) → mengatur tampilan           elemen selector...
Memberi style elemen child   dengan Pseudo-Classes          :last­child → mengatur tampilan elemen           selector jik...
child-pseudo-classes.html<!DOCTYPE html><html lang="id"><head>   <meta charset="utf­8">      <title>Styling specific child...
child-pseudo-classes.cssbody {   margin: 0 50px;}li:first­child { font­size: .875em; }li:first­of­type { color: red; }li:n...
Tampilan Web   Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
Keterangan/*  * mengatur tampilan li jika li adalah anak pertama dari ortunya */li:first­child {    font­size: .875em;}/* ...
Keterangan/* * mengatur tampilan li jika li adalah elemen ke­n ortunga  * tetapi diurut dari elemen paling belakang */li:n...
Pseudo-Elements          Pseudo-element adalah bagian unik atau        spesifik dari sebuah elemen – misalkan        huru...
pseudo-elemen.html<article>   <h1>Review Samsung PL210: 10x Zoom, Ramping, Murah</h1>   <h2>Oleh: Pramanajaya Tjokronegoro...
pseudo-elemen.cssarticle p {   font­size: 16px;   line­height: 24px;   color: rgb(102,102,102)}article p:first­of­type:fir...
Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
pseudo-elemen                       :before dan :after          Pseudo elemen :before dan :after dapat        digunakan u...
before-after.html<article>   <h1>Review Samsung PL210: 10x Zoom, Ramping, Murah</h1>   <h2>Oleh: Pramanajaya Tjokronegoro<...
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
Mendefinisikan Tampilan          dengan Atribut Tag          Sebuah selector dapat memiliki atribut.        Atribut terse...
atribut.html<body>   <navigation>   <h2>About the Author</h2>      <a href="" title="Portfolio">Portfolio</a>      <a href...
atribut.css/* mendefinisikan tampilan pada elemen a * dengan atribut title */a[title] {    display: block; color: rgb(0,0,...
atribut.css (lanjutan)/* mendefinisikan tampilan pada elemen a * dengan atribut title yang valuenya * memiliki serangkaian...
atribut.css (akhir)/* mendefinisikan tampilan pada elemen a * dengan atribut href memiliki string * akhir sama mutlak deng...
?   Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
Upcoming SlideShare
Loading in …5
×

Desain Web 2: Pertemuan Keempat Selective Styling

1,342 views

Published on

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,342
On SlideShare
0
From Embeds
0
Number of Embeds
56
Actions
Shares
0
Downloads
139
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Desain Web 2: Pertemuan Keempat Selective Styling

  1. 1. Desain Web II Selective Styling Pertemuan ke-4 Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  2. 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. 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. 4. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  5. 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. 6. Combinator Selectors Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  7. 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. 8. Contoh1: a b c Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  9. 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. 10. Contoh2: a * b Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  11. 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. 12. Contoh3: a > b Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  13. 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. 14. Contoh4: a + b Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  15. 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. 16. Contoh5: a ~ b Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  17. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 27. Hasil Style-Interaction Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  28. 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. 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. 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. 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. 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. 33. Tampilan Web Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  34. 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. 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. 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. 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. 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. 39. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  40. 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. 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. 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. 43. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  44. 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. 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. 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. 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. 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. 49. ? Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi

×