|
Style pada CSS memiliki struktur sebagai berikut
|
|
Selector
digunak an untuk menentukan
pada elemen ap a
style tersebut diterapkan.
|
|
Selector
dapat berupa n ama
id elemen atau
nama class. Bagian
deklar asi menerangkan
|
|
style yang akan
dibuat. Bagian ini
terdiri dari properti
dan value. Properti
dapat diisi
|
|
dengan jenis
warn a, uku ran, perataan mar gin dll, sedangkan
value diisi dengan nilai dari
|
|
propertinya,
misalnya red untuk
warna dll. Setiap
akhir penulisan p roperti
dan value
|
|
harus
diakhiri dengan tanda
titik koma (semicolon). Tanda
ini juga digunakan
sebagai
|
|
pemisah antar satu properti dengan properti lain.
|
|
Apabila
Anda lupa memberikan
tanda titik koma,
maka style terseb ut
tidak akan
|
|
dijalankan oleh browser.
|
|
Mungkin Anda bertanya,
bagaimana jika kita akan membuat
style untuk beberapa elemen
|
|
yang b erbeda
namun stylenya sama? Misalkan kita akan membuat style untuk elemen h1,
|
|
h2, h3 namun memiliki style yang sama. Berikut ini
adalah sintaksnya:
|
|
h1,
h2, h3 { properti1 : value1;
|
|
properti2
: value2;
|
|
properti3
: value3;
|
|
.
|
|
.
|
|
.
|
|
}
|
|
4
|
|
Struktur Style
|
|
CSS Tutorial
|
|
rosihanari.net
|
|
Mengatur Style List
|
|
Dengan
CSS, Anda dapat
pula mengatur style
suatu list seperti
mengubah marker
|
|
maupun indentasinya, background dll.
|
|
Sebagai contoh, perhatikan code list berikut ini:
|
|
<h3>Menu
Navigasi</h3>
|
|
<ul>
|
|
<li>Menu
1</li>
|
|
<li>Menu
2</li>
|
|
<li>Menu
3</li>
|
|
<li>Menu
4</li>
|
|
<li>Menu
5</li>
|
|
<li>Menu
6</li>
|
|
</ul>
|
|
</div>
|
|
List di atas
bertipe unordered list
dan secara default
akan memiliki tampilan
sebagai
|
|
berikut:
|
|
Anda dapat men gub ah style marker setiap elemen list
dengan menggunakan properti
|
|
berikut ini:
|
|
list-style-type:
marker
|
|
67
|
|
Mengatur Style List
|
|
CSS Tutorial
|
|
rosihanari.net
|
|
dengan
|
|
dapat d
iganti dengan
|
|
,
|
|
,
|
|
,
|
|
(1, 2, 3,
...),
|
|
marker
|
|
disc
|
|
circle
|
|
square
|
|
decimal
|
|
(A, B, C,
...),
|
|
(a, b, c,
...),
|
|
(I, II, III,
IV, ...),
|
|
upper-alpha
|
|
lower-alpha
|
|
upper-roman
|
|
atau
|
|
(i, ii, iii, iv, ...)
|
|
lower-roman
|
|
Sebagai contoh, kita akan mengubah markernya dengan
circle.
|
|
ul
{
|
|
list-style-type:
circle;
|
|
}
|
|
dan hasilnya adalah sebagai b erikut
|
|
Sedangkan untuk marker bertipe square, style adalah
|
|
ul
{
|
|
list-style-type:
square;
|
|
}
|
|
dengan hasil yang diperoleh adalah sebagai berikut
|
|
68
|
|
Mengatur Style List
|
|
Anda mun
gkin bosan dengan
model marker yang
itu-itu saja. Marker
dapat diganti
|
|
dengan image yang kita inginkan. Sebaiknya gunakan
image berformat gif dan berukuran
|
|
kecil.
|
|
Berikut ini propertinya:
|
|
list-style-image:
url(image.gif)
|
|
Sebagai contoh, berikut ini style yang ak an
menggunakan image b ernama folder.gif yang
|
|
ada di folder img.
|
|
ul
{
|
|
list-style-image:
url(img/folder.gif)
|
|
}
|
|
dan hasilnya adalah
|
|
69
|
|
Mengatur Style List
|
|
CSS Tutorial
|
|
rosihanari.net
|
|
Suatu list dapat digunakan untuk menu navigasi.
Berikut ini contoh tampilannya:
|
|
Meskipun secara sekilas mirip dengan penggunaan tabel,
namun seben arnya tampilan
|
|
menu di atas dibuat dengan list.
|
|
Berikut ini stylenya:
|
|
ul
{
|
|
list-style-type:
none; /* tidak menampilkan marker */
|
|
padding:
2px;
|
|
border:
1px solid black;
|
|
}
|
|
li
{
|
|
padding:
2px;
|
|
margin-bottom:
1px;
|
|
background:
red;
|
|
border:
1px solid black;
|
|
font-family:
arial;
|
|
font-size:
15px;
|
|
font-weight:
bold;
|
|
color:
#FFFFFF;
|
|
}
|
|
70
|
|
Mengatur Style List
|
|
CSS Tutorial
|
|
rosihanari.net
|
|
Style Pada Link
|
|
CSS juga dapat digunakan untuk mengatur style link.
Berikut ini beberapa jenis selector
|
|
yang terkait dengan aktifitas link.
|
|
a:hover
{ /* style yang muncul apabila link
didekati kursor */
|
|
...
|
|
}
|
|
a:visited
{ /* style yang muncul pada link
yang pernah diklik */
|
|
...
|
|
}
|
|
Sebagai
contoh, kita akan
memodifikasi menu navigasi
dari contoh bab
sebelumnya
|
|
dengan menambahkan link
|
|
Berikut ini code dasarn ya
|
|
<h3>Menu
Navigasi</h3>
|
|
<ul>
|
|
<li><a
href="menu1.htm">Menu 1</a></li>
|
|
<li><a
href="menu2.htm">Menu 2</a></li>
|
|
<li><a
href="menu3.htm">Menu 3</a></li>
|
|
<li><a
href="menu4.htm">Menu 4</a></li>
|
|
<li><a
href="menu5.htm">Menu 5</a></li>
|
|
<li><a
href="menu6.htm">Menu 6</a></li>
|
|
</ul>
|
|
Sedangkan style yang telah kita buat sebelumnya adalah
|
|
ul
{
|
|
list-style-type:
none; /* tidak menampilkan marker */
|
|
padding:
2px;
|
|
border:
1px solid black;
|
|
}
|
|
li
{
|
|
padding:
2px;
|
|
margin-bottom:
1px;
|
|
background:
red;
|
|
border:
1px solid black;
|
|
font-family:
arial;
|
|
font-size:
15px;
|
|
font-weight:
bold;
|
|
color:
#FFFFFF;
|
|
}
|
|
Secara default, tampilan dari code di atas adalah
sebagai berikut
|
|
71
|
|
Style Pada Link
|
|
CSS Tutorial
|
|
rosihanari.net
|
|
Sebuah tampilan
yan g kurang menarik karena bukan kombinasi warna
yang bagus antara
|
|
biru dan merah.
Secara default, warna
link adalah biru.
Namun kita dapat
mengubah
|
|
warnanya dengan yang lain. Berikut ini style untuk
memberi warna putih pada link.
|
|
a
{
|
|
color:
white;
|
|
}
|
|
72
|
Style Pada Link
|
Tidak ada komentar:
Posting Komentar