css part2

Vertikal-Align and background css

1.Vertikal-Align 

lanjut untuk postingan selanjutnya yang membahas tentang text dan warna kali ini saya berbagi tentang pengenalan CSS pada element vertikal-alight.

vertikal align digunakan untuk menentukan posisi vertikal suatu element. berikut adalah contoh penggunaan vertikal  :

-meratakan dasar baris

contoh;

vertikal-align: baseline;

-meratakan bagian tengah element

contoh:

vertikal-align; middle

-menggunakan posisi subscript:

contoh:

vertikal-alight: subscript;

-membuat posisi superscript:

contoh:

 vertikal-alight: super;

-menggunakan Bagian atas elemen:

contoh:

vertikal-alight: text-top;

-meratakan bagian bawah elemen:

 contoh:
 vertikal-alight: text-bottom;

-meratakan bagian atas elemen menurut elemen tertinggi dalam baris:

contoh:

vertikal-alight: top;

- meratakan bagian bawah element menurut bagian elemen tertinggi pada baris:

contoh:

vertikal-align: bottom;

2. background css

       Attribut background digunakan untuk memberikan latar belekang dengan warna ataupun gambar. jika latar belakang berupa warna dapat menggunakan warna dengan yang dikehendaki brouswer ATAU menggunakan warna RGB seperti pada attribut collor

berikut ini adalah beberapa style background :

style	keterangan
background-color	warna background contoh:  background-color : transparant jika ingin menggukan tag warna dari id body misalkan #body{background : #aaaaaa; }
background-image	background diisi dengan Gambar contoh: background-image : none */tidak ada gambar*/ penempatan di dalam postingan contoh: #post {background-image : url (.../image.png) ; }
background-attachment	style tambahan untuk background berupa image dapat ikut di scrool atau tidak contoh: gambar latar dapat digulung background-attachment: scroll; gambar latar tetap: background-attachment: fixed;
background-position	menentukan posisi background (x,y), bisa diisi ukuran ataupun : , top,bottom, left,right,center, middle contoh: background-position : 35%; background-position : top right;

Tapi kita bisa menggunakan semua attribut background agar file CSS kita tidak besar:
seperti template template sekarang dengan format contoh di bawah ini:

disini saya akan bahas contoh untuk background body


#body {background: red url (http:..........header.png) repeat-x top;
            ....
             }


contoh di atas menampilkan gambar dan latar warna jelas ini seperti yang di gunakan pada background template saya yang menjadikan header warna biru image yang mengulang background gambar ke samping (repeat-x)"anda juga bisa mengubah mengulang kebawah (repeat-y) dan background warna sisanya.

atau bila menggunakan background yang besar bisa menggunakan fixed background: red url (http:..........header.png) fixed; */gambar tidak ikut scroll*/


selain body anda bisa menambahkan background pada template anda sesuai ke inginan anda
contoh pada header
/* Header */
#header-wrapper{background:url(http:..........header.png) no-repeat left; 
 width:1000px; 
 height:133px; 
 margin:0 auto; 
 padding:0}

contoh pada posting :

#post-body{background:url(http://joomlathemes.co/demo/templates/jt019_j15/images/main.png) repeat-y top left; 
  margin:0; 
  line-height:24px; 
  padding:15px 25px}

pada bagian heading sidebar

#sidebar h2{

  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglhagJAJuQQNH9YNKNKID1iVItTBDFWg4nRLloO2biVmjulY30U0Xd9U1BB7Dg2iPJqPpUdLD6LjpxNdrbrEzYpE53w8aUMCds6kBGsKvEsiIxiw5WfgIYs-dUAnnIRbmZtb3M1iYb7mB-/s1600/blueside2.png)repeat-x; 

  font-family:'Oswald',Arial,century gothic,verdana,sans-serif; 

  font-size:16px; 

  color:#fff; 

  font-weight:normal; 

  padding:10px 0 10px 20px; 

  margin:0; 

  border-bottom:2px solid #252525}

dan mungkin anda ingin menambahkan kebagian yang anda sukai selamat mencoba :-)

SAya Kira sampai disini Dulu yua .........

selanjutnya saya mau bahas tentang penggunaan CSS untuk ID dan Class 

serta beberapa penggunaan HOVER