Üye Girişi Yapınız     


    E-Posta
    

    Şifreniz
    



Şifremi Unuttum


Ana Sayfa Site Hakkında İletişim Ziyaretçi Defteri Döküman İndir Makale Ekle Haber Ekle

     Css İle bazı form nesnelerini biçimlendirme
     Muhammed Öztürk     14.03.2013     11:40:40

Bu yazıda, html form elemanlarından bazılarının CSS ile biçimlendirilmesini içeren bir uygulama paylaşacağım. Şekilde de görüldüğü gibi bit text, bir buton ve bir select nesnesinin biçimsel özelliklerinin değiştirlmesi yapılmaktadır.



<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Css İle Bazı Form Nesnelerini Biçimlendirme</title>
<style type="text/css">

    .text_kutusu input /*text_kutusu adlı sınıf seçicisindeki text kutusunun ilk halindeki özellikleri*/
        {  border:solid 2px; background:#CCC; }

    .text_kutusu input:hover /*text_kutusu adlı sınıf seçicisindeki text kutusunun mouse ile üzerine gelinceki halindeki hali*/
        { border:dotted 2px; background:red; }

    .nesne button /*nesne adlı sınıf seçicisindeki butonon ilk hali*/
        { background:red; padding:15px; }

    .nesne button /*nesne adlı sınıf seçicisindeki butonun ilk hali*/
        { background:red; padding:15px; }

     .nesne button:active /*nesne adlı sınıf seçicisindeki butonun mouse ile tıklanıldığındaki hali*/
        { background:blue; padding:15px; }

     .menu select /*menu adlı sınıf seçicisindeki açılır menünün görünümü...*/
        { border:solid 2px; background:grey; color:red; }

</style>
</head>

<body>
  <div class="text_kutusu">
       Text Kutusu: <input type="text"  />
  </div>
  <div class="nesne">
      Buton: <button>Tıkla</button>
  </div>
  <div class="menu">
      Açılır Menü: <select><option>Bir</option><option>İki</option><option>Üç</option></select>
  </div>
</body>
</html>

Facebook'ta Paylaş    
Diğer CSS İçerikleri       Tüm Yazılar        Ana Sayfa


  =>Soru Sorun veya Yorum Yazın...

İsim Giriniz :
  

  =>Yapılan Yorumlar...