Download

Kamis, 16 April 2015

Mengenal Selector CSS

Dalam CSS, terdapat cascade yang merupakan metode untuk mengatur style supaya tidak terjadi konflik atau untuk pembeda selector , jadi dengan metode ini digunakan agar dapat membedakan suatu selector dengan lebih detail. Untuk lebih jelasnya perhatikan contoh berikut ini.
selector.html
  1. <html>
  2. <head>
  3. <title>Selector</title>
  4. <style type="text/css">
  5. p {
  6. color: red;
  7. }
  8. em {
  9. color: green;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <h1>Ini adalah heading 1</h1>
  15. <p>Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini
  16. adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah
  17. paragraf.Ini adalah paragraf.
  18. <em>Ini adalah huruf dicetak miring</em>.
  19. Ini adalah paragraf. Ini adalah paragraf. Ini adalah
  20. paragraf. Ini adalah paragraf. </p>
  21. <h1><em>Ini adalah heading 1</em></h1>
  22. <p>Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini
  23. adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah
  24. paragraf.Ini adalah paragraf. <em>Ini adalah huruf dicetak
  25. miring</em>. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. </p>
  26. </body>
  27. </html>


SELECTOR CSS


Pada code di atas terdapat style untuk mengatur tampilan elemen paragraf (<p>) dan untuk emphasize atau <em> (cetak miring seperti halnya italic). Perhatikan apa yang terjadi dengan tampilannya di browser.

Dengan Anda mendeklarasikan style warna hijau untuk elemen <em>, maka style tersebut akan berlaku untuk setiap elemen tersebut (termasuk pada bagian heading).Tentu saja hal ini membuat tampilan halaman web tidak bagus, karena style heading menjadi tidak konsisten (terdapat heading yang berwarna hijau).

Dapat ditarik kesimpulan, tag dapat kita jadikan sebagai selector untuk pengaturan style, dari contoh diatas p dan em adalah selector.
Posted by at
Labels:

Tidak ada komentar:

Posting Komentar