nyubie CSS(cascading style set)

Maret 31, 2009 § Tinggalkan komentar

hoammm… bosen di kamar sendirian… ga da tv lagiii… tv gw diangkut ke kamar adek yang tiap hari kerjaannya nonton mlulu.. hhaahy. dulu sihh kamar gw da tv nya.. but karena itu kamar gw pasti ada barang” tambahan (barang adek gw mksdnya) n pasti brantakan bgt.. jadi untuk mengurangi kerjaan gw dalam hal bersih” jadi yaaa gt gw relain tv kesayangan gw bwat dya.. huff

weks kug jadi curhat gini yaww.. langsung jja masuk ke judul yg ada di atas…. CSS!!! yup.. gw ada berberapa hasil eksperiment utak-atik css di dreamwever..hhaha nyoba satu” mksdnya(gw msih “cupu” kk..)..hhi… dari pada nganggur ga jelas, btl kgak..:D sebelum masuk ke cara” yg gw punya.. gw cuma mw ngingetin lagi kalo gw masih nyubie so kalo ada yg “geje” yaa maklummin ajee…. syukur” mw mbenerin..hhaahy. n satu lagi (bold)hahah.. gw kali ini mandang kalian pada udah kenal ama CSS… kalo blum ya knalan dulu gihh.. mlez gw jlasin mulain awall.. hhha (/bold)

(!—mulai kasih info, tapi bertahap yaa… kalo ada waktu gw update lagi..hhih–!)😛

1. background ->  dari namanya juga jelas printah bwat apaan ini..:D..Langsung aja gw coba jlasin..
Contoh : (style) div {background: url(images/logocss.gif) #FFFFFF left no-repeat;} (/style)
Penjelasan :
– url(images/logocss.gif) -> tempat dimana lu taruh gambar yg pengen dbwat background.. pada contoh ini saya menempatkan di folder images n pake gambar=logocss.gif
– #FFFFFF -> warna background yg gw gunain setelah gambar – left -> posisi gambar yg gw pengen
– no-repeat -> perintah untuk tidak mengulangi gambar yg sama…

2. border –> bwat kasih garis tambahan sesuai yang kita inginkan..
Contoh : (style) img {border:#666666 1px dotted;} (/style)
Penjelasan :
– #666666 -> warna garis yg di pake – 1px -> ketebalan garis yg di pake juga (untuk ini gw pake satuan pixel)
– dotted -> bentuk garis yang gw pengen
3. cursor -> bwat ganti bentuk pointer yang kita gunakan waktu bwat web.
Contoh : (style) body {cursor: crosshair } (/sryle) ->  lu bisa pilih variasi bentuk yg tersedia..

Trik : Jika lu pengen ganti bentuk cursor kalian sesuain bentuk gambar cursor yg kalian punya… misalnya gw punya cursor pake nama panah.gif n di folder images, nah lu bisa pake cara ini….. tapi kayaknya ada browser yg ga nyupport cara ini…😀
(style) body {cursor: url(images/panah.gif } (/sryle)

4. float –>> perintah ini bisa digunain bwat ngedit posisi gambar dalam suatu paragraph
Contoh : (style) img {float:right} (/style)
5. margin –> bwat kasih jarak antara satu objek/teks ke lainnya sesuai dari angka yg dimasukin..
misalnya: (style) p {margin: 10px 0 5px 5px} (/style) –>atas, kanan,bawah.kiri

nih gw kasih satu conto dah… bwat script”/tag”/code” css yg laennya lu coba sendiri” yee.. inti dari tulisan gw ini kan cuma bwat kasih tw sedikit kgunaan dari beberapa tag” di css ajee.hhaa

Bikin menu standart –>> biasa pake si “ul” n “li”… hhahay

<html>
<head>
<style type=”text/css”>
ul{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a{
float:left;
width:100px;
text-decoration:none;
color:#000000;
background-color: #CCCCCC;
padding:2px 6px;
border-right:1px solid white;
}
a:hover {background-color: #FFCC00}
li {display:inline}
</style>
</head>
<body>
<ul>
<li><a href=”#”>Link satu</a></li>
<li><a href=”#”>Link dua </a></li>
<li><a href=”#”>Link tiga </a></li>
<li><a href=”#”>Link empat </a></li>
</ul>
</body>
</html>

Tagged: ,

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

What’s this?

You are currently reading nyubie CSS(cascading style set) at blognya ianjuve.

meta

%d blogger menyukai ini: