Selamat datang Pengunjung Wap SuArcHGoD ini, Semoga kalian diberikan kesehatan selalu.
pada postingan kali ini sebenar nya, meneruskan postingan tanggal 17.NOV.2016 lalu, karena pada postingan tersebut,
adalah Cara bagaimana membuat sebuah situs/wap/web offline plus cara membuat postingan nya juga.
Karena di postingan tersebut masih tampilan polos, belum ada theme/template/css karena hanya membahas tentang bagaimana cara membuat dan seperti apa susunanya.
Maka kali ini saya akan membuat sebuah postingan dengan judul inti adalah dasar pembuatan Css,ingat ini handa dasar2 nya atau yang paling penting nya untuk sebuah theme/template/css.
Maaf kalau mungkin bahasa nya terlalu muter muter.
~ Penjelasan Dasar tentang elemen css dan pemanggilan.
#1. "/* ABC */" ini adalah Pesan tersembunyi.
#2. "{" ini adalah script pembuka.
#3. ";" ini adalah penutup isi script
#4. "}" ini adalah script penutup.
#5. "#" ini adalah id="".
#6. "." ini adalah class="".
#7. "<p class="x"/id="x"></p>" pemanggilan dengan script paragraf.
#8. "<div class="x"/id="x"></div>" pemanggilan dengan tag div.
~ Membuat Css Internal (menyatu dengan HTML)
<style type="text/css">
#wrapper {
width: 800px; /*(ini adalah Lebar.)*/
margin: 0 auto; /*(ini adalah lebar Jarak "0" J-atas "auto" J-kiri)*/
}
#header {
float: left; /*(ini adalah leyout Multi kolom)*/
width: 100%;
height: 150px;
background-color: red; /*(ini adalah warna Background)*/
}
<div id="header">
<h1>#header</h1>
<p>Ini adalah bagian HEADER. Biasanya terdapat LOGO, MENU, dan sebagainya.</p>
</div>
<div id="sidebar">
<h1>#sidebar</h1>
<p>Ini adalah bagian SIDEBAR. Biasanya terdapat MENU, DAFTAR KONTEN, dan sebagainya.</p>
</div>
<div class="content">
<h1>#body</h1>
<p>Ini adalah bagian BODY yang merupakan bagian inti dari website.</p>
</div>
<div class="footer">
<h1>#footer</h1>
<p>Ini adalah bagian FOOTER. Biasanya terdapat HAK CIPTA, MENU, dan sebagainya.</p>
</div>
</div>
</body>
</html>
~ Css/theme/template untuk Body/Seluruh Halaman.
body {
max-width: 700px; /*(ukuran Lebar tampilan)*/
background: #000000 url(gambar.jpg); /*(Background dengan gambar, jika gambar error maka akan di ganti dengan warna hitam)*/
background-size: 100%; /*(ukuran background)*/
background-position: center; /*(posisi Background)*/
background-repeat: no-repeat; /*(pengulangan gambar "no-repeat=tidak")*/
color: #FFFFFF; /*(warna font)*/
font-family: Arial, Tahoma, sans-serif; /*(jenis font)*/
font-size: small; /*(ukuran font)*/
margin: 0px auto; /*(posisi body "0px auto" ditengah layar apabila layar kurang dari 700px akan menjadi 100%/responsive)*/
}
.menu1 {
color : #75bf00; /*warna text*/
background-color : #030500; /*warna background*/
background-image : url(menu1.gif); /*gambar background(usahakan gambar khusus menu Contoh: GAMBAR)*/
background-repeat : repeat-x; /*gambar berulang kesamping*/
background-position : 50% top; /*ukuran 50% posisi menetap di atas*/
margin-top : 1px; /*jarak lebar area kosong luar border*/
margin-bottom : 1px; /*jarak lebar area kosong luar border*/
padding : 2px; /*jarak lebar area kosong dalam border*/
border : 1px solid #415f00; /*Garis ukuran 1px padat dengan warna hijau lumut*/
}
Di atas itu adalah contoh dari pembuatan css/template/theme untuk sebuah Body(keseluruhan tampilan) dan 1buah untuk bingkai menu seperti di wap saya ini.
untuk sebuah css sebenar nya masih banyak lagi, seperti "link, hover, focus, form, hr, input, p, DMBL (Dan.Masih.Banyak.Lagi)".
Jika kalian ingin menggunakan css secara external maka bukalah notepad/notepad++ kalian lalu copas/buatlah script css, dan save menjadi (style.css), untuk pemanggilan nya kita hanya perlu menuliskan script html sebagai berikut
silahkan di kembangkan sendiri ya.
untuk hari ini cukup sekian saja ^_^.
jika ada yang salah pengetikan, ya ....... gitu deh wkwkwkwwkwk.
Mohon maaf sebesar-besar nya disini tidak menyediakan kolom KOMENTAR bawaan xtgem