Tuesday, 27 September 2011

Tentang Selector CSS

| Tuesday, 27 September 2011 | 0 comments

Dalam CSS, terdapat cascade yang merupakan metode untuk mengatur style supaya tidak
terjadi konflik. Untuk lebih jelasnya perhatikan contoh berikut ini.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Guide</title>

<style type="text/css">
p {
     color: red;
  }

em {
     color: green;
   }
</style>




</head>

<body>

<h1>Ini adalah heading 1</h1>
<p>Ini  adalah  paragraf.  Ini  adalah  paragraf.  Ini  adalah  paragraf.  Ini
adalah  paragraf.  Ini  adalah  paragraf.  Ini  adalah  paragraf.  Ini  adalah
paragraf.     Ini    adalah    paragraf.     <em>Ini    adalah    huruf    dicetak
miring</em>.  Ini  adalah  paragraf.  Ini  adalah  paragraf.  Ini  adalah
paragraf. Ini adalah paragraf. </p>

<h1><em>Ini adalah heading 1</em></h1>
<p>Ini  adalah  paragraf.  Ini  adalah  paragraf.  Ini  adalah  paragraf.  Ini
adalah  paragraf.  Ini  adalah  paragraf.  Ini  adalah  paragraf.  Ini  adalah
paragraf.     Ini    adalah    paragraf.     <em>Ini    adalah    huruf    dicetak
miring</em>.  Ini  adalah  paragraf.  Ini  adalah  paragraf.  Ini  adalah
paragraf. Ini adalah paragraf. </p>


</body>
</html>

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). Lantas.. bagaimana cara
mengatur style supaya warna hijau hanya berlaku untuk emphasize yang terletak di dalam
paragraf saja? Untuk itu Anda harus mengubah deklarasi stylenya menjadi seperti berikut

<style type="text/css">
p {
     color: red;
  }
 
p em {
     color: green;
     }
</style>

Maksud  dari  code  yang  bercetak  merah  tersebut  adalah  bahwa  style  warna  hijau
diterapkan pada elemen emphasize <em> yang berada di dalam elemen paragraf <p>. 

Selector  Dengan Class dan Nama ID

Class  dapat  digunakan  untuk  mengelompokkan  beberapa  elemen  supaya  memiliki  style
sama. Secara umum sintaks style untuk class tertentu adalah sbb:

.namaKelas {
properti1 : value1;
properti2 : value2;
.
.
     }
Contoh:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Guide</title>

<style type="text/css">
.inputText {
color: #FFFFFF;
font-family: arial;
background: #FF0000;  /* membuat background merah */
font-weight: bold;    /* membuat text bold */
     }

</style>
</head>

<body>

<form name="form1">
Nama Anda <br />
<input type="text" name="alamat" class="inputText" /><br /><br />
Alamat Anda <br />
<textarea class="inputText"></textarea><br /><br />
<input type="submit" name="submit" value="Submit" />
</form>
</body>
</html> 

Style juga dapat digunakan untuk mengatur tampilan elemen dengan id tertentu. Berikut
ini adalah contohnya:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Guide</title>

<style type="text/css">

p {
color: #FFFFFF;           /* membuat warna text putih */
font-family: arial;           
background: #FF0000;      /* membuat background merah */
font-weight: bold;
  }

p.group {
           color: #FF0000;      /* membuat warna text putih */
           font-family: arial;
     background: #FFFFFF; /* membuat background putih */
        }

p#one {
           color: blue;
     font-family: "times new roman";
      }

</style> 





 

0 comments:

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

 
Copyright 2011. w3-id.blogspot.com. | Template by o-om.com - zoomtemplate.com