✔ Hukum Penulisan Selektor Dalam Css
img {background:#EEEEEE; padding:5px;}
selektor {deklarasi1; deklarasi2;}
selektor {properti1:value1; properti2:value2;}
Selektor terdiri dari deklarasi-deklarasi yang dipisahkan dengan titik koma, setiap deklarasi yaitu adonan antara properti dengan value/nilainya.
img yaitu selektor, background dan padding yaitu properti, #EEEEEE dan 5px yaitu value. background:#EEEEEE; dan padding:5px; yaitu deklarasi.Suatu ketika mungkin kalian juga akan melihat susunan isyarat yang tampak berbeda menyerupai ini:
img { background:#EEEEEE; padding:5px; } img { background:#EEEEEE; padding:5px; } img { background : #EEEEEE; padding : 5px; } img { background: #EEEEEE; padding: 5px; }Apapun bentuk dan susunan isyarat yang akan kalian temui nantinya tidak akan menghipnotis apapun.
Aturan Penulisan Selektor dalam Tag Murni
Untuk tag-tag dengan kondisi yang masih murni sanggup kau tuliskan apa adanya sesuai dengan nama tagnya menyerupai beberapa teladan berikut:| SELEKTOR | CONTOH KERANGKA | KETERANGAN |
|---|---|---|
| body {deklarasi} | <body>OBJEK</body> | Deklarasi akan menghipnotis objek-objek di dalam wilayah kekuasaan <body> |
| a {deklarasi} | <a href='#'>OBJEK</a> | Deklarasi akan menghipnotis objek-objek di dalam wilayah kekuasaan <a> |
| img {deklarasi} | <img src='hompimpa.jpg' /> | Deklarasi akan menghipnotis elemen gambar |
| ul {deklarasi} | <ul> <li>OBJEK1</li> <li>OBJEK2</li> <li>OBJEK3</li> </ul> | Deklarasi akan menghipnotis semua elemen di dalam wilayah kekuasaan <ul> |
| ol {deklarasi} | <ol> <li>OBJEK1</li> <li>OBJEK2</li> <li>OBJEK3</li> </ol> | Deklarasi akan menghipnotis semua elemen di dalam wilayah kekuasaan <ol> |
| li {deklarasi} | <ul> <li>OBJEK1</li> <li>OBJEK2</li> <li>OBJEK3</li> </ul> <ol> <li>OBJEK1</li> <li>OBJEK2</li> <li>OBJEK3</li> </ol> | Deklarasi akan menghipnotis semua elemen <li> baik yang berada di dalam wilayah kekuasaan <ul> maupun <ol> |
| ul li {deklarasi} | <ul> <li>OBJEK1</li> <li>OBJEK2</li> <li>OBJEK3</li> </ul> <ol> <li>OBJEK1</li> <li>OBJEK2</li> <li>OBJEK3</li> </ol> | Deklarasi akan menghipnotis elemen <li> di dalam wilayah kekuasaan <ul>, namun tidak akan menghipnotis elemen <li> di dalam wilayah kekuasaan <ol> |
Penulisan ID dan CLASS
Penulisan selektor ID harus diawali dengan prefiks#, sedangkan selektor CLASS harus diawali dengan prefiks .| SELEKTOR | CONTOH KERANGKA | KETERANGAN |
|---|---|---|
| #hompimpa {deklarasi} | <div id='hompimpa'> OBJEK </div> | Deklarasi akan menghipnotis objek di dalam elemen yang mempunyai ID hompimpa |
| .hompimpa {deklarasi} | <div class='hompimpa'> OBJEK </div> | Deklarasi akan menghipnotis objek di dalam elemen yang mempunyai CLASS hompimpa |
| span.hompimpa {deklarasi} | <div class='hompimpa'> OBJEK </div> <span class='hompimpa'> OBJEK </span> | Deklarasi akan menghipnotis objek di dalam wilayah kekuasaan <span> yang mempunyai CLASS hompimpa, namun tidak akan menghipnotis objek di dalam wilayah kekuasaan <div> yang mempunyai CLASS hompimpa |
| div.hompimpa {deklarasi} | <div class='hompimpa'> OBJEK </div> <span class='hompimpa'> OBJEK </span> | Deklarasi akan menghipnotis objek di dalam wilayah kekuasaan <div> yang mempunyai CLASS hompimpa, namun tidak akan menghipnotis objek di dalam wilayah kekuasaan <span> yang mempunyai CLASS hompimpa |
| div .hompimpa {deklarasi} | <div> <div class='hompimpa'> OBJEK </div> <span class='hompimpa'> OBJEK </span> </div> <div class='hompimpa'> OBJEK </div> <span class='hompimpa'> OBJEK </span> | Deklarasi akan menghipnotis elemen apapun di dalam wilayah kekuasaan <div> induk, dimana elemen-elemen tersebut harus diketahui mempunyai CLASS hompimpa. Elemen-elemen sejenis yang berada di luar <div> induk tidak akan ikut terpengaruh |
| div#hompimpa {deklarasi} | <div id='hompimpa'> OBJEK </div> <span id='hompimpa'> OBJEK </span> | Deklarasi akan menghipnotis objek di dalam wilayah kekuasaan <div> yang mempunyai ID hompimpa, namun tidak akan menghipnotis objek di dalam wilayah kekuasaan <span> yang mempunyai ID hompimpa |
| div #hompimpa {deklarasi} | <div> <div id='hompimpa'> OBJEK </div> <span id='hompimpa'> OBJEK </span> </div> <div class='hompimpa'> OBJEK </div> <span class='hompimpa'> OBJEK </span> | Deklarasi akan menghipnotis elemen apapun di dalam wilayah kekuasaan <div> induk, dimana elemen-elemen tersebut harus diketahui mempunyai ID hompimpa. Elemen-elemen sejenis yang berada di luar <div> induk tidak akan ikut terpengaruh |
| div span.hompimpa {deklarasi} | <div> <div id='hompimpa'> OBJEK </div> <span class='hompimpa'> OBJEK </span> </div> <div class='hompimpa'> OBJEK </div> <span class='hompimpa'> OBJEK </span> | Deklarasi akan menghipnotis elemen <span> yang mempunyai CLASS hompimpa di dalam elemen <div> induk, namun tidak akan menghipnotis elemen <div> yang mempunyai CLASS hompimpa yang berada di dalam elemen <div> induk. Elemen-elemen sejenis yang berada di luar <div> induk tidak akan ikut terpengaruh |
| #hompimpa {deklarasi} | <div id='hompimpa'> OBJEK </div> <div class='hompimpa'> OBJEK </div> | Deklarasi akan menghipnotis objek di dalam wilayah kekuasaan <div> yang mempunyai ID hompimpa, namun tidak akan menghipnotis objek di dalam wilayah kekuasaan <div> yang mempunyai CLASS hompimpa |
Meringkas Beberapa Selektor bagi Elemen yang Memiliki Deklarasi Sama
Penulisan selektor sanggup diringkas dengan memisahkannya memakai tanda koma untuk menggabungkan deklarasi-deklarasi yang sama.| SEBELUM DIRINGKAS | SESUDAH DIRINGKAS | CONTOH KERANGKA | KETERANGAN |
|---|---|---|---|
| h1 {color:green;} h2 {color:green;} h3 {color:green;} | h1, h2, h3 {color:green;} | <h1>OBJEK</h1> <h2>OBJEK</h2> <h3>OBJEK</h3> | Deklarasi color:green; akan menghipnotis elemen <h1>, <h2> dan <h3> |
Penulisan Selektor Atribut dalam CSS
Atribut tag HTML dalam selektor CSS sanggup dituliskan dengan menutupinya memakai simbol[ dan ]| SELEKTOR | CONTOH KERANGKA | KETERANGAN |
|---|---|---|
| a[title] {deklarasi} | <a href='#' title='hag'>OBJEK</a> <a href='#'>OBJEK</a> <img src='hompimpa.jpg' title='hag' /> | Deklarasi hanya akan menghipnotis elemen <a> yang mempunyai atribut title='' Elemen-elemen bukan <a> yang mempunyai atribut title='' tidak akan ikut terpengaruh |
| input[type="button"] {deklarasi} | <input value='OBJEK' type='button' /> <input value='OBJEK' type='text' /> | Deklarasi hanya akan menghipnotis elemen <input> yang mempunyai atribut type='button' Elemen-elemen <input> dengan atribut selain type='button' tidak akan ikut terpengaruh |
Dua Metode Penulisan CSS
Ada dua metode penulisan dalam CSS, yaitu metode penulisan secara terpisah dengan memanfaatkan tag<style>, atau metode penulisan secara pribadi dengan memanfaatkan atribut style=''| METODE PENULISAN SECARA TERPISAH DARI OBJEK SASARAN | METODE PENULISAN SECARA LANGSUNG PADA OBJEK SASARAN |
|---|---|
| <style type='text/css'> #hompimpa { proprti:value; properti:value; properti:value; } </style> .... .... <div id='hompimpa'> OBJEK </div> | <div style='properti:value;properti:value;proprti:value;'> OBJEK </div> |
Penulisan CSS secara terpisah dilakukan dengan memisahkan objek sasaran dari selektor yang dituliskan sesuai dengan keadaan objek sasaran supaya berfungsi. Tag
<style> beserta komponen-komponen di dalamnya sanggup diletakkan di mana saja, namun mekanisme peletakkan yang benar yaitu di dalam wilayah kekuasaan <head>, sementara objek sasarannya harus berada di dalam wilayah kekuasaan <body>.Penulisan CSS secara pribadi dilakukan dengan memasukkan deklarasi-deklarasi ke dalam atribut
CSS Font Stack ❖ JQuery: Mini WayPoints ❖ Lakukan Sesuatu Jika Elemen Mencapai Area Terlihat ❖ Tooltip Kustom Otomatis untuk Semua Tautan ❖ Menambahkan Nomor Urut pada Daftar Komentar ❖ Beberapa Pola Regex Bermanfaat ❖ Plugin JQuery Paralax Sederhana - Dimas Okaisy menulis komentar/memulai diskusi di Template blogazine 210492
- Denddy Gustiana menulis komentar/memulai diskusi di Bantu saya menjawab pertanyaan
- Ahmad Nurfadilah menulis komentar/memulai diskusi di Template blogazine 210492
- Ahmad Nurfadilah menulis komentar/memulai diskusi di Template blogazine 210492
- Ahmad Nurfadilah menulis komentar/memulai diskusi di Template blogazine 210492
- Planet Pengetahuan menulis komentar/memulai diskusi di Membuat komentar slide panel pada
- MrDark ShixNhine menulis komentar/memulai diskusi di Css3 column count
10 Komentar:
Capek juga nulis tutorial yang serius. Moga2 nggak ada yang copas. Amiiin..
ini yang sya masih belum paham, cara memanggil code css yang di buat, maksudnya hatmlnya, oy sob mau tanya gimana cara buat tombol poskan komentar menyerupai blog ini ?
hmm, masih harus mencar ilmu lagi utk mengerti css, hohoo, makasih infonya, saya save dulu rumus2nya 
Permalink
Permalink Saya kadang masih resah sob, perbedaan ID dan Class >.<
Bedanya cuma ada pada jatah jabatannya. Dalam satu berkas HTML, CLASS sanggup dituliskan lebih dari satu, tapi ID hanya boleh dituliskan satu kali saja seumur hidup. Menyedihkan, ya?
save dolo mas, mas bole tanya lagi gk cara mambuat komentar kayak d blogny om ladida gmna y ukuranny kecil gitu selengkapny lihat comment fromny om ladida
nich gres kawand yang namanya tutorial..
good jobs..
Permalink
good jobs..
Permalink Mas untuk blogzine sehabis saya memasukan ini dalah entri mode HTML
body, .post-body {}.post-body {}wrappper{}body{display:none !important}#comments{}#sidebar{}footer{}#header{}html{display:none !important}blockquote, q {} #sidebar-wrapper,#sidebar2-wrapper,#sidebar3-wrapper,{display:none!important;} #header-wrapper,#credit-wrapper,.menupic,.menu-horisontal{display:none;} #content-wrapper{width:100%;} #comments{display:none;width:75%;margin-left:auto;margin-right:auto;margin-top:-10%;} #comment-editor{width:100%;margin-left:auto;margin-right:auto;}terus saya melayout kok masih tidak nampil juga yach layoutnya, saya pigin merubah blog saya jadi blogazine mas, mohon pencerahannya... 
Permalink Saya sih biasanya memakai CSS ini untuk mereset tampilan awal:
html, body, #content-wrapper { margin:0px 0px; padding:0px 0px; border:none; background:transparent; box-shadow:none; } #content-wrapper { margin:0px auto 0px; padding:50px 40px 20px; width:auto; } a, a:link, a:visited, #blog-pager a {color:pink;} #nav, #nav ul, #nav li, #nav li a, #nav li a:hover { background:transparent; padding:0px; margin:0px; text-transform:none; } #sidebar-wrapper, .breadcrumb {display:none !important;}Tapi itu tidak mutlak, semuanya mempunyai perbedaan.
NB: Setelah selektor terakhir tidak perlu ditambah tanda koma lagi:
#sidebar-wrapper, #sidebar2-wrapper, #sidebar3-wrapper {display:none!important;} #header-wrapper, #credit-wrapper, .menupic, .menu-horisontal {display:none;} #content-wrapper {width:100%;} #comments { width:75%; margin-left:auto; margin-right:auto; margin-top:-10%; } #comment-editor{ width:100%; margin-left:auto; margin-right:auto; }Kalau selektor
body {} dan html {} dihilangkan ya nggak bakalan kelihatan layoutnya hehe...Terkait: CSS Reset
Untuk isyarat yang saya berikan tadi belum saya reset templetenya mengunakan CSS eric mayer, saya mengunakan templete denim yang standar mas kerena templete itu udah tidak mengecewakan saya pelajari dalamnya, kalau mengunakan css reset eric mayer malah membuat saya binggung dengan text multi colom kerena acak-acakan sekali kelihatannya. tapi saya akan coba CSS reset mayer dengan memadukan yang barusan diberi sama mas taufik. terima kasih pencerahannya,jika ada problem saya nanya lagi ok. happy blogging... salam dua jari (telunjuk dan tengah)
0 Response to "✔ Hukum Penulisan Selektor Dalam Css"
Posting Komentar